atomicuilibrary 0.0.1

package/dist/collection/components/dialog-box/dialog-box.js

@@ -0,0 +1,4314 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+import { FocusTrap } from "../../utils/focus-trap";
+// ─── Global tray registry ────────────────────────────────────────────────────
+// Dock bar: [‹ arrow] [scrollable tab row] [› arrow] [≡ all-tabs menu]
+const DialogTray = new class {
+    _items = [];
+    _outer = null;
+    _row = null;
+    _menuBtn = null;
+    _menuPanel = null;
+    _menuList = null;
+    _menuOpen = false;
+    _originals = new Map();
+    _moving = new Set();
+    _injectStyles() {
+        if (document.getElementById('db-tray-dynamic-styles'))
+            return;
+        const s = document.createElement('style');
+        s.id = 'db-tray-dynamic-styles';
+        s.textContent = `
+      #db-tray-dock { position: fixed; bottom: 0; left: 0; right: 0; height: 52px; z-index: 1000000; pointer-events: none; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; }
+      #db-tray-bar { max-width: 95vw; height: 52px; display: flex; flex-direction: row; align-items: stretch; pointer-events: auto; overflow: hidden; border-radius: 16px 16px 0 0; background: rgba(13, 17, 23, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6); }
+      #db-tray-bar .db-dock-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; flex: 1; min-width: 0; overflow-x: hidden; scroll-behavior: smooth; justify-content: center; }
+      #db-tray-bar .db-dock-row::-webkit-scrollbar { display: none; }
+      .db-dock-arrow { display: flex; align-items: center; justify-content: center; width: 36px; background: transparent; border: none; cursor: pointer; color: #fff; opacity: 0; pointer-events: none; transition: all 0.2s; font-size: 20px; }
+      .db-dock-arrow.visible { opacity: 1; pointer-events: auto; }
+      #db-dock-menu-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; background: rgba(255, 255, 255, 0.05); margin: 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; color: #fff; transition: all 0.2s; min-width: 64px; }
+      #db-dock-menu-btn .db-badge { min-width: 20px; height: 20px; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
+      .ui-tray-tab { min-width: 160px; max-width: 300px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 32px; gap: 12px; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.1); transition: all 0.2s; color: #fff !important; }
+      .ui-tray-tab * { color: #fff !important; }
+      .ui-tray-tab:hover { background: rgba(255,255,255,0.08); }
+      .ui-tray-tab .tab-label { font-size: 13.5px; font-weight: 600; color:red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; margin: 0 4px; }
+      .ui-tray-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: none; background: rgba(255,255,255,0.12); cursor: pointer; }
+      .ui-tray-btn:hover { background: #ef4444; }
+    `;
+        document.head.appendChild(s);
+    }
+    _ensureDock() {
+        if (this._outer)
+            return;
+        this._injectStyles(); // Fail-safe injection
+        const outer = document.createElement('div');
+        outer.id = 'db-tray-dock';
+        // Use JS for critical layout to ensure it doesn't impact page height even if CSS is delayed
+        Object.assign(outer.style, {
+            position: 'fixed',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            zIndex: '1000000',
+            display: 'none',
+            pointerEvents: 'none'
+        });
+        const bar = document.createElement('div');
+        bar.id = 'db-tray-bar';
+        const btnL = document.createElement('button');
+        btnL.className = 'db-dock-arrow db-dock-arrow-left';
+        btnL.textContent = '\u2039'; // ‹
+        const row = document.createElement('div');
+        row.className = 'db-dock-row';
+        const btnR = document.createElement('button');
+        btnR.className = 'db-dock-arrow db-dock-arrow-right';
+        btnR.textContent = '\u203A'; // ›
+        const menuBtn = document.createElement('button');
+        menuBtn.id = 'db-dock-menu-btn';
+        const menuIcon = document.createElement('span');
+        menuIcon.textContent = '\u2630'; // ☰
+        const badge = document.createElement('span');
+        badge.className = 'db-badge';
+        badge.textContent = '0';
+        menuBtn.append(menuIcon, badge);
+        bar.append(btnL, row, btnR, menuBtn);
+        outer.appendChild(bar);
+        document.body.appendChild(outer);
+        const overlay = document.createElement('div');
+        overlay.id = 'db-tray-overlay';
+        const panel = document.createElement('div');
+        panel.id = 'db-tray-menu-panel';
+        // Safety position for panel too
+        Object.assign(panel.style, {
+            position: 'fixed',
+            zIndex: '1000003',
+            display: 'none'
+        });
+        const hdr = document.createElement('div');
+        hdr.id = 'db-tray-menu-hdr';
+        hdr.textContent = 'Minimized Windows';
+        const list = document.createElement('div');
+        list.id = 'db-tray-menu-list';
+        panel.append(hdr, list);
+        document.body.append(overlay, panel);
+        btnL.onclick = () => { row.scrollLeft -= 180; };
+        btnR.onclick = () => { row.scrollLeft += 180; };
+        menuBtn.onclick = () => { this._menuOpen ? this._closeMenu() : this._openMenu(); };
+        overlay.onclick = () => this._closeMenu();
+        const syncArrows = () => {
+            btnL.classList.toggle('visible', row.scrollLeft > 5);
+            btnR.classList.toggle('visible', row.scrollLeft < row.scrollWidth - row.clientWidth - 5);
+        };
+        row.onscroll = syncArrows;
+        if (window.ResizeObserver)
+            new ResizeObserver(syncArrows).observe(row);
+        this._outer = outer;
+        this._row = row;
+        this._menuBtn = menuBtn;
+        this._menuPanel = panel;
+        this._menuList = list;
+    }
+    _openMenu() {
+        if (!this._menuBtn || !this._menuPanel)
+            return;
+        this._menuOpen = true;
+        this._syncMenu();
+        const r = this._menuBtn.getBoundingClientRect();
+        const p = this._menuPanel;
+        p.style.display = 'flex'; // Ensure it's rendered to get dimensions
+        const pr = p.getBoundingClientRect();
+        // Position fixed at bottom-right based on button position
+        p.style.left = `${r.right - pr.width}px`;
+        p.style.top = `${r.top - pr.height - 12}px`;
+        p.classList.add('open');
+        document.getElementById('db-tray-overlay')?.classList.add('open');
+    }
+    _closeMenu() {
+        this._menuOpen = false;
+        this._menuPanel?.classList.remove('open');
+        document.getElementById('db-tray-overlay')?.classList.remove('open');
+    }
+    _syncMenu() {
+        if (!this._menuList || !this._menuBtn)
+            return;
+        const items = this.minimized();
+        const badge = this._menuBtn.querySelector('.db-badge');
+        if (badge)
+            badge.textContent = String(items.length);
+        while (this._menuList.firstChild)
+            this._menuList.removeChild(this._menuList.firstChild);
+        if (!items.length) {
+            const empty = document.createElement('div');
+            empty.style.cssText = 'padding:16px;font-size:11px;color:#666;text-align:center;';
+            empty.textContent = 'No minimized windows';
+            this._menuList.appendChild(empty);
+        }
+        items.forEach(d => {
+            const row = document.createElement('div');
+            row.className = 'db-mi';
+            const dot = document.createElement('span');
+            dot.className = `db-mi-dot ${d.status}`;
+            const label = document.createElement('span');
+            label.className = 'db-mi-label';
+            label.textContent = d.dockLabel || d.dialogTitle || 'Dialog';
+            row.append(dot, label);
+            row.onclick = () => { this.openPeekFor(d); this._closeMenu(); };
+            this._menuList?.appendChild(row);
+        });
+    }
+    openPeekFor(d) {
+        const wasPeek = d._dockPeek;
+        this.minimized().forEach(i => i._dockPeek = false);
+        if (wasPeek) {
+            d.restore(); // If was already peeking, clicking again restores it
+        }
+        else {
+            d._dockPeek = true;
+        }
+        this._syncMenu();
+        requestAnimationFrame(() => d.el.scrollIntoView({ behavior: 'smooth', inline: 'center' }));
+    }
+    register(d) {
+        if (!this._items.includes(d)) {
+            this._items.push(d);
+            this._reflow(); // Update counter when added
+        }
+    }
+    unregister(d) {
+        if (this._moving.has(d))
+            return;
+        this._originals.forEach((orig, item) => {
+            if (item === d && this._row && d.el.parentElement === this._row) {
+                orig.parent.insertBefore(d.el, orig.nextSibling);
+                this._originals.delete(d);
+            }
+        });
+        this._items = this._items.filter(i => i !== d);
+        this._reflow();
+    }
+    minimized() { return this._items.filter(d => d.minimized && d.open); }
+    // Only items that should physically live inside the tray bar row (non-peeked tabs)
+    inTray() { return this.minimized().filter(d => !d._dockPeek); }
+    reflow() { this._reflow(); }
+    get() { return this; }
+    getAll() { return this._items; }
+    getMinimized() { return this.minimized(); }
+    _reflow() {
+        const allMin = this.minimized();
+        const itemsInTray = this.inTray();
+        if (allMin.length > 0)
+            this._ensureDock();
+        const row = this._row;
+        if (!row)
+            return;
+        itemsInTray.forEach(d => {
+            if (d.el.parentElement !== row) {
+                // Only save original parent if it's NOT the tray bar itself
+                const parent = d.el.parentNode;
+                if (parent && parent !== row) {
+                    this._originals.set(d, { parent: parent, nextSibling: d.el.nextSibling });
+                }
+                else if (!this._originals.has(d)) {
+                    this._originals.set(d, { parent: document.body, nextSibling: null });
+                }
+                this._moving.add(d);
+                row.appendChild(d.el);
+                this._moving.delete(d);
+            }
+        });
+        this._originals.forEach((orig, d) => {
+            const shouldBeInTray = itemsInTray.includes(d);
+            if (!shouldBeInTray && d.el.parentElement === row) {
+                // Safe restoration: check if nextSibling is still valid/attached
+                if (orig.nextSibling && orig.nextSibling.parentNode === orig.parent) {
+                    orig.parent.insertBefore(d.el, orig.nextSibling);
+                }
+                else {
+                    // Fallback to append if sibling is gone or parent is inconsistent
+                    orig.parent.appendChild(d.el);
+                }
+                this._originals.delete(d);
+            }
+        });
+        if (this._outer)
+            this._outer.style.display = allMin.length > 0 ? 'flex' : 'none';
+        this._syncMenu();
+    }
+}();
+/**
+ * Enterprise-grade Dialog (Modal) component built for scalability and accessibility.
+ * Supports multiple types (Modal, Drawer, Fullscreen, Alert, Confirm) and framework-agnostic usage.
+ *
+ * @slot header - Replaces the default header content
+ * @slot title - Replaces the title in the header
+ * @slot subtitle - Replaces the subtitle in the header
+ * @slot body - Main content of the dialog
+ * @slot footer - Replaces the default footer content
+ * @slot actions - Custom actions in the bottom-right of the footer
+ *
+ * @part backdrop - The backdrop overlay
+ * @part panel - The main dialog container/panel
+ * @part header - The header section
+ * @part body - The content section
+ * @part footer - The footer section
+ * @part close-btn - The header close button
+ */
+export class DialogBox {
+    _defaultDialogTitle = '';
+    _defaultOkText = '';
+    el;
+    _restoredLayout = undefined;
+    _isShaking = false;
+    _sessionTimedOut = false;
+    /**
+     * Whether the dialog is open
+     */
+    open = false;
+    /**
+     * Dialog title
+     */
+    dialogTitle = '';
+    /**
+     * Dialog subtitle
+     */
+    subtitle = '';
+    /**
+     * Whether the dialog is maximized
+     */
+    maximized = false;
+    /**
+     * Whether the dialog is minimized
+     */
+    minimized = false;
+    /**
+     * Dialog width. Explicit width takes precedence over size if size is 'custom'.
+     */
+    width = '500px';
+    /**
+     * Dialog height
+     */
+    height = 'auto';
+    /**
+     * Path to header image
+     */
+    headerImage;
+    /**
+     * Icon name to show in the header
+     */
+    icon = '';
+    /**
+     * User avatar URL to show in the header
+     */
+    avatar = '';
+    /**
+     * Whether to show maximize button
+     */
+    showMaximize = false;
+    /**
+     * Whether to show minimize button
+     */
+    showMinimize = false;
+    /**
+     * Whether to show close button
+     */
+    showClose = true;
+    /**
+     * Whether to show menu button (Action Menu)
+     */
+    showMenu = false;
+    /**
+     * Icon for the menu trigger button in the header.
+     * Defaults to 'more-horizontal' (⋯). Use 'settings' for a gear, 'sliders-horizontal' for filters, etc.
+     */
+    menuIcon = 'more-horizontal';
+    /**
+     * Tooltip text for the menu trigger button.
+     */
+    menuTitle = 'Menu';
+    /**
+     * Whether to show the header
+     */
+    showHeader = true;
+    /**
+     * Whether to show the footer
+     */
+    showFooter = true;
+    /**
+     * Dialog variant style
+     */
+    variant = 'outlined';
+    /**
+     * Dialog status/type
+     */
+    status = 'default';
+    /**
+     * Backdrop Behavior. 'default' (closes on click), 'static' (no close), 'none' (no backdrop).
+     */
+    backdrop = 'default';
+    /**
+     * Scroll behavior. 'paper' (scroll inside content), 'body' (scroll whole dialog).
+     */
+    scrollArea = 'paper';
+    /**
+     * Dialog functional type.
+     * - 'modal': Standard centered modal.
+     * - 'drawer': Slides from an edge (determined by position).
+     * - 'fullscreen': Occupies entire screen.
+     * - 'alert': Emphasis on the message, simple actions.
+     * - 'confirm': Standard confirmation with OK/Cancel flow.
+     * - 'prompt': Modal with an input field for user entry.
+     * - 'messagebox': Simplified modal for informational messages.
+     * - (Legacy): 'default' | 'delete' | 'upload' | 'session' | 'terms'
+     */
+    type = 'modal';
+    /**
+     * Label for the input field (only for 'prompt' type).
+     */
+    promptLabel = '';
+    /**
+     * Placeholder text for the prompt input.
+     */
+    promptPlaceholder = '';
+    /**
+     * Input type for the prompt (text, password, etc.).
+     */
+    promptType = 'text';
+    /**
+     * Initial value for the prompt input.
+     */
+    promptInitialValue = '';
+    /**
+     * Session timeout duration in seconds (only for 'session' type).
+     */
+    sessionTimeout = 60;
+    /**
+     * Whether to automatically submit 'session' dialog on timeout.
+     * If false, it will just close (cancel).
+     */
+    autoSubmitOnTimeout = false;
+    /**
+     * Position of the dialog.
+     * For 'drawer' type, these determine the slide direction.
+     */
+    position = 'center';
+    /**
+     * Predefined horizontal sizing.
+     */
+    size = 'md';
+    /**
+     * Visual density mode.
+     */
+    density = 'cozy';
+    /**
+     * Whether clicking the backdrop closes the dialog.
+     */
+    closeOnBackdrop = true;
+    /**
+     * Whether the ESC key closes the dialog.
+     */
+    closeOnEsc = true;
+    /**
+     * Draggable dialog (only for 'modal' type).
+     */
+    isDraggable = false;
+    /**
+     * Resizable dialog.
+     */
+    resizable = false;
+    /**
+     * Stepper steps for Wizard mode. Either an array of strings or a number.
+     */
+    steps = 0;
+    /**
+     * Current step in Wizard mode (1-indexed).
+     */
+    currentStep = 1;
+    _currentStep = 1;
+    currentStepChanged(newValue) {
+        this._currentStep = newValue;
+    }
+    /**
+     * Whether to blur the entire webpage behind this dialog.
+     */
+    globalBlur = false;
+    /**
+     * Dialog layout mode.
+     * 'default': Standard dialog
+     * 'side-nav': Includes a sidebar for master/detail views
+     */
+    layout = 'default';
+    /**
+     * Whether to show a toolbar below the header
+     */
+    showToolbar = false;
+    /**
+     * Whether to show a status bar above the footer
+     */
+    showStatusBar = false;
+    /**
+     * Snap to screen edges when dragging
+     */
+    snapToEdges = true;
+    /**
+     * Skeleton loading state. Transforms the dialog UI into placeholders.
+     */
+    loading = false;
+    /**
+     * Enable OS-level shortcuts (Ctrl+Enter to OK, Esc to Close).
+     */
+    shortcuts = true;
+    /**
+     * Whether the dialog contents are "dirty" (unsaved changes).
+     * Triggers the confirmation prompt on close.
+     */
+    dirty = false;
+    /**
+     * Animation duration in ms.
+     */
+    animationDuration = 250;
+    /**
+     * CSS selector for the element to focus initially when opened.
+     */
+    initialFocus;
+    /**
+     * Show a "pop-out" button to open content in a separate browser window.
+     */
+    allowPopOut = false;
+    /**
+     * Whether the dialog is starred/favorited
+     */
+    starred = false;
+    /**
+     * Label for the dock when minimized.
+     */
+    dockLabel = '';
+    /**
+     * Confirmation text for checkbox (e.g. "I accept the Terms & Conditions").
+     * If provided, the OK button will be disabled until checked.
+     */
+    confirmationText = '';
+    promptValue = '';
+    isConfirmed = false;
+    _sessionTimeLeft = 0;
+    _termsScrolled = false;
+    /**
+     * Header size.
+     */
+    headerSize = 'md';
+    /**
+     * Header background color override.
+     */
+    headerColor;
+    /**
+     * Whether the dialog should have a more pronounced border.
+     */
+    bordered = false;
+    /**
+     * Text for the OK button. If provided, renders an OK button in the footer.
+     */
+    okText;
+    /**
+     * Preset button set for confirmation dialogs.
+     * - `'ok-cancel'`      → OK / Cancel
+     * - `'yes-no'`         → Yes / No
+     * - `'yes-no-cancel'`  → Yes / No / Cancel  (No maps to resetText slot, left-aligned)
+     * - `'save-discard'`   → Save / Discard
+     * - `'retry-cancel'`   → Retry / Cancel
+     * Explicit `okText` / `cancelText` / `resetText` props always override the preset labels.
+     */
+    buttonSet = 'custom';
+    /**
+     * Text for the Cancel button. If provided, renders a Cancel button in the footer.
+     */
+    /**
+     * Text for the Cancel button.
+     */
+    cancelText;
+    /**
+     * Whether to portal the dialog to body
+     */
+    portal = false;
+    /**
+     * Loading state for the OK button.
+     */
+    okLoading = false;
+    /**
+     * Disable the OK button.
+     */
+    okDisabled = false;
+    /**
+     * Text for the Reset button (left-aligned).
+     */
+    resetText;
+    /**
+     * Disable the Cancel button.
+     */
+    cancelDisabled = false;
+    // ── Button-set resolution ─────────────────────────────────────────────────
+    // Returns the effective {okLabel, cancelLabel, resetLabel} for the footer,
+    // merging the `buttonSet` preset with any explicit text prop overrides.
+    _resolveButtons() {
+        const presets = {
+            'ok-cancel': { ok: 'OK', cancel: 'Cancel', reset: '' },
+            'yes-no': { ok: 'Yes', cancel: 'No', reset: '' },
+            'yes-no-cancel': { ok: 'Yes', cancel: 'Cancel', reset: 'No' },
+            'save-discard': { ok: 'Save', cancel: 'Discard', reset: '' },
+            'retry-cancel': { ok: 'Retry', cancel: 'Cancel', reset: '' },
+            'custom': { ok: '', cancel: '', reset: '' },
+        };
+        const p = presets[this.buttonSet] ?? presets['custom'];
+        return {
+            okLabel: this.okText ?? p.ok,
+            cancelLabel: this.cancelText ?? p.cancel,
+            resetLabel: this.resetText ?? p.reset,
+        };
+    }
+    /**
+     * Fullscreen on mobile devices automatically.
+     */
+    fullscreenOnMobile = true;
+    /**
+     * Keep content mounted when closed.
+     */
+    keepMounted = false;
+    /**
+     * Custom animation name.
+     */
+    animation = 'scale';
+    /**
+     * Return focus to trigger element on close.
+     */
+    returnFocus = true;
+    /**
+     * Z-Index for the dialog. Useful for nested dialogs.
+     */
+    zIndex = 10000;
+    /**
+     * Minimum Width
+     */
+    minWidth;
+    /**
+     * Minimum Height
+     */
+    minHeight;
+    /**
+     * Maximum Width
+     */
+    maxWidth;
+    /**
+     * Maximum Height
+     */
+    maxHeight;
+    /**
+     * Remember dialog position and size between sessions (requires id).
+     */
+    remember = false;
+    /**
+     * Allow swipe-to-close gesture on mobile devices.
+     */
+    swipeToClose = false;
+    /**
+     * Fire confetti when the dialog opens.
+     */
+    confetti = false;
+    /**
+     * Enable glassmorphism effect (blur) on backdrop.
+     */
+    glass = false;
+    /**
+     * Background color of the dialog panel
+     */
+    backgroundColor = 'white';
+    /**
+     * Visual progress bar percentage (0-100).
+     */
+    progress = -1;
+    /**
+     * Whether the dialog is nested (inside another dialog).
+     * Triggers visual differentiation (smer size, deeper shadow).
+     */
+    isNested = false;
+    /**
+     * Whether the primary action is sensitive (requires double-confirmation).
+     */
+    sensitive = false;
+    /**
+     * Auto-close timeout in milliseconds.
+     */
+    autoClose = 0;
+    /**
+     * Alias for autoClose.
+     */
+    timeout = 0;
+    /**
+     * Enable subtle sound feedback for interactions.
+     */
+    sound = false;
+    /**
+     * Enable haptic feedback for mobile devices.
+     */
+    haptics = false;
+    /**
+     * Required permissions to view this dialog.
+     */
+    permissions = [];
+    /**
+     * Enable debug mode (shows layout boundaries and metadata).
+     */
+    debug = false;
+    /**
+     * Optional callback function to execute before closing.
+     * Return false or a Promise resolving to false to prevent closing.
+     */
+    beforeClose;
+    /**
+     * Library to use for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * Semantic tag for the title (h1-h6)
+     */
+    titleTag = 'h3';
+    /**
+     * Position of the icon/avatar relative to the title
+     */
+    iconPosition = 'left';
+    /**
+     * Event emitted when dialog is closed
+     */
+    dialogClosed;
+    /**
+     * Event emitted for undo action
+     */
+    undo;
+    /**
+     * Event emitted for redo action
+     */
+    redo;
+    /**
+     * Event emitted when the dialog is opened.
+     */
+    dialogOpened;
+    /**
+     * Event emitted to request a toast notification.
+     */
+    toastRequest;
+    /**
+     * Event emitted for security audit logging.
+     */
+    auditLog;
+    /**
+     * Emitted before the dialog opens. Can be cancelled via event.preventDefault().
+     */
+    beforeOpen;
+    /**
+     * Emitted when opening animation starts.
+     */
+    openStarted;
+    /**
+     * Emitted when opening animation finishes.
+     */
+    afterOpen;
+    /**
+     * Emitted before the dialog closes. Can be cancelled by event.preventDefault().
+     */
+    beforeCloseEvent;
+    /**
+     * Emitted when closing animation starts.
+     */
+    closeStarted;
+    /**
+     * Emitted when closing animation finishes.
+     */
+    afterClose;
+    /**
+     * Menu items for the built-in context menu.
+     * Can be a JSON string or an array of objects.
+     * If provided, clicking the menu button automatically opens a context menu.
+     */
+    menuItems = [];
+    /**
+     * Event emitted when a menu item is clicked (if using built-in menuItems)
+     */
+    menuAction;
+    /**
+     * Event emitted when OK button is clicked
+     */
+    ok;
+    /**
+     * Event emitted when Cancel button is clicked
+     */
+    cancel;
+    /**
+     * Event emitted when Reset button is clicked
+     */
+    dialogReset;
+    /**
+     * Event emitted when dialog is maximized
+     */
+    dialogMaximized;
+    /**
+     * Event emitted when dialog is minimized
+     */
+    dialogMinimized;
+    /**
+     * Event emitted when menu button is clicked
+     */
+    menu;
+    dragStartX = 0;
+    dragStartY = 0;
+    isDragging = false;
+    dragAnchored = false;
+    isClosing = false;
+    snappedEdge = 'none';
+    subOverlay = null;
+    minimizedToDock = false;
+    _dockPeek = false;
+    _autoCloseTimer = null;
+    resultResolver;
+    resultRejecter;
+    returnValue = null;
+    // Previously saved position before minimization
+    lastPosition = null;
+    // Resize state
+    isResizing = false;
+    resizeStartX = 0;
+    resizeStartY = 0;
+    initialWidth = 0;
+    initialHeight = 0;
+    initialLeft = 0;
+    initialTop = 0;
+    dialogElement;
+    backdropElement;
+    // Gmail Style Organizer for minimized tabs
+    minimizedChanged(newValue) {
+        if (newValue) {
+            this._dockPeek = false;
+            // Saving current position state
+            if (this.dialogElement) {
+                this.lastPosition = {
+                    left: this.dialogElement.style.left,
+                    top: this.dialogElement.style.top,
+                    transform: this.dialogElement.style.transform,
+                    position: this.dialogElement.style.position,
+                    margin: this.dialogElement.style.margin
+                };
+            }
+            this.unlockScroll();
+            if (this.focusTrap)
+                this.focusTrap.deactivate();
+            DialogTray.reflow();
+            this.dialogMinimized.emit({ minimized: true });
+        }
+        else {
+            this._dockPeek = false;
+            DialogTray.reflow();
+            this.dialogMinimized.emit({ minimized: false });
+            requestAnimationFrame(() => {
+                // Restoring position (deferred until DOM is rendered and ref is ready)
+                if (this.lastPosition && this.dialogElement) {
+                    Object.assign(this.dialogElement.style, this.lastPosition);
+                }
+                else if (this.remember && this.el.id) {
+                    this.loadLayout();
+                }
+                this.initFocusTrap();
+            });
+        }
+    }
+    onDockPeekChange(val) {
+        if (val) {
+            document.addEventListener('pointerdown', this._onDocPeekOutside, true);
+        }
+        else {
+            document.removeEventListener('pointerdown', this._onDocPeekOutside, true);
+        }
+        // Sync the tray menu badge etc
+        DialogTray.reflow();
+    }
+    _onDocPeekOutside = (e) => {
+        if (!e.composedPath().includes(this.el)) {
+            this._dockPeek = false;
+        }
+    };
+    focusTrap;
+    ignoreBackdropClick = false;
+    componentWillLoad() {
+        this._currentStep = this.currentStep;
+        // Detect nesting
+        this.isNested = !!this.el.parentElement?.closest('ui-dialog-box');
+        // Presets: set local defaults, do not mutate props
+        this._defaultDialogTitle = '';
+        this._defaultOkText = '';
+        if (this.type === 'delete') {
+            this._defaultDialogTitle = 'Confirm Deletion';
+            this._defaultOkText = 'Delete';
+            this.headerColor = '#fee2e2'; // Light red background (for header component)
+            this.bordered = true;
+        }
+        else if (this.type === 'session') {
+            this._defaultDialogTitle = 'Session Timeout';
+            this._defaultOkText = 'Extend Session';
+        }
+        else if (this.type === 'terms') {
+            this._defaultDialogTitle = 'Terms & Conditions';
+            this._defaultOkText = 'Accept & Continue';
+            this.scrollArea = 'paper';
+            // Do NOT mutate this.size here
+        }
+        // Automatic Z-Index for Nested Dialogs
+        const openDialogs = DialogTray.get().getAll().filter(w => w.open).length;
+        if (this.zIndex === 10000) { // If default
+            this.zIndex = 10000 + (openDialogs * 10);
+        }
+        // Check Widget drag compatibility
+        if (this.el.getAttribute('draggable') === 'true' && !this.isDraggable) {
+            this.isDraggable = true;
+        }
+        // Restore layout if needed
+        if (this.remember && this.el.id) {
+            this.loadLayout();
+        }
+    }
+    connectedCallback() {
+        // Fires on initial connect AND after a tray reflow move.
+        DialogTray.register(this);
+    }
+    disconnectedCallback() {
+        DialogTray.unregister(this);
+    }
+    componentDidLoad() {
+        // register() already called by connectedCallback above;
+        // just handle open/layout init here.
+        if (this.open) {
+            this.lockScroll();
+            this.initFocusTrap();
+            if (this.portal) {
+                document.body.appendChild(this.el);
+            }
+        }
+    }
+    saveLayout() {
+        if (!this.el.id || !this.dialogElement)
+            return;
+        const rect = this.dialogElement.getBoundingClientRect();
+        const state = {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            maximized: this.maximized
+        };
+        this._restoredLayout = state;
+        localStorage.setItem(`ui-dialog-layout-${this.el.id}`, JSON.stringify(state));
+    }
+    loadLayout() {
+        if (!this.el.id)
+            return;
+        const saved = localStorage.getItem(`ui-dialog-layout-${this.el.id}`);
+        if (saved) {
+            try {
+                const state = JSON.parse(saved);
+                if (state.maximized) {
+                    this.maximized = true;
+                }
+                else {
+                    this._restoredLayout = state;
+                    if (state.width)
+                        this.width = `${state.width}px`;
+                    if (state.height)
+                        this.height = `${state.height}px`;
+                }
+            }
+            catch (e) { /* ignore */ }
+        }
+    }
+    async openChanged(newValue) {
+        if (newValue) {
+            if (typeof this.beforeOpen?.emit === 'function') {
+                const { defaultPrevented } = this.beforeOpen.emit();
+                if (defaultPrevented) {
+                    this.open = false;
+                    return;
+                }
+            }
+            this.isClosing = false;
+            this.openStarted.emit();
+            // Always rise above all currently open dialogs
+            this.handleDialogClick();
+            if (this.remember && this.el.id) {
+                this.loadLayout();
+            }
+            this.lockScroll();
+            // Elite/Security Hooks
+            if (this.permissions && this.permissions.length > 0) {
+                this.auditLog.emit({ action: 'permission_check', timestamp: Date.now(), metadata: { required: this.permissions } });
+            }
+            if (this.type === 'prompt') {
+                this.promptValue = this.promptInitialValue;
+            }
+            this.dialogOpened.emit();
+            this.auditLog.emit({ action: 'dialog_open', timestamp: Date.now() });
+            const delay = this.autoClose || this.timeout;
+            if (delay > 0) {
+                if (this._autoCloseTimer)
+                    clearTimeout(this._autoCloseTimer);
+                this._autoCloseTimer = setTimeout(() => this.hide('timeout'), delay);
+            }
+            if (this.sound) {
+                // Accessibility/UX Audio Hook
+                this.auditLog.emit({ action: 'sound_feedback', timestamp: Date.now() });
+            }
+            // Initialize/Activate Focus Trap
+            if (this.type === 'session') {
+                this.startSessionTimer();
+            }
+            if (this.type === 'terms') {
+                this._termsScrolled = false;
+            }
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    if (!this.minimized) {
+                        this.initFocusTrap();
+                        this.autoFocusFirstElement();
+                    }
+                    if (this.globalBlur)
+                        this.updateBodyBlur();
+                    if (this.confetti)
+                        this.triggerConfetti();
+                    this.afterOpen.emit();
+                }, 50);
+            });
+        }
+        else {
+            if (!this.isClosing) {
+                await this.hide('programmatic');
+            }
+        }
+        DialogTray.reflow();
+    }
+    updateBodyBlur() {
+        if (this.globalBlur && this.open) {
+            document.body.classList.add('dialog-blur-active');
+        }
+        else {
+            document.body.classList.remove('dialog-blur-active');
+        }
+    }
+    initFocusTrap() {
+        if (!this.dialogElement)
+            return;
+        if (!this.focusTrap) {
+            this.focusTrap = new FocusTrap(this.dialogElement, {
+                returnFocus: this.returnFocus,
+                escapeDeactivates: false, // We handle Escape manually
+                clickOutsideDeactivates: false
+            });
+        }
+        this.focusTrap.activate();
+    }
+    autoFocusFirstElement() {
+        if (!this.dialogElement)
+            return;
+        // 1. Check explicit initialFocus selector
+        if (this.initialFocus) {
+            const el = this.dialogElement.querySelector(this.initialFocus);
+            if (el) {
+                el.focus();
+                return;
+            }
+        }
+        // 2. Look for autofocus attribute first, then common inputs
+        const el = this.dialogElement.querySelector('[autofocus]') ||
+            this.dialogElement.querySelector('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), .ui-dialog-btn-ok');
+        if (el)
+            el.focus();
+    }
+    lockScroll() {
+        if (this.scrollArea !== 'body') {
+            document.body.style.overflow = 'hidden';
+        }
+    }
+    unlockScroll() {
+        document.body.style.overflow = '';
+    }
+    /**
+     * Open the dialog
+     */
+    /**
+     * Open the dialog and return a promise that resolves to true when OK is clicked, false on Cancel/Close.
+     */
+    async openDialog() {
+        this.open = true;
+        return new Promise((resolve) => {
+            this.resultResolver = (val) => resolve(!!val);
+        });
+    }
+    /**
+     * Show dialog and return a promise that resolves with data when closed via OK.
+     * Standardizes the return value as { data: any, canceled: boolean }.
+     */
+    async showWithResult() {
+        this.returnValue = null;
+        this.open = true;
+        return new Promise((resolve) => {
+            // Use resultResolver as a way to send the final object back
+            this.resultResolver = (data) => resolve({ data, canceled: false });
+            this.resultRejecter = () => resolve({ data: null, canceled: true });
+        });
+    }
+    /**
+     * Set the value to be returned when showWithResult resolves.
+     */
+    async setReturnValue(value) {
+        this.returnValue = value;
+    }
+    async show() {
+        this.returnValue = null;
+        this.open = true;
+    }
+    /**
+     * Close the dialog
+     */
+    async hide(source = 'programmatic') {
+        if (this.resultResolver || this.resultRejecter) {
+            if (this.resultRejecter)
+                this.resultRejecter('Closed');
+            this.resultResolver = undefined;
+            this.resultRejecter = undefined;
+        }
+        if (this.dirty && !this.subOverlay?.visible) {
+            this.showConfirmation("Unsaved Changes", "You have unsaved changes. Are you sure you want to close?", () => { this.dirty = false; this.hide(source); });
+            return;
+        }
+        const { defaultPrevented } = this.beforeCloseEvent.emit({ source });
+        if (defaultPrevented)
+            return;
+        if (this.beforeClose) {
+            const shouldClose = await this.beforeClose();
+            if (shouldClose === false)
+                return;
+        }
+        this.isClosing = true;
+        this.closeStarted.emit();
+        this.stopSessionTimer();
+        if (this.focusTrap)
+            this.focusTrap.deactivate();
+        setTimeout(() => {
+            this.open = false;
+            this.isClosing = false;
+            this.unlockScroll();
+            this.updateBodyBlur(); // remove blur
+            this.dialogClosed.emit();
+            if (this.el.isConnected) {
+                this.afterClose.emit();
+            }
+        }, this.animationDuration);
+    }
+    /**
+     * Maximize the dialog
+     */
+    async maximize() {
+        this.maximized = !this.maximized;
+        if (this.maximized) {
+            this.minimized = false;
+        }
+        if (this.remember)
+            this.saveLayout();
+        this.dialogMaximized.emit({ maximized: this.maximized });
+    }
+    /**
+     * Show an internal sub-overlay prompt (e.g., for diskard changes).
+     */
+    async showConfirmation(title, message, onConfirm) {
+        this.subOverlay = { visible: true, title, message, onConfirm };
+    }
+    /**
+     * Cascade all open dialogs
+     */
+    static async cascade() {
+        const wins = DialogTray.get().getAll().filter(w => w.open && !w.minimized);
+        wins.forEach((win, i) => {
+            win.dialogElement.style.left = `${50 + (i * 30)}px`;
+            win.dialogElement.style.top = `${50 + (i * 30)}px`;
+            win.dialogElement.style.margin = '0';
+            win.dialogElement.style.position = 'fixed';
+            if (win.remember)
+                win.saveLayout();
+        });
+    }
+    /**
+     * Tile all open dialogs
+     */
+    static async tile() {
+        const wins = DialogTray.get().getAll().filter(w => w.open && !w.minimized);
+        if (wins.length === 0)
+            return;
+        const cols = Math.ceil(Math.sqrt(wins.length));
+        const rows = Math.ceil(wins.length / cols);
+        const winW = window.innerWidth / cols;
+        const winH = window.innerHeight / rows;
+        wins.forEach((win, i) => {
+            const r = Math.floor(i / cols);
+            const c = i % cols;
+            win.dialogElement.style.left = `${c * winW}px`;
+            win.dialogElement.style.top = `${r * winH}px`;
+            win.dialogElement.style.width = `${winW}px`;
+            win.dialogElement.style.height = `${winH}px`;
+            win.dialogElement.style.margin = '0';
+            win.dialogElement.style.position = 'fixed';
+            if (win.remember)
+                win.saveLayout();
+        });
+    }
+    /**
+     * Detach the dialog content to a separate browser window
+     */
+    async popOut() {
+        const popup = window.open('', '_blank', 'width=600,height=400');
+        if (popup) {
+            popup.document.title = this.dialogTitle || 'DreamUI Detached Window';
+            popup.document.body.innerHTML = sanitizeHTML(this.el.innerHTML);
+            // Copy styles
+            document.querySelectorAll('style, link[rel="stylesheet"]').forEach(s => {
+                popup.document.head.appendChild(s.cloneNode(true));
+            });
+            this.hide();
+        }
+    }
+    /**
+     * Minimize the dialog
+     */
+    async minimize() {
+        this.minimized = !this.minimized;
+        if (this.minimized) {
+            this._dockPeek = false;
+            this.minimizedToDock = true;
+        }
+        else {
+            this.restore();
+        }
+        this.dialogMinimized.emit({ minimized: this.minimized });
+    }
+    /**
+     * Restore the dialog from minimized or maximized state
+     */
+    async restore() {
+        this.minimized = false;
+        this.maximized = false;
+        this._dockPeek = false;
+        this.minimizedToDock = false;
+        if (this.remember) {
+            setTimeout(() => this.loadLayout(), 50);
+        }
+        this.dialogMinimized.emit({ minimized: false });
+        this.dialogMaximized.emit({ maximized: false });
+        DialogTray.reflow();
+    }
+    handleMenu = (e) => {
+        // If we have built-in menu items, handle opening the context menu
+        // Ensure we parse if it's a string looking like an array
+        let items = this.menuItems;
+        if (typeof items === 'string') {
+            try {
+                items = JSON.parse(items);
+            }
+            catch (ex) { /* ignore */ }
+        }
+        if (items && Array.isArray(items) && items.length > 0) {
+            e.stopPropagation();
+            // Pass parsed items if possible, or reliance on original prop
+            this.openContextMenu(e);
+            return;
+        }
+        this.menu.emit(e.detail);
+    };
+    openContextMenu(e, explicitItems) {
+        let menu = document.getElementById(`ctx-menu-${this.el.id}`);
+        if (!menu) {
+            menu = document.createElement('ui-context-menu');
+            menu.id = `ctx-menu-${this.el.id}`;
+            menu.style.zIndex = (this.zIndex + 10).toString();
+            document.body.appendChild(menu);
+            menu.addEventListener('menuItemClick', (ev) => {
+                const detail = ev.detail;
+                this.menuAction.emit(detail);
+                // Also emit standard menu event with action details for convenience
+                this.menu.emit(detail);
+                // Handle specialized built-in actions if we want (like 'close', 'minimize')
+                if (detail && detail.item && detail.item.id) {
+                    if (detail.item.id === 'close')
+                        this.hide();
+                    if (detail.item.id === 'minimize')
+                        this.minimize();
+                    if (detail.item.id === 'maximize')
+                        this.maximize();
+                }
+            });
+        }
+        // Update items
+        // Parse again to be safe or use what we know
+        const itemsVal = explicitItems ? JSON.stringify(explicitItems) : (typeof this.menuItems === 'string' ? this.menuItems : JSON.stringify(this.menuItems));
+        menu.items = itemsVal;
+        // Position at trigger
+        let rect;
+        if (e.detail && e.detail.trigger) {
+            rect = e.detail.trigger.getBoundingClientRect();
+        }
+        else if (e.detail && e.detail.originalEvent && e.detail.originalEvent.target) {
+            rect = e.detail.originalEvent.target.getBoundingClientRect();
+        }
+        else {
+            // Fallback to searching for the menu button
+            const header = this.el.shadowRoot?.querySelector('ui-dialog-header');
+            const btn = header?.shadowRoot?.querySelector('.dialog-btn-menu')
+                || header?.querySelector('.dialog-btn-menu');
+            rect = btn ? btn.getBoundingClientRect() : this.dialogElement.getBoundingClientRect();
+        }
+        // Slight offset
+        if (rect) {
+            menu.openAt({ x: rect.left, y: rect.bottom + 5 });
+        }
+    }
+    collectFormValues() {
+        const result = {};
+        const processedNames = new Set();
+        /**
+         * Recursively scan elements for named inputs/selects/textareas.
+         * This piercings into slots by looking at the Host element's Light DOM children.
+         */
+        const scan = (root) => {
+            if (!root || typeof root.tagName !== 'string')
+                return;
+            const tagName = root.tagName.toUpperCase();
+            const el = root;
+            if (el.name && (tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA')) {
+                const input = root;
+                const type = (input.type || '').toLowerCase();
+                if (type === 'checkbox') {
+                    if (!result[el.name])
+                        result[el.name] = [];
+                    if (input.checked)
+                        result[el.name].push(input.value);
+                }
+                else if (type === 'radio') {
+                    if (input.checked)
+                        result[el.name] = input.value;
+                }
+                else if (type === 'submit' || type === 'button' || type === 'reset') {
+                    // Ignore buttons
+                }
+                else {
+                    result[el.name] = el.value;
+                }
+                processedNames.add(el.name);
+            }
+            // Recurse light-DOM children
+            if (root.children) {
+                for (const child of Array.from(root.children)) {
+                    scan(child);
+                }
+            }
+        };
+        // Begin scan from the host element (captures all Light DOM descendants in slots)
+        scan(this.el);
+        // If we found nothing in Light DOM, check Shadow DOM (for built-in prompts)
+        if (processedNames.size === 0 && this.el.shadowRoot) {
+            scan(this.el.shadowRoot);
+        }
+        return processedNames.size > 0 ? result : null;
+    }
+    _sessionInterval;
+    startSessionTimer() {
+        this._sessionTimeLeft = this.sessionTimeout;
+        clearInterval(this._sessionInterval);
+        this._sessionInterval = setInterval(() => {
+            this._sessionTimeLeft--;
+            if (this._sessionTimeLeft <= 0) {
+                clearInterval(this._sessionInterval);
+                this._sessionTimedOut = true;
+                this.dialogTitle = "Session Expired";
+                this.status = "error";
+                // Do NOT auto-close if we want to show the logout message
+                if (this.autoSubmitOnTimeout)
+                    this.handleOk();
+            }
+        }, 1000);
+    }
+    stopSessionTimer() {
+        clearInterval(this._sessionInterval);
+    }
+    handleTermsScroll = (e) => {
+        if (this.type !== 'terms' || this._termsScrolled)
+            return;
+        const el = e.target;
+        if (el.scrollHeight - el.scrollTop <= el.clientHeight + 20) {
+            this._termsScrolled = true;
+        }
+    };
+    handleOk = () => {
+        if (this.sensitive && !this.subOverlay?.visible) {
+            this.showConfirmation("Sensitive Action", "This action has security implications. Are you sure you want to proceed?", () => { this.sensitive = false; this.handleOk(); });
+            return;
+        }
+        if (this.haptics && window.navigator.vibrate) {
+            window.navigator.vibrate(50);
+        }
+        if (this.resultResolver) {
+            // Auto-collect form values when no explicit returnValue was set
+            if (this.returnValue === null) {
+                this.returnValue = this.collectFormValues();
+            }
+            this.ok.emit(this.returnValue);
+            // Pass the collected data to the specific resolver format
+            this.resultResolver(this.returnValue);
+            this.resultResolver = undefined;
+            this.resultRejecter = undefined;
+        }
+        else {
+            this.ok.emit(this.returnValue);
+        }
+        this.hide();
+    };
+    /**
+     * Programmatically submit the dialog (resolves the promise).
+     * Optional value overrides auto-collection.
+     */
+    async submit(value) {
+        if (value !== undefined) {
+            this.returnValue = value;
+        }
+        this.handleOk();
+    }
+    /**
+     * Programmatically cancel the dialog (rejects the promise).
+     */
+    async cancelDialog() {
+        this.handleCancel();
+    }
+    handleCancel = () => {
+        if (this.resultRejecter) {
+            this.resultRejecter(); // Triggers the resolver with {canceled: true} logic inside showWithResult
+            this.resultRejecter = undefined;
+            this.resultResolver = undefined;
+        }
+        this.cancel.emit();
+        this.hide();
+    };
+    handleReset = () => {
+        this.auditLog.emit({ action: 'reset_clicked', timestamp: Date.now() });
+        this.dialogReset.emit();
+    };
+    handleGlobalShortcuts(e) {
+        if (!this.open || !this.shortcuts)
+            return;
+        // Ctrl+Enter = OK (Global)
+        if (e.ctrlKey && e.key === 'Enter' && this.okText) {
+            this.handleOk();
+            return;
+        }
+        // Enter in Input = OK (Standard Form behavior)
+        if (e.key === 'Enter' && this.okText) {
+            const target = e.target;
+            if (['INPUT', 'SELECT'].includes(target.tagName) && !target.classList.contains('no-submit')) {
+                this.handleOk();
+            }
+        }
+    }
+    handleBackdropClick = (e) => {
+        if (this.ignoreBackdropClick)
+            return;
+        if (this.backdrop === 'default' && e.target === this.backdropElement) {
+            this.hide();
+        }
+        else if (this.backdrop === 'static' && e.target === this.backdropElement) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._isShaking = true;
+            setTimeout(() => {
+                this._isShaking = false;
+            }, 400); // Match SCSS duration (0.4s)
+        }
+    };
+    handleKeyDown(e) {
+        // If minimized, don't trap focus or handle escape close immediately
+        if (this.minimized)
+            return;
+        if (e.key === 'Escape' && this.open && this.closeOnEsc) {
+            this.hide('esc');
+            return;
+        }
+        // FocusTrap handles Tab
+    }
+    // Bring to front on any click inside the dialog
+    handleDialogClick = () => {
+        // Wrap in microtask to avoid "changed during rendering" warning if called from Watchers/render-adjacent paths
+        requestAnimationFrame(() => {
+            // Logic to increment zIndex among currently open dialogs
+            const allOpened = DialogTray.get().getAll()
+                .filter(w => w.open)
+                .sort((a, b) => a.zIndex - b.zIndex);
+            const maxZ = allOpened.length > 0 ? allOpened[allOpened.length - 1].zIndex : 10000;
+            if (this.zIndex <= maxZ) {
+                this.zIndex = maxZ + 1;
+            }
+        });
+    };
+    // Dragging Logic
+    handlePointerDown = (e) => {
+        this.handleDialogClick();
+        if (this.maximized || !this.isDraggable || this.minimized)
+            return;
+        // Ignore if clicking on interactive elements
+        const path = e.composedPath();
+        const isInteractive = path.some(el => el instanceof HTMLElement &&
+            (['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'A', 'UI-ICON'].includes(el.tagName) || el.classList.contains('dialog-btn')));
+        if (isInteractive)
+            return;
+        // Only allow drag from header
+        const header = this.dialogElement.querySelector('ui-dialog-header');
+        const isHeaderClick = path.some(p => p === header || (p instanceof HTMLElement && p.localName === 'ui-dialog-header'));
+        if (!isHeaderClick)
+            return;
+        e.preventDefault(); // Prevent scrolling on touch
+        e.stopPropagation();
+        this.isDragging = true;
+        this.dragAnchored = false;
+        // Handle Touch/Pointer coordinates
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        const rect = this.dialogElement.getBoundingClientRect();
+        this.initialLeft = rect.left;
+        this.initialTop = rect.top;
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        // Do NOT modify styles here — wait until movement threshold is crossed
+        // to avoid snapping the dialog on a plain click.
+        // Capture pointer
+        if (this.dialogElement.setPointerCapture) {
+            try {
+                this.dialogElement.setPointerCapture(e.pointerId);
+            }
+            catch (ex) { }
+        }
+        document.addEventListener('pointermove', this.handlePointerMove);
+        document.addEventListener('pointerup', this.handlePointerUp);
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'grabbing';
+    };
+    checkSnapping = (clientX, clientY) => {
+        const threshold = 50;
+        const winW = window.innerWidth;
+        const winH = window.innerHeight;
+        if (clientX < threshold) {
+            this.snappedEdge = 'left';
+        }
+        else if (clientX > winW - threshold) {
+            this.snappedEdge = 'right';
+        }
+        else if (clientY < threshold) {
+            this.snappedEdge = 'top';
+        }
+        else if (clientY > winH - threshold) {
+            this.snappedEdge = 'bottom';
+        }
+        else {
+            this.snappedEdge = 'none';
+        }
+    };
+    handlePointerMove = (e) => {
+        if (!this.dialogElement)
+            return;
+        if (this.isDragging) {
+            const dx = e.clientX - this.dragStartX;
+            const dy = e.clientY - this.dragStartY;
+            // Anti-jitter: Avoid resetting styles until true movement occurs
+            if (!this.dragAnchored) {
+                if (Math.abs(dx) < 5 && Math.abs(dy) < 5)
+                    return;
+                this.dragAnchored = true;
+                this.dialogElement.style.margin = '0';
+                this.dialogElement.style.position = 'fixed';
+                this.dialogElement.style.left = `${this.initialLeft}px`;
+                this.dialogElement.style.top = `${this.initialTop}px`;
+                this.dialogElement.style.transform = 'none';
+                this.dialogElement.style.width = `${this.dialogElement.offsetWidth}px`; // Lock width
+                this.dialogElement.classList.add('is-dragging');
+            }
+            this.dialogElement.style.left = `${this.initialLeft + dx}px`;
+            this.dialogElement.style.top = `${this.initialTop + dy}px`;
+            if (this.snapToEdges) {
+                this.checkSnapping(e.clientX, e.clientY);
+            }
+        }
+        else if (this.isResizing) {
+            const dx = e.clientX - this.resizeStartX;
+            const dy = e.clientY - this.resizeStartY;
+            let newWidth = this.initialWidth + dx;
+            let newHeight = this.initialHeight + dy;
+            // Helper to parse pixel values safely
+            const parseVal = (v) => v ? parseInt(v, 10) : null;
+            if (this.minWidth)
+                newWidth = Math.max(newWidth, parseVal(this.minWidth) || 0);
+            if (this.minHeight)
+                newHeight = Math.max(newHeight, parseVal(this.minHeight) || 0);
+            if (this.maxWidth)
+                newWidth = Math.min(newWidth, parseVal(this.maxWidth) || 9999);
+            if (this.maxHeight)
+                newHeight = Math.min(newHeight, parseVal(this.maxHeight) || 9999);
+            this.dialogElement.style.width = `${newWidth}px`;
+            this.dialogElement.style.height = `${newHeight}px`;
+        }
+    };
+    handlePointerUp = (e) => {
+        if (!this.dialogElement) {
+            this.isDragging = false;
+            this.isResizing = false;
+            return;
+        }
+        // Release capture
+        if (this.isDragging && this.dialogElement.releasePointerCapture) {
+            try {
+                this.dialogElement.releasePointerCapture(e.pointerId);
+            }
+            catch (ex) { }
+        }
+        if (this.isResizing && e.target.releasePointerCapture) {
+            try {
+                e.target.releasePointerCapture(e.pointerId);
+            }
+            catch (ex) { }
+        }
+        if (this.isDragging || this.isResizing) {
+            this.ignoreBackdropClick = true;
+            setTimeout(() => {
+                this.ignoreBackdropClick = false;
+            }, 100);
+        }
+        if (this.isDragging && this.snapToEdges && this.snappedEdge !== 'none') {
+            this.maximize(); // Changed from applySnap to maximize as per user edit
+        }
+        // Reset global styles
+        if (this.isDragging) {
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+        }
+        // Commit final position so next drag starts cleanly from the landed location
+        if (this.isDragging && this.dragAnchored && this.dialogElement) {
+            const rect = this.dialogElement.getBoundingClientRect();
+            this.dialogElement.style.left = `${rect.left}px`;
+            this.dialogElement.style.top = `${rect.top}px`;
+            this.dialogElement.style.transform = 'none';
+        }
+        this.isDragging = false;
+        this.dragAnchored = false;
+        this.isResizing = false;
+        this.snappedEdge = 'none';
+        // Persistence
+        if (this.remember)
+            this.saveLayout();
+        // Swipe to Close detection
+        if (this.swipeToClose && !this.isResizing && !this.isDragging) {
+            const dx = e.clientX - this.dragStartX;
+            if (Math.abs(dx) > 150) { // Swipe threshold
+                this.hide();
+            }
+        }
+        document.removeEventListener('pointermove', this.handlePointerMove);
+        document.removeEventListener('pointerup', this.handlePointerUp);
+    };
+    handleResizePointerDown = (e) => {
+        if (!this.resizable || this.maximized)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        this.isResizing = true;
+        this.resizeStartX = e.clientX;
+        this.resizeStartY = e.clientY;
+        const rect = this.dialogElement.getBoundingClientRect();
+        this.initialWidth = rect.width;
+        this.initialHeight = rect.height;
+        // Lock position
+        this.dialogElement.style.margin = '0';
+        this.dialogElement.style.position = 'fixed';
+        this.dialogElement.style.left = `${rect.left}px`;
+        this.dialogElement.style.top = `${rect.top}px`;
+        // Capture pointer
+        try {
+            e.target.setPointerCapture(e.pointerId);
+        }
+        catch (ex) { }
+        // Alternatively capture on dialog if handle is sm
+        // try { this.dialogElement.setPointerCapture(e.pointerId); } catch(ex) {}
+        document.addEventListener('pointermove', this.handlePointerMove);
+        document.addEventListener('pointerup', this.handlePointerUp);
+    };
+    renderHeader(isPeek = false) {
+        if (!this.showHeader)
+            return null;
+        // Provide default cancelText for session/terms types if not set
+        let cancelLabel = this.cancelText;
+        if (!cancelLabel) {
+            if (this.type === 'session')
+                cancelLabel = 'Logout';
+            else if (this.type === 'terms')
+                cancelLabel = 'Decline';
+            else
+                cancelLabel = this._resolveButtons().cancelLabel;
+        }
+        // Use local defaults for okLabel and dialogTitle
+        let okLabel = this.okText;
+        if (!okLabel) {
+            okLabel = this._defaultOkText || this._resolveButtons().okLabel;
+        }
+        let dialogTitle = this.dialogTitle;
+        if (!dialogTitle) {
+            dialogTitle = this._defaultDialogTitle;
+        }
+        return (h("ui-dialog-header", { part: "header", dialogTitle: dialogTitle, subtitle: this.subtitle, showMinimize: !isPeek && this.showMinimize && !this.maximized && this.type !== 'messagebox', showMaximize: !isPeek && this.showMaximize && this.type !== 'messagebox', showClose: this.showClose, showMenu: !isPeek && (this.showMenu || (Array.isArray(this.menuItems) ? this.menuItems.length > 0 : !!this.menuItems)), menuItems: this.menuItems, menuIcon: this.menuIcon, menuTitle: this.menuTitle, titleTag: this.titleTag, iconPosition: this.iconPosition, type: this.type, variant: this.variant, status: this.status, icon: this.icon, avatar: this.avatar, onMinimize: (e) => { e.stopImmediatePropagation(); this.minimize(); }, onMaximize: (e) => { e.stopImmediatePropagation(); this.maximize(); }, onClose: (e) => { e.stopImmediatePropagation(); this.hide('close-btn'); }, onMenu: (e) => { e.stopImmediatePropagation(); this.handleMenu(e); }, iconLibrary: this.iconLibrary, style: this.headerColor ? { backgroundColor: this.headerColor, color: '#fff' } : {} }, (this.headerImage || this.el.querySelector('[slot="header-icon"]')) && (h("div", { slot: "icon", style: { display: 'flex', alignItems: 'center', gap: '8px' } }, this.headerImage && h("img", { src: this.headerImage, alt: "", style: { width: '20px', height: '20px', borderRadius: '4px' } }), h("slot", { name: "header-icon" }))), h("slot", { name: "title", slot: "title" }), h("slot", { name: "subtitle", slot: "subtitle" }), h("slot", { name: "header-actions", slot: "actions" }), h("slot", { name: "menu-list", slot: "menu-list" }), this.allowPopOut && !isPeek && (h("ui-button", { variant: "ghost", size: "sm", icon: "external-link", iconLibrary: this.iconLibrary, iconSize: "1.2em", ariaLabel: "Pop out Window", onClick: () => this.popOut(), slot: "actions", part: "popout-btn" }))));
+    }
+    renderStepper() {
+        if (!this.steps || (typeof this.steps === 'number' ? this.steps <= 0 : this.steps.length <= 0))
+            return null;
+        return (h("div", { class: "ui-dialog-stepper" }, Array.from({ length: typeof this.steps === 'number' ? this.steps : this.steps.length }).map((_, i) => (h("div", { class: {
+                'step-item': true,
+                'active': this._currentStep === i + 1,
+                'completed': this._currentStep > i + 1
+            } }, h("div", { class: "step-dot" }, i + 1), Array.isArray(this.steps) && h("div", { class: "step-label" }, this.steps[i]), i < (typeof this.steps === 'number' ? this.steps : this.steps.length) - 1 && h("div", { class: "step-line" }))))));
+    }
+    renderBodyContent() {
+        return (h("div", { class: { 'ui-dialog-main-container': true, 'has-side-nav': this.layout === 'side-nav' } }, this.layout === 'side-nav' && (h("div", { class: "ui-dialog-side-nav" }, h("slot", { name: "side-nav" }))), h("div", { class: { 'ui-dialog-content-wrapper': true, 'type-messagebox': this.type === 'messagebox' }, part: "body", onScroll: this.handleTermsScroll }, this.type === 'session' && (h("div", { class: `ui-dialog-session-alert ${this._sessionTimedOut ? 'is-timeout' : ''}` }, h("ui-icon", { name: this._sessionTimedOut ? 'log-out' : 'clock', library: "lucide" }), this._sessionTimedOut ? (h("div", { class: "timeout-content" }, h("p", { style: { fontWeight: '600', color: '#ef4444', margin: '0 0 8px' } }, "Due to inactivity, you have been logged out."), h("p", { style: { fontSize: '13px', color: '#666', margin: '0' } }, "Please log in again to continue working on your tasks."))) : (h("span", null, "Session expiring in ", h("strong", null, this._sessionTimeLeft, "s"))))), h("slot", { name: "body" }, h("slot", null), this.type === 'prompt' && (h("div", { class: "ui-dialog-prompt-container" }, h("ui-input", { type: this.promptType, name: "prompt", class: "ui-dialog-prompt-input", value: this.promptValue, placeholder: this.promptPlaceholder, label: this.promptLabel, onInputChange: (e) => {
+                this.promptValue = e.detail;
+                this.returnValue = this.promptValue;
+            }, autofocus: true, fullWidth: true })))))));
+    }
+    renderFooterContent() {
+        if (!this.showFooter)
+            return null;
+        const { okLabel, cancelLabel, resetLabel } = this._resolveButtons();
+        // If no buttons at all and no slots, skip the footer entirely
+        const hasButtons = okLabel || cancelLabel || resetLabel;
+        const hasSlots = !!this.confirmationText;
+        if (!hasButtons && !hasSlots)
+            return null;
+        return (h("ui-dialog-footer", { class: "ui-dialog-footer-wrapper", part: "footer" }, h("div", { class: "footer-left" }, this.confirmationText && (h("div", { class: "ui-dialog-confirmation" }, h("ui-checkbox", { class: "confirmation-checkbox", checked: this.isConfirmed, label: this.confirmationText, onCheckboxChange: (e) => {
+                this.isConfirmed = e.detail.checked;
+            } }))), h("slot", { name: "footer-left" })), h("div", { class: "footer-right", part: "footer-actions" }, h("slot", { name: "actions" }, resetLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleReset }, resetLabel)), cancelLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleCancel, disabled: this.cancelDisabled }, cancelLabel)), okLabel && (h("ui-button", { variant: (this.status === 'default' || this.status === 'info') ? 'primary' : this.status, size: "md", onButtonClick: this._sessionTimedOut ? () => window.location.href = '/login' : this.handleOk, loading: this.okLoading, disabled: this.okDisabled || (!!this.confirmationText && !this.isConfirmed) || (this.type === 'terms' && !this._termsScrolled) }, this._sessionTimedOut ? "Go to Login" : okLabel))), h("div", { class: "footer-custom-slot" }, h("slot", { name: "footer" })))));
+    }
+    render() {
+        if (!this.open && !this.isClosing && !this.keepMounted)
+            return null;
+        // ── Minimized tray render ──────────────────────────────────────────────
+        if (this.minimized && this.open && !this._dockPeek) {
+            return (h(Host, { class: { 'minimized': true, 'open': this.open } }, h("div", { class: `ui-tray-tab status-${this.status} ${this.variant === 'glass' ? 'variant-glass' : ''}`, onClick: () => this.restore(), onDblClick: () => this.restore(), title: `Click to Restore ${this.dialogTitle}`, style: {
+                    color: '#ffffff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '0 8px',
+                    gap: '12px',
+                    height: '100%',
+                    width: '100%',
+                    minWidth: '100px',
+                    fontWeight: '600'
+                } }, this.icon && h("ui-icon", { name: this.icon, color: "white", library: this.iconLibrary, size: "1rem", style: { flexShrink: '0' } }), h("span", { class: "tab-label", style: { color: '#ffffff', flex: '0 1 auto', whiteSpace: 'nowrap' } }, this.dockLabel || this.dialogTitle || 'Dialog'), h("ui-button", { variant: "ghost", size: "sm", class: "ui-tray-btn", icon: "x", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Close", onClick: (e) => { e.stopPropagation(); this.hide(); } }))));
+        }
+        const isHidden = !this.open && !this.isClosing && this.keepMounted;
+        // Use a local variable for effective size (do not mutate prop)
+        const effectiveSize = this.type === 'terms' && this.size === 'md' ? 'lg' : this.size;
+        const dialogClasses = {
+            'ui-dialog-box': true,
+            'closing': this.isClosing,
+            'maximized': this.maximized,
+            'minimized': this.minimized,
+            [`variant-${this.variant}`]: true,
+            [`status-${this.status}`]: this.status !== 'default',
+            [`size-${effectiveSize}`]: effectiveSize !== 'custom',
+            'scroll-paper': this.scrollArea === 'paper',
+            'scroll-body': this.scrollArea === 'body',
+            [`animation-${this.animation}`]: true,
+            'fullscreen-mobile': this.fullscreenOnMobile,
+            'hidden-mounted': isHidden,
+            'draggable': this.isDraggable,
+            'is-dragging': this.isDragging,
+            'loading-active': this.loading,
+            'is-bordered': this.bordered,
+            'is-nested': this.isNested,
+            'debug-mode': this.debug,
+            'glass-effect': this.glass || this.variant === 'glass',
+            [`type-${this.type}`]: true,
+            [`density-${this.density}`]: true,
+            'shake': this._isShaking
+        };
+        const dialogStyles = {
+            '--dialog-bg': this.backgroundColor || 'white',
+            backgroundColor: 'var(--dialog-bg, #ffffff)'
+        };
+        if (!this.maximized) {
+            const isDefaultWidth = this.width === '500px';
+            const isDefaultHeight = this.height === 'auto';
+            if (effectiveSize === 'custom' || !isDefaultWidth || !isDefaultHeight || this._restoredLayout) {
+                if (this.width)
+                    dialogStyles.width = this.width;
+                if (this.height && this.scrollArea !== 'body')
+                    dialogStyles.height = this.height;
+            }
+            if (this._restoredLayout) {
+                dialogStyles.position = 'fixed';
+                dialogStyles.margin = '0';
+                dialogStyles.left = `${this._restoredLayout.left}px`;
+                dialogStyles.top = `${this._restoredLayout.top}px`;
+            }
+        }
+        const dialogId = this.el.id || `dialog-idx-${Math.random().toString(36).substr(2, 5)}`;
+        const posClass = `position-${this.position}`;
+        return (h(Host, { class: { 'open': this.open, 'minimized': this.minimized, 'dock-peek': this._dockPeek } }, this.minimized && this._dockPeek && (h("div", { class: `ui-peek-panel variant-${this.variant} status-${this.status}`, onClick: (e) => e.stopPropagation() }, this.renderHeader(true), h("div", { class: "ui-dialog-content-wrapper" }, h("slot", { name: "body" }, h("slot", null))))), (!this.minimized || this._dockPeek) && (h("div", { class: `ui-dialog-backdrop ${this.backdrop === 'none' ? 'backdrop-none' : ''} ${this.scrollArea === 'body' ? 'scroll-body-active' : ''} ${posClass} ${this.isClosing ? 'closing' : ''} ${this.glass ? 'glass-backdrop' : ''} ${isHidden ? 'hidden-mounted' : ''}`, onClick: this.handleBackdropClick, part: "backdrop", ref: (el) => (this.backdropElement = el), style: { zIndex: `${this.zIndex}` } }, h("div", { ref: (el) => (this.dialogElement = el), class: dialogClasses, style: dialogStyles, part: "panel", onPointerDown: this.handlePointerDown, tabIndex: -1, role: "dialog", "aria-modal": "true", id: dialogId }, h("div", { class: "ui-dialog-box-container", onPointerUp: this.handlePointerUp }, this.renderHeader(), this.showHeader && h("div", { class: "ui-dialog-divider-line" }), this.progress >= 0 && (h("div", { class: "ui-dialog-progress-container", title: `Progress: ${this.progress}%` }, h("div", { class: "ui-dialog-progress-bar", style: { width: `${this.progress}%` } }))), this.renderStepper(), this.showToolbar && (h("div", { class: "ui-dialog-toolbar" }, h("slot", { name: "toolbar" }))), this.renderBodyContent(), this.showStatusBar && (h("div", { class: "ui-dialog-status-bar" }, h("slot", { name: "status-bar" }))), this.showFooter && h("div", { class: "ui-dialog-divider-line" }), this.renderFooterContent(), this.resizable && !this.maximized && (h("div", { class: "resize-handle", onPointerDown: this.handleResizePointerDown })), this.subOverlay?.visible && (h("div", { class: "ui-dialog-sub-overlay" }, h("div", { class: "sub-overlay-card" }, h("h4", null, this.subOverlay.title), h("p", null, this.subOverlay.message), h("div", { class: "sub-overlay-actions" }, h("ui-button", { variant: "outline", onButtonClick: () => this.subOverlay = null }, "Cancel"), h("ui-button", { variant: "primary", onButtonClick: () => { this.subOverlay.onConfirm(); this.subOverlay = null; } }, "Confirm")))))))))));
+    }
+    triggerConfetti() {
+        const count = 200;
+        const defaults = { origin: { y: 0.7 }, zIndex: this.zIndex + 10 };
+        function fire(particleRatio, opts) {
+            if (window.confetti) {
+                window.confetti(Object.assign({}, defaults, opts, {
+                    particleCount: Math.floor(count * particleRatio)
+                }));
+            }
+        }
+        fire(0.25, { spread: 26, startVelocity: 55 });
+        fire(0.2, { spread: 60 });
+        fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+        fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+        fire(0.1, { spread: 120, startVelocity: 45 });
+    }
+    static get is() { return "ui-dialog-box"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog-box.scss", "dialog-tray.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog-box.css", "dialog-tray.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "dialogTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dialog-title",
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog subtitle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
+            },
+            "maximized": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is maximized"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maximized",
+                "defaultValue": "false"
+            },
+            "minimized": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is minimized"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "minimized",
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog width. Explicit width takes precedence over size if size is 'custom'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'500px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'auto'"
+            },
+            "headerImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to header image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-image"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to show in the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL to show in the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar",
+                "defaultValue": "''"
+            },
+            "showMaximize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show maximize button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-maximize",
+                "defaultValue": "false"
+            },
+            "showMinimize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show minimize button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-minimize",
+                "defaultValue": "false"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close",
+                "defaultValue": "true"
+            },
+            "showMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show menu button (Action Menu)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu",
+                "defaultValue": "false"
+            },
+            "menuIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon for the menu trigger button in the header.\r\nDefaults to 'more-horizontal' (\u22EF). Use 'settings' for a gear, 'sliders-horizontal' for filters, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-icon",
+                "defaultValue": "'more-horizontal'"
+            },
+            "menuTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the menu trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-title",
+                "defaultValue": "'Menu'"
+            },
+            "showHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-header",
+                "defaultValue": "true"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog status/type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "backdrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BackdropType",
+                    "resolved": "\"default\" | \"none\" | \"static\"",
+                    "references": {
+                        "BackdropType": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BackdropType",
+                            "referenceLocation": "BackdropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backdrop Behavior. 'default' (closes on click), 'static' (no close), 'none' (no backdrop)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop",
+                "defaultValue": "'default'"
+            },
+            "scrollArea": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ScrollArea",
+                    "resolved": "\"body\" | \"paper\"",
+                    "references": {
+                        "ScrollArea": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ScrollArea",
+                            "referenceLocation": "ScrollArea"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll behavior. 'paper' (scroll inside content), 'body' (scroll whole dialog)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-area",
+                "defaultValue": "'paper'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogType",
+                    "resolved": "\"alert\" | \"confirm\" | \"default\" | \"delete\" | \"drawer\" | \"fullscreen\" | \"messagebox\" | \"modal\" | \"pre-session\" | \"prompt\" | \"session\" | \"terms\" | \"upload\"",
+                    "references": {
+                        "DialogType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/dialog-box/types.ts::DialogType",
+                            "referenceLocation": "DialogType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog functional type.\r\n- 'modal': Standard centered modal.\r\n- 'drawer': Slides from an edge (determined by position).\r\n- 'fullscreen': Occupies entire screen.\r\n- 'alert': Emphasis on the message, simple actions.\r\n- 'confirm': Standard confirmation with OK/Cancel flow.\r\n- 'prompt': Modal with an input field for user entry.\r\n- 'messagebox': Simplified modal for informational messages.\r\n- (Legacy): 'default' | 'delete' | 'upload' | 'session' | 'terms'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'modal'"
+            },
+            "promptLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the input field (only for 'prompt' type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prompt-label",
+                "defaultValue": "''"
+            },
+            "promptPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the prompt input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prompt-placeholder",
+                "defaultValue": "''"
+            },
+            "promptType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PromptType",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\"",
+                    "references": {
+                        "PromptType": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::PromptType",
+                            "referenceLocation": "PromptType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type for the prompt (text, password, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prompt-type",
+                "defaultValue": "'text'"
+            },
+            "promptInitialValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value for the prompt input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prompt-initial-value",
+                "defaultValue": "''"
+            },
+            "sessionTimeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Session timeout duration in seconds (only for 'session' type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "session-timeout",
+                "defaultValue": "60"
+            },
+            "autoSubmitOnTimeout": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to automatically submit 'session' dialog on timeout.\r\nIf false, it will just close (cancel)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-submit-on-timeout",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | FourSidePosition|FourCornerPosition",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        },
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the dialog. \r\nFor 'drawer' type, these determine the slide direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'center'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize | 'custom'",
+                    "resolved": "\"custom\" | \"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined horizontal sizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Density",
+                    "resolved": "\"comfortable\" | \"compact\" | \"cozy\" | \"normal\"",
+                    "references": {
+                        "Density": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Density",
+                            "referenceLocation": "Density"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual density mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'cozy'"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking the backdrop closes the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            },
+            "closeOnEsc": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the ESC key closes the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-esc",
+                "defaultValue": "true"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draggable dialog (only for 'modal' type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resizable dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "steps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | number",
+                    "resolved": "number | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stepper steps for Wizard mode. Either an array of strings or a number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "0"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step in Wizard mode (1-indexed)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "globalBlur": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to blur the entire webpage behind this dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "global-blur",
+                "defaultValue": "false"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogLayout",
+                    "resolved": "\"default\" | \"side-nav\"",
+                    "references": {
+                        "DialogLayout": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/dialog-box/types.ts::DialogLayout",
+                            "referenceLocation": "DialogLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog layout mode.\r\n'default': Standard dialog\r\n'side-nav': Includes a sidebar for master/detail views"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'default'"
+            },
+            "showToolbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a toolbar below the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-toolbar",
+                "defaultValue": "false"
+            },
+            "showStatusBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a status bar above the footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-status-bar",
+                "defaultValue": "false"
+            },
+            "snapToEdges": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Snap to screen edges when dragging"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-to-edges",
+                "defaultValue": "true"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Skeleton loading state. Transforms the dialog UI into placeholders."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "shortcuts": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable OS-level shortcuts (Ctrl+Enter to OK, Esc to Close)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcuts",
+                "defaultValue": "true"
+            },
+            "dirty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog contents are \"dirty\" (unsaved changes). \r\nTriggers the confirmation prompt on close."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dirty",
+                "defaultValue": "false"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration in ms."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "250"
+            },
+            "initialFocus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector for the element to focus initially when opened."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-focus"
+            },
+            "allowPopOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a \"pop-out\" button to open content in a separate browser window."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-pop-out",
+                "defaultValue": "false"
+            },
+            "starred": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is starred/favorited"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "starred",
+                "defaultValue": "false"
+            },
+            "dockLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the dock when minimized."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dock-label",
+                "defaultValue": "''"
+            },
+            "confirmationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Confirmation text for checkbox (e.g. \"I accept the Terms & Conditions\").\r\nIf provided, the OK button will be disabled until checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirmation-text",
+                "defaultValue": "''"
+            },
+            "headerSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-size",
+                "defaultValue": "'md'"
+            },
+            "headerColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Header background color override."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-color"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog should have a more pronounced border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "okText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the OK button. If provided, renders an OK button in the footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-text"
+            },
+            "buttonSet": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'ok-cancel' | 'yes-no' | 'yes-no-cancel' | 'save-discard' | 'retry-cancel' | 'custom'",
+                    "resolved": "\"custom\" | \"ok-cancel\" | \"retry-cancel\" | \"save-discard\" | \"yes-no\" | \"yes-no-cancel\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preset button set for confirmation dialogs.\r\n- `'ok-cancel'`      \u2192 OK / Cancel\r\n- `'yes-no'`         \u2192 Yes / No\r\n- `'yes-no-cancel'`  \u2192 Yes / No / Cancel  (No maps to resetText slot, left-aligned)\r\n- `'save-discard'`   \u2192 Save / Discard\r\n- `'retry-cancel'`   \u2192 Retry / Cancel\r\nExplicit `okText` / `cancelText` / `resetText` props always override the preset labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-set",
+                "defaultValue": "'custom'"
+            },
+            "cancelText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the Cancel button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-text"
+            },
+            "portal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to portal the dialog to body"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "portal",
+                "defaultValue": "false"
+            },
+            "okLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state for the OK button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-loading",
+                "defaultValue": "false"
+            },
+            "okDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the OK button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-disabled",
+                "defaultValue": "false"
+            },
+            "resetText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the Reset button (left-aligned)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reset-text"
+            },
+            "cancelDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the Cancel button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-disabled",
+                "defaultValue": "false"
+            },
+            "fullscreenOnMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fullscreen on mobile devices automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fullscreen-on-mobile",
+                "defaultValue": "true"
+            },
+            "keepMounted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep content mounted when closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keep-mounted",
+                "defaultValue": "false"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'scale' | 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'flip'",
+                    "resolved": "\"fade\" | \"flip\" | \"scale\" | \"slide-down\" | \"slide-left\" | \"slide-right\" | \"slide-up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom animation name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'scale'"
+            },
+            "returnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Return focus to trigger element on close."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "return-focus",
+                "defaultValue": "true"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-Index for the dialog. Useful for nested dialogs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "10000"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum Width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum Height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum Width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum Height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height"
+            },
+            "remember": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remember dialog position and size between sessions (requires id)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remember",
+                "defaultValue": "false"
+            },
+            "swipeToClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow swipe-to-close gesture on mobile devices."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-to-close",
+                "defaultValue": "false"
+            },
+            "confetti": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fire confetti when the dialog opens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confetti",
+                "defaultValue": "false"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable glassmorphism effect (blur) on backdrop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the dialog panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'white'"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual progress bar percentage (0-100)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "-1"
+            },
+            "isNested": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is nested (inside another dialog). \r\nTriggers visual differentiation (smer size, deeper shadow)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-nested",
+                "defaultValue": "false"
+            },
+            "sensitive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the primary action is sensitive (requires double-confirmation)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sensitive",
+                "defaultValue": "false"
+            },
+            "autoClose": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-close timeout in milliseconds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-close",
+                "defaultValue": "0"
+            },
+            "timeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for autoClose."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timeout",
+                "defaultValue": "0"
+            },
+            "sound": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable subtle sound feedback for interactions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sound",
+                "defaultValue": "false"
+            },
+            "haptics": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable haptic feedback for mobile devices."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptics",
+                "defaultValue": "false"
+            },
+            "permissions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required permissions to view this dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "debug": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable debug mode (shows layout boundaries and metadata)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debug",
+                "defaultValue": "false"
+            },
+            "beforeClose": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<boolean> | boolean",
+                    "resolved": "() => boolean | Promise<boolean>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional callback function to execute before closing.\r\nReturn false or a Promise resolving to false to prevent closing."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library to use for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "titleTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingTag",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "HeadingTag": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::HeadingTag",
+                            "referenceLocation": "HeadingTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic tag for the title (h1-h6)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-tag",
+                "defaultValue": "'h3'"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the icon/avatar relative to the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "menuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items for the built-in context menu. \r\nCan be a JSON string or an array of objects.\r\nIf provided, clicking the menu button automatically opens a context menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-items",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_restoredLayout": {},
+            "_isShaking": {},
+            "_sessionTimedOut": {},
+            "_currentStep": {},
+            "promptValue": {},
+            "isConfirmed": {},
+            "_sessionTimeLeft": {},
+            "_termsScrolled": {},
+            "isClosing": {},
+            "snappedEdge": {},
+            "subOverlay": {},
+            "minimizedToDock": {},
+            "_dockPeek": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dialogClosed",
+                "name": "dialogClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when dialog is closed"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "undo",
+                "name": "undo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for undo action"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "redo",
+                "name": "redo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for redo action"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogOpened",
+                "name": "dialogOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the dialog is opened."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "toastRequest",
+                "name": "toastRequest",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted to request a toast notification."
+                },
+                "complexType": {
+                    "original": "{ message: string, type: 'success' | 'error' | 'info' }",
+                    "resolved": "{ message: string; type: \"info\" | \"error\" | \"success\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "auditLog",
+                "name": "auditLog",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for security audit logging."
+                },
+                "complexType": {
+                    "original": "{ action: string, timestamp: number, metadata?: any }",
+                    "resolved": "{ action: string; timestamp: number; metadata?: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "beforeOpen",
+                "name": "beforeOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the dialog opens. Can be cancelled via event.preventDefault()."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "openStarted",
+                "name": "openStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when opening animation starts."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "afterOpen",
+                "name": "afterOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when opening animation finishes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "beforeCloseEvent",
+                "name": "beforeCloseEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the dialog closes. Can be cancelled by event.preventDefault()."
+                },
+                "complexType": {
+                    "original": "{ source: 'esc' | 'backdrop' | 'close-btn' | 'programmatic' }",
+                    "resolved": "{ source: \"backdrop\" | \"esc\" | \"close-btn\" | \"programmatic\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "closeStarted",
+                "name": "closeStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when closing animation starts."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "afterClose",
+                "name": "afterClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when closing animation finishes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuAction",
+                "name": "menuAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a menu item is clicked (if using built-in menuItems)"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ok",
+                "name": "ok",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when OK button is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "cancel",
+                "name": "cancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when Cancel button is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogReset",
+                "name": "dialogReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when Reset button is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogMaximized",
+                "name": "dialogMaximized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when dialog is maximized"
+                },
+                "complexType": {
+                    "original": "{ maximized: boolean }",
+                    "resolved": "{ maximized: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogMinimized",
+                "name": "dialogMinimized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when dialog is minimized"
+                },
+                "complexType": {
+                    "original": "{ minimized: boolean }",
+                    "resolved": "{ minimized: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "menu",
+                "name": "menu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when menu button is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openDialog": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Open the dialog and return a promise that resolves to true when OK is clicked, false on Cancel/Close.",
+                    "tags": []
+                }
+            },
+            "showWithResult": {
+                "complexType": {
+                    "signature": "() => Promise<{ data: any; canceled: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ data: any; canceled: boolean; }>"
+                },
+                "docs": {
+                    "text": "Show dialog and return a promise that resolves with data when closed via OK.\r\nStandardizes the return value as { data: any, canceled: boolean }.",
+                    "tags": []
+                }
+            },
+            "setReturnValue": {
+                "complexType": {
+                    "signature": "(value: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the value to be returned when showWithResult resolves.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(source?: \"esc\" | \"backdrop\" | \"close-btn\" | \"programmatic\") => Promise<void>",
+                    "parameters": [{
+                            "name": "source",
+                            "type": "\"backdrop\" | \"esc\" | \"close-btn\" | \"programmatic\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the dialog",
+                    "tags": []
+                }
+            },
+            "maximize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Maximize the dialog",
+                    "tags": []
+                }
+            },
+            "showConfirmation": {
+                "complexType": {
+                    "signature": "(title: string, message: string, onConfirm: () => void) => Promise<void>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "onConfirm",
+                            "type": "() => void",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show an internal sub-overlay prompt (e.g., for diskard changes).",
+                    "tags": []
+                }
+            },
+            "cascade": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cascade all open dialogs",
+                    "tags": []
+                }
+            },
+            "tile": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Tile all open dialogs",
+                    "tags": []
+                }
+            },
+            "popOut": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Detach the dialog content to a separate browser window",
+                    "tags": []
+                }
+            },
+            "minimize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Minimize the dialog",
+                    "tags": []
+                }
+            },
+            "restore": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Restore the dialog from minimized or maximized state",
+                    "tags": []
+                }
+            },
+            "submit": {
+                "complexType": {
+                    "signature": "(value?: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically submit the dialog (resolves the promise).\r\nOptional value overrides auto-collection.",
+                    "tags": []
+                }
+            },
+            "cancelDialog": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically cancel the dialog (rejects the promise).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentStep",
+                "methodName": "currentStepChanged"
+            }, {
+                "propName": "minimized",
+                "methodName": "minimizedChanged"
+            }, {
+                "propName": "_dockPeek",
+                "methodName": "onDockPeekChange"
+            }, {
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleGlobalShortcuts",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}