@data-slot/navigation-menu 0.2.4 → 0.2.6
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.
- package/README.md +20 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -71,8 +71,28 @@ const menu = createNavigationMenu(element, {
|
|
|
71
71
|
|--------|------|---------|-------------|
|
|
72
72
|
| `delayOpen` | `number` | `200` | Delay before opening on hover (ms) |
|
|
73
73
|
| `delayClose` | `number` | `150` | Delay before closing on mouse leave (ms) |
|
|
74
|
+
| `openOnFocus` | `boolean` | `true` | Whether focusing a trigger opens its content |
|
|
74
75
|
| `onValueChange` | `(value: string \| null) => void` | `undefined` | Callback when active item changes |
|
|
75
76
|
|
|
77
|
+
### Data Attributes
|
|
78
|
+
|
|
79
|
+
Options can also be set via data attributes on the root element. JS options take precedence.
|
|
80
|
+
|
|
81
|
+
| Attribute | Type | Default | Description |
|
|
82
|
+
|-----------|------|---------|-------------|
|
|
83
|
+
| `data-delay-open` | number | `200` | Delay before opening on hover (ms) |
|
|
84
|
+
| `data-delay-close` | number | `150` | Delay before closing on mouse leave (ms) |
|
|
85
|
+
| `data-open-on-focus` | boolean | `true` | Whether focusing a trigger opens its content |
|
|
86
|
+
|
|
87
|
+
Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<!-- Faster hover response, no auto-open on focus -->
|
|
91
|
+
<nav data-slot="navigation-menu" data-delay-open="100" data-open-on-focus="false">
|
|
92
|
+
...
|
|
93
|
+
</nav>
|
|
94
|
+
```
|
|
95
|
+
|
|
76
96
|
### Controller
|
|
77
97
|
|
|
78
98
|
| Method/Property | Description |
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const g=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function _(n,r={}){let i=r.delayOpen??d(n,`delayOpen`)??200,a=r.delayClose??d(n,`delayClose`)??150,o=r.openOnFocus??u(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},f=e(n,`navigation-menu-list`),_=t(n,`navigation-menu-item`),v=e(n,`navigation-menu-viewport`),y=e(n,`navigation-menu-indicator`);if(!f||_.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let b=null,x=null,S=-1,C=null,w=null,T=null,E=!1,D=!1,O=!1,k=[],A=null,j=e=>{A?.disconnect(),A=null,!(!v||!e)&&(A=new ResizeObserver(()=>V(e)),A.observe(e))};k.push(()=>A?.disconnect());let M=new Map,N=0;_.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`navigation-menu-trigger`),i=e(t,`navigation-menu-content`);if(r&&i){M.set(n,{item:t,trigger:r,content:i,index:N++});let e=c(n),a=p(r,`nav-menu-trigger-${e}`),o=p(i,`nav-menu-content-${e}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,o),i.setAttribute(`aria-labelledby`,a)}});let P=Array.from(M.values()).map(e=>e.trigger),F=new Map;for(let[e,t]of M)F.set(t.trigger,e);let I=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,L=e=>Array.from(e.querySelectorAll(I)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),R=()=>{C&&(clearTimeout(C),C=null),w&&(clearTimeout(w),w=null)},z=null,B=()=>(z||(z=document.createElement(`div`),z.setAttribute(`data-slot`,`navigation-menu-bridge`),z.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,v&&v.insertBefore(z,v.firstChild),k.push(h(z,`pointerenter`,()=>{R()}))),z),V=e=>{v&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(v),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;v.style.setProperty(`--viewport-width`,`${t.width}px`),v.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=B();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else z&&(z.style.height=`0`)})},H=e=>S===-1||e>S?`right`:`left`,U=e=>{if(!y)return;if(T=e,!e){y.setAttribute(`data-state`,`hidden`);return}let t=f.getBoundingClientRect(),n=e.getBoundingClientRect();y.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),y.style.setProperty(`--indicator-width`,`${n.width}px`),y.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),y.style.setProperty(`--indicator-height`,`${n.height}px`),y.setAttribute(`data-state`,`visible`)},W=(e,t=!1)=>{if(e===b){R();return}if(e!==null&&e===x){R();return}R(),x=e===null?null:e;let r=()=>{let t=b,r=e?M.get(e):null,i=t!==null&&e!==null&&t!==e,a=i&&r?H(r.index):null,o=document.activeElement;if(e===null&&o&&n.contains(o)){let e=t?M.get(t)?.trigger:null;e&&e.focus()}if(M.forEach(({trigger:n,content:r,item:i},o)=>{let s=o===e,c=o===t;if(m(n,`expanded`,s),n.setAttribute(`data-state`,s?`open`:`closed`),s||c&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),l(r,!0),r.hidden=!0,c&&a){let e=a===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(a){let e=a===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),l(r.content,!1),r.content.hidden=!1,S=r.index,V(r.content),j(r.content),U(r.trigger)}else j(null);let c=e!==null;n.setAttribute(`data-state`,c?`open`:`closed`),a?n.setAttribute(`data-motion`,a===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),v&&(v.setAttribute(`data-state`,c?`open`:`closed`),c&&!i?v.setAttribute(`data-instant`,``):i&&v.removeAttribute(`data-instant`),a&&v.style.setProperty(`--motion-direction`,a===`right`?`1`:`-1`)),b=e,x=null,e===null&&U(null),g(n,`navigation-menu:change`,{value:e}),s?.(e)};t?r():e!==null&&b===null?C=setTimeout(r,i):e!==null&&b!==null?r():w=setTimeout(r,a)};n.setAttribute(`data-state`,`closed`),v&&v.setAttribute(`data-state`,`closed`),y&&y.setAttribute(`data-state`,`hidden`),M.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),m(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===P[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,l(t,!0),t.hidden=!0}),M.forEach(({item:e,trigger:t},n)=>{k.push(h(t,`pointerenter`,()=>{E||U(t)})),k.push(h(e,`pointerenter`,()=>{E||W(n)})),k.push(h(e,`pointerleave`,()=>{x===n&&b===null&&(R(),x=null)})),k.push(h(t,`focus`,()=>{D||(o&&W(n,!0),U(t))})),k.push(h(t,`pointerdown`,()=>{D=!0})),k.push(h(t,`click`,()=>{R(),b===n&&E?(E=!1,W(null,!0),U(null)):b===n&&!E?(E=!0,U(t)):(E=!0,W(n,!0),U(t)),D=!1}))}),k.push(h(n,`pointerenter`,()=>{O=!0}),h(n,`pointerleave`,()=>{O=!1,E||(W(null),U(null))}),h(n,`pointerdown`,R)),v&&k.push(h(v,`pointerenter`,()=>{R()}),h(v,`transitionend`,e=>{if(e.target!==v)return;let t=b?M.get(b):null;t&&V(t.content)})),M.forEach(({content:e})=>{k.push(h(e,`pointerenter`,()=>{R()}))}),k.push(h(f,`keydown`,e=>{let t=e.target,n=P.indexOf(t);if(n===-1)return;let r=F.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=P.length-1);break;case`ArrowRight`:i=n+1,i>=P.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(E=!0,W(r,!0),requestAnimationFrame(()=>{let e=M.get(r);if(!e)return;let t=L(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=P.length-1;break;case`Escape`:E=!1,W(null,!0),U(null);return;default:return}e.preventDefault();let a=P[i];a&&(P.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),U(a))})),M.forEach(({content:e,trigger:t})=>{k.push(h(e,`keydown`,n=>{let r=n.target,i=L(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),E=!1,W(null,!0),U(null),t.focus();break}}))});let G=()=>n.contains(document.activeElement)||O||E;k.push(h(document,`pointerup`,()=>{D=!1},{capture:!0}),h(document,`pointercancel`,()=>{D=!1},{capture:!0})),k.push(h(document,`focusin`,e=>{b!==null&&(n.contains(e.target)||(E=!1,W(null,!0),U(null)))})),k.push(h(document,`pointerdown`,e=>{b!==null&&G()&&(n.contains(e.target)||(E=!1,W(null,!0),U(null)))})),k.push(h(document,`keydown`,e=>{e.key!==`Escape`||b===null||G()&&(E=!1,W(null,!0),U(null))})),k.push(h(window,`resize`,()=>{T&&requestAnimationFrame(()=>U(T))}),h(f,`scroll`,()=>{T&&requestAnimationFrame(()=>U(T))}));let K={get value(){return b},open:e=>W(e,!0),close:()=>W(null,!0),destroy:()=>{R(),k.forEach(e=>e()),k.length=0}};return K}const v=new WeakSet;function y(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(v.has(r))continue;v.add(r),t.push(_(r))}return t}exports.create=y,exports.createNavigationMenu=_;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}let f=0;const p=(e,t)=>e.id||=`${t}-${++f}`,m=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function h(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const g=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function _(n,r={}){let i=r.delayOpen??d(n,`delayOpen`)??200,a=r.delayClose??d(n,`delayClose`)??150,o=r.openOnFocus??u(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},f=e(n,`navigation-menu-list`),_=t(n,`navigation-menu-item`),v=e(n,`navigation-menu-viewport`),y=e(n,`navigation-menu-indicator`);if(!f||_.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let b=null,x=null,S=-1,C=null,w=null,T=null,E=!1,D=!1,O=!1,k=[],A=null,j=e=>{A?.disconnect(),A=null,!(!v||!e)&&(A=new ResizeObserver(()=>V(e)),A.observe(e))};k.push(()=>A?.disconnect());let M=new Map,N=0;_.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`navigation-menu-trigger`),i=e(t,`navigation-menu-content`);if(r&&i){M.set(n,{item:t,trigger:r,content:i,index:N++});let e=c(n),a=p(r,`nav-menu-trigger-${e}`),o=p(i,`nav-menu-content-${e}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,o),i.setAttribute(`aria-labelledby`,a)}});let P=Array.from(M.values()).map(e=>e.trigger),F=new Map;for(let[e,t]of M)F.set(t.trigger,e);let I=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,L=e=>Array.from(e.querySelectorAll(I)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),R=()=>{C&&(clearTimeout(C),C=null),w&&(clearTimeout(w),w=null)},z=null,B=()=>(z||(z=document.createElement(`div`),z.setAttribute(`data-slot`,`navigation-menu-bridge`),z.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,v&&v.insertBefore(z,v.firstChild),k.push(h(z,`pointerenter`,()=>{R()}))),z),V=e=>{v&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(v),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;v.style.setProperty(`--viewport-width`,`${t.width}px`),v.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=B();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else z&&(z.style.height=`0`)})},H=e=>S===-1||e>S?`right`:`left`,U=e=>{if(!y)return;if(T=e,!e){y.setAttribute(`data-state`,`hidden`);return}let t=f.getBoundingClientRect(),n=e.getBoundingClientRect();y.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),y.style.setProperty(`--indicator-width`,`${n.width}px`),y.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),y.style.setProperty(`--indicator-height`,`${n.height}px`),y.setAttribute(`data-state`,`visible`)},W=(e,t=!1)=>{if(e===b){R();return}if(e!==null&&e===x){R();return}R(),x=e===null?null:e;let r=()=>{let t=b,r=e?M.get(e):null,i=t!==null&&e!==null&&t!==e,a=i&&r?H(r.index):null,o=document.activeElement;if(e===null&&o&&n.contains(o)){let e=t?M.get(t)?.trigger:null;e&&e.focus()}if(M.forEach(({trigger:n,content:r,item:i},o)=>{let s=o===e,c=o===t;if(m(n,`expanded`,s),n.setAttribute(`data-state`,s?`open`:`closed`),s||c&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),l(r,!0),r.hidden=!0,c&&a){let e=a===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(a){let e=a===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),l(r.content,!1),r.content.hidden=!1,S=r.index,V(r.content),j(r.content),U(r.trigger)}else j(null);let c=e!==null;n.setAttribute(`data-state`,c?`open`:`closed`),a?n.setAttribute(`data-motion`,a===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),v&&(v.setAttribute(`data-state`,c?`open`:`closed`),c&&!i?v.setAttribute(`data-instant`,``):i&&v.removeAttribute(`data-instant`),a&&v.style.setProperty(`--motion-direction`,a===`right`?`1`:`-1`)),b=e,x=null,e===null&&U(null),g(n,`navigation-menu:change`,{value:e}),s?.(e)};t?r():e!==null&&b===null?C=setTimeout(r,i):e!==null&&b!==null?r():w=setTimeout(r,a)};n.setAttribute(`data-state`,`closed`),v&&v.setAttribute(`data-state`,`closed`),y&&y.setAttribute(`data-state`,`hidden`),M.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),m(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===P[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,l(t,!0),t.hidden=!0}),M.forEach(({item:e,trigger:t},n)=>{k.push(h(t,`pointerenter`,()=>{E||U(t)})),k.push(h(e,`pointerenter`,()=>{E||W(n)})),k.push(h(e,`pointerleave`,()=>{x===n&&b===null&&(R(),x=null)})),k.push(h(t,`focus`,()=>{D||(o&&W(n,!0),U(t))})),k.push(h(t,`pointerdown`,()=>{D=!0})),k.push(h(t,`click`,()=>{R(),b===n&&E?(E=!1,W(null,!0),U(null)):b===n&&!E?(E=!0,U(t)):(E=!0,W(n,!0),U(t)),D=!1}))}),k.push(h(n,`pointerenter`,()=>{O=!0}),h(n,`pointerleave`,()=>{O=!1,E||(W(null),U(null))}),h(n,`pointerdown`,R)),v&&k.push(h(v,`pointerenter`,()=>{R()}),h(v,`transitionend`,e=>{if(e.target!==v)return;let t=b?M.get(b):null;t&&V(t.content)})),M.forEach(({content:e})=>{k.push(h(e,`pointerenter`,()=>{R()}))}),k.push(h(f,`keydown`,e=>{let t=e.target,n=P.indexOf(t);if(n===-1)return;let r=F.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=P.length-1);break;case`ArrowRight`:i=n+1,i>=P.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(E=!0,W(r,!0),requestAnimationFrame(()=>{let e=M.get(r);if(!e)return;let t=L(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=P.length-1;break;case`Escape`:E=!1,W(null,!0),U(null);return;default:return}e.preventDefault();let a=P[i];a&&(P.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),U(a))})),M.forEach(({content:e,trigger:t})=>{k.push(h(e,`keydown`,n=>{let r=n.target,i=L(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),E=!1,W(null,!0),U(null),t.focus();break}}))});let G=()=>n.contains(document.activeElement)||O||E;k.push(h(document,`pointerup`,()=>{D=!1},{capture:!0}),h(document,`pointercancel`,()=>{D=!1},{capture:!0})),k.push(h(document,`focusin`,e=>{b!==null&&(n.contains(e.target)||(E=!1,W(null,!0),U(null)))})),k.push(h(document,`pointerdown`,e=>{b!==null&&G()&&(n.contains(e.target)||(E=!1,W(null,!0),U(null)))})),k.push(h(document,`keydown`,e=>{e.key!==`Escape`||b===null||G()&&(E=!1,W(null,!0),U(null))})),k.push(h(window,`resize`,()=>{T&&requestAnimationFrame(()=>U(T))}),h(f,`scroll`,()=>{T&&requestAnimationFrame(()=>U(T))}));let K={get value(){return b},open:e=>W(e,!0),close:()=>W(null,!0),destroy:()=>{R(),k.forEach(e=>e()),k.length=0}};return K}const v=new WeakSet;function y(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(v.has(r))continue;v.add(r),t.push(_(r))}return t}export{y as create,_ as createNavigationMenu};
|