@magic-spells/dialog-panel 0.2.3 → 1.0.0

package/dist/dialog-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-panel.js","sources":["../node_modules/@magic-spells/focus-trap/dist/focus-trap.esm.js","../src/dialog-panel.js"],"sourcesContent":["/**\n * Retrieves all focusable elements within a given container.\n *\n * @param {HTMLElement} container - The container element to search for focusable elements.\n * @returns {HTMLElement[]} An array of focusable elements found within the container.\n */\nconst getFocusableElements = (container) => {\n\tconst focusableSelectors =\n\t\t'summary, a[href], button:not(:disabled), [tabindex]:not([tabindex^=\"-\"]):not(focus-trap-start):not(focus-trap-end), [draggable], area, input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), object, iframe';\n\treturn Array.from(container.querySelectorAll(focusableSelectors));\n};\n\nclass FocusTrap extends HTMLElement {\n\t/** @type {boolean} Indicates whether the styles have been injected into the DOM. */\n\tstatic styleInjected = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.trapStart = null;\n\t\tthis.trapEnd = null;\n\n\t\t// Inject styles only once, when the first FocusTrap instance is created.\n\t\tif (!FocusTrap.styleInjected) {\n\t\t\tthis.injectStyles();\n\t\t\tFocusTrap.styleInjected = true;\n\t\t}\n\t}\n\n\t/**\n\t * Injects necessary styles for the focus trap into the document's head.\n\t * This ensures that focus-trap-start and focus-trap-end elements are hidden.\n\t */\n\tinjectStyles() {\n\t\tconst style = document.createElement('style');\n\t\tstyle.textContent = `\n      focus-trap-start,\n      focus-trap-end {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        border: 0;\n        clip: rect(0, 0, 0, 0);\n        overflow: hidden;\n        white-space: nowrap;\n      }\n    `;\n\t\tdocument.head.appendChild(style);\n\t}\n\n\t/**\n\t * Called when the element is connected to the DOM.\n\t * Sets up the focus trap and adds the keydown event listener.\n\t */\n\tconnectedCallback() {\n\t\tthis.setupTrap();\n\t\tthis.addEventListener('keydown', this.handleKeyDown);\n\t}\n\n\t/**\n\t * Called when the element is disconnected from the DOM.\n\t * Removes the keydown event listener.\n\t */\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('keydown', this.handleKeyDown);\n\t}\n\n\t/**\n\t * Sets up the focus trap by adding trap start and trap end elements.\n\t * Focuses the trap start element to initiate the focus trap.\n\t */\n\tsetupTrap() {\n\t\t// check to see it there are any focusable children\n\t\tconst focusableElements = getFocusableElements(this);\n\t\t// exit if there aren't any\n\t\tif (focusableElements.length === 0) return;\n\n\t\t// create trap start and end elements\n\t\tthis.trapStart = document.createElement('focus-trap-start');\n\t\tthis.trapEnd = document.createElement('focus-trap-end');\n\n\t\t// add to DOM\n\t\tthis.prepend(this.trapStart);\n\t\tthis.append(this.trapEnd);\n\t}\n\n\t/**\n\t * Handles the keydown event. If the Escape key is pressed, the focus trap is exited.\n\t *\n\t * @param {KeyboardEvent} e - The keyboard event object.\n\t */\n\thandleKeyDown = (e) => {\n\t\tif (e.key === 'Escape') {\n\t\t\te.preventDefault();\n\t\t\tthis.exitTrap();\n\t\t}\n\t};\n\n\t/**\n\t * Exits the focus trap by hiding the current container and shifting focus\n\t * back to the trigger element that opened the trap.\n\t */\n\texitTrap() {\n\t\tconst container = this.closest('[aria-hidden=\"false\"]');\n\t\tif (!container) return;\n\n\t\tcontainer.setAttribute('aria-hidden', 'true');\n\n\t\tconst trigger = document.querySelector(\n\t\t\t`[aria-expanded=\"true\"][aria-controls=\"${container.id}\"]`\n\t\t);\n\t\tif (trigger) {\n\t\t\ttrigger.setAttribute('aria-expanded', 'false');\n\t\t\ttrigger.focus();\n\t\t}\n\t}\n}\n\nclass FocusTrapStart extends HTMLElement {\n\t/**\n\t * Called when the element is connected to the DOM.\n\t * Sets the tabindex and adds the focus event listener.\n\t */\n\tconnectedCallback() {\n\t\tthis.setAttribute('tabindex', '0');\n\t\tthis.addEventListener('focus', this.handleFocus);\n\t}\n\n\t/**\n\t * Called when the element is disconnected from the DOM.\n\t * Removes the focus event listener.\n\t */\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('focus', this.handleFocus);\n\t}\n\n\t/**\n\t * Handles the focus event. If focus moves backwards from the first focusable element,\n\t * it is cycled to the last focusable element, and vice versa.\n\t *\n\t * @param {FocusEvent} e - The focus event object.\n\t */\n\thandleFocus = (e) => {\n\t\tconst trap = this.closest('focus-trap');\n\t\tconst focusableElements = getFocusableElements(trap);\n\n\t\tif (focusableElements.length === 0) return;\n\n\t\tconst firstElement = focusableElements[0];\n\t\tconst lastElement =\n\t\t\tfocusableElements[focusableElements.length - 1];\n\n\t\tif (e.relatedTarget === firstElement) {\n\t\t\tlastElement.focus();\n\t\t} else {\n\t\t\tfirstElement.focus();\n\t\t}\n\t};\n}\n\nclass FocusTrapEnd extends HTMLElement {\n\t/**\n\t * Called when the element is connected to the DOM.\n\t * Sets the tabindex and adds the focus event listener.\n\t */\n\tconnectedCallback() {\n\t\tthis.setAttribute('tabindex', '0');\n\t\tthis.addEventListener('focus', this.handleFocus);\n\t}\n\n\t/**\n\t * Called when the element is disconnected from the DOM.\n\t * Removes the focus event listener.\n\t */\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('focus', this.handleFocus);\n\t}\n\n\t/**\n\t * Handles the focus event. When the trap end is focused, focus is shifted back to the trap start.\n\t */\n\thandleFocus = () => {\n\t\tconst trap = this.closest('focus-trap');\n\t\tconst trapStart = trap.querySelector('focus-trap-start');\n\t\ttrapStart.focus();\n\t};\n}\n\ncustomElements.define('focus-trap', FocusTrap);\ncustomElements.define('focus-trap-start', FocusTrapStart);\ncustomElements.define('focus-trap-end', FocusTrapEnd);\n//# sourceMappingURL=focus-trap.esm.js.map\n","import './index.scss';\nimport '@magic-spells/focus-trap';\n\n/**\n * Custom element that creates an accessible modal dialog panel with focus management\n * @extends HTMLElement\n */\nclass DialogPanel extends HTMLElement {\n\t#handleTransitionEnd;\n\t#scrollPosition = 0;\n\n\t/**\n\t * Clean up event listeners when component is removed from DOM\n\t */\n\tdisconnectedCallback() {\n\t\tconst _ = this;\n\t\tif (_.contentPanel) {\n\t\t\t_.contentPanel.removeEventListener(\n\t\t\t\t'transitionend',\n\t\t\t\t_.#handleTransitionEnd\n\t\t\t);\n\t\t}\n\n\t\t// Ensure body scroll is restored if component is removed while open\n\t\tdocument.body.classList.remove('overflow-hidden');\n\t\tthis.#restoreScroll();\n\t}\n\n\t/**\n\t * Saves current scroll position and locks body scrolling\n\t * @private\n\t */\n\t#lockScroll() {\n\t\tconst _ = this;\n\t\t// Save current scroll position\n\t\t_.#scrollPosition = window.pageYOffset;\n\n\t\t// Apply fixed position to body\n\t\tdocument.body.classList.add('overflow-hidden');\n\t\tdocument.body.style.top = `-${_.#scrollPosition}px`;\n\t}\n\n\t/**\n\t * Restores scroll position when dialog is closed\n\t * @private\n\t */\n\t#restoreScroll() {\n\t\tconst _ = this;\n\t\t// Remove fixed positioning\n\t\tdocument.body.classList.remove('overflow-hidden');\n\t\tdocument.body.style.removeProperty('top');\n\n\t\t// Restore scroll position\n\t\twindow.scrollTo(0, _.#scrollPosition);\n\t}\n\t/**\n\t * Initializes the dialog panel, sets up focus trap and overlay\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tconst _ = this;\n\t\t_.id = _.getAttribute('id');\n\t\t_.setAttribute('role', 'dialog');\n\t\t_.setAttribute('aria-modal', 'true');\n\t\t_.setAttribute('aria-hidden', 'true');\n\n\t\t_.contentPanel = _.querySelector('dialog-content');\n\t\t_.focusTrap = document.createElement('focus-trap');\n\t\t_.triggerEl = null;\n\n\t\t// Create a handler for transition end events\n\t\t_.#handleTransitionEnd = (e) => {\n\t\t\tif (\n\t\t\t\te.propertyName === 'opacity' &&\n\t\t\t\t_.getAttribute('aria-hidden') === 'true'\n\t\t\t) {\n\t\t\t\t_.contentPanel.classList.add('hidden');\n\n\t\t\t\t// Dispatch afterHide event - dialog has completed its transition\n\t\t\t\t_.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('afterHide', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tdetail: { triggerElement: _.triggerEl },\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\t// Ensure we have labelledby and describedby references\n\t\tif (!_.getAttribute('aria-labelledby')) {\n\t\t\tconst heading = _.querySelector('h1, h2, h3');\n\t\t\tif (heading && !heading.id) {\n\t\t\t\theading.id = `${_.id}-title`;\n\t\t\t}\n\t\t\tif (heading?.id) {\n\t\t\t\t_.setAttribute('aria-labelledby', heading.id);\n\t\t\t}\n\t\t}\n\n\t\t_.contentPanel.parentNode.insertBefore(\n\t\t\t_.focusTrap,\n\t\t\t_.contentPanel\n\t\t);\n\t\t_.focusTrap.appendChild(_.contentPanel);\n\n\t\t_.focusTrap.setupTrap();\n\n\t\t// Add modal overlay\n\t\t_.prepend(document.createElement('dialog-overlay'));\n\t\t_.#bindUI();\n\t\t_.#bindKeyboard();\n\t}\n\n\t/**\n\t * Binds click events for showing and hiding the dialog\n\t * @private\n\t */\n\t#bindUI() {\n\t\tconst _ = this;\n\n\t\t// Handle trigger buttons\n\t\tdocument.addEventListener('click', (e) => {\n\t\t\tconst trigger = e.target.closest(`[aria-controls=\"${_.id}\"]`);\n\t\t\tif (!trigger) return;\n\n\t\t\tif (trigger.getAttribute('data-prevent-default') === 'true') {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\n\t\t\t_.show(trigger);\n\t\t});\n\n\t\t// Handle close buttons\n\t\t_.addEventListener('click', (e) => {\n\t\t\tif (!e.target.closest('[data-action=\"hide-dialog\"]')) return;\n\t\t\t_.hide();\n\t\t});\n\n\t\t// Add transition end listener\n\t\t_.contentPanel.addEventListener(\n\t\t\t'transitionend',\n\t\t\t_.#handleTransitionEnd\n\t\t);\n\t}\n\n\t/**\n\t * Binds keyboard events for accessibility\n\t * @private\n\t */\n\t#bindKeyboard() {\n\t\tthis.addEventListener('keydown', (e) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tthis.hide();\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Shows the dialog and traps focus within it\n\t * @param {HTMLElement} [triggerEl=null] - The element that triggered the dialog\n\t * @fires DialogPanel#beforeShow - Fired before the dialog starts to show\n\t * @fires DialogPanel#show - Fired when the dialog has been shown\n\t * @returns {boolean} False if the show was prevented by a beforeShow event handler\n\t */\n\tshow(triggerEl = null) {\n\t\tconst _ = this;\n\t\t_.triggerEl = triggerEl || false;\n\n\t\t// Dispatch beforeShow event - allows preventing the dialog from opening\n\t\tconst beforeShowEvent = new CustomEvent('beforeShow', {\n\t\t\tbubbles: true,\n\t\t\tcancelable: true,\n\t\t\tdetail: { triggerElement: _.triggerEl },\n\t\t});\n\n\t\tconst showAllowed = _.dispatchEvent(beforeShowEvent);\n\n\t\t// If event was canceled (preventDefault was called), don't show the dialog\n\t\tif (!showAllowed) return false;\n\n\t\t// Remove the hidden class first to ensure content is rendered\n\t\t_.contentPanel.classList.remove('hidden');\n\n\t\t// Give the browser a moment to process before starting animation\n\t\trequestAnimationFrame(() => {\n\t\t\t// Update ARIA states\n\t\t\t_.setAttribute('aria-hidden', 'false');\n\t\t\tif (_.triggerEl) {\n\t\t\t\t_.triggerEl.setAttribute('aria-expanded', 'true');\n\t\t\t}\n\n\t\t\t// Lock body scrolling and save scroll position\n\t\t\t_.#lockScroll();\n\n\t\t\t// Focus management\n\t\t\tconst firstFocusable = _.querySelector(\n\t\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\t\t\t);\n\t\t\tif (firstFocusable) {\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tfirstFocusable.focus();\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Dispatch show event - dialog is now visible\n\t\t\t_.dispatchEvent(\n\t\t\t\tnew CustomEvent('show', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { triggerElement: _.triggerEl },\n\t\t\t\t})\n\t\t\t);\n\t\t});\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Hides the dialog and restores focus\n\t * @fires DialogPanel#beforeHide - Fired before the dialog starts to hide\n\t * @fires DialogPanel#hide - Fired when the dialog has started hiding (transition begins)\n\t * @fires DialogPanel#afterHide - Fired when the dialog has completed its hide transition\n\t * @returns {boolean} False if the hide was prevented by a beforeHide event handler\n\t */\n\thide() {\n\t\tconst _ = this;\n\n\t\t// Dispatch beforeHide event - allows preventing the dialog from closing\n\t\tconst beforeHideEvent = new CustomEvent('beforeHide', {\n\t\t\tbubbles: true,\n\t\t\tcancelable: true,\n\t\t\tdetail: { triggerElement: _.triggerEl },\n\t\t});\n\n\t\tconst hideAllowed = _.dispatchEvent(beforeHideEvent);\n\n\t\t// If event was canceled (preventDefault was called), don't hide the dialog\n\t\tif (!hideAllowed) return false;\n\n\t\t// Restore body scroll and scroll position\n\t\t_.#restoreScroll();\n\n\t\t// Update ARIA states\n\t\tif (_.triggerEl) {\n\t\t\t// remove focus from modal panel first\n\t\t\t_.triggerEl.focus();\n\t\t\t// mark trigger as no longer expanded\n\t\t\t_.triggerEl.setAttribute('aria-expanded', 'false');\n\t\t}\n\n\t\t// Set aria-hidden to start transition\n\t\t// The transitionend event handler will add display:none when complete\n\t\t_.setAttribute('aria-hidden', 'true');\n\n\t\t// Dispatch hide event - dialog is now starting to hide\n\t\t_.dispatchEvent(\n\t\t\tnew CustomEvent('hide', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { triggerElement: _.triggerEl },\n\t\t\t})\n\t\t);\n\n\t\treturn true;\n\t}\n}\n\n/**\n * Custom element that creates a clickable overlay for the dialog\n * @extends HTMLElement\n */\nclass DialogOverlay extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable\n\t\tthis.setAttribute('aria-hidden', 'true');\n\t\tthis.dialogPanel = this.closest('dialog-panel');\n\t\tthis.#bindUI();\n\t}\n\n\t#bindUI() {\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.dialogPanel.hide();\n\t\t});\n\t}\n}\n\n/**\n * Custom element that wraps the content of the dialog\n * @extends HTMLElement\n */\nclass DialogContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.setAttribute('role', 'document'); // Optional: helps with document structure\n\t}\n}\n\nif (!customElements.get('dialog-panel')) {\n\tcustomElements.define('dialog-panel', DialogPanel);\n}\nif (!customElements.get('dialog-overlay')) {\n\tcustomElements.define('dialog-overlay', DialogOverlay);\n}\nif (!customElements.get('dialog-content')) {\n\tcustomElements.define('dialog-content', DialogContent);\n}\n\nexport { DialogPanel, DialogOverlay, DialogContent };\nexport default DialogPanel;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"dialog-panel.js","sources":["../src/dialog-panel.js"],"sourcesContent":["import './dialog-panel.css';\n\n/**\n * DialogPanel - A lightweight web component wrapper for native <dialog> elements\n * with state-driven animations.\n *\n * @extends HTMLElement\n *\n * @property {string} state - Current state: 'hidden' | 'showing' | 'shown' | 'hiding'\n * @property {HTMLDialogElement} dialog - Reference to inner <dialog> element\n * @property {boolean} isOpen - True if state is 'showing' or 'shown'\n * @property {HTMLElement|null} triggerElement - Element that triggered current action\n *\n * @fires beforeShow - Fired before showing starts (cancelable)\n * @fires shown - Fired after show animation completes\n * @fires beforeHide - Fired before hiding starts (cancelable)\n * @fires hidden - Fired after hide animation completes\n */\nclass DialogPanel extends HTMLElement {\n\t// Private fields\n\t#state = 'hidden';\n\t#triggerElement = null;\n\t#dialog = null;\n\t#result = null;\n\n\t// Event handler references for cleanup\n\t#handlers = {\n\t\tclick: null,\n\t\tdialogClick: null,\n\t\tcancel: null,\n\t};\n\n\t// Animation cleanup references\n\t#pendingRAF = null;\n\t#pendingTimeout = null;\n\n\t// Fallback timeout for transitionend (in ms)\n\tstatic TRANSITION_FALLBACK_TIMEOUT = 500;\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\n\t\t// Find inner dialog element\n\t\t_.#dialog = _.querySelector('dialog');\n\n\t\tif (!_.#dialog) {\n\t\t\tconsole.warn(\n\t\t\t\t'DialogPanel: No <dialog> element found inside <dialog-panel>'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\t// Auto-create dialog-backdrop if not present\n\t\tif (!_.querySelector('dialog-backdrop')) {\n\t\t\tconst backdrop = document.createElement('dialog-backdrop');\n\t\t\t_.insertBefore(backdrop, _.firstChild);\n\t\t}\n\n\t\t// Set initial state attribute\n\t\t_.#setState('hidden');\n\n\t\t// Bind event handlers\n\t\t_.#bindEvents();\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst _ = this;\n\n\t\t// Cancel pending animations\n\t\tif (_.#pendingRAF) {\n\t\t\tcancelAnimationFrame(_.#pendingRAF);\n\t\t\t_.#pendingRAF = null;\n\t\t}\n\t\tif (_.#pendingTimeout) {\n\t\t\tclearTimeout(_.#pendingTimeout);\n\t\t\t_.#pendingTimeout = null;\n\t\t}\n\n\t\t// Clean up event listeners\n\t\tif (_.#handlers.click) {\n\t\t\t_.removeEventListener('click', _.#handlers.click);\n\t\t}\n\t\tif (_.#dialog) {\n\t\t\tif (_.#handlers.dialogClick) {\n\t\t\t\t_.#dialog.removeEventListener(\n\t\t\t\t\t'click',\n\t\t\t\t\t_.#handlers.dialogClick\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (_.#handlers.cancel) {\n\t\t\t\t_.#dialog.removeEventListener('cancel', _.#handlers.cancel);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Bind event listeners for close buttons, backdrop, and escape key\n\t * @private\n\t */\n\t#bindEvents() {\n\t\tconst _ = this;\n\n\t\t// Handle close buttons with data-action-hide-dialog\n\t\t_.#handlers.click = (e) => {\n\t\t\tconst trigger = e.target.closest('[data-action-hide-dialog]');\n\t\t\tif (trigger) {\n\t\t\t\te.stopPropagation();\n\t\t\t\t_.hide(trigger);\n\t\t\t}\n\t\t};\n\t\t_.addEventListener('click', _.#handlers.click);\n\n\t\t// Handle backdrop click - detect clicks outside dialog bounds\n\t\t// This works because clicks on ::backdrop still fire on the dialog element\n\t\t_.#handlers.dialogClick = (e) => {\n\t\t\tconst rect = _.#dialog.getBoundingClientRect();\n\t\t\tconst clickedOutside =\n\t\t\t\te.clientX < rect.left ||\n\t\t\t\te.clientX > rect.right ||\n\t\t\t\te.clientY < rect.top ||\n\t\t\t\te.clientY > rect.bottom;\n\t\t\tif (clickedOutside) {\n\t\t\t\te.stopPropagation();\n\t\t\t\t_.hide();\n\t\t\t}\n\t\t};\n\t\t_.#dialog.addEventListener('click', _.#handlers.dialogClick);\n\n\t\t// Handle escape key - intercept native cancel and animate close\n\t\t_.#handlers.cancel = (e) => {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\t_.hide();\n\t\t};\n\t\t_.#dialog.addEventListener('cancel', _.#handlers.cancel);\n\t}\n\n\t/**\n\t * Show the dialog with animation\n\t * @param {HTMLElement} [triggerEl=null] - The element that triggered the show\n\t * @returns {boolean} False if show was prevented via beforeShow event\n\t */\n\tshow(triggerEl = null) {\n\t\tconst _ = this;\n\n\t\t// Check if already showing/shown\n\t\tif (_.#state === 'showing' || _.#state === 'shown') return true;\n\n\t\t// If currently hiding, ignore (let hide complete first)\n\t\tif (_.#state === 'hiding') return false;\n\n\t\t// Store trigger element for focus return later\n\t\t_.#triggerElement = triggerEl || null;\n\n\t\t// Fire beforeShow (cancelable)\n\t\tif (!_.#emit('beforeShow', { cancelable: true })) return false;\n\n\t\t// Set state to 'showing' and open native dialog\n\t\t_.#setState('showing');\n\t\t_.#dialog.showModal();\n\n\t\t// Double RAF ensures browser has painted the 'showing' state\n\t\t// before we transition to 'shown'\n\t\t_.#pendingRAF = requestAnimationFrame(() => {\n\t\t\t_.#pendingRAF = requestAnimationFrame(() => {\n\t\t\t\t_.#pendingRAF = null;\n\t\t\t\t_.#setState('shown');\n\n\t\t\t\t// Wait for transition to complete before firing 'shown' event\n\t\t\t\t_.#waitForTransition(() => {\n\t\t\t\t\t_.#emit('shown');\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Hide the dialog with animation\n\t * @param {HTMLElement} [triggerEl=null] - The element that triggered the hide\n\t * @returns {boolean} False if hide was prevented via beforeHide event\n\t */\n\thide(triggerEl = null) {\n\t\tconst _ = this;\n\n\t\t// Check if already hiding/hidden\n\t\tif (_.#state === 'hiding' || _.#state === 'hidden') return true;\n\n\t\t// If currently showing, ignore (let show complete first)\n\t\tif (_.#state === 'showing') return false;\n\n\t\t// Capture result from trigger element\n\t\t_.#result = triggerEl?.dataset?.result ?? null;\n\n\t\t// Fire beforeHide (cancelable)\n\t\tif (\n\t\t\t!_.#emit('beforeHide', {\n\t\t\t\tcancelable: true,\n\t\t\t\tresult: _.#result,\n\t\t\t\ttriggerElement: triggerEl,\n\t\t\t})\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Set state to 'hiding' - this triggers CSS exit animation\n\t\t_.#setState('hiding');\n\n\t\t// Wait for transition to complete\n\t\t_.#waitForTransition(() => {\n\t\t\t_.#dialog.close();\n\t\t\t_.#setState('hidden');\n\t\t\t_.#emit('hidden', {\n\t\t\t\tresult: _.#result,\n\t\t\t\ttriggerElement: triggerEl,\n\t\t\t});\n\n\t\t\t// Return focus to trigger element\n\t\t\tif (_.#triggerElement) _.#triggerElement.focus();\n\n\t\t\t// Clean up\n\t\t\t_.#triggerElement = null;\n\t\t\t_.#result = null;\n\t\t});\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Wait for CSS transition to complete with fallback timeout\n\t * @param {Function} callback - Called when transition completes\n\t * @private\n\t */\n\t#waitForTransition(callback) {\n\t\tconst _ = this;\n\t\tlet called = false;\n\n\t\tconst done = () => {\n\t\t\tif (called) return;\n\t\t\tcalled = true;\n\t\t\t_.#dialog.removeEventListener('transitionend', onTransitionEnd);\n\t\t\tif (_.#pendingTimeout) {\n\t\t\t\tclearTimeout(_.#pendingTimeout);\n\t\t\t\t_.#pendingTimeout = null;\n\t\t\t}\n\t\t\tcallback();\n\t\t};\n\n\t\tconst onTransitionEnd = (e) => {\n\t\t\tif (e.target === _.#dialog) done();\n\t\t};\n\n\t\t_.#dialog.addEventListener('transitionend', onTransitionEnd);\n\n\t\t_.#pendingTimeout = setTimeout(\n\t\t\tdone,\n\t\t\tDialogPanel.TRANSITION_FALLBACK_TIMEOUT\n\t\t);\n\t}\n\n\t/**\n\t * Set the component state\n\t * @param {string} newState - The new state\n\t * @private\n\t */\n\t#setState(newState) {\n\t\tthis.#state = newState;\n\t\tthis.setAttribute('state', newState);\n\t}\n\n\t/**\n\t * Emit a custom event\n\t * @param {string} name - Event name\n\t * @param {Object} options - Event options\n\t * @returns {boolean} False if event was cancelled\n\t * @private\n\t */\n\t#emit(name, options = {}) {\n\t\tconst _ = this;\n\t\tconst { cancelable = false, ...detail } = options;\n\n\t\tconst event = new CustomEvent(name, {\n\t\t\tbubbles: true,\n\t\t\tcomposed: true,\n\t\t\tcancelable,\n\t\t\tdetail: {\n\t\t\t\ttriggerElement: _.#triggerElement,\n\t\t\t\tresult: _.#result,\n\t\t\t\tstate: _.#state,\n\t\t\t\t...detail,\n\t\t\t},\n\t\t});\n\n\t\treturn _.dispatchEvent(event);\n\t}\n\n\t// Read-only properties\n\tget state() {\n\t\treturn this.#state;\n\t}\n\tget dialog() {\n\t\treturn this.#dialog;\n\t}\n\tget isOpen() {\n\t\treturn this.#state === 'showing' || this.#state === 'shown';\n\t}\n\tget triggerElement() {\n\t\treturn this.#triggerElement;\n\t}\n}\n\n/**\n * DialogBackdrop - A custom backdrop element that animates with the dialog-panel state.\n * Use this instead of native ::backdrop for consistent cross-browser animations.\n *\n * @extends HTMLElement\n */\nclass DialogBackdrop extends HTMLElement {\n\t#panel = null;\n\t#handlers = {\n\t\tclick: null,\n\t};\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\n\t\t// Find parent dialog-panel\n\t\t_.#panel = _.closest('dialog-panel');\n\n\t\tif (!_.#panel) {\n\t\t\tconsole.warn(\n\t\t\t\t'DialogBackdrop: Must be inside a <dialog-panel> element'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\t// Handle click to close\n\t\t_.#handlers.click = () => {\n\t\t\t_.#panel.hide();\n\t\t};\n\t\t_.addEventListener('click', _.#handlers.click);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst _ = this;\n\t\tif (_.#handlers.click) {\n\t\t\t_.removeEventListener('click', _.#handlers.click);\n\t\t}\n\t}\n}\n\n// Register the custom elements\n// Note: dialog-backdrop must be defined BEFORE dialog-panel,\n// because dialog-panel's connectedCallback may create dialog-backdrop elements\nif (!customElements.get('dialog-backdrop')) {\n\tcustomElements.define('dialog-backdrop', DialogBackdrop);\n}\nif (!customElements.get('dialog-panel')) {\n\tcustomElements.define('dialog-panel', DialogPanel);\n}\n\nexport { DialogPanel, DialogBackdrop };\n"],"names":[],"mappings":"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"}

package/dist/dialog-panel.min.css

@@ -1 +1 @@
-:root{--dp-panel-top:0;--dp-panel-left:0;--dp-panel-width:100vw;--dp-panel-height:100vh;--dp-panel-z-index:10;--dp-overlay-z-index:1000;--dp-overlay-background:rgba(20,23,26,.4);--dp-overlay-backdrop-filter:blur(2px) saturate(120%);--dp-overlay-transition:all 400ms ease-out;--dp-content-display:block;--dp-content-background:#fff;--dp-content-z-index:1001;--dp-content-shadow:0 10px 25px rgba(0,0,0,.15);--dp-content-border-radius:8px;--dp-transition-duration:400ms;--dp-transition-timing:ease-out}dialog-panel{display:contents}dialog-panel[aria-hidden=false] dialog-content,dialog-panel[aria-hidden=false] dialog-overlay{filter:blur(0);opacity:1;pointer-events:auto;transform:scale(1)}dialog-overlay{backdrop-filter:var(--dp-overlay-backdrop-filter,blur(2px) saturate(120%));background-color:var(--dp-overlay-background,rgba(20,23,26,.4));height:100vh;left:0;top:0;transition:var(--dp-overlay-transition,all .3s ease-out);width:100vw;z-index:var(--dp-overlay-z-index,1000)}dialog-content,dialog-overlay{opacity:0;pointer-events:none;position:fixed}dialog-content{background:var(--dp-content-background,#fff);border-radius:var(--dp-content-border-radius,8px);box-shadow:var(--dp-content-shadow,0 10px 25px rgba(0,0,0,.15));display:var(--dp-content-display,block);left:50%;max-height:85vh;max-width:90vw;overflow:auto;top:50%;transform:translate(-50%,-50%) scale(.95);transition:opacity var(--dp-transition-duration,.3s) var(--dp-transition-timing,ease-out),transform var(--dp-transition-duration,.3s) var(--dp-transition-timing,ease-out);z-index:var(--dp-content-z-index,1001)}dialog-panel[aria-hidden=false] dialog-content{transform:translate(-50%,-50%) scale(1)}dialog-content.hidden{display:none}
+dialog-panel{display:contents}dialog-panel>dialog{background:#fff;border:none;border-radius:.5rem;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:85vh;max-width:32rem;opacity:0;overflow:visible;padding:0;transform:scale(.95);transition:opacity .3s ease-out,transform .3s ease-out;width:90vw}dialog-panel:has(dialog-backdrop)>dialog::backdrop{background:transparent}dialog-panel:not(:has(dialog-backdrop))>dialog::backdrop{background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease-out}dialog-backdrop{background:rgba(0,0,0,.3);height:200dvh;left:50%;opacity:0;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%);transition:opacity .3s ease-out;width:200vw;z-index:9999999}dialog-panel[state=showing]>dialog{opacity:0;transform:scale(.95)}dialog-panel:not(:has(dialog-backdrop))[state=showing]>dialog::backdrop{opacity:0}dialog-panel[state=shown]>dialog{opacity:1;transform:scale(1)}dialog-panel:not(:has(dialog-backdrop))[state=shown]>dialog::backdrop{opacity:1}dialog-panel[state=hiding]>dialog{opacity:0;transform:scale(.95);transition:opacity .2s ease-in,transform .2s ease-in}dialog-panel:not(:has(dialog-backdrop))[state=hiding]>dialog::backdrop{opacity:0;transition:opacity .2s ease-in}dialog-panel[state=hidden]>dialog-backdrop,dialog-panel[state=showing]>dialog-backdrop{opacity:0;pointer-events:none}dialog-panel[state=shown]>dialog-backdrop{opacity:1;pointer-events:auto}dialog-panel[state=hiding]>dialog-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease-in}

package/dist/dialog-panel.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DialogPanel={})}(this,(function(e){"use strict";const t=e=>Array.from(e.querySelectorAll('summary, a[href], button:not(:disabled), [tabindex]:not([tabindex^="-"]):not(focus-trap-start):not(focus-trap-end), [draggable], area, input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), object, iframe'));class FocusTrap extends HTMLElement{static styleInjected=!1;constructor(){super(),this.trapStart=null,this.trapEnd=null,FocusTrap.styleInjected||(this.injectStyles(),FocusTrap.styleInjected=!0)}injectStyles(){const e=document.createElement("style");e.textContent="\n      focus-trap-start,\n      focus-trap-end {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        border: 0;\n        clip: rect(0, 0, 0, 0);\n        overflow: hidden;\n        white-space: nowrap;\n      }\n    ",document.head.appendChild(e)}connectedCallback(){this.setupTrap(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown)}setupTrap(){0!==t(this).length&&(this.trapStart=document.createElement("focus-trap-start"),this.trapEnd=document.createElement("focus-trap-end"),this.prepend(this.trapStart),this.append(this.trapEnd))}handleKeyDown=e=>{"Escape"===e.key&&(e.preventDefault(),this.exitTrap())};exitTrap(){const e=this.closest('[aria-hidden="false"]');if(!e)return;e.setAttribute("aria-hidden","true");const t=document.querySelector(`[aria-expanded="true"][aria-controls="${e.id}"]`);t&&(t.setAttribute("aria-expanded","false"),t.focus())}}class FocusTrapStart extends HTMLElement{connectedCallback(){this.setAttribute("tabindex","0"),this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){this.removeEventListener("focus",this.handleFocus)}handleFocus=e=>{const n=this.closest("focus-trap"),s=t(n);if(0===s.length)return;const a=s[0],i=s[s.length-1];e.relatedTarget===a?i.focus():a.focus()}}class FocusTrapEnd extends HTMLElement{connectedCallback(){this.setAttribute("tabindex","0"),this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){this.removeEventListener("focus",this.handleFocus)}handleFocus=()=>{this.closest("focus-trap").querySelector("focus-trap-start").focus()}}customElements.define("focus-trap",FocusTrap),customElements.define("focus-trap-start",FocusTrapStart),customElements.define("focus-trap-end",FocusTrapEnd);class DialogPanel extends HTMLElement{#e;#t=0;disconnectedCallback(){const e=this;e.contentPanel&&e.contentPanel.removeEventListener("transitionend",e.#e),document.body.classList.remove("overflow-hidden"),this.#n()}#s(){this.#t=window.pageYOffset,document.body.classList.add("overflow-hidden"),document.body.style.top=`-${this.#t}px`}#n(){document.body.classList.remove("overflow-hidden"),document.body.style.removeProperty("top"),window.scrollTo(0,this.#t)}constructor(){super();const e=this;if(e.id=e.getAttribute("id"),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-hidden","true"),e.contentPanel=e.querySelector("dialog-content"),e.focusTrap=document.createElement("focus-trap"),e.triggerEl=null,e.#e=t=>{"opacity"===t.propertyName&&"true"===e.getAttribute("aria-hidden")&&(e.contentPanel.classList.add("hidden"),e.dispatchEvent(new CustomEvent("afterHide",{bubbles:!0,detail:{triggerElement:e.triggerEl}})))},!e.getAttribute("aria-labelledby")){const t=e.querySelector("h1, h2, h3");t&&!t.id&&(t.id=`${e.id}-title`),t?.id&&e.setAttribute("aria-labelledby",t.id)}e.contentPanel.parentNode.insertBefore(e.focusTrap,e.contentPanel),e.focusTrap.appendChild(e.contentPanel),e.focusTrap.setupTrap(),e.prepend(document.createElement("dialog-overlay")),e.#a(),e.#i()}#a(){const e=this;document.addEventListener("click",(t=>{const n=t.target.closest(`[aria-controls="${e.id}"]`);n&&("true"===n.getAttribute("data-prevent-default")&&t.preventDefault(),e.show(n))})),e.addEventListener("click",(t=>{t.target.closest('[data-action="hide-dialog"]')&&e.hide()})),e.contentPanel.addEventListener("transitionend",e.#e)}#i(){this.addEventListener("keydown",(e=>{"Escape"===e.key&&this.hide()}))}show(e=null){const t=this;t.triggerEl=e||!1;const n=new CustomEvent("beforeShow",{bubbles:!0,cancelable:!0,detail:{triggerElement:t.triggerEl}});return!!t.dispatchEvent(n)&&(t.contentPanel.classList.remove("hidden"),requestAnimationFrame((()=>{t.setAttribute("aria-hidden","false"),t.triggerEl&&t.triggerEl.setAttribute("aria-expanded","true"),t.#s();const e=t.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');e&&requestAnimationFrame((()=>{e.focus()})),t.dispatchEvent(new CustomEvent("show",{bubbles:!0,detail:{triggerElement:t.triggerEl}}))})),!0)}hide(){const e=this,t=new CustomEvent("beforeHide",{bubbles:!0,cancelable:!0,detail:{triggerElement:e.triggerEl}});return!!e.dispatchEvent(t)&&(e.#n(),e.triggerEl&&(e.triggerEl.focus(),e.triggerEl.setAttribute("aria-expanded","false")),e.setAttribute("aria-hidden","true"),e.dispatchEvent(new CustomEvent("hide",{bubbles:!0,detail:{triggerElement:e.triggerEl}})),!0)}}class DialogOverlay extends HTMLElement{constructor(){super(),this.setAttribute("tabindex","-1"),this.setAttribute("aria-hidden","true"),this.dialogPanel=this.closest("dialog-panel"),this.#a()}#a(){this.addEventListener("click",(()=>{this.dialogPanel.hide()}))}}class DialogContent extends HTMLElement{constructor(){super(),this.setAttribute("role","document")}}customElements.get("dialog-panel")||customElements.define("dialog-panel",DialogPanel),customElements.get("dialog-overlay")||customElements.define("dialog-overlay",DialogOverlay),customElements.get("dialog-content")||customElements.define("dialog-content",DialogContent),e.DialogContent=DialogContent,e.DialogOverlay=DialogOverlay,e.DialogPanel=DialogPanel,e.default=DialogPanel,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DialogPanel={})}(this,function(e){"use strict";class DialogPanel extends HTMLElement{#e="hidden";#t=null;#n=null;#l=null;#i={click:null,dialogClick:null,cancel:null};#a=null;#o=null;static TRANSITION_FALLBACK_TIMEOUT=500;connectedCallback(){const e=this;if(e.#n=e.querySelector("dialog"),e.#n){if(!e.querySelector("dialog-backdrop")){const t=document.createElement("dialog-backdrop");e.insertBefore(t,e.firstChild)}e.#s("hidden"),e.#d()}else console.warn("DialogPanel: No <dialog> element found inside <dialog-panel>")}disconnectedCallback(){const e=this;e.#a&&(cancelAnimationFrame(e.#a),e.#a=null),e.#o&&(clearTimeout(e.#o),e.#o=null),e.#i.click&&e.removeEventListener("click",e.#i.click),e.#n&&(e.#i.dialogClick&&e.#n.removeEventListener("click",e.#i.dialogClick),e.#i.cancel&&e.#n.removeEventListener("cancel",e.#i.cancel))}#d(){const e=this;e.#i.click=t=>{const n=t.target.closest("[data-action-hide-dialog]");n&&(t.stopPropagation(),e.hide(n))},e.addEventListener("click",e.#i.click),e.#i.dialogClick=t=>{const n=e.#n.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&(t.stopPropagation(),e.hide())},e.#n.addEventListener("click",e.#i.dialogClick),e.#i.cancel=t=>{t.preventDefault(),t.stopPropagation(),e.hide()},e.#n.addEventListener("cancel",e.#i.cancel)}show(e=null){const t=this;return"showing"===t.#e||"shown"===t.#e||"hiding"!==t.#e&&(t.#t=e||null,!!t.#c("beforeShow",{cancelable:!0})&&(t.#s("showing"),t.#n.showModal(),t.#a=requestAnimationFrame(()=>{t.#a=requestAnimationFrame(()=>{t.#a=null,t.#s("shown"),t.#r(()=>{t.#c("shown")})})}),!0))}hide(e=null){const t=this;return"hiding"===t.#e||"hidden"===t.#e||"showing"!==t.#e&&(t.#l=e?.dataset?.result??null,!!t.#c("beforeHide",{cancelable:!0,result:t.#l,triggerElement:e})&&(t.#s("hiding"),t.#r(()=>{t.#n.close(),t.#s("hidden"),t.#c("hidden",{result:t.#l,triggerElement:e}),t.#t&&t.#t.focus(),t.#t=null,t.#l=null}),!0))}#r(e){const t=this;let n=!1;const l=()=>{n||(n=!0,t.#n.removeEventListener("transitionend",i),t.#o&&(clearTimeout(t.#o),t.#o=null),e())},i=e=>{e.target===t.#n&&l()};t.#n.addEventListener("transitionend",i),t.#o=setTimeout(l,DialogPanel.TRANSITION_FALLBACK_TIMEOUT)}#s(e){this.#e=e,this.setAttribute("state",e)}#c(e,t={}){const n=this,{cancelable:l=!1,...i}=t,a=new CustomEvent(e,{bubbles:!0,composed:!0,cancelable:l,detail:{triggerElement:n.#t,result:n.#l,state:n.#e,...i}});return n.dispatchEvent(a)}get state(){return this.#e}get dialog(){return this.#n}get isOpen(){return"showing"===this.#e||"shown"===this.#e}get triggerElement(){return this.#t}}class DialogBackdrop extends HTMLElement{#g=null;#i={click:null};connectedCallback(){const e=this;e.#g=e.closest("dialog-panel"),e.#g?(e.#i.click=()=>{e.#g.hide()},e.addEventListener("click",e.#i.click)):console.warn("DialogBackdrop: Must be inside a <dialog-panel> element")}disconnectedCallback(){const e=this;e.#i.click&&e.removeEventListener("click",e.#i.click)}}customElements.get("dialog-backdrop")||customElements.define("dialog-backdrop",DialogBackdrop),customElements.get("dialog-panel")||customElements.define("dialog-panel",DialogPanel),e.DialogBackdrop=DialogBackdrop,e.DialogPanel=DialogPanel});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@magic-spells/dialog-panel",
-  "version": "0.2.3",
-  "description": "A lightweight, customizable Dialog Panel web component for creating accessible and responsive modal dialogs.",
+  "version": "1.0.0",
+  "description": "A lightweight web component wrapper for native <dialog> elements with state-driven animations.",
   "author": "Cory Schulz",
   "license": "MIT",
   "type": "module",
@@ -9,7 +9,6 @@
   "module": "dist/dialog-panel.esm.js",
   "unpkg": "dist/dialog-panel.min.js",
   "style": "dist/dialog-panel.min.css",
-  "sass": "dist/dialog-panel.scss",
   "exports": {
     ".": {
       "import": "./dist/dialog-panel.esm.js",
@@ -17,9 +16,7 @@
       "default": "./dist/dialog-panel.esm.js"
     },
     "./css": "./dist/dialog-panel.css",
-    "./css/min": "./dist/dialog-panel.min.css",
-    "./scss": "./dist/dialog-panel.scss",
-    "./scss/*": "./dist/scss/*"
+    "./css/min": "./dist/dialog-panel.min.css"
   },
   "sideEffects": true,
   "repository": {
@@ -31,15 +28,13 @@
     "url": "https://github.com/magic-spells/dialog-panel/issues"
   },
   "keywords": [
-    "dialog-panel",
-    "modal-dialog",
+    "dialog",
+    "modal",
     "web-components",
+    "native-dialog",
     "accessibility",
     "a11y",
-    "keyboard-navigation",
-    "custom-elements",
-    "modal",
-    "dialog"
+    "custom-elements"
   ],
   "files": [
     "dist/",
@@ -63,19 +58,15 @@
     "not ie <= 11"
   ],
   "devDependencies": {
-    "@eslint/js": "^8.57.0",
+    "@eslint/js": "^9.38.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "eslint": "^8.0.0",
-    "globals": "^13.24.0",
+    "eslint": "^9.38.0",
+    "globals": "^15.15.0",
     "prettier": "^3.3.3",
     "rollup": "^3.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.86.3"
-  },
-  "dependencies": {
-    "@magic-spells/focus-trap": "^1.0.7"
+    "rollup-plugin-serve": "^1.1.1"
   }
 }

package/src/dialog-panel.css

@@ -0,0 +1,117 @@
+/**
+ * dialog-panel basic centered modal styles
+ *
+ * This provides a simple fade in/out animation for a centered modal dialog.
+ * Developers can customize or replace these styles to match their design.
+ */
+
+/* Wrapper doesn't affect layout */
+dialog-panel {
+	display: contents;
+}
+
+/* Base dialog styles with transitions */
+dialog-panel > dialog {
+	border: none;
+	border-radius: 0.5rem;
+	padding: 0;
+	max-width: 32rem;
+	width: 90vw;
+	max-height: 85vh;
+	overflow: visible;
+	background: white;
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+
+	/* Start hidden */
+	opacity: 0;
+	transform: scale(0.95);
+
+	/* Transition always defined on base */
+	transition:
+		opacity 0.3s ease-out,
+		transform 0.3s ease-out;
+}
+
+/* When using dialog-backdrop element, make native ::backdrop transparent
+   but keep it clickable (clicks detected via bounding rect check) */
+dialog-panel:has(dialog-backdrop) > dialog::backdrop {
+	background: transparent;
+}
+
+/* Native backdrop (when not using dialog-backdrop) */
+dialog-panel:not(:has(dialog-backdrop)) > dialog::backdrop {
+	background: rgba(0, 0, 0, 0.3);
+	opacity: 0;
+	transition: opacity 0.3s ease-out;
+}
+
+/* Custom dialog-backdrop element */
+dialog-backdrop {
+	position: fixed;
+	background: rgba(0, 0, 0, 0.3);
+	opacity: 0;
+	transition: opacity 0.3s ease-out;
+	pointer-events: none;
+	z-index: 9999999;
+	top: 50%;
+	left: 50%;
+	width: 200vw;
+	height: 200dvh;
+	transform: translateY(-50%) translateX(-50%);
+}
+
+/* Showing state - dialog is open but still at initial values
+   (this is the starting point for the fade-in animation) */
+dialog-panel[state='showing'] > dialog {
+	opacity: 0;
+	transform: scale(0.95);
+}
+
+dialog-panel:not(:has(dialog-backdrop))[state='showing']
+	> dialog::backdrop {
+	opacity: 0;
+}
+
+/* Shown state - fully visible (animates from showing → shown) */
+dialog-panel[state='shown'] > dialog {
+	opacity: 1;
+	transform: scale(1);
+}
+
+dialog-panel:not(:has(dialog-backdrop))[state='shown']
+	> dialog::backdrop {
+	opacity: 1;
+}
+
+/* Hiding state - faster exit animation */
+dialog-panel[state='hiding'] > dialog {
+	opacity: 0;
+	transform: scale(0.95);
+	transition:
+		opacity 0.2s ease-in,
+		transform 0.2s ease-in;
+}
+
+dialog-panel:not(:has(dialog-backdrop))[state='hiding']
+	> dialog::backdrop {
+	opacity: 0;
+	transition: opacity 0.2s ease-in;
+}
+
+/* dialog-backdrop state animations */
+dialog-panel[state='showing'] > dialog-backdrop,
+dialog-panel[state='hidden'] > dialog-backdrop {
+	opacity: 0;
+	pointer-events: none;
+}
+
+dialog-panel[state='shown'] > dialog-backdrop {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+dialog-panel[state='hiding'] > dialog-backdrop {
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s ease-in;
+}