tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/modal.js

@@ -1,522 +1,378 @@
-/**
- * Modal Component
- *
- * Pure wrapper for modal dialogs using the native <dialog> element.
- * Provides backdrop, focus management, scroll locking, and keyboard interaction
- * without imposing any styling on content.
- *
- * Features:
- * - Native dialog element wrapper
- * - Dual API: declarative (open attribute) and imperative (show/hide methods)
- * - Cancellable `beforeclose` lifecycle event for unsaved-state flows
- * - Auto-hiding close button on hover (desktop only)
- * - Scroll locking with unique modal IDs
- * - Customizable backdrop via CSS variables
- *
- * @example
- * <ty-modal id="my-modal">
- *   <div class="ty-elevated p-6 rounded-lg max-w-md">
- *     <h3 class="text-lg font-semibold mb-4">Modal Title</h3>
- *     <p class="ty-text- mb-4">Modal content here</p>
- *     <ty-button onclick="this.closest('ty-modal').hide()">
- *       Close
- *     </ty-button>
- *   </div>
- * </ty-modal>
- */
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { ensureStyles } from '../utils/styles.js';
 import { modalStyles } from '../styles/modal.js';
-// ============================================================================
-// WeakMaps for State Management
-// ============================================================================
 const backdropClickHandlers = new WeakMap();
 const escapeKeyHandlers = new WeakMap();
 const closeButtonHandlers = new WeakMap();
 const hoverEnterHandlers = new WeakMap();
 const hoverLeaveHandlers = new WeakMap();
-const modalIds = new WeakMap(); // Store unique modal ID for scroll locking
-// ============================================================================
-// Constants
-// ============================================================================
-/**
- * SVG icon for the close button (Lucide X icon)
- */
+const modalIds = new WeakMap();
+const pendingCloseReasons = new WeakMap();
 const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Parse boolean attribute
- * Boolean attribute semantics: presence -> true, explicit 'false' -> false
- * Matches ClojureScript implementation
- */
 function parseBoolAttr(el, name) {
-    if (!el.hasAttribute(name)) {
-        return false;
-    }
-    const value = el.getAttribute(name);
-    // Explicit "false" string means false
-    if (value !== null && value.toLowerCase() === 'false') {
-        return false;
-    }
-    // Attribute present (even empty) means true
-    return true;
-}
-/**
- * Read modal attributes with defaults
- */
+if (!el.hasAttribute(name)) {
+return false;
+}
+const value = el.getAttribute(name);
+if (value !== null && value.toLowerCase() === 'false') {
+return false;
+}
+return true;
+}
 function getModalAttributes(el) {
-    return {
-        open: parseBoolAttr(el, 'open'),
-        backdrop: el.hasAttribute('backdrop') ? parseBoolAttr(el, 'backdrop') : true,
-        closeOnOutsideClick: el.hasAttribute('close-on-outside-click')
-            ? parseBoolAttr(el, 'close-on-outside-click')
-            : true,
-        closeOnEscape: el.hasAttribute('close-on-escape')
-            ? parseBoolAttr(el, 'close-on-escape')
-            : true,
-    };
-}
-/**
- * Get the modal dialog element from shadow root
- */
+return {
+open: parseBoolAttr(el, 'open'),
+backdrop: el.hasAttribute('backdrop') ? parseBoolAttr(el, 'backdrop') : true,
+closeOnOutsideClick: parseBoolAttr(el, 'prevent-outside-click')
+? false
+: el.hasAttribute('close-on-outside-click')
+? parseBoolAttr(el, 'close-on-outside-click')
+: true,
+closeOnEscape: parseBoolAttr(el, 'prevent-escape')
+? false
+: el.hasAttribute('close-on-escape')
+? parseBoolAttr(el, 'close-on-escape')
+: true,
+};
+}
 function getModalDialog(shadowRoot) {
-    return shadowRoot.querySelector('.ty-modal-dialog');
+return shadowRoot.querySelector('.ty-modal-dialog');
 }
-/**
- * Get or create a unique modal ID for scroll locking
- */
 function getModalId(el) {
-    let id = modalIds.get(el);
-    if (!id) {
-        id = `modal-${el.id || Math.random().toString(36).slice(2, 11)}`;
-        modalIds.set(el, id);
-    }
-    return id;
-}
-/**
- * Check if device is mobile (for hover behavior)
- */
+let id = modalIds.get(el);
+if (!id) {
+id = `modal-${el.id || Math.random().toString(36).slice(2, 11)}`;
+modalIds.set(el, id);
+}
+return id;
+}
 function isMobile() {
-    return window.innerWidth < 768 || navigator.maxTouchPoints > 0;
+return window.innerWidth < 768 || navigator.maxTouchPoints > 0;
 }
-/**
- * Dispatch custom modal event
- */
 function dispatchModalEvent(el, eventType, detail) {
-    const event = new CustomEvent(eventType, {
-        detail,
-        bubbles: true,
-        cancelable: true,
-    });
-    el.dispatchEvent(event);
-}
-// ============================================================================
-// Dialog Structure Creation
-// ============================================================================
-/**
- * Ensure the internal dialog structure exists in shadow DOM
- */
+const event = new CustomEvent(eventType, {
+detail,
+cancelable: true,
+});
+el.dispatchEvent(event);
+}
 function ensureInternalDialog(shadowRoot) {
-    let dialog = getModalDialog(shadowRoot);
-    if (!dialog) {
-        dialog = document.createElement('dialog');
-        const closeButton = document.createElement('button');
-        const contentDiv = document.createElement('div');
-        const slot = document.createElement('slot');
-        // Setup dialog structure
-        dialog.className = 'ty-modal-dialog';
-        // Setup close button with SVG icon
-        closeButton.className = 'close-button';
-        closeButton.type = 'button';
-        closeButton.setAttribute('aria-label', 'Close modal');
-        closeButton.innerHTML = CLOSE_ICON;
-        // Setup content container
-        contentDiv.className = 'modal-content';
-        contentDiv.appendChild(slot);
-        // Assemble: dialog > [close-button, content-div]
-        dialog.appendChild(closeButton);
-        dialog.appendChild(contentDiv);
-        shadowRoot.appendChild(dialog);
-    }
-    return dialog;
-}
-// ============================================================================
-// Event Handlers
-// ============================================================================
-/**
- * Close modal with cancellable beforeclose lifecycle.
- *
- *   1. Emit `beforeclose` (cancellable, bubbles, composed). Consumers can
- *      `event.preventDefault()` to abort the close — render your own UI for
- *      unsaved-state flows.
- *   2. Remove the `open` attribute, which triggers the actual close.
- *
- * Callers pass `reason` so consumers can decide differently based on intent
- * (e.g. "OK to discard via ESC, but not via .hide() during a save").
- */
+let dialog = getModalDialog(shadowRoot);
+if (!dialog) {
+dialog = document.createElement('dialog');
+const closeButton = document.createElement('button');
+const contentDiv = document.createElement('div');
+const slot = document.createElement('slot');
+dialog.className = 'ty-modal-dialog';
+closeButton.className = 'close-button';
+closeButton.type = 'button';
+closeButton.setAttribute('aria-label', 'Close modal');
+closeButton.innerHTML = CLOSE_ICON;
+contentDiv.className = 'modal-content';
+contentDiv.appendChild(slot);
+dialog.appendChild(closeButton);
+dialog.appendChild(contentDiv);
+shadowRoot.appendChild(dialog);
+}
+return dialog;
+}
 function closeModal(el, reason = 'programmatic', opts) {
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    if (!dialog || !dialog.open)
-        return;
-    // `force: true` bypasses the cancellable event. Used by consumers AFTER
-    // they've shown their own confirm UI and the user said "yes, close" —
-    // calling `.hide()` again without force would re-trigger their intercept.
-    if (!opts?.force) {
-        const beforeClose = new CustomEvent('beforeclose', {
-            detail: { reason },
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        });
-        el.dispatchEvent(beforeClose);
-        if (beforeClose.defaultPrevented)
-            return;
-    }
-    // Remove open attribute (triggers actual close).
-    el.removeAttribute('open');
-}
-/**
- * Open modal programmatically
- */
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
+if (!dialog || !dialog.open)
+return;
+if (!opts?.force) {
+const beforeClose = new CustomEvent('beforeclose', {
+detail: { reason },
+cancelable: true,
+});
+el.dispatchEvent(beforeClose);
+if (beforeClose.defaultPrevented)
+return;
+}
+pendingCloseReasons.set(el, reason);
+el.removeAttribute('open');
+}
 function openModal(el) {
-    el.setAttribute('open', 'true');
+el.setAttribute('open', 'true');
 }
-/**
- * Handle backdrop click
- */
 function handleBackdropClick(el, event) {
-    event.stopPropagation();
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    // Only close if clicking on dialog backdrop (not content)
-    if (dialog && event.target === dialog) {
-        event.preventDefault();
-        closeModal(el, 'backdrop');
-    }
-}
-/**
- * Handle escape key press
- */
+event.stopPropagation();
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
+if (dialog && event.target === dialog) {
+event.preventDefault();
+closeModal(el, 'backdrop');
+}
+}
 function handleEscapeKey(el, event) {
-    event.stopPropagation();
-    if (event.key === 'Escape') {
-        event.preventDefault();
-        closeModal(el, 'escape');
-    }
-}
-/**
- * Handle close button click
- */
+event.stopPropagation();
+if (event.key === 'Escape') {
+event.preventDefault();
+closeModal(el, 'escape');
+}
+}
 function handleCloseButtonClick(el, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    closeModal(el, 'close-button');
+event.preventDefault();
+event.stopPropagation();
+closeModal(el, 'close-button');
 }
-/**
- * Handle hover enter on modal content (hide close button)
- */
 function handleHoverEnter(_el, event) {
-    const content = event.currentTarget;
-    const dialog = content.closest('.ty-modal-dialog');
-    if (dialog) {
-        const closeButton = dialog.querySelector('.close-button');
-        if (closeButton) {
-            closeButton.classList.add('hide');
-        }
-    }
-}
-/**
- * Handle hover leave on modal content (show close button)
- */
+const content = event.currentTarget;
+const dialog = content.closest('.ty-modal-dialog');
+if (dialog) {
+const closeButton = dialog.querySelector('.close-button');
+if (closeButton) {
+closeButton.classList.add('hide');
+}
+}
+}
 function handleHoverLeave(_el, event) {
-    const content = event.currentTarget;
-    const dialog = content.closest('.ty-modal-dialog');
-    if (dialog) {
-        const closeButton = dialog.querySelector('.close-button');
-        if (closeButton) {
-            closeButton.classList.remove('hide');
-        }
-    }
-}
-/**
- * Setup backdrop click handling
- */
+const content = event.currentTarget;
+const dialog = content.closest('.ty-modal-dialog');
+if (dialog) {
+const closeButton = dialog.querySelector('.close-button');
+if (closeButton) {
+closeButton.classList.remove('hide');
+}
+}
+}
 function setupBackdropClick(el, dialog, enabled) {
-    // Remove existing listener
-    const existingHandler = backdropClickHandlers.get(el);
-    if (existingHandler) {
-        dialog.removeEventListener('click', existingHandler);
-        backdropClickHandlers.delete(el);
-    }
-    // Add new listener if enabled
-    if (enabled) {
-        const handler = (e) => handleBackdropClick(el, e);
-        backdropClickHandlers.set(el, handler);
-        dialog.addEventListener('click', handler);
-    }
-}
-/**
- * Setup escape key handling
- */
+const existingHandler = backdropClickHandlers.get(el);
+if (existingHandler) {
+dialog.removeEventListener('click', existingHandler);
+backdropClickHandlers.delete(el);
+}
+if (enabled) {
+const handler = (e) => handleBackdropClick(el, e);
+backdropClickHandlers.set(el, handler);
+dialog.addEventListener('click', handler);
+}
+}
 function setupEscapeKey(el, dialog, enabled) {
-    // Remove existing listener
-    const existingHandler = escapeKeyHandlers.get(el);
-    if (existingHandler) {
-        dialog.removeEventListener('keydown', existingHandler);
-        escapeKeyHandlers.delete(el);
-    }
-    // Add new listener if enabled
-    if (enabled) {
-        const handler = (e) => handleEscapeKey(el, e);
-        escapeKeyHandlers.set(el, handler);
-        dialog.addEventListener('keydown', handler);
-    }
-}
-/**
- * Setup close button click handling and visibility
- */
+const existingHandler = escapeKeyHandlers.get(el);
+if (existingHandler) {
+dialog.removeEventListener('keydown', existingHandler);
+escapeKeyHandlers.delete(el);
+}
+if (enabled) {
+const handler = (e) => handleEscapeKey(el, e);
+escapeKeyHandlers.set(el, handler);
+dialog.addEventListener('keydown', handler);
+}
+else {
+const handler = (e) => {
+if (e.key === 'Escape')
+e.preventDefault();
+};
+escapeKeyHandlers.set(el, handler);
+dialog.addEventListener('keydown', handler);
+}
+}
 function setupCloseButton(el, dialog, showButton) {
-    const closeButton = dialog.querySelector('.close-button');
-    if (!closeButton)
-        return;
-    // Show or hide close button based on close-on-outside-click setting
-    if (showButton) {
-        closeButton.style.display = '';
-    }
-    else {
-        closeButton.style.display = 'none';
-    }
-    // Remove existing listener
-    const existingHandler = closeButtonHandlers.get(el);
-    if (existingHandler) {
-        closeButton.removeEventListener('click', existingHandler);
-        closeButtonHandlers.delete(el);
-    }
-    // Add click listener only if button is visible
-    if (showButton) {
-        const handler = (e) => handleCloseButtonClick(el, e);
-        closeButtonHandlers.set(el, handler);
-        closeButton.addEventListener('click', handler);
-    }
-}
-/**
- * Setup close button hover handlers (desktop only)
- */
+const closeButton = dialog.querySelector('.close-button');
+if (!closeButton)
+return;
+if (showButton) {
+closeButton.style.display = '';
+}
+else {
+closeButton.style.display = 'none';
+}
+const existingHandler = closeButtonHandlers.get(el);
+if (existingHandler) {
+closeButton.removeEventListener('click', existingHandler);
+closeButtonHandlers.delete(el);
+}
+if (showButton) {
+const handler = (e) => handleCloseButtonClick(el, e);
+closeButtonHandlers.set(el, handler);
+closeButton.addEventListener('click', handler);
+}
+}
 function setupCloseButtonHover(el, dialog) {
-    const modalContent = dialog.querySelector('.modal-content');
-    if (!modalContent)
-        return;
-    // Remove existing listeners
-    const existingEnterHandler = hoverEnterHandlers.get(el);
-    const existingLeaveHandler = hoverLeaveHandlers.get(el);
-    if (existingEnterHandler) {
-        modalContent.removeEventListener('mouseenter', existingEnterHandler);
-        hoverEnterHandlers.delete(el);
-    }
-    if (existingLeaveHandler) {
-        modalContent.removeEventListener('mouseleave', existingLeaveHandler);
-        hoverLeaveHandlers.delete(el);
-    }
-    // Add hover listeners only on desktop
-    if (!isMobile()) {
-        const enterHandler = (e) => handleHoverEnter(el, e);
-        const leaveHandler = (e) => handleHoverLeave(el, e);
-        hoverEnterHandlers.set(el, enterHandler);
-        hoverLeaveHandlers.set(el, leaveHandler);
-        modalContent.addEventListener('mouseenter', enterHandler);
-        modalContent.addEventListener('mouseleave', leaveHandler);
-    }
-}
-// ============================================================================
-// Core Render Function
-// ============================================================================
-/**
- * Render the modal structure and sync state
- */
+const modalContent = dialog.querySelector('.modal-content');
+if (!modalContent)
+return;
+const existingEnterHandler = hoverEnterHandlers.get(el);
+const existingLeaveHandler = hoverLeaveHandlers.get(el);
+if (existingEnterHandler) {
+modalContent.removeEventListener('mouseenter', existingEnterHandler);
+hoverEnterHandlers.delete(el);
+}
+if (existingLeaveHandler) {
+modalContent.removeEventListener('mouseleave', existingLeaveHandler);
+hoverLeaveHandlers.delete(el);
+}
+if (!isMobile()) {
+const enterHandler = (e) => handleHoverEnter(el, e);
+const leaveHandler = (e) => handleHoverLeave(el, e);
+hoverEnterHandlers.set(el, enterHandler);
+hoverLeaveHandlers.set(el, leaveHandler);
+modalContent.addEventListener('mouseenter', enterHandler);
+modalContent.addEventListener('mouseleave', leaveHandler);
+}
+}
 function render(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const attributes = getModalAttributes(el);
-    const dialog = ensureInternalDialog(shadowRoot);
-    const modalId = getModalId(el);
-    // Ensure styles are loaded
-    ensureStyles(shadowRoot, { css: modalStyles, id: 'ty-modal' });
-    // Apply dialog class
-    dialog.className = 'ty-modal-dialog';
-    // Apply backdrop attribute
-    if (attributes.backdrop) {
-        dialog.setAttribute('data-backdrop', 'true');
-    }
-    else {
-        dialog.removeAttribute('data-backdrop');
-    }
-    // Accessible name: <dialog> has an implicit role="dialog" for free, but
-    // nothing gives it a NAME unless the consumer's own slotted heading
-    // happens to get wired up manually. Opt-in `label` attribute (same
-    // pattern as ty-select/ty-date-picker's `label` prop) — unset stays
-    // exactly as before (no regression, just no fix without opting in).
-    const label = el.getAttribute('label');
-    if (label) {
-        dialog.setAttribute('aria-label', label);
-    }
-    else {
-        dialog.removeAttribute('aria-label');
-    }
-    // Setup event handlers
-    setupBackdropClick(el, dialog, attributes.closeOnOutsideClick);
-    setupEscapeKey(el, dialog, attributes.closeOnEscape);
-    setupCloseButton(el, dialog, attributes.closeOnOutsideClick);
-    setupCloseButtonHover(el, dialog);
-    // Sync open state with native dialog
-    if (attributes.open) {
-        if (!dialog.open) {
-            // Lock scroll
-            lockScroll(modalId);
-            // Show dialog
-            if (attributes.backdrop) {
-                dialog.showModal();
-            }
-            else {
-                dialog.show();
-            }
-            // Dispatch open event
-            dispatchModalEvent(el, 'open', {});
-        }
-    }
-    else {
-        if (dialog.open) {
-            // Unlock scroll
-            unlockScroll(modalId);
-            // Close dialog
-            dialog.close();
-            // Dispatch close event
-            dispatchModalEvent(el, 'close', {
-                reason: 'programmatic'
-            });
-        }
-    }
-    // Handle dialog's native close event.
-    //
-    // Child components (ty-select, ty-date-picker) dispatch a
-    // bubbling+composed `close` custom event when their popups close. Those
-    // events bubble up to *this* dialog and trigger `onclose` too — without this
-    // guard, opening a dropdown inside a modal and closing the dropdown would
-    // close the whole modal. The native dialog `close` event is not composed
-    // and targets the dialog itself, so we only react when `event.target` is
-    // the dialog.
-    dialog.onclose = (event) => {
-        if (event.target !== dialog)
-            return;
-        // Ensure scroll is unlocked
-        unlockScroll(modalId);
-        // Sync the open attribute
-        if (el.hasAttribute('open')) {
-            el.removeAttribute('open');
-            dispatchModalEvent(el, 'close', {
-                reason: 'native',
-                returnValue: dialog.returnValue || undefined
-            });
-        }
-    };
-}
-/**
- * Cleanup all resources when component disconnects
- */
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const attributes = getModalAttributes(el);
+const dialog = ensureInternalDialog(shadowRoot);
+const modalId = getModalId(el);
+ensureStyles(shadowRoot, { css: modalStyles, id: 'ty-modal' });
+dialog.className = 'ty-modal-dialog';
+if (attributes.backdrop) {
+dialog.setAttribute('data-backdrop', 'true');
+}
+else {
+dialog.removeAttribute('data-backdrop');
+}
+const label = el.getAttribute('label');
+if (label) {
+dialog.setAttribute('aria-label', label);
+}
+else {
+dialog.removeAttribute('aria-label');
+}
+setupBackdropClick(el, dialog, attributes.closeOnOutsideClick);
+setupEscapeKey(el, dialog, attributes.closeOnEscape);
+dialog.oncancel = (event) => {
+event.preventDefault();
+if (getModalAttributes(el).closeOnEscape)
+closeModal(el, 'escape');
+};
+setupCloseButton(el, dialog, attributes.closeOnOutsideClick);
+setupCloseButtonHover(el, dialog);
+if (attributes.open) {
+if (!dialog.open) {
+lockScroll(modalId);
+if (attributes.backdrop) {
+dialog.showModal();
+}
+else {
+dialog.show();
+}
+syncBackdropZoom();
+dispatchModalEvent(el, 'open', {});
+}
+}
+else {
+if (dialog.open) {
+unlockScroll(modalId);
+dialog.close();
+syncBackdropZoom();
+const reason = pendingCloseReasons.get(el) ?? 'programmatic';
+pendingCloseReasons.delete(el);
+dispatchModalEvent(el, 'close', { reason });
+}
+}
+dialog.onclose = (event) => {
+if (event.target !== dialog)
+return;
+unlockScroll(modalId);
+if (el.hasAttribute('open')) {
+el.removeAttribute('open');
+dispatchModalEvent(el, 'close', {
+reason: 'native',
+returnValue: dialog.returnValue || undefined
+});
+}
+syncBackdropZoom();
+};
+}
+function syncBackdropZoom() {
+const anyOpen = Array.from(document.querySelectorAll('ty-modal[open][backdrop-zoom], ty-dialog[open][backdrop-zoom]')).some((m) => {
+const v = m.getAttribute('backdrop-zoom').toLowerCase().trim();
+return v !== 'false' && v !== '0';
+});
+document.documentElement.classList.toggle('ty-modal-zoom', anyOpen);
+}
 function cleanup(el) {
-    const modalId = modalIds.get(el);
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    // Force unlock scroll if modal removed while open
-    if (modalId) {
-        unlockScroll(modalId);
-        modalIds.delete(el);
-    }
-    if (!dialog)
-        return;
-    // Cleanup backdrop click handler
-    const backdropHandler = backdropClickHandlers.get(el);
-    if (backdropHandler) {
-        dialog.removeEventListener('click', backdropHandler);
-        backdropClickHandlers.delete(el);
-    }
-    // Cleanup escape key handler
-    const escapeHandler = escapeKeyHandlers.get(el);
-    if (escapeHandler) {
-        dialog.removeEventListener('keydown', escapeHandler);
-        escapeKeyHandlers.delete(el);
-    }
-    // Cleanup close button handler
-    const closeButton = dialog.querySelector('.close-button');
-    if (closeButton) {
-        const closeHandler = closeButtonHandlers.get(el);
-        if (closeHandler) {
-            closeButton.removeEventListener('click', closeHandler);
-            closeButtonHandlers.delete(el);
-        }
-    }
-    // Cleanup hover handlers
-    const modalContent = dialog.querySelector('.modal-content');
-    if (modalContent) {
-        const enterHandler = hoverEnterHandlers.get(el);
-        const leaveHandler = hoverLeaveHandlers.get(el);
-        if (enterHandler) {
-            modalContent.removeEventListener('mouseenter', enterHandler);
-            hoverEnterHandlers.delete(el);
-        }
-        if (leaveHandler) {
-            modalContent.removeEventListener('mouseleave', leaveHandler);
-            hoverLeaveHandlers.delete(el);
-        }
-    }
-}
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyModal Web Component
- */
+const modalId = modalIds.get(el);
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
+if (modalId) {
+unlockScroll(modalId);
+modalIds.delete(el);
+}
+syncBackdropZoom();
+if (!dialog)
+return;
+const backdropHandler = backdropClickHandlers.get(el);
+if (backdropHandler) {
+dialog.removeEventListener('click', backdropHandler);
+backdropClickHandlers.delete(el);
+}
+const escapeHandler = escapeKeyHandlers.get(el);
+if (escapeHandler) {
+dialog.removeEventListener('keydown', escapeHandler);
+escapeKeyHandlers.delete(el);
+}
+const closeButton = dialog.querySelector('.close-button');
+if (closeButton) {
+const closeHandler = closeButtonHandlers.get(el);
+if (closeHandler) {
+closeButton.removeEventListener('click', closeHandler);
+closeButtonHandlers.delete(el);
+}
+}
+const modalContent = dialog.querySelector('.modal-content');
+if (modalContent) {
+const enterHandler = hoverEnterHandlers.get(el);
+const leaveHandler = hoverLeaveHandlers.get(el);
+if (enterHandler) {
+modalContent.removeEventListener('mouseenter', enterHandler);
+hoverEnterHandlers.delete(el);
+}
+if (leaveHandler) {
+modalContent.removeEventListener('mouseleave', leaveHandler);
+hoverLeaveHandlers.delete(el);
+}
+}
+}
 export class TyModal extends HTMLElement {
-    /** Observed attributes */
-    static get observedAttributes() {
-        return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'label'];
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        render(this);
-        // Add public API methods
-        this.show = () => openModal(this);
-        this.hide = (opts) => closeModal(this, 'programmatic', opts);
-    }
-    disconnectedCallback() {
-        cleanup(this);
-    }
-    attributeChangedCallback(_name, _oldValue, _newValue) {
-        // React (and any framework that conditionally mounts an already-open
-        // modal) sets initial attributes BEFORE inserting the element into the
-        // document, and showModal() on a disconnected <dialog> throws
-        // InvalidStateError. Defer — connectedCallback render()s on insertion
-        // and applies `open` then.
-        if (!this.isConnected)
-            return;
-        // Re-render on attribute changes
-        render(this);
-    }
-}
-// Register the custom element
+static get observedAttributes() {
+return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'prevent-outside-click', 'prevent-escape', 'label'];
+}
+get open() { return parseBoolAttr(this, 'open'); }
+set open(v) { v ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
+get backdrop() { return getModalAttributes(this).backdrop; }
+set backdrop(v) { this.setAttribute('backdrop', String(!!v)); }
+get closeOnOutsideClick() { return getModalAttributes(this).closeOnOutsideClick; }
+set closeOnOutsideClick(v) { this.setAttribute('close-on-outside-click', String(!!v)); }
+get closeOnEscape() { return getModalAttributes(this).closeOnEscape; }
+set closeOnEscape(v) { this.setAttribute('close-on-escape', String(!!v)); }
+get preventOutsideClick() { return parseBoolAttr(this, 'prevent-outside-click'); }
+set preventOutsideClick(v) {
+v ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
+}
+get preventEscape() { return parseBoolAttr(this, 'prevent-escape'); }
+set preventEscape(v) {
+v ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
+}
+constructor() {
+super();
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+render(this);
+this.show = () => openModal(this);
+this.hide = (opts) => closeModal(this, 'programmatic', opts);
+}
+disconnectedCallback() {
+cleanup(this);
+}
+attributeChangedCallback(_name, _oldValue, _newValue) {
+if (!this.isConnected)
+return;
+render(this);
+}
+}
 if (!customElements.get('ty-modal')) {
-    customElements.define('ty-modal', TyModal);
+customElements.define('ty-modal', TyModal);
 }
-// Also exposed as ty-dialog — the platform/ARIA name (wraps native <dialog>).
-// A constructor can only register once, hence the subclass.
 if (!customElements.get('ty-dialog')) {
-    customElements.define('ty-dialog', class TyDialog extends TyModal {
-    });
+customElements.define('ty-dialog', class TyDialog extends TyModal {
+});
 }
-//# sourceMappingURL=modal.js.map