@magic-spells/dialog-panel 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Magic Spells (Cory Schulz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# Dialog Panel Web Component
+
+A lightweight, customizable Web Component for creating accessible modal dialogs. Ideal for dialogs, alerts, cart panels, or content panels with smooth animations and accessibility features.
+
+## Features
+
+- No dependencies
+- Lightweight
+- Follows accessibility best practices with proper ARIA attributes
+- Smooth animations
+- Focus management and keyboard navigation
+- WAI-ARIA compliant modal dialog behavior
+
+## Installation
+
+```bash
+npm install @magic-spells/dialog-panel
+```
+
+```javascript
+// Add to your JavaScript file
+import '@magic-spells/dialog-panel';
+```
+
+Or include directly in your HTML:
+
+```html
+<script src="https://unpkg.com/@magic-spells/dialog-panel"></script>
+```
+
+## Usage
+
+```html
+<button
+	id="show-dialog-button"
+	aria-haspopup="dialog"
+	aria-controls="demo-dialog"
+	aria-expanded="false">
+	Open Dialog
+</button>
+
+<dialog-panel
+	id="demo-dialog"
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby="dialog-title"
+	aria-describedby="dialog-description"
+	aria-hidden="true">
+	<dialog-overlay></dialog-overlay>
+	<dialog-content>
+		<button aria-label="Close dialog" data-action="hide-dialog">
+			&times;
+		</button>
+		<div>
+			<h2 id="dialog-title">Dialog Title</h2>
+			<p id="dialog-description">
+				This is a demonstration of the dialog panel component. Add
+				your content here.
+			</p>
+		</div>
+	</dialog-content>
+</dialog-panel>
+
+<script>
+	const button = document.getElementById('show-dialog-button');
+	const dialog = document.getElementById('demo-dialog');
+	button.addEventListener('click', () => dialog.show());
+</script>
+```
+
+## How It Works
+
+- The dialog is initially hidden (`aria-hidden="true"`)
+- Clicking the button triggers the `show()` method, making the dialog visible
+- When opened, sets `aria-modal="true"` to indicate modal behavior
+- Clicking the overlay or a close button (`data-action="hide-dialog"`) triggers the `hide()` method
+- Keyboard focus is automatically trapped within the dialog when open
+- Pressing ESC closes the dialog
+- Focus returns to the trigger button when closed
+
+## Customization
+
+### Styling
+
+You can style the Dialog Panel by overriding or extending the provided CSS:
+
+```css
+dialog-panel {
+	/* Customize your dialog panel */
+}
+
+dialog-overlay {
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+[data-action='hide-dialog'] {
+	font-size: 24px;
+	color: #333;
+}
+```
+
+### JavaScript API
+
+#### Methods
+
+- `show()`: Opens the dialog panel
+- `hide()`: Closes the dialog panel
+
+## Browser Support
+
+This component works in all modern browsers that support Web Components.
+
+## License
+
+MIT

package/dist/dialog-panel.cjs.js

@@ -0,0 +1,371 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Retrieves all focusable elements within a given container.
+ *
+ * @param {HTMLElement} container - The container element to search for focusable elements.
+ * @returns {HTMLElement[]} An array of focusable elements found within the container.
+ */
+const getFocusableElements = (container) => {
+	const focusableSelectors =
+		'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';
+	return Array.from(container.querySelectorAll(focusableSelectors));
+};
+
+class FocusTrap extends HTMLElement {
+	/** @type {boolean} Indicates whether the styles have been injected into the DOM. */
+	static styleInjected = false;
+
+	constructor() {
+		super();
+		this.trapStart = null;
+		this.trapEnd = null;
+
+		// Inject styles only once, when the first FocusTrap instance is created.
+		if (!FocusTrap.styleInjected) {
+			this.injectStyles();
+			FocusTrap.styleInjected = true;
+		}
+	}
+
+	/**
+	 * Injects necessary styles for the focus trap into the document's head.
+	 * This ensures that focus-trap-start and focus-trap-end elements are hidden.
+	 */
+	injectStyles() {
+		const style = document.createElement('style');
+		style.textContent = `
+      focus-trap-start,
+      focus-trap-end {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        clip: rect(0, 0, 0, 0);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    `;
+		document.head.appendChild(style);
+	}
+
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets up the focus trap and adds the keydown event listener.
+	 */
+	connectedCallback() {
+		this.setupTrap();
+		this.addEventListener('keydown', this.handleKeyDown);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the keydown event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('keydown', this.handleKeyDown);
+	}
+
+	/**
+	 * Sets up the focus trap by adding trap start and trap end elements.
+	 * Focuses the trap start element to initiate the focus trap.
+	 */
+	setupTrap() {
+		// check to see it there are any focusable children
+		const focusableElements = getFocusableElements(this);
+		// exit if there aren't any
+		if (focusableElements.length === 0) return;
+
+		// create trap start and end elements
+		this.trapStart = document.createElement('focus-trap-start');
+		this.trapEnd = document.createElement('focus-trap-end');
+
+		// add to DOM
+		this.prepend(this.trapStart);
+		this.append(this.trapEnd);
+	}
+
+	/**
+	 * Handles the keydown event. If the Escape key is pressed, the focus trap is exited.
+	 *
+	 * @param {KeyboardEvent} e - The keyboard event object.
+	 */
+	handleKeyDown = (e) => {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			this.exitTrap();
+		}
+	};
+
+	/**
+	 * Exits the focus trap by hiding the current container and shifting focus
+	 * back to the trigger element that opened the trap.
+	 */
+	exitTrap() {
+		const container = this.closest('[aria-hidden="false"]');
+		if (!container) return;
+
+		container.setAttribute('aria-hidden', 'true');
+
+		const trigger = document.querySelector(
+			`[aria-expanded="true"][aria-controls="${container.id}"]`
+		);
+		if (trigger) {
+			trigger.setAttribute('aria-expanded', 'false');
+			trigger.focus();
+		}
+	}
+}
+
+class FocusTrapStart extends HTMLElement {
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets the tabindex and adds the focus event listener.
+	 */
+	connectedCallback() {
+		this.setAttribute('tabindex', '0');
+		this.addEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the focus event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Handles the focus event. If focus moves backwards from the first focusable element,
+	 * it is cycled to the last focusable element, and vice versa.
+	 *
+	 * @param {FocusEvent} e - The focus event object.
+	 */
+	handleFocus = (e) => {
+		const trap = this.closest('focus-trap');
+		const focusableElements = getFocusableElements(trap);
+
+		if (focusableElements.length === 0) return;
+
+		const firstElement = focusableElements[0];
+		const lastElement =
+			focusableElements[focusableElements.length - 1];
+
+		if (e.relatedTarget === firstElement) {
+			lastElement.focus();
+		} else {
+			firstElement.focus();
+		}
+	};
+}
+
+class FocusTrapEnd extends HTMLElement {
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets the tabindex and adds the focus event listener.
+	 */
+	connectedCallback() {
+		this.setAttribute('tabindex', '0');
+		this.addEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the focus event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Handles the focus event. When the trap end is focused, focus is shifted back to the trap start.
+	 */
+	handleFocus = () => {
+		const trap = this.closest('focus-trap');
+		const trapStart = trap.querySelector('focus-trap-start');
+		trapStart.focus();
+	};
+}
+
+customElements.define('focus-trap', FocusTrap);
+customElements.define('focus-trap-start', FocusTrapStart);
+customElements.define('focus-trap-end', FocusTrapEnd);
+
+/**
+ * Custom element that creates an accessible modal dialog panel with focus management
+ * @extends HTMLElement
+ */
+class DialogPanel extends HTMLElement {
+	/**
+	 * Initializes the dialog panel, sets up focus trap and overlay
+	 */
+	constructor() {
+		super();
+		const _ = this;
+		_.id = _.getAttribute('id');
+		_.setAttribute('role', 'dialog');
+		_.setAttribute('aria-modal', 'true');
+		_.setAttribute('aria-hidden', 'true');
+
+		_.contentPanel = _.querySelector('dialog-content');
+		_.focusTrap = document.createElement('focus-trap');
+		_.triggerEl = null;
+
+		// Ensure we have labelledby and describedby references
+		if (!_.getAttribute('aria-labelledby')) {
+			const heading = _.querySelector('h1, h2, h3');
+			if (heading && !heading.id) {
+				heading.id = `${_.id}-title`;
+			}
+			if (heading?.id) {
+				_.setAttribute('aria-labelledby', heading.id);
+			}
+		}
+
+		_.contentPanel.parentNode.insertBefore(
+			_.focusTrap,
+			_.contentPanel
+		);
+		_.focusTrap.appendChild(_.contentPanel);
+
+		_.focusTrap.setupTrap();
+
+		// Add modal overlay
+		_.prepend(document.createElement('dialog-overlay'));
+		_.#bindUI();
+		_.#bindKeyboard();
+	}
+
+	/**
+	 * Binds click events for showing and hiding the dialog
+	 * @private
+	 */
+	#bindUI() {
+		// Handle trigger buttons
+		document.addEventListener('click', (e) => {
+			const trigger = e.target.closest(
+				`[aria-controls="${this.id}"]`
+			);
+			if (!trigger) return;
+
+			if (trigger.getAttribute('data-prevent-default') === 'true') {
+				e.preventDefault();
+			}
+
+			// this.triggerEl = trigger;
+			this.show(trigger);
+		});
+
+		// Handle close buttons
+		this.addEventListener('click', (e) => {
+			if (!e.target.closest('[data-action="hide-dialog"]')) return;
+			this.hide();
+		});
+	}
+
+	/**
+	 * Binds keyboard events for accessibility
+	 * @private
+	 */
+	#bindKeyboard() {
+		this.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				this.hide();
+			}
+		});
+	}
+
+	/**
+	 * Shows the dialog and traps focus within it
+	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the dialog
+	 */
+	show(triggerEl = null) {
+		this.triggerEl = triggerEl || false;
+
+		// Update ARIA states
+		this.setAttribute('aria-hidden', 'false');
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'true');
+		}
+
+		// prevent body from scrolling
+		document.body.classList.add('overflow-hidden');
+
+		// Focus management
+		const firstFocusable = this.querySelector(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		);
+		if (firstFocusable) {
+			requestAnimationFrame(() => {
+				firstFocusable.focus();
+			});
+		}
+	}
+
+	/**
+	 * Hides the dialog and restores focus
+	 */
+	hide() {
+		// allow body to scroll
+		document.body.classList.remove('overflow-hidden');
+
+		// Update ARIA states
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'false');
+			// Restore focus to trigger element
+			this.triggerEl.focus();
+		} else {
+			console.log('we need to blur focus');
+		}
+
+		// hide dialog panel
+		setTimeout(() => {
+			this.setAttribute('aria-hidden', 'true');
+		}, 1);
+	}
+}
+
+/**
+ * Custom element that creates a clickable overlay for the dialog
+ * @extends HTMLElement
+ */
+class DialogOverlay extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable
+		this.setAttribute('aria-hidden', 'true');
+		this.dialogPanel = this.closest('dialog-panel');
+		this.#bindUI();
+	}
+
+	#bindUI() {
+		this.addEventListener('click', () => {
+			this.dialogPanel.hide();
+		});
+	}
+}
+
+/**
+ * Custom element that wraps the content of the dialog
+ * @extends HTMLElement
+ */
+class DialogContent extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('role', 'document'); // Optional: helps with document structure
+	}
+}
+
+customElements.define('dialog-panel', DialogPanel);
+customElements.define('dialog-overlay', DialogOverlay);
+customElements.define('dialog-content', DialogContent);
+
+exports.DialogContent = DialogContent;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPanel = DialogPanel;
+exports.default = DialogPanel;
+//# sourceMappingURL=dialog-panel.cjs.js.map

package/dist/dialog-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-panel.cjs.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 './dialog-panel.css';\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/**\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// 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\t// Handle trigger buttons\n\t\tdocument.addEventListener('click', (e) => {\n\t\t\tconst trigger = e.target.closest(\n\t\t\t\t`[aria-controls=\"${this.id}\"]`\n\t\t\t);\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// this.triggerEl = trigger;\n\t\t\tthis.show(trigger);\n\t\t});\n\n\t\t// Handle close buttons\n\t\tthis.addEventListener('click', (e) => {\n\t\t\tif (!e.target.closest('[data-action=\"hide-dialog\"]')) return;\n\t\t\tthis.hide();\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 */\n\tshow(triggerEl = null) {\n\t\tthis.triggerEl = triggerEl || false;\n\n\t\t// Update ARIA states\n\t\tthis.setAttribute('aria-hidden', 'false');\n\t\tif (this.triggerEl) {\n\t\t\tthis.triggerEl.setAttribute('aria-expanded', 'true');\n\t\t}\n\n\t\t// prevent body from scrolling\n\t\tdocument.body.classList.add('overflow-hidden');\n\n\t\t// Focus management\n\t\tconst firstFocusable = this.querySelector(\n\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\t\t);\n\t\tif (firstFocusable) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tfirstFocusable.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Hides the dialog and restores focus\n\t */\n\thide() {\n\t\t// allow body to scroll\n\t\tdocument.body.classList.remove('overflow-hidden');\n\n\t\t// Update ARIA states\n\t\tif (this.triggerEl) {\n\t\t\tthis.triggerEl.setAttribute('aria-expanded', 'false');\n\t\t\t// Restore focus to trigger element\n\t\t\tthis.triggerEl.focus();\n\t\t} else {\n\t\t\tconsole.log('we need to blur focus');\n\t\t}\n\n\t\t// hide dialog panel\n\t\tsetTimeout(() => {\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t}, 1);\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\ncustomElements.define('dialog-panel', DialogPanel);\ncustomElements.define('dialog-overlay', DialogOverlay);\ncustomElements.define('dialog-content', DialogContent);\n\nexport { DialogPanel, DialogOverlay, DialogContent };\nexport default DialogPanel;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/dialog-panel.esm.js

@@ -0,0 +1,364 @@
+/**
+ * Retrieves all focusable elements within a given container.
+ *
+ * @param {HTMLElement} container - The container element to search for focusable elements.
+ * @returns {HTMLElement[]} An array of focusable elements found within the container.
+ */
+const getFocusableElements = (container) => {
+	const focusableSelectors =
+		'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';
+	return Array.from(container.querySelectorAll(focusableSelectors));
+};
+
+class FocusTrap extends HTMLElement {
+	/** @type {boolean} Indicates whether the styles have been injected into the DOM. */
+	static styleInjected = false;
+
+	constructor() {
+		super();
+		this.trapStart = null;
+		this.trapEnd = null;
+
+		// Inject styles only once, when the first FocusTrap instance is created.
+		if (!FocusTrap.styleInjected) {
+			this.injectStyles();
+			FocusTrap.styleInjected = true;
+		}
+	}
+
+	/**
+	 * Injects necessary styles for the focus trap into the document's head.
+	 * This ensures that focus-trap-start and focus-trap-end elements are hidden.
+	 */
+	injectStyles() {
+		const style = document.createElement('style');
+		style.textContent = `
+      focus-trap-start,
+      focus-trap-end {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        clip: rect(0, 0, 0, 0);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    `;
+		document.head.appendChild(style);
+	}
+
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets up the focus trap and adds the keydown event listener.
+	 */
+	connectedCallback() {
+		this.setupTrap();
+		this.addEventListener('keydown', this.handleKeyDown);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the keydown event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('keydown', this.handleKeyDown);
+	}
+
+	/**
+	 * Sets up the focus trap by adding trap start and trap end elements.
+	 * Focuses the trap start element to initiate the focus trap.
+	 */
+	setupTrap() {
+		// check to see it there are any focusable children
+		const focusableElements = getFocusableElements(this);
+		// exit if there aren't any
+		if (focusableElements.length === 0) return;
+
+		// create trap start and end elements
+		this.trapStart = document.createElement('focus-trap-start');
+		this.trapEnd = document.createElement('focus-trap-end');
+
+		// add to DOM
+		this.prepend(this.trapStart);
+		this.append(this.trapEnd);
+	}
+
+	/**
+	 * Handles the keydown event. If the Escape key is pressed, the focus trap is exited.
+	 *
+	 * @param {KeyboardEvent} e - The keyboard event object.
+	 */
+	handleKeyDown = (e) => {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			this.exitTrap();
+		}
+	};
+
+	/**
+	 * Exits the focus trap by hiding the current container and shifting focus
+	 * back to the trigger element that opened the trap.
+	 */
+	exitTrap() {
+		const container = this.closest('[aria-hidden="false"]');
+		if (!container) return;
+
+		container.setAttribute('aria-hidden', 'true');
+
+		const trigger = document.querySelector(
+			`[aria-expanded="true"][aria-controls="${container.id}"]`
+		);
+		if (trigger) {
+			trigger.setAttribute('aria-expanded', 'false');
+			trigger.focus();
+		}
+	}
+}
+
+class FocusTrapStart extends HTMLElement {
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets the tabindex and adds the focus event listener.
+	 */
+	connectedCallback() {
+		this.setAttribute('tabindex', '0');
+		this.addEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the focus event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Handles the focus event. If focus moves backwards from the first focusable element,
+	 * it is cycled to the last focusable element, and vice versa.
+	 *
+	 * @param {FocusEvent} e - The focus event object.
+	 */
+	handleFocus = (e) => {
+		const trap = this.closest('focus-trap');
+		const focusableElements = getFocusableElements(trap);
+
+		if (focusableElements.length === 0) return;
+
+		const firstElement = focusableElements[0];
+		const lastElement =
+			focusableElements[focusableElements.length - 1];
+
+		if (e.relatedTarget === firstElement) {
+			lastElement.focus();
+		} else {
+			firstElement.focus();
+		}
+	};
+}
+
+class FocusTrapEnd extends HTMLElement {
+	/**
+	 * Called when the element is connected to the DOM.
+	 * Sets the tabindex and adds the focus event listener.
+	 */
+	connectedCallback() {
+		this.setAttribute('tabindex', '0');
+		this.addEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Called when the element is disconnected from the DOM.
+	 * Removes the focus event listener.
+	 */
+	disconnectedCallback() {
+		this.removeEventListener('focus', this.handleFocus);
+	}
+
+	/**
+	 * Handles the focus event. When the trap end is focused, focus is shifted back to the trap start.
+	 */
+	handleFocus = () => {
+		const trap = this.closest('focus-trap');
+		const trapStart = trap.querySelector('focus-trap-start');
+		trapStart.focus();
+	};
+}
+
+customElements.define('focus-trap', FocusTrap);
+customElements.define('focus-trap-start', FocusTrapStart);
+customElements.define('focus-trap-end', FocusTrapEnd);
+
+/**
+ * Custom element that creates an accessible modal dialog panel with focus management
+ * @extends HTMLElement
+ */
+class DialogPanel extends HTMLElement {
+	/**
+	 * Initializes the dialog panel, sets up focus trap and overlay
+	 */
+	constructor() {
+		super();
+		const _ = this;
+		_.id = _.getAttribute('id');
+		_.setAttribute('role', 'dialog');
+		_.setAttribute('aria-modal', 'true');
+		_.setAttribute('aria-hidden', 'true');
+
+		_.contentPanel = _.querySelector('dialog-content');
+		_.focusTrap = document.createElement('focus-trap');
+		_.triggerEl = null;
+
+		// Ensure we have labelledby and describedby references
+		if (!_.getAttribute('aria-labelledby')) {
+			const heading = _.querySelector('h1, h2, h3');
+			if (heading && !heading.id) {
+				heading.id = `${_.id}-title`;
+			}
+			if (heading?.id) {
+				_.setAttribute('aria-labelledby', heading.id);
+			}
+		}
+
+		_.contentPanel.parentNode.insertBefore(
+			_.focusTrap,
+			_.contentPanel
+		);
+		_.focusTrap.appendChild(_.contentPanel);
+
+		_.focusTrap.setupTrap();
+
+		// Add modal overlay
+		_.prepend(document.createElement('dialog-overlay'));
+		_.#bindUI();
+		_.#bindKeyboard();
+	}
+
+	/**
+	 * Binds click events for showing and hiding the dialog
+	 * @private
+	 */
+	#bindUI() {
+		// Handle trigger buttons
+		document.addEventListener('click', (e) => {
+			const trigger = e.target.closest(
+				`[aria-controls="${this.id}"]`
+			);
+			if (!trigger) return;
+
+			if (trigger.getAttribute('data-prevent-default') === 'true') {
+				e.preventDefault();
+			}
+
+			// this.triggerEl = trigger;
+			this.show(trigger);
+		});
+
+		// Handle close buttons
+		this.addEventListener('click', (e) => {
+			if (!e.target.closest('[data-action="hide-dialog"]')) return;
+			this.hide();
+		});
+	}
+
+	/**
+	 * Binds keyboard events for accessibility
+	 * @private
+	 */
+	#bindKeyboard() {
+		this.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				this.hide();
+			}
+		});
+	}
+
+	/**
+	 * Shows the dialog and traps focus within it
+	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the dialog
+	 */
+	show(triggerEl = null) {
+		this.triggerEl = triggerEl || false;
+
+		// Update ARIA states
+		this.setAttribute('aria-hidden', 'false');
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'true');
+		}
+
+		// prevent body from scrolling
+		document.body.classList.add('overflow-hidden');
+
+		// Focus management
+		const firstFocusable = this.querySelector(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		);
+		if (firstFocusable) {
+			requestAnimationFrame(() => {
+				firstFocusable.focus();
+			});
+		}
+	}
+
+	/**
+	 * Hides the dialog and restores focus
+	 */
+	hide() {
+		// allow body to scroll
+		document.body.classList.remove('overflow-hidden');
+
+		// Update ARIA states
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'false');
+			// Restore focus to trigger element
+			this.triggerEl.focus();
+		} else {
+			console.log('we need to blur focus');
+		}
+
+		// hide dialog panel
+		setTimeout(() => {
+			this.setAttribute('aria-hidden', 'true');
+		}, 1);
+	}
+}
+
+/**
+ * Custom element that creates a clickable overlay for the dialog
+ * @extends HTMLElement
+ */
+class DialogOverlay extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable
+		this.setAttribute('aria-hidden', 'true');
+		this.dialogPanel = this.closest('dialog-panel');
+		this.#bindUI();
+	}
+
+	#bindUI() {
+		this.addEventListener('click', () => {
+			this.dialogPanel.hide();
+		});
+	}
+}
+
+/**
+ * Custom element that wraps the content of the dialog
+ * @extends HTMLElement
+ */
+class DialogContent extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('role', 'document'); // Optional: helps with document structure
+	}
+}
+
+customElements.define('dialog-panel', DialogPanel);
+customElements.define('dialog-overlay', DialogOverlay);
+customElements.define('dialog-content', DialogContent);
+
+export { DialogContent, DialogOverlay, DialogPanel, DialogPanel as default };
+//# sourceMappingURL=dialog-panel.esm.js.map

package/dist/dialog-panel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-panel.esm.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 './dialog-panel.css';\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/**\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// 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\t// Handle trigger buttons\n\t\tdocument.addEventListener('click', (e) => {\n\t\t\tconst trigger = e.target.closest(\n\t\t\t\t`[aria-controls=\"${this.id}\"]`\n\t\t\t);\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// this.triggerEl = trigger;\n\t\t\tthis.show(trigger);\n\t\t});\n\n\t\t// Handle close buttons\n\t\tthis.addEventListener('click', (e) => {\n\t\t\tif (!e.target.closest('[data-action=\"hide-dialog\"]')) return;\n\t\t\tthis.hide();\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 */\n\tshow(triggerEl = null) {\n\t\tthis.triggerEl = triggerEl || false;\n\n\t\t// Update ARIA states\n\t\tthis.setAttribute('aria-hidden', 'false');\n\t\tif (this.triggerEl) {\n\t\t\tthis.triggerEl.setAttribute('aria-expanded', 'true');\n\t\t}\n\n\t\t// prevent body from scrolling\n\t\tdocument.body.classList.add('overflow-hidden');\n\n\t\t// Focus management\n\t\tconst firstFocusable = this.querySelector(\n\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\t\t);\n\t\tif (firstFocusable) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tfirstFocusable.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Hides the dialog and restores focus\n\t */\n\thide() {\n\t\t// allow body to scroll\n\t\tdocument.body.classList.remove('overflow-hidden');\n\n\t\t// Update ARIA states\n\t\tif (this.triggerEl) {\n\t\t\tthis.triggerEl.setAttribute('aria-expanded', 'false');\n\t\t\t// Restore focus to trigger element\n\t\t\tthis.triggerEl.focus();\n\t\t} else {\n\t\t\tconsole.log('we need to blur focus');\n\t\t}\n\n\t\t// hide dialog panel\n\t\tsetTimeout(() => {\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t}, 1);\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\ncustomElements.define('dialog-panel', DialogPanel);\ncustomElements.define('dialog-overlay', DialogOverlay);\ncustomElements.define('dialog-content', DialogContent);\n\nexport { DialogPanel, DialogOverlay, DialogContent };\nexport default DialogPanel;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/dialog-panel.min.css

@@ -0,0 +1 @@
+dialog-panel{position:fixed;z-index:10}dialog-overlay,dialog-panel{height:100vh;left:0;pointer-events:none;top:0;width:100vw}dialog-overlay{backdrop-filter:blur(2px) saturate(120%);background-color:rgba(20,23,26,.4);opacity:0;position:absolute;transition:all .3s ease-out}dialog-content{background:#fff;display:block;opacity:0}dialog-panel[aria-hidden=false]{pointer-events:all}dialog-panel[aria-hidden=false] dialog-overlay{filter:blur(0);opacity:1;pointer-events:all;transform:scale(1)}dialog-panel[aria-hidden=false] dialog-content{filter:blur(0);opacity:1;transform:scale(1);z-index:10}

package/dist/dialog-panel.min.js

@@ -0,0 +1 @@
+var DialogPanel=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{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.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.#e(),e.#t()}#e(){document.addEventListener("click",(e=>{const t=e.target.closest(`[aria-controls="${this.id}"]`);t&&("true"===t.getAttribute("data-prevent-default")&&e.preventDefault(),this.show(t))})),this.addEventListener("click",(e=>{e.target.closest('[data-action="hide-dialog"]')&&this.hide()}))}#t(){this.addEventListener("keydown",(e=>{"Escape"===e.key&&this.hide()}))}show(e=null){this.triggerEl=e||!1,this.setAttribute("aria-hidden","false"),this.triggerEl&&this.triggerEl.setAttribute("aria-expanded","true"),document.body.classList.add("overflow-hidden");const t=this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');t&&requestAnimationFrame((()=>{t.focus()}))}hide(){document.body.classList.remove("overflow-hidden"),this.triggerEl?(this.triggerEl.setAttribute("aria-expanded","false"),this.triggerEl.focus()):console.log("we need to blur focus"),setTimeout((()=>{this.setAttribute("aria-hidden","true")}),1)}}class DialogOverlay extends HTMLElement{constructor(){super(),this.setAttribute("tabindex","-1"),this.setAttribute("aria-hidden","true"),this.dialogPanel=this.closest("dialog-panel"),this.#e()}#e(){this.addEventListener("click",(()=>{this.dialogPanel.hide()}))}}class DialogContent extends HTMLElement{constructor(){super(),this.setAttribute("role","document")}}return customElements.define("dialog-panel",DialogPanel),customElements.define("dialog-overlay",DialogOverlay),customElements.define("dialog-content",DialogContent),e.DialogContent=DialogContent,e.DialogOverlay=DialogOverlay,e.DialogPanel=DialogPanel,e.default=DialogPanel,Object.defineProperty(e,"__esModule",{value:!0}),e}({});

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@magic-spells/dialog-panel",
+  "version": "0.1.0",
+  "description": "A lightweight, customizable Dialog Panel web component for creating accessible and responsive modal dialogs.",
+  "author": "Cory Schulz",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/dialog-panel.cjs.js",
+  "module": "dist/dialog-panel.esm.js",
+  "unpkg": "dist/dialog-panel.min.js",
+  "style": "dist/dialog-panel.min.css",
+  "exports": {
+    ".": {
+      "import": "./dist/dialog-panel.esm.js",
+      "require": "./dist/dialog-panel.cjs.js",
+      "default": "./dist/dialog-panel.esm.js"
+    },
+    "./style.css": "./dist/dialog-panel.min.css"
+  },
+  "sideEffects": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/magic-spells/dialog-panel.git"
+  },
+  "homepage": "https://github.com/magic-spells/dialog-panel#readme",
+  "bugs": {
+    "url": "https://github.com/magic-spells/dialog-panel/issues"
+  },
+  "keywords": [
+    "dialog-panel",
+    "modal-dialog",
+    "web-components",
+    "accessibility",
+    "a11y",
+    "keyboard-navigation",
+    "custom-elements",
+    "modal",
+    "dialog"
+  ],
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src/ rollup.config.mjs",
+    "format": "prettier --write .",
+    "prepublishOnly": "npm run build",
+    "serve": "rollup -c --watch"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not ie <= 11"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^8.57.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^8.0.0",
+    "globals": "^13.24.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"
+  },
+  "dependencies": {
+    "@magic-spells/focus-trap": "^1.0.6"
+  }
+}

package/src/dialog-panel.css

@@ -0,0 +1,47 @@
+dialog-panel {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 10;
+	pointer-events: none;
+}
+
+/* transparent background */
+dialog-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	opacity: 0;
+	pointer-events: none;
+	transition: all 300ms ease-out;
+	background-color: rgba(20, 23, 26, 0.4);
+	backdrop-filter: blur(2px) saturate(120%);
+}
+
+dialog-content {
+	display: block;
+	opacity: 0;
+	background: white;
+}
+
+dialog-panel[aria-hidden='false'] {
+	pointer-events: all;
+}
+
+dialog-panel[aria-hidden='false'] dialog-overlay {
+	pointer-events: all;
+	opacity: 1;
+	transform: scale(1);
+	filter: blur(0px);
+}
+
+dialog-panel[aria-hidden='false'] dialog-content {
+	opacity: 1;
+	z-index: 10;
+	transform: scale(1);
+	filter: blur(0px);
+}

package/src/dialog-panel.js

@@ -0,0 +1,174 @@
+import './dialog-panel.css';
+import '@magic-spells/focus-trap';
+
+/**
+ * Custom element that creates an accessible modal dialog panel with focus management
+ * @extends HTMLElement
+ */
+class DialogPanel extends HTMLElement {
+	/**
+	 * Initializes the dialog panel, sets up focus trap and overlay
+	 */
+	constructor() {
+		super();
+		const _ = this;
+		_.id = _.getAttribute('id');
+		_.setAttribute('role', 'dialog');
+		_.setAttribute('aria-modal', 'true');
+		_.setAttribute('aria-hidden', 'true');
+
+		_.contentPanel = _.querySelector('dialog-content');
+		_.focusTrap = document.createElement('focus-trap');
+		_.triggerEl = null;
+
+		// Ensure we have labelledby and describedby references
+		if (!_.getAttribute('aria-labelledby')) {
+			const heading = _.querySelector('h1, h2, h3');
+			if (heading && !heading.id) {
+				heading.id = `${_.id}-title`;
+			}
+			if (heading?.id) {
+				_.setAttribute('aria-labelledby', heading.id);
+			}
+		}
+
+		_.contentPanel.parentNode.insertBefore(
+			_.focusTrap,
+			_.contentPanel
+		);
+		_.focusTrap.appendChild(_.contentPanel);
+
+		_.focusTrap.setupTrap();
+
+		// Add modal overlay
+		_.prepend(document.createElement('dialog-overlay'));
+		_.#bindUI();
+		_.#bindKeyboard();
+	}
+
+	/**
+	 * Binds click events for showing and hiding the dialog
+	 * @private
+	 */
+	#bindUI() {
+		// Handle trigger buttons
+		document.addEventListener('click', (e) => {
+			const trigger = e.target.closest(
+				`[aria-controls="${this.id}"]`
+			);
+			if (!trigger) return;
+
+			if (trigger.getAttribute('data-prevent-default') === 'true') {
+				e.preventDefault();
+			}
+
+			// this.triggerEl = trigger;
+			this.show(trigger);
+		});
+
+		// Handle close buttons
+		this.addEventListener('click', (e) => {
+			if (!e.target.closest('[data-action="hide-dialog"]')) return;
+			this.hide();
+		});
+	}
+
+	/**
+	 * Binds keyboard events for accessibility
+	 * @private
+	 */
+	#bindKeyboard() {
+		this.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				this.hide();
+			}
+		});
+	}
+
+	/**
+	 * Shows the dialog and traps focus within it
+	 * @param {HTMLElement} [triggerEl=null] - The element that triggered the dialog
+	 */
+	show(triggerEl = null) {
+		this.triggerEl = triggerEl || false;
+
+		// Update ARIA states
+		this.setAttribute('aria-hidden', 'false');
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'true');
+		}
+
+		// prevent body from scrolling
+		document.body.classList.add('overflow-hidden');
+
+		// Focus management
+		const firstFocusable = this.querySelector(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		);
+		if (firstFocusable) {
+			requestAnimationFrame(() => {
+				firstFocusable.focus();
+			});
+		}
+	}
+
+	/**
+	 * Hides the dialog and restores focus
+	 */
+	hide() {
+		// allow body to scroll
+		document.body.classList.remove('overflow-hidden');
+
+		// Update ARIA states
+		if (this.triggerEl) {
+			this.triggerEl.setAttribute('aria-expanded', 'false');
+			// Restore focus to trigger element
+			this.triggerEl.focus();
+		} else {
+			console.log('we need to blur focus');
+		}
+
+		// hide dialog panel
+		setTimeout(() => {
+			this.setAttribute('aria-hidden', 'true');
+		}, 1);
+	}
+}
+
+/**
+ * Custom element that creates a clickable overlay for the dialog
+ * @extends HTMLElement
+ */
+class DialogOverlay extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable
+		this.setAttribute('aria-hidden', 'true');
+		this.dialogPanel = this.closest('dialog-panel');
+		this.#bindUI();
+	}
+
+	#bindUI() {
+		this.addEventListener('click', () => {
+			this.dialogPanel.hide();
+		});
+	}
+}
+
+/**
+ * Custom element that wraps the content of the dialog
+ * @extends HTMLElement
+ */
+class DialogContent extends HTMLElement {
+	constructor() {
+		super();
+		this.setAttribute('role', 'document'); // Optional: helps with document structure
+	}
+}
+
+customElements.define('dialog-panel', DialogPanel);
+customElements.define('dialog-overlay', DialogOverlay);
+customElements.define('dialog-content', DialogContent);
+
+export { DialogPanel, DialogOverlay, DialogContent };
+export default DialogPanel;