tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/modal.js

@@ -10,369 +10,369 @@ 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>`;
 function parseBoolAttr(el, name) {
-    if (!el.hasAttribute(name)) {
-        return false;
-    }
-    const value = el.getAttribute(name);
-    if (value !== null && value.toLowerCase() === 'false') {
-        return false;
-    }
-    return true;
+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: 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,
-    };
+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');
 }
 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;
+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;
 }
 function dispatchModalEvent(el, eventType, detail) {
-    const event = new CustomEvent(eventType, {
-        detail,
-        cancelable: true,
-    });
-    el.dispatchEvent(event);
+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');
-        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;
+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;
-    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');
+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');
 }
 function handleBackdropClick(el, event) {
-    event.stopPropagation();
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    if (dialog && event.target === dialog) {
-        event.preventDefault();
-        closeModal(el, 'backdrop');
-    }
+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');
-    }
+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');
 }
 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');
-        }
-    }
+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');
-        }
-    }
+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) {
-    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);
-    }
+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) {
-    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);
-    }
+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;
-    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);
-    }
+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;
-    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);
-    }
+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);
-    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();
-    };
+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);
+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;
-    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);
-        }
-    }
+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 {
-    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);
-    }
+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);
 }
 if (!customElements.get('ty-dialog')) {
-    customElements.define('ty-dialog', class TyDialog extends TyModal {
-    });
+customElements.define('ty-dialog', class TyDialog extends TyModal {
+});
 }