@magic-spells/dropdown-panel/dist/dropdown-panel.min.js

Accessible custom dropdown panel web component.

!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).DropdownPanel={})}(this,(function(e){"use strict";class t extends HTMLElement{constructor(){super()}connectedCallback(){const e=this;if(e.setAttribute("tabindex","-1"),e.trigger=e.querySelector(":scope > dropdown-trigger"),e.panel=e.querySelector(":scope > dropdown-panel")||e.querySelector(":scope > dropdown-menu"),!e.trigger||!e.panel)return void console.warn("dropdown-component requires <dropdown-trigger> and either <dropdown-panel> or <dropdown-menu> as direct children");"dropdown-panel"===e.panel.tagName.toLowerCase()?e.style.position="relative":e.style.position="static";const t=e.panel.id||`dropdown-panel-${Date.now()}`;e.panel.id=t,e.trigger.id||(e.trigger.id=`dropdown-trigger-${Date.now()}`),e.trigger.setAttribute("aria-controls",t),e.trigger.setAttribute("aria-expanded","false"),e.panel.setAttribute("aria-hidden","true"),e.panel.setAttribute("role","menu"),e.panel.setAttribute("aria-labelledby",e.trigger.id),e.hide(),e.addEventListener("mouseenter",(()=>e.show())),e.addEventListener("mouseleave",(()=>e.hide())),e.trigger.addEventListener("keydown",(t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.toggle()),"Escape"===t.key&&(t.preventDefault(),e.hide(),e.trigger.focus())})),e.panel.addEventListener("keydown",(t=>{"Escape"===t.key&&(t.preventDefault(),e.hide(),e.trigger.focus())}))}toggle(){const e=this;"true"===e.panel.getAttribute("aria-hidden")?e.show():e.hide()}show(){const e=this;e.panel.setAttribute("aria-hidden","false"),e.panel.removeAttribute("inert"),e.trigger.setAttribute("aria-expanded","true")}hide(){const e=this;e.panel.setAttribute("aria-hidden","true"),e.panel.setAttribute("inert",""),e.trigger.setAttribute("aria-expanded","false")}}customElements.get("dropdown-component")||customElements.define("dropdown-component",t);class n extends HTMLElement{constructor(){super()}connectedCallback(){const e=this;e.id||(e.id=`dropdown-trigger-${Date.now()}`),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.hasAttribute("role")||e.setAttribute("role","button"),e.style.userSelect="none"}}class r extends HTMLElement{constructor(){super()}connectedCallback(){const e=this;e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),e.hasAttribute("role")||e.setAttribute("role","menu")}}class o extends HTMLElement{constructor(){super()}connectedCallback(){const e=this;e.hasAttribute("aria-hidden")||e.setAttribute("aria-hidden","true"),e.hasAttribute("role")||e.setAttribute("role","menubar")}}customElements.get("dropdown-menu")||customElements.define("dropdown-menu",o),customElements.get("dropdown-component")||customElements.define("dropdown-component",t),customElements.get("dropdown-trigger")||customElements.define("dropdown-trigger",n),customElements.get("dropdown-panel")||customElements.define("dropdown-panel",r),customElements.get("dropdown-menu")||customElements.define("dropdown-menu",o),e.DropdownComponent=t,e.DropdownPanel=r,e.DropdownTrigger=n}));