@magic-spells/dialog-panel 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -193,9 +193,15 @@
193
193
  };
194
194
  }
195
195
 
196
- customElements.define('focus-trap', FocusTrap);
197
- customElements.define('focus-trap-start', FocusTrapStart);
198
- customElements.define('focus-trap-end', FocusTrapEnd);
196
+ if (!customElements.get('focus-trap')) {
197
+ customElements.define('focus-trap', FocusTrap);
198
+ }
199
+ if (!customElements.get('focus-trap-start')) {
200
+ customElements.define('focus-trap-start', FocusTrapStart);
201
+ }
202
+ if (!customElements.get('focus-trap-end')) {
203
+ customElements.define('focus-trap-end', FocusTrapEnd);
204
+ }
199
205
 
200
206
  /**
201
207
  * Custom element that creates an accessible modal dialog panel with focus management
@@ -203,7 +209,6 @@
203
209
  */
204
210
  class DialogPanel extends HTMLElement {
205
211
  #handleTransitionEnd;
206
- #scrollPosition = 0;
207
212
 
208
213
  /**
209
214
  * Clean up event listeners when component is removed from DOM
@@ -216,38 +221,6 @@
216
221
  _.#handleTransitionEnd
217
222
  );
218
223
  }
219
-
220
- // Ensure body scroll is restored if component is removed while open
221
- document.body.classList.remove('overflow-hidden');
222
- this.#restoreScroll();
223
- }
224
-
225
- /**
226
- * Saves current scroll position and locks body scrolling
227
- * @private
228
- */
229
- #lockScroll() {
230
- const _ = this;
231
- // Save current scroll position
232
- _.#scrollPosition = window.pageYOffset;
233
-
234
- // Apply fixed position to body
235
- document.body.classList.add('overflow-hidden');
236
- document.body.style.top = `-${_.#scrollPosition}px`;
237
- }
238
-
239
- /**
240
- * Restores scroll position when dialog is closed
241
- * @private
242
- */
243
- #restoreScroll() {
244
- const _ = this;
245
- // Remove fixed positioning
246
- document.body.classList.remove('overflow-hidden');
247
- document.body.style.removeProperty('top');
248
-
249
- // Restore scroll position
250
- window.scrollTo(0, _.#scrollPosition);
251
224
  }
252
225
  /**
253
226
  * Initializes the dialog panel, sets up focus trap and overlay
@@ -261,7 +234,6 @@
261
234
  _.setAttribute('aria-hidden', 'true');
262
235
 
263
236
  _.contentPanel = _.querySelector('dialog-content');
264
- _.focusTrap = document.createElement('focus-trap');
265
237
  _.triggerEl = null;
266
238
 
267
239
  // Create a handler for transition end events
@@ -282,6 +254,22 @@
282
254
  }
283
255
  };
284
256
 
257
+ // Set up focus-trap inside dialog-content
258
+ // Check if focus-trap already exists
259
+ _.focusTrap = _.contentPanel.querySelector('focus-trap');
260
+ if (!_.focusTrap) {
261
+ _.focusTrap = document.createElement('focus-trap');
262
+
263
+ // Move all existing dialog-content children into focus-trap
264
+ const existingContent = Array.from(_.contentPanel.childNodes);
265
+ existingContent.forEach((child) =>
266
+ _.focusTrap.appendChild(child)
267
+ );
268
+
269
+ // Insert focus-trap inside dialog-content
270
+ _.contentPanel.appendChild(_.focusTrap);
271
+ }
272
+
285
273
  // Ensure we have labelledby and describedby references
286
274
  if (!_.getAttribute('aria-labelledby')) {
287
275
  const heading = _.querySelector('h1, h2, h3');
@@ -293,14 +281,6 @@
293
281
  }
294
282
  }
295
283
 
296
- _.contentPanel.parentNode.insertBefore(
297
- _.focusTrap,
298
- _.contentPanel
299
- );
300
- _.focusTrap.appendChild(_.contentPanel);
301
-
302
- _.focusTrap.setupTrap();
303
-
304
284
  // Add modal overlay
305
285
  _.prepend(document.createElement('dialog-overlay'));
306
286
  _.#bindUI();
@@ -328,7 +308,7 @@
328
308
 
329
309
  // Handle close buttons
330
310
  _.addEventListener('click', (e) => {
331
- if (!e.target.closest('[data-action="hide-dialog"]')) return;
311
+ if (!e.target.closest('[data-action-hide-dialog]')) return;
332
312
  _.hide();
333
313
  });
334
314
 
@@ -374,6 +354,9 @@
374
354
  // If event was canceled (preventDefault was called), don't show the dialog
375
355
  if (!showAllowed) return false;
376
356
 
357
+ // Add open attribute for CSS :has() selector
358
+ _.setAttribute('open', '');
359
+
377
360
  // Remove the hidden class first to ensure content is rendered
378
361
  _.contentPanel.classList.remove('hidden');
379
362
 
@@ -381,13 +364,12 @@
381
364
  requestAnimationFrame(() => {
382
365
  // Update ARIA states
383
366
  _.setAttribute('aria-hidden', 'false');
367
+
368
+ // set trigger element to expanded: true
384
369
  if (_.triggerEl) {
385
370
  _.triggerEl.setAttribute('aria-expanded', 'true');
386
371
  }
387
372
 
388
- // Lock body scrolling and save scroll position
389
- _.#lockScroll();
390
-
391
373
  // Focus management
392
374
  const firstFocusable = _.querySelector(
393
375
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -406,8 +388,6 @@
406
388
  })
407
389
  );
408
390
  });
409
-
410
- return true;
411
391
  }
412
392
 
413
393
  /**
@@ -432,20 +412,30 @@
432
412
  // If event was canceled (preventDefault was called), don't hide the dialog
433
413
  if (!hideAllowed) return false;
434
414
 
435
- // Restore body scroll and scroll position
436
- _.#restoreScroll();
415
+ // ensure focus is moved out of the dialog
416
+ const activeElement = document.activeElement;
417
+ if (activeElement && _.contains(activeElement)) {
418
+ // Blur the currently focused element if it's inside the dialog
419
+ activeElement.blur();
420
+ }
437
421
 
438
- // Update ARIA states
422
+ // Update ARIA states and restore focus
439
423
  if (_.triggerEl) {
440
424
  // remove focus from modal panel first
441
425
  _.triggerEl.focus();
442
426
  // mark trigger as no longer expanded
443
427
  _.triggerEl.setAttribute('aria-expanded', 'false');
428
+ } else {
429
+ // Move focus to body to ensure it's not trapped
430
+ document.body.focus();
444
431
  }
445
432
 
446
433
  // Set aria-hidden to start transition
447
434
  // The transitionend event handler will add display:none when complete
448
435
  _.setAttribute('aria-hidden', 'true');
436
+ // Remove open attribute for CSS :has() selector
437
+
438
+ _.removeAttribute('open');
449
439
 
450
440
  // Dispatch hide event - dialog is now starting to hide
451
441
  _.dispatchEvent(
@@ -466,8 +456,7 @@
466
456
  class DialogOverlay extends HTMLElement {
467
457
  constructor() {
468
458
  super();
469
- this.setAttribute('tabindex', '-1'); // Changed to -1 as it shouldn't be focusable
470
- this.setAttribute('aria-hidden', 'true');
459
+ this.setAttribute('tabindex', '-1');
471
460
  this.dialogPanel = this.closest('dialog-panel');
472
461
  this.#bindUI();
473
462
  }
@@ -486,7 +475,7 @@
486
475
  class DialogContent extends HTMLElement {
487
476
  constructor() {
488
477
  super();
489
- this.setAttribute('role', 'document'); // Optional: helps with document structure
478
+ this.setAttribute('role', 'document');
490
479
  }
491
480
  }
492
481
 
@@ -1 +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]}
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\nif (!customElements.get('focus-trap')) {\n\tcustomElements.define('focus-trap', FocusTrap);\n}\nif (!customElements.get('focus-trap-start')) {\n\tcustomElements.define('focus-trap-start', FocusTrapStart);\n}\nif (!customElements.get('focus-trap-end')) {\n\tcustomElements.define('focus-trap-end', FocusTrapEnd);\n}\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\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\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_.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// Set up focus-trap inside dialog-content\n\t\t// Check if focus-trap already exists\n\t\t_.focusTrap = _.contentPanel.querySelector('focus-trap');\n\t\tif (!_.focusTrap) {\n\t\t\t_.focusTrap = document.createElement('focus-trap');\n\n\t\t\t// Move all existing dialog-content children into focus-trap\n\t\t\tconst existingContent = Array.from(_.contentPanel.childNodes);\n\t\t\texistingContent.forEach((child) =>\n\t\t\t\t_.focusTrap.appendChild(child)\n\t\t\t);\n\n\t\t\t// Insert focus-trap inside dialog-content\n\t\t\t_.contentPanel.appendChild(_.focusTrap);\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// 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// Add open attribute for CSS :has() selector\n\t\t_.setAttribute('open', '');\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\n\t\t\t// set trigger element to expanded: true\n\t\t\tif (_.triggerEl) {\n\t\t\t\t_.triggerEl.setAttribute('aria-expanded', 'true');\n\t\t\t}\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\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// ensure focus is moved out of the dialog\n\t\tconst activeElement = document.activeElement;\n\t\tif (activeElement && _.contains(activeElement)) {\n\t\t\t// Blur the currently focused element if it's inside the dialog\n\t\t\tactiveElement.blur();\n\t\t}\n\n\t\t// Update ARIA states and restore focus\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} else {\n\t\t\t// Move focus to body to ensure it's not trapped\n\t\t\tdocument.body.focus();\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\t\t// Remove open attribute for CSS :has() selector\n\n\t\t_.removeAttribute('open');\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');\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');\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]}
@@ -1 +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}
1
+ :root{--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}body:has(dialog-panel[open]){overflow:hidden}
@@ -1 +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})}));
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"),a=t(n);if(0===a.length)return;const s=a[0],i=a[a.length-1];e.relatedTarget===s?i.focus():s.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.get("focus-trap")||customElements.define("focus-trap",FocusTrap),customElements.get("focus-trap-start")||customElements.define("focus-trap-start",FocusTrapStart),customElements.get("focus-trap-end")||customElements.define("focus-trap-end",FocusTrapEnd);class DialogPanel extends HTMLElement{#e;disconnectedCallback(){const e=this;e.contentPanel&&e.contentPanel.removeEventListener("transitionend",e.#e)}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.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.focusTrap=e.contentPanel.querySelector("focus-trap"),!e.focusTrap){e.focusTrap=document.createElement("focus-trap");Array.from(e.contentPanel.childNodes).forEach(t=>e.focusTrap.appendChild(t)),e.contentPanel.appendChild(e.focusTrap)}if(!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.prepend(document.createElement("dialog-overlay")),e.#t(),e.#n()}#t(){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)}#n(){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}});if(!t.dispatchEvent(n))return!1;t.setAttribute("open",""),t.contentPanel.classList.remove("hidden"),requestAnimationFrame(()=>{t.setAttribute("aria-hidden","false"),t.triggerEl&&t.triggerEl.setAttribute("aria-expanded","true");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}}))})}hide(){const e=this,t=new CustomEvent("beforeHide",{bubbles:!0,cancelable:!0,detail:{triggerElement:e.triggerEl}});if(!e.dispatchEvent(t))return!1;const n=document.activeElement;return n&&e.contains(n)&&n.blur(),e.triggerEl?(e.triggerEl.focus(),e.triggerEl.setAttribute("aria-expanded","false")):document.body.focus(),e.setAttribute("aria-hidden","true"),e.removeAttribute("open"),e.dispatchEvent(new CustomEvent("hide",{bubbles:!0,detail:{triggerElement:e.triggerEl}})),!0}}class DialogOverlay extends HTMLElement{constructor(){super(),this.setAttribute("tabindex","-1"),this.dialogPanel=this.closest("dialog-panel"),this.#t()}#t(){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})});
@@ -1,2 +1,2 @@
1
- @forward "scss/variables";
2
- @forward "scss/dialog-panel";
1
+ @forward 'scss/variables';
2
+ @forward 'scss/dialog-panel';
@@ -2,72 +2,77 @@
2
2
  @use 'variables' as vars;
3
3
 
4
4
  dialog-panel {
5
- /* Make it take no space and be invisible in the document flow */
6
- display: contents;
5
+ /* Make it take no space and be invisible in the document flow */
6
+ display: contents;
7
7
 
8
- &[aria-hidden='false'] {
9
- dialog-overlay,
10
- dialog-content {
11
- pointer-events: auto;
12
- opacity: 1;
13
- transform: scale(1);
14
- filter: blur(0px);
15
- }
16
- }
8
+ &[aria-hidden='false'] {
9
+ dialog-overlay,
10
+ dialog-content {
11
+ pointer-events: auto;
12
+ opacity: 1;
13
+ transform: scale(1);
14
+ filter: blur(0px);
15
+ }
16
+ }
17
17
  }
18
18
 
19
19
  /* Overlay background */
20
20
  dialog-overlay {
21
- position: fixed;
22
- top: 0;
23
- left: 0;
24
- width: 100vw;
25
- height: 100vh;
26
- opacity: 0;
27
- pointer-events: none;
28
- z-index: var(--dp-overlay-z-index, 1000);
29
- transition: var(--dp-overlay-transition, all 300ms ease-out);
30
- background-color: var(
31
- --dp-overlay-background,
32
- rgba(20, 23, 26, 0.4)
33
- );
34
- backdrop-filter: var(
35
- --dp-overlay-backdrop-filter,
36
- blur(2px) saturate(120%)
37
- );
21
+ position: fixed;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100vw;
25
+ height: 100vh;
26
+ opacity: 0;
27
+ pointer-events: none;
28
+ z-index: var(--dp-overlay-z-index, 1000);
29
+ transition: var(--dp-overlay-transition, all 300ms ease-out);
30
+ background-color: var(
31
+ --dp-overlay-background,
32
+ rgba(20, 23, 26, 0.4)
33
+ );
34
+ backdrop-filter: var(
35
+ --dp-overlay-backdrop-filter,
36
+ blur(2px) saturate(120%)
37
+ );
38
38
  }
39
39
 
40
40
  dialog-content {
41
- position: fixed;
42
- top: 50%;
43
- left: 50%;
44
- transform: translate(-50%, -50%) scale(0.95);
45
- max-width: 90vw;
46
- max-height: 85vh;
47
- display: var(--dp-content-display, block);
48
- opacity: 0;
49
- background: var(--dp-content-background, white);
50
- pointer-events: none;
51
- z-index: var(--dp-content-z-index, 1001);
52
- box-shadow: var(
53
- --dp-content-shadow,
54
- 0 10px 25px rgba(0, 0, 0, 0.15)
55
- );
56
- border-radius: var(--dp-content-border-radius, 8px);
57
- overflow: auto;
58
- transition:
59
- opacity var(--dp-transition-duration, 300ms)
60
- var(--dp-transition-timing, ease-out),
61
- transform var(--dp-transition-duration, 300ms)
62
- var(--dp-transition-timing, ease-out);
41
+ position: fixed;
42
+ top: 50%;
43
+ left: 50%;
44
+ transform: translate(-50%, -50%) scale(0.95);
45
+ max-width: 90vw;
46
+ max-height: 85vh;
47
+ display: var(--dp-content-display, block);
48
+ opacity: 0;
49
+ background: var(--dp-content-background, white);
50
+ pointer-events: none;
51
+ z-index: var(--dp-content-z-index, 1001);
52
+ box-shadow: var(
53
+ --dp-content-shadow,
54
+ 0 10px 25px rgba(0, 0, 0, 0.15)
55
+ );
56
+ border-radius: var(--dp-content-border-radius, 8px);
57
+ overflow: auto;
58
+ transition:
59
+ opacity var(--dp-transition-duration, 300ms)
60
+ var(--dp-transition-timing, ease-out),
61
+ transform var(--dp-transition-duration, 300ms)
62
+ var(--dp-transition-timing, ease-out);
63
63
 
64
- /* When shown, reset transform to center */
65
- dialog-panel[aria-hidden='false'] & {
66
- transform: translate(-50%, -50%) scale(1);
67
- }
64
+ /* When shown, reset transform to center */
65
+ dialog-panel[aria-hidden='false'] & {
66
+ transform: translate(-50%, -50%) scale(1);
67
+ }
68
+ }
69
+
70
+ /* When explicitly hidden, remove from layout */
71
+ dialog-content.hidden {
72
+ display: none;
73
+ }
68
74
 
69
- /* When explicitly hidden, remove from layout */
70
- &.hidden {
71
- display: none;
72
- }
75
+ // Body scroll lock when dialog is open using :has() selector
76
+ body:has(dialog-panel[open]) {
77
+ overflow: hidden;
73
78
  }
@@ -2,13 +2,6 @@
2
2
  // SCSS variables for internal component use and customization
3
3
  // These variables can be customized by the user
4
4
 
5
- // Layout
6
- $panel-top: 0 !default;
7
- $panel-left: 0 !default;
8
- $panel-width: 100vw !default;
9
- $panel-height: 100vh !default;
10
- $panel-z-index: 10 !default;
11
-
12
5
  // Overlay
13
6
  $overlay-z-index: 1000 !default;
14
7
  $overlay-background: rgba(20, 23, 26, 0.4) !default;
@@ -28,27 +21,20 @@ $transition-timing: ease-out !default;
28
21
 
29
22
  // Define CSS Custom Properties using SCSS values
30
23
  :root {
31
- // Layout
32
- --dp-panel-top: #{$panel-top};
33
- --dp-panel-left: #{$panel-left};
34
- --dp-panel-width: #{$panel-width};
35
- --dp-panel-height: #{$panel-height};
36
- --dp-panel-z-index: #{$panel-z-index};
37
-
38
- // Overlay
39
- --dp-overlay-z-index: #{$overlay-z-index};
40
- --dp-overlay-background: #{$overlay-background};
41
- --dp-overlay-backdrop-filter: #{$overlay-backdrop-filter};
42
- --dp-overlay-transition: #{$overlay-transition};
43
-
44
- // Content
45
- --dp-content-display: #{$content-display};
46
- --dp-content-background: #{$content-background};
47
- --dp-content-z-index: #{$content-z-index};
48
- --dp-content-shadow: #{$content-shadow};
49
- --dp-content-border-radius: #{$content-border-radius};
50
-
51
- // Animation
52
- --dp-transition-duration: #{$transition-duration};
53
- --dp-transition-timing: #{$transition-timing};
24
+ // Overlay
25
+ --dp-overlay-z-index: #{$overlay-z-index};
26
+ --dp-overlay-background: #{$overlay-background};
27
+ --dp-overlay-backdrop-filter: #{$overlay-backdrop-filter};
28
+ --dp-overlay-transition: #{$overlay-transition};
29
+
30
+ // Content
31
+ --dp-content-display: #{$content-display};
32
+ --dp-content-background: #{$content-background};
33
+ --dp-content-z-index: #{$content-z-index};
34
+ --dp-content-shadow: #{$content-shadow};
35
+ --dp-content-border-radius: #{$content-border-radius};
36
+
37
+ // Animation
38
+ --dp-transition-duration: #{$transition-duration};
39
+ --dp-transition-timing: #{$transition-timing};
54
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magic-spells/dialog-panel",
3
- "version": "0.2.2",
3
+ "version": "0.3.0",
4
4
  "description": "A lightweight, customizable Dialog Panel web component for creating accessible and responsive modal dialogs.",
5
5
  "author": "Cory Schulz",
6
6
  "license": "MIT",
@@ -63,11 +63,11 @@
63
63
  "not ie <= 11"
64
64
  ],
65
65
  "devDependencies": {
66
- "@eslint/js": "^8.57.0",
66
+ "@eslint/js": "^9.38.0",
67
67
  "@rollup/plugin-node-resolve": "^15.2.3",
68
68
  "@rollup/plugin-terser": "^0.4.4",
69
- "eslint": "^8.0.0",
70
- "globals": "^13.24.0",
69
+ "eslint": "^9.38.0",
70
+ "globals": "^15.15.0",
71
71
  "prettier": "^3.3.3",
72
72
  "rollup": "^3.0.0",
73
73
  "rollup-plugin-copy": "^3.5.0",
@@ -76,6 +76,6 @@
76
76
  "sass": "^1.86.3"
77
77
  },
78
78
  "dependencies": {
79
- "@magic-spells/focus-trap": "^1.0.6"
79
+ "@magic-spells/focus-trap": "^1.0.7"
80
80
  }
81
81
  }