@data-slot/navigation-menu 0.2.52 → 0.2.53

package/README.md

@@ -145,9 +145,14 @@ Can be set on:
 
 - `navigation-menu-indicator` - Animated highlight that follows the hovered trigger
 - `navigation-menu-viewport` - Container for content with size transitions
+- `navigation-menu-positioner` - Generated wrapper used while active content is portaled to `document.body`
 
 ## Styling
 
+Active `navigation-menu-content` is portaled to `document.body` while open. A generated
+`navigation-menu-positioner` wrapper is positioned at the navigation root and contains the
+active panel so submenu layers are not clipped by local stacking contexts.
+
 ### Basic Styling
 
 ```css
@@ -284,4 +289,3 @@ element.dispatchEvent(
 ## License
 
 MIT
-

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`start`,`center`,`end`];function n(n,r={}){let i=r.delayOpen??(0,e.getDataNumber)(n,`delayOpen`)??200,a=r.delayClose??(0,e.getDataNumber)(n,`delayClose`)??150,o=r.openOnFocus??(0,e.getDataBool)(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},u=(0,e.getPart)(n,`navigation-menu-list`),d=(0,e.getParts)(n,`navigation-menu-item`),f=(0,e.getPart)(n,`navigation-menu-viewport`),p=(0,e.getPart)(n,`navigation-menu-indicator`);if(!u||d.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let m=null,h=null,g=-1,_=null,v=null,y=null,b=!1,x=!1,S=!1,C=[],w=null,T=e=>{w?.disconnect(),w=null,!(!f||!e)&&(w=new ResizeObserver(()=>P(e.content,e.trigger,e.align)),w.observe(e.content))};C.push(()=>w?.disconnect());let E=new Map,D=0;d.forEach(r=>{let i=r.dataset.value;if(!i)return;let a=(0,e.getPart)(r,`navigation-menu-trigger`),o=(0,e.getPart)(r,`navigation-menu-content`);if(a&&o){let s=(0,e.getDataEnum)(o,`align`,t)??(0,e.getDataEnum)(r,`align`,t)??(0,e.getDataEnum)(n,`align`,t)??`start`;E.set(i,{item:r,trigger:a,content:o,index:D++,align:s});let l=c(i),u=(0,e.ensureId)(a,`nav-menu-trigger-${l}`),d=(0,e.ensureId)(o,`nav-menu-content-${l}`);a.setAttribute(`aria-haspopup`,`true`),a.setAttribute(`aria-controls`,d),o.setAttribute(`aria-labelledby`,u)}});let O=Array.from(E.values()).map(e=>e.trigger),k=new Map;for(let[e,t]of E)k.set(t.trigger,e);let A=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),j=()=>{_&&=(clearTimeout(_),null),v&&=(clearTimeout(v),null)},M=null,N=()=>(M||(M=document.createElement(`div`),M.setAttribute(`data-slot`,`navigation-menu-bridge`),M.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,f&&f.insertBefore(M,f.firstChild),C.push((0,e.on)(M,`pointerenter`,()=>{j()}))),M),P=(e,t,r)=>{f&&requestAnimationFrame(()=>{let i=e.firstElementChild,a=i?.getBoundingClientRect(),o=i?getComputedStyle(i):null,s=o&&parseFloat(o.marginTop)||0,c=o&&parseFloat(o.marginBottom)||0,l=a??e.getBoundingClientRect(),u=l.height+s+c,d=getComputedStyle(f),p=parseFloat(d.marginTop)||0,m=e.getBoundingClientRect();f.style.setProperty(`--viewport-width`,`${m.width}px`),f.style.setProperty(`--viewport-height`,`${u}px`);let h=n.getBoundingClientRect(),g=t.getBoundingClientRect(),_;_=r===`center`?g.left-h.left+g.width/2-l.width/2:r===`end`?g.right-h.left-l.width:g.left-h.left,f.style.setProperty(`--viewport-left`,`${_}px`),f.style.left=`${_}px`,e.style.left=`${_}px`;let v=s+p;if(v>0){let e=N();e.style.height=`${v}px`,e.style.transform=`translateY(-${v}px)`}else M&&(M.style.height=`0`)})},F=e=>g===-1||e>g?`right`:`left`,I=e=>{if(!p)return;if(y=e,!e){p.setAttribute(`data-state`,`hidden`);return}let t=u.getBoundingClientRect(),n=e.getBoundingClientRect();p.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),p.style.setProperty(`--indicator-width`,`${n.width}px`),p.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(f&&parseFloat(getComputedStyle(f).marginTop)||0)<1?1:0;p.style.setProperty(`--indicator-height`,`${n.height-r}px`),p.setAttribute(`data-state`,`visible`)},L=(t,r=!1)=>{if(t===m){j();return}if(t!==null&&t===h){j();return}j(),h=t===null?null:t;let o=()=>{let r=m,i=t?E.get(t):null,a=r!==null&&t!==null&&r!==t,o=a&&i?F(i.index):null,c=document.activeElement;if(t===null&&c&&n.contains(c)){let e=r?E.get(r)?.trigger:null;e&&e.focus()}if(E.forEach(({trigger:n,content:i,item:a},s)=>{let c=s===t,u=s===r;if((0,e.setAria)(n,`expanded`,c),n.setAttribute(`data-state`,c?`open`:`closed`),c||u&&t===null?n.tabIndex=0:n.tabIndex=-1,a.setAttribute(`data-state`,c?`open`:`closed`),!c)if(i.setAttribute(`data-state`,`inactive`),i.setAttribute(`aria-hidden`,`true`),l(i,!0),i.hidden=!0,u&&o){let e=o===`right`?`to-left`:`to-right`;i.setAttribute(`data-motion`,e)}else i.removeAttribute(`data-motion`)}),i){if(o){let e=o===`right`?`from-right`:`from-left`;i.content.setAttribute(`data-motion`,e)}else i.content.removeAttribute(`data-motion`);i.content.setAttribute(`data-state`,`active`),i.content.removeAttribute(`aria-hidden`),l(i.content,!1),i.content.hidden=!1,g=i.index,P(i.content,i.trigger,i.align),T(i),I(i.trigger)}else T(null);let u=t!==null;n.setAttribute(`data-state`,u?`open`:`closed`),o?n.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),f&&(f.setAttribute(`data-state`,u?`open`:`closed`),u&&!a?f.setAttribute(`data-instant`,``):a&&f.removeAttribute(`data-instant`),o&&f.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),m=t,h=null,t===null&&I(null),(0,e.emit)(n,`navigation-menu:change`,{value:t}),s?.(t)};r?o():t!==null&&m===null?_=setTimeout(o,i):t!==null&&m!==null?o():v=setTimeout(o,a)};n.setAttribute(`data-state`,`closed`),f&&f.setAttribute(`data-state`,`closed`),p&&p.setAttribute(`data-state`,`hidden`),E.forEach(({trigger:t,content:n,item:r})=>{t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),(0,e.setAria)(t,`expanded`,!1),t.setAttribute(`data-state`,`closed`),t.tabIndex=t===O[0]?0:-1,r.setAttribute(`data-state`,`closed`),n.setAttribute(`data-state`,`inactive`),n.setAttribute(`aria-hidden`,`true`),n.tabIndex=-1,l(n,!0),n.hidden=!0}),E.forEach(({item:t,trigger:n},r)=>{C.push((0,e.on)(n,`pointerenter`,()=>{b||I(n)})),C.push((0,e.on)(t,`pointerenter`,()=>{b||L(r)})),C.push((0,e.on)(t,`pointerleave`,()=>{h===r&&m===null&&(j(),h=null)})),C.push((0,e.on)(n,`focus`,()=>{x||(o&&L(r,!0),I(n))})),C.push((0,e.on)(n,`pointerdown`,()=>{x=!0})),C.push((0,e.on)(n,`click`,()=>{j(),m===r&&b?(b=!1,L(null,!0),I(null)):m===r&&!b?(b=!0,I(n)):(b=!0,L(r,!0),I(n)),x=!1}))}),C.push((0,e.on)(n,`pointerenter`,()=>{S=!0}),(0,e.on)(n,`pointerleave`,()=>{S=!1,b||(L(null),I(null))}),(0,e.on)(n,`pointerdown`,j)),f&&C.push((0,e.on)(f,`pointerenter`,()=>{j()}),(0,e.on)(f,`transitionend`,e=>{if(e.target!==f)return;let t=m?E.get(m):null;t&&P(t.content,t.trigger,t.align)})),E.forEach(({content:t})=>{C.push((0,e.on)(t,`pointerenter`,()=>{j()}))}),C.push((0,e.on)(u,`keydown`,e=>{let t=e.target,n=O.indexOf(t);if(n===-1)return;let r=k.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=O.length-1);break;case`ArrowRight`:i=n+1,i>=O.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(b=!0,L(r,!0),requestAnimationFrame(()=>{let e=E.get(r);if(!e)return;let t=A(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=O.length-1;break;case`Escape`:b=!1,L(null,!0),I(null);return;default:return}e.preventDefault();let a=O[i];a&&(O.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),I(a))})),E.forEach(({content:t,trigger:n})=>{C.push((0,e.on)(t,`keydown`,e=>{let r=e.target,i=A(t),a=i.indexOf(r);if(a!==-1)switch(e.key){case`ArrowDown`:case`ArrowRight`:{e.preventDefault();let t=a+1;t<i.length&&i[t]?.focus();break}case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),a===0?n.focus():i[a-1]?.focus();break;case`Escape`:e.preventDefault(),b=!1,L(null,!0),I(null),n.focus();break}}))});let R=()=>n.contains(document.activeElement)||S||b,z=()=>{b=!1,L(null,!0),I(null)};return C.push((0,e.on)(document,`pointerup`,()=>{x=!1},{capture:!0}),(0,e.on)(document,`pointercancel`,()=>{x=!1},{capture:!0})),C.push((0,e.on)(document,`focusin`,e=>{m!==null&&(n.contains(e.target)||z())})),C.push((0,e.createDismissLayer)({root:n,isOpen:()=>m!==null&&R(),onDismiss:z,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:e=>!!e&&n.contains(e)})),C.push((0,e.on)(window,`resize`,()=>{y&&requestAnimationFrame(()=>I(y))}),(0,e.on)(u,`scroll`,()=>{y&&requestAnimationFrame(()=>I(y))})),C.push((0,e.on)(n,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)z();else if(E.has(t.value)){b=!0,L(t.value,!0);let e=E.get(t.value);e&&I(e.trigger)}}})),{get value(){return m},open:e=>L(e,!0),close:()=>L(null,!0),destroy:()=>{j(),C.forEach(e=>e()),C.length=0}}}const r=new WeakSet;function i(t=document){let i=[];for(let a of(0,e.getRoots)(t,`navigation-menu`))r.has(a)||(r.add(a),i.push(n(a)));return i}exports.create=i,exports.createNavigationMenu=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`start`,`center`,`end`];function n(n,r={}){let i=r.delayOpen??(0,e.getDataNumber)(n,`delayOpen`)??200,a=r.delayClose??(0,e.getDataNumber)(n,`delayClose`)??150,o=r.openOnFocus??(0,e.getDataBool)(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},u=(0,e.getPart)(n,`navigation-menu-list`),d=(0,e.getParts)(n,`navigation-menu-item`),f=(0,e.getPart)(n,`navigation-menu-viewport`),p=(0,e.getPart)(n,`navigation-menu-indicator`);if(!u||d.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let m=null,h=null,g=-1,_=null,v=null,y=null,b=!1,x=!1,S=!1,C=[],w=new Map,T=e=>{let t=w.get(e);if(!t)return;let r=t.container,i=n.ownerDocument.defaultView??window,a=n.getBoundingClientRect();r.style.position=`absolute`,r.style.top=`0px`,r.style.left=`0px`,r.style.transform=`translate3d(${a.left+i.scrollX}px, ${a.top+i.scrollY}px, 0)`,r.style.width=`${a.width}px`,r.style.height=`${a.height}px`,r.style.margin=`0`,r.style.willChange=`transform`},E=null,D=e=>{E?.disconnect(),E=null,!(!f||!e)&&(E=new ResizeObserver(()=>I(e.content,e.trigger,e.align)),E.observe(e.content))};C.push(()=>E?.disconnect()),C.push(()=>{w.forEach(e=>e.cleanup()),w.clear()});let O=new Map,k=0;d.forEach(r=>{let i=r.dataset.value;if(!i)return;let a=(0,e.getPart)(r,`navigation-menu-trigger`),o=(0,e.getPart)(r,`navigation-menu-content`);if(a&&o){let s=(0,e.getDataEnum)(o,`align`,t)??(0,e.getDataEnum)(r,`align`,t)??(0,e.getDataEnum)(n,`align`,t)??`start`;O.set(i,{item:r,trigger:a,content:o,index:k++,align:s}),w.set(o,(0,e.createPortalLifecycle)({content:o,root:n,enabled:!0,wrapperSlot:`navigation-menu-positioner`}));let l=c(i),u=(0,e.ensureId)(a,`nav-menu-trigger-${l}`),d=(0,e.ensureId)(o,`nav-menu-content-${l}`);a.setAttribute(`aria-haspopup`,`true`),a.setAttribute(`aria-controls`,d),o.setAttribute(`aria-labelledby`,u)}});let A=Array.from(O.values()).map(e=>e.trigger),j=new Map;for(let[e,t]of O)j.set(t.trigger,e);let M=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),N=()=>{_&&=(clearTimeout(_),null),v&&=(clearTimeout(v),null)},P=null,F=()=>(P||(P=document.createElement(`div`),P.setAttribute(`data-slot`,`navigation-menu-bridge`),P.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,f&&f.insertBefore(P,f.firstChild),C.push((0,e.on)(P,`pointerenter`,()=>{N()}))),P),I=(e,t,r)=>{f&&requestAnimationFrame(()=>{let i=e.firstElementChild,a=i?.getBoundingClientRect(),o=i?getComputedStyle(i):null,s=o&&parseFloat(o.marginTop)||0,c=o&&parseFloat(o.marginBottom)||0,l=a??e.getBoundingClientRect(),u=l.height+s+c,d=getComputedStyle(f),p=parseFloat(d.marginTop)||0,m=e.getBoundingClientRect();f.style.setProperty(`--viewport-width`,`${m.width}px`),f.style.setProperty(`--viewport-height`,`${u}px`);let h=n.getBoundingClientRect(),g=t.getBoundingClientRect(),_;_=r===`center`?g.left-h.left+g.width/2-l.width/2:r===`end`?g.right-h.left-l.width:g.left-h.left,f.style.setProperty(`--viewport-left`,`${_}px`),f.style.left=`${_}px`,e.style.left=`${_}px`,T(e);let v=s+p;if(v>0){let e=F();e.style.height=`${v}px`,e.style.transform=`translateY(-${v}px)`}else P&&(P.style.height=`0`)})},L=e=>g===-1||e>g?`right`:`left`,R=e=>{if(!p)return;if(y=e,!e){p.setAttribute(`data-state`,`hidden`);return}let t=u.getBoundingClientRect(),n=e.getBoundingClientRect();p.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),p.style.setProperty(`--indicator-width`,`${n.width}px`),p.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(f&&parseFloat(getComputedStyle(f).marginTop)||0)<1?1:0;p.style.setProperty(`--indicator-height`,`${n.height-r}px`),p.setAttribute(`data-state`,`visible`)},z=(t,r=!1)=>{if(t===m){N();return}if(t!==null&&t===h){N();return}N(),h=t===null?null:t;let o=()=>{let r=m,i=t?O.get(t):null,a=r!==null&&t!==null&&r!==t,o=a&&i?L(i.index):null,c=document.activeElement;if(t===null&&c&&(0,e.containsWithPortals)(n,c)){let e=r?O.get(r)?.trigger:null;e&&e.focus()}if(O.forEach(({trigger:n,content:i,item:a},s)=>{let c=s===t,u=s===r;if((0,e.setAria)(n,`expanded`,c),n.setAttribute(`data-state`,c?`open`:`closed`),c||u&&t===null?n.tabIndex=0:n.tabIndex=-1,a.setAttribute(`data-state`,c?`open`:`closed`),!c)if(w.get(i)?.restore(),i.setAttribute(`data-state`,`inactive`),i.setAttribute(`aria-hidden`,`true`),l(i,!0),i.hidden=!0,u&&o){let e=o===`right`?`to-left`:`to-right`;i.setAttribute(`data-motion`,e)}else i.removeAttribute(`data-motion`)}),i){if(w.get(i.content)?.mount(),o){let e=o===`right`?`from-right`:`from-left`;i.content.setAttribute(`data-motion`,e)}else i.content.removeAttribute(`data-motion`);i.content.setAttribute(`data-state`,`active`),i.content.removeAttribute(`aria-hidden`),l(i.content,!1),i.content.hidden=!1,g=i.index,I(i.content,i.trigger,i.align),D(i),R(i.trigger)}else D(null);let u=t!==null;n.setAttribute(`data-state`,u?`open`:`closed`),o?n.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),f&&(f.setAttribute(`data-state`,u?`open`:`closed`),u&&!a?f.setAttribute(`data-instant`,``):a&&f.removeAttribute(`data-instant`),o&&f.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),m=t,h=null,t===null&&R(null),(0,e.emit)(n,`navigation-menu:change`,{value:t}),s?.(t)};r?o():t!==null&&m===null?_=setTimeout(o,i):t!==null&&m!==null?o():v=setTimeout(o,a)};n.setAttribute(`data-state`,`closed`),f&&f.setAttribute(`data-state`,`closed`),p&&p.setAttribute(`data-state`,`hidden`),O.forEach(({trigger:t,content:n,item:r})=>{t.tagName===`BUTTON`&&!t.hasAttribute(`type`)&&(t.type=`button`),(0,e.setAria)(t,`expanded`,!1),t.setAttribute(`data-state`,`closed`),t.tabIndex=t===A[0]?0:-1,r.setAttribute(`data-state`,`closed`),n.setAttribute(`data-state`,`inactive`),n.setAttribute(`aria-hidden`,`true`),n.tabIndex=-1,l(n,!0),n.hidden=!0}),O.forEach(({item:t,trigger:n},r)=>{C.push((0,e.on)(n,`pointerenter`,()=>{b||R(n)})),C.push((0,e.on)(t,`pointerenter`,()=>{b||z(r)})),C.push((0,e.on)(t,`pointerleave`,()=>{h===r&&m===null&&(N(),h=null)})),C.push((0,e.on)(n,`focus`,()=>{x||(o&&z(r,!0),R(n))})),C.push((0,e.on)(n,`pointerdown`,()=>{x=!0})),C.push((0,e.on)(n,`click`,()=>{N(),m===r&&b?(b=!1,z(null,!0),R(null)):m===r&&!b?(b=!0,R(n)):(b=!0,z(r,!0),R(n)),x=!1}))}),C.push((0,e.on)(n,`pointerenter`,()=>{S=!0}),(0,e.on)(n,`pointerleave`,()=>{S=!1,b||(z(null),R(null))}),(0,e.on)(n,`pointerdown`,N)),f&&C.push((0,e.on)(f,`pointerenter`,()=>{N()}),(0,e.on)(f,`transitionend`,e=>{if(e.target!==f)return;let t=m?O.get(m):null;t&&I(t.content,t.trigger,t.align)})),O.forEach(({content:t})=>{C.push((0,e.on)(t,`pointerenter`,()=>{N()}),(0,e.on)(t,`pointerleave`,t=>{if(b)return;let r=t.relatedTarget;(0,e.containsWithPortals)(n,r)||(z(null),R(null))}))}),C.push((0,e.on)(u,`keydown`,e=>{let t=e.target,n=A.indexOf(t);if(n===-1)return;let r=j.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=A.length-1);break;case`ArrowRight`:i=n+1,i>=A.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(b=!0,z(r,!0),requestAnimationFrame(()=>{let e=O.get(r);if(!e)return;let t=M(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=A.length-1;break;case`Escape`:b=!1,z(null,!0),R(null);return;default:return}e.preventDefault();let a=A[i];a&&(A.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),R(a))})),O.forEach(({content:t,trigger:n})=>{C.push((0,e.on)(t,`keydown`,e=>{let r=e.target,i=M(t),a=i.indexOf(r);if(a!==-1)switch(e.key){case`ArrowDown`:case`ArrowRight`:{e.preventDefault();let t=a+1;t<i.length&&i[t]?.focus();break}case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),a===0?n.focus():i[a-1]?.focus();break;case`Escape`:e.preventDefault(),b=!1,z(null,!0),R(null),n.focus();break}}))});let B=()=>(0,e.containsWithPortals)(n,document.activeElement)||S||b,V=()=>{b=!1,z(null,!0),R(null)};return C.push((0,e.on)(document,`pointerup`,()=>{x=!1},{capture:!0}),(0,e.on)(document,`pointercancel`,()=>{x=!1},{capture:!0})),C.push((0,e.on)(document,`focusin`,t=>{m!==null&&((0,e.containsWithPortals)(n,t.target)||V())})),C.push((0,e.createDismissLayer)({root:n,isOpen:()=>m!==null&&B(),onDismiss:V,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:t=>!!t&&(0,e.containsWithPortals)(n,t)})),C.push((0,e.on)(window,`resize`,()=>{if(m){let e=O.get(m);e&&requestAnimationFrame(()=>T(e.content))}y&&requestAnimationFrame(()=>R(y))}),(0,e.on)(u,`scroll`,()=>{y&&requestAnimationFrame(()=>R(y))})),C.push((0,e.on)(n,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)V();else if(O.has(t.value)){b=!0,z(t.value,!0);let e=O.get(t.value);e&&R(e.trigger)}}})),{get value(){return m},open:e=>z(e,!0),close:()=>z(null,!0),destroy:()=>{N(),C.forEach(e=>e()),C.length=0}}}const r=new WeakSet;function i(t=document){let i=[];for(let a of(0,e.getRoots)(t,`navigation-menu`))r.has(a)||(r.add(a),i.push(n(a)));return i}exports.create=i,exports.createNavigationMenu=n;

package/dist/index.js

@@ -1 +1 @@
-import{createDismissLayer as e,emit as t,ensureId as n,getDataBool as r,getDataEnum as i,getDataNumber as a,getPart as o,getParts as s,getRoots as c,on as l,setAria as u}from"@data-slot/core";const d=[`start`,`center`,`end`];function f(c,f={}){let p=f.delayOpen??a(c,`delayOpen`)??200,m=f.delayClose??a(c,`delayClose`)??150,h=f.openOnFocus??r(c,`openOnFocus`)??!0,g=f.onValueChange,_=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),v=(e,t)=>{`inert`in e&&(e.inert=t)},y=o(c,`navigation-menu-list`),b=s(c,`navigation-menu-item`),x=o(c,`navigation-menu-viewport`),S=o(c,`navigation-menu-indicator`);if(!y||b.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let C=null,w=null,T=-1,E=null,D=null,O=null,k=!1,A=!1,j=!1,M=[],N=null,P=e=>{N?.disconnect(),N=null,!(!x||!e)&&(N=new ResizeObserver(()=>U(e.content,e.trigger,e.align)),N.observe(e.content))};M.push(()=>N?.disconnect());let F=new Map,I=0;b.forEach(e=>{let t=e.dataset.value;if(!t)return;let r=o(e,`navigation-menu-trigger`),a=o(e,`navigation-menu-content`);if(r&&a){let o=i(a,`align`,d)??i(e,`align`,d)??i(c,`align`,d)??`start`;F.set(t,{item:e,trigger:r,content:a,index:I++,align:o});let s=_(t),l=n(r,`nav-menu-trigger-${s}`),u=n(a,`nav-menu-content-${s}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,u),a.setAttribute(`aria-labelledby`,l)}});let L=Array.from(F.values()).map(e=>e.trigger),R=new Map;for(let[e,t]of F)R.set(t.trigger,e);let z=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),B=()=>{E&&=(clearTimeout(E),null),D&&=(clearTimeout(D),null)},V=null,H=()=>(V||(V=document.createElement(`div`),V.setAttribute(`data-slot`,`navigation-menu-bridge`),V.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,x&&x.insertBefore(V,x.firstChild),M.push(l(V,`pointerenter`,()=>{B()}))),V),U=(e,t,n)=>{x&&requestAnimationFrame(()=>{let r=e.firstElementChild,i=r?.getBoundingClientRect(),a=r?getComputedStyle(r):null,o=a&&parseFloat(a.marginTop)||0,s=a&&parseFloat(a.marginBottom)||0,l=i??e.getBoundingClientRect(),u=l.height+o+s,d=getComputedStyle(x),f=parseFloat(d.marginTop)||0,p=e.getBoundingClientRect();x.style.setProperty(`--viewport-width`,`${p.width}px`),x.style.setProperty(`--viewport-height`,`${u}px`);let m=c.getBoundingClientRect(),h=t.getBoundingClientRect(),g;g=n===`center`?h.left-m.left+h.width/2-l.width/2:n===`end`?h.right-m.left-l.width:h.left-m.left,x.style.setProperty(`--viewport-left`,`${g}px`),x.style.left=`${g}px`,e.style.left=`${g}px`;let _=o+f;if(_>0){let e=H();e.style.height=`${_}px`,e.style.transform=`translateY(-${_}px)`}else V&&(V.style.height=`0`)})},W=e=>T===-1||e>T?`right`:`left`,G=e=>{if(!S)return;if(O=e,!e){S.setAttribute(`data-state`,`hidden`);return}let t=y.getBoundingClientRect(),n=e.getBoundingClientRect();S.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),S.style.setProperty(`--indicator-width`,`${n.width}px`),S.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(x&&parseFloat(getComputedStyle(x).marginTop)||0)<1?1:0;S.style.setProperty(`--indicator-height`,`${n.height-r}px`),S.setAttribute(`data-state`,`visible`)},K=(e,n=!1)=>{if(e===C){B();return}if(e!==null&&e===w){B();return}B(),w=e===null?null:e;let r=()=>{let n=C,r=e?F.get(e):null,i=n!==null&&e!==null&&n!==e,a=i&&r?W(r.index):null,o=document.activeElement;if(e===null&&o&&c.contains(o)){let e=n?F.get(n)?.trigger:null;e&&e.focus()}if(F.forEach(({trigger:t,content:r,item:i},o)=>{let s=o===e,c=o===n;if(u(t,`expanded`,s),t.setAttribute(`data-state`,s?`open`:`closed`),s||c&&e===null?t.tabIndex=0:t.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),v(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`),v(r.content,!1),r.content.hidden=!1,T=r.index,U(r.content,r.trigger,r.align),P(r),G(r.trigger)}else P(null);let s=e!==null;c.setAttribute(`data-state`,s?`open`:`closed`),a?c.setAttribute(`data-motion`,a===`right`?`from-right`:`from-left`):c.removeAttribute(`data-motion`),x&&(x.setAttribute(`data-state`,s?`open`:`closed`),s&&!i?x.setAttribute(`data-instant`,``):i&&x.removeAttribute(`data-instant`),a&&x.style.setProperty(`--motion-direction`,a===`right`?`1`:`-1`)),C=e,w=null,e===null&&G(null),t(c,`navigation-menu:change`,{value:e}),g?.(e)};n?r():e!==null&&C===null?E=setTimeout(r,p):e!==null&&C!==null?r():D=setTimeout(r,m)};c.setAttribute(`data-state`,`closed`),x&&x.setAttribute(`data-state`,`closed`),S&&S.setAttribute(`data-state`,`hidden`),F.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),u(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===L[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,v(t,!0),t.hidden=!0}),F.forEach(({item:e,trigger:t},n)=>{M.push(l(t,`pointerenter`,()=>{k||G(t)})),M.push(l(e,`pointerenter`,()=>{k||K(n)})),M.push(l(e,`pointerleave`,()=>{w===n&&C===null&&(B(),w=null)})),M.push(l(t,`focus`,()=>{A||(h&&K(n,!0),G(t))})),M.push(l(t,`pointerdown`,()=>{A=!0})),M.push(l(t,`click`,()=>{B(),C===n&&k?(k=!1,K(null,!0),G(null)):C===n&&!k?(k=!0,G(t)):(k=!0,K(n,!0),G(t)),A=!1}))}),M.push(l(c,`pointerenter`,()=>{j=!0}),l(c,`pointerleave`,()=>{j=!1,k||(K(null),G(null))}),l(c,`pointerdown`,B)),x&&M.push(l(x,`pointerenter`,()=>{B()}),l(x,`transitionend`,e=>{if(e.target!==x)return;let t=C?F.get(C):null;t&&U(t.content,t.trigger,t.align)})),F.forEach(({content:e})=>{M.push(l(e,`pointerenter`,()=>{B()}))}),M.push(l(y,`keydown`,e=>{let t=e.target,n=L.indexOf(t);if(n===-1)return;let r=R.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=L.length-1);break;case`ArrowRight`:i=n+1,i>=L.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(k=!0,K(r,!0),requestAnimationFrame(()=>{let e=F.get(r);if(!e)return;let t=z(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=L.length-1;break;case`Escape`:k=!1,K(null,!0),G(null);return;default:return}e.preventDefault();let a=L[i];a&&(L.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),G(a))})),F.forEach(({content:e,trigger:t})=>{M.push(l(e,`keydown`,n=>{let r=n.target,i=z(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(),k=!1,K(null,!0),G(null),t.focus();break}}))});let q=()=>c.contains(document.activeElement)||j||k,J=()=>{k=!1,K(null,!0),G(null)};return M.push(l(document,`pointerup`,()=>{A=!1},{capture:!0}),l(document,`pointercancel`,()=>{A=!1},{capture:!0})),M.push(l(document,`focusin`,e=>{C!==null&&(c.contains(e.target)||J())})),M.push(e({root:c,isOpen:()=>C!==null&&q(),onDismiss:J,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:e=>!!e&&c.contains(e)})),M.push(l(window,`resize`,()=>{O&&requestAnimationFrame(()=>G(O))}),l(y,`scroll`,()=>{O&&requestAnimationFrame(()=>G(O))})),M.push(l(c,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)J();else if(F.has(t.value)){k=!0,K(t.value,!0);let e=F.get(t.value);e&&G(e.trigger)}}})),{get value(){return C},open:e=>K(e,!0),close:()=>K(null,!0),destroy:()=>{B(),M.forEach(e=>e()),M.length=0}}}const p=new WeakSet;function m(e=document){let t=[];for(let n of c(e,`navigation-menu`))p.has(n)||(p.add(n),t.push(f(n)));return t}export{m as create,f as createNavigationMenu};
+import{containsWithPortals as e,createDismissLayer as t,createPortalLifecycle as n,emit as r,ensureId as i,getDataBool as a,getDataEnum as o,getDataNumber as s,getPart as c,getParts as l,getRoots as u,on as d,setAria as f}from"@data-slot/core";const p=[`start`,`center`,`end`];function m(u,m={}){let h=m.delayOpen??s(u,`delayOpen`)??200,g=m.delayClose??s(u,`delayClose`)??150,_=m.openOnFocus??a(u,`openOnFocus`)??!0,v=m.onValueChange,y=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),b=(e,t)=>{`inert`in e&&(e.inert=t)},x=c(u,`navigation-menu-list`),S=l(u,`navigation-menu-item`),C=c(u,`navigation-menu-viewport`),w=c(u,`navigation-menu-indicator`);if(!x||S.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let T=null,E=null,D=-1,O=null,k=null,A=null,j=!1,M=!1,N=!1,P=[],F=new Map,I=e=>{let t=F.get(e);if(!t)return;let n=t.container,r=u.ownerDocument.defaultView??window,i=u.getBoundingClientRect();n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${i.left+r.scrollX}px, ${i.top+r.scrollY}px, 0)`,n.style.width=`${i.width}px`,n.style.height=`${i.height}px`,n.style.margin=`0`,n.style.willChange=`transform`},L=null,R=e=>{L?.disconnect(),L=null,!(!C||!e)&&(L=new ResizeObserver(()=>q(e.content,e.trigger,e.align)),L.observe(e.content))};P.push(()=>L?.disconnect()),P.push(()=>{F.forEach(e=>e.cleanup()),F.clear()});let z=new Map,B=0;S.forEach(e=>{let t=e.dataset.value;if(!t)return;let r=c(e,`navigation-menu-trigger`),a=c(e,`navigation-menu-content`);if(r&&a){let s=o(a,`align`,p)??o(e,`align`,p)??o(u,`align`,p)??`start`;z.set(t,{item:e,trigger:r,content:a,index:B++,align:s}),F.set(a,n({content:a,root:u,enabled:!0,wrapperSlot:`navigation-menu-positioner`}));let c=y(t),l=i(r,`nav-menu-trigger-${c}`),d=i(a,`nav-menu-content-${c}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,d),a.setAttribute(`aria-labelledby`,l)}});let V=Array.from(z.values()).map(e=>e.trigger),H=new Map;for(let[e,t]of z)H.set(t.trigger,e);let U=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),W=()=>{O&&=(clearTimeout(O),null),k&&=(clearTimeout(k),null)},G=null,K=()=>(G||(G=document.createElement(`div`),G.setAttribute(`data-slot`,`navigation-menu-bridge`),G.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,C&&C.insertBefore(G,C.firstChild),P.push(d(G,`pointerenter`,()=>{W()}))),G),q=(e,t,n)=>{C&&requestAnimationFrame(()=>{let r=e.firstElementChild,i=r?.getBoundingClientRect(),a=r?getComputedStyle(r):null,o=a&&parseFloat(a.marginTop)||0,s=a&&parseFloat(a.marginBottom)||0,c=i??e.getBoundingClientRect(),l=c.height+o+s,d=getComputedStyle(C),f=parseFloat(d.marginTop)||0,p=e.getBoundingClientRect();C.style.setProperty(`--viewport-width`,`${p.width}px`),C.style.setProperty(`--viewport-height`,`${l}px`);let m=u.getBoundingClientRect(),h=t.getBoundingClientRect(),g;g=n===`center`?h.left-m.left+h.width/2-c.width/2:n===`end`?h.right-m.left-c.width:h.left-m.left,C.style.setProperty(`--viewport-left`,`${g}px`),C.style.left=`${g}px`,e.style.left=`${g}px`,I(e);let _=o+f;if(_>0){let e=K();e.style.height=`${_}px`,e.style.transform=`translateY(-${_}px)`}else G&&(G.style.height=`0`)})},J=e=>D===-1||e>D?`right`:`left`,Y=e=>{if(!w)return;if(A=e,!e){w.setAttribute(`data-state`,`hidden`);return}let t=x.getBoundingClientRect(),n=e.getBoundingClientRect();w.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),w.style.setProperty(`--indicator-width`,`${n.width}px`),w.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(C&&parseFloat(getComputedStyle(C).marginTop)||0)<1?1:0;w.style.setProperty(`--indicator-height`,`${n.height-r}px`),w.setAttribute(`data-state`,`visible`)},X=(t,n=!1)=>{if(t===T){W();return}if(t!==null&&t===E){W();return}W(),E=t===null?null:t;let i=()=>{let n=T,i=t?z.get(t):null,a=n!==null&&t!==null&&n!==t,o=a&&i?J(i.index):null,s=document.activeElement;if(t===null&&s&&e(u,s)){let e=n?z.get(n)?.trigger:null;e&&e.focus()}if(z.forEach(({trigger:e,content:r,item:i},a)=>{let s=a===t,c=a===n;if(f(e,`expanded`,s),e.setAttribute(`data-state`,s?`open`:`closed`),s||c&&t===null?e.tabIndex=0:e.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(F.get(r)?.restore(),r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),b(r,!0),r.hidden=!0,c&&o){let e=o===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),i){if(F.get(i.content)?.mount(),o){let e=o===`right`?`from-right`:`from-left`;i.content.setAttribute(`data-motion`,e)}else i.content.removeAttribute(`data-motion`);i.content.setAttribute(`data-state`,`active`),i.content.removeAttribute(`aria-hidden`),b(i.content,!1),i.content.hidden=!1,D=i.index,q(i.content,i.trigger,i.align),R(i),Y(i.trigger)}else R(null);let c=t!==null;u.setAttribute(`data-state`,c?`open`:`closed`),o?u.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):u.removeAttribute(`data-motion`),C&&(C.setAttribute(`data-state`,c?`open`:`closed`),c&&!a?C.setAttribute(`data-instant`,``):a&&C.removeAttribute(`data-instant`),o&&C.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),T=t,E=null,t===null&&Y(null),r(u,`navigation-menu:change`,{value:t}),v?.(t)};n?i():t!==null&&T===null?O=setTimeout(i,h):t!==null&&T!==null?i():k=setTimeout(i,g)};u.setAttribute(`data-state`,`closed`),C&&C.setAttribute(`data-state`,`closed`),w&&w.setAttribute(`data-state`,`hidden`),z.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),f(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===V[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,b(t,!0),t.hidden=!0}),z.forEach(({item:e,trigger:t},n)=>{P.push(d(t,`pointerenter`,()=>{j||Y(t)})),P.push(d(e,`pointerenter`,()=>{j||X(n)})),P.push(d(e,`pointerleave`,()=>{E===n&&T===null&&(W(),E=null)})),P.push(d(t,`focus`,()=>{M||(_&&X(n,!0),Y(t))})),P.push(d(t,`pointerdown`,()=>{M=!0})),P.push(d(t,`click`,()=>{W(),T===n&&j?(j=!1,X(null,!0),Y(null)):T===n&&!j?(j=!0,Y(t)):(j=!0,X(n,!0),Y(t)),M=!1}))}),P.push(d(u,`pointerenter`,()=>{N=!0}),d(u,`pointerleave`,()=>{N=!1,j||(X(null),Y(null))}),d(u,`pointerdown`,W)),C&&P.push(d(C,`pointerenter`,()=>{W()}),d(C,`transitionend`,e=>{if(e.target!==C)return;let t=T?z.get(T):null;t&&q(t.content,t.trigger,t.align)})),z.forEach(({content:t})=>{P.push(d(t,`pointerenter`,()=>{W()}),d(t,`pointerleave`,t=>{if(j)return;let n=t.relatedTarget;e(u,n)||(X(null),Y(null))}))}),P.push(d(x,`keydown`,e=>{let t=e.target,n=V.indexOf(t);if(n===-1)return;let r=H.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=V.length-1);break;case`ArrowRight`:i=n+1,i>=V.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(j=!0,X(r,!0),requestAnimationFrame(()=>{let e=z.get(r);if(!e)return;let t=U(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=V.length-1;break;case`Escape`:j=!1,X(null,!0),Y(null);return;default:return}e.preventDefault();let a=V[i];a&&(V.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),Y(a))})),z.forEach(({content:e,trigger:t})=>{P.push(d(e,`keydown`,n=>{let r=n.target,i=U(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(),j=!1,X(null,!0),Y(null),t.focus();break}}))});let Z=()=>e(u,document.activeElement)||N||j,Q=()=>{j=!1,X(null,!0),Y(null)};return P.push(d(document,`pointerup`,()=>{M=!1},{capture:!0}),d(document,`pointercancel`,()=>{M=!1},{capture:!0})),P.push(d(document,`focusin`,t=>{T!==null&&(e(u,t.target)||Q())})),P.push(t({root:u,isOpen:()=>T!==null&&Z(),onDismiss:Q,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:t=>!!t&&e(u,t)})),P.push(d(window,`resize`,()=>{if(T){let e=z.get(T);e&&requestAnimationFrame(()=>I(e.content))}A&&requestAnimationFrame(()=>Y(A))}),d(x,`scroll`,()=>{A&&requestAnimationFrame(()=>Y(A))})),P.push(d(u,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)Q();else if(z.has(t.value)){j=!0,X(t.value,!0);let e=z.get(t.value);e&&Y(e.trigger)}}})),{get value(){return T},open:e=>X(e,!0),close:()=>X(null,!0),destroy:()=>{W(),P.forEach(e=>e()),P.length=0}}}const h=new WeakSet;function g(e=document){let t=[];for(let n of u(e,`navigation-menu`))h.has(n)||(h.add(n),t.push(m(n)));return t}export{g as create,m as createNavigationMenu};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/navigation-menu",
-  "version": "0.2.52",
+  "version": "0.2.53",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -39,6 +39,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.52"
+    "@data-slot/core": "0.2.53"
   }
 }