@data-slot/navigation-menu 0.2.58 → 0.2.59

package/README.md

@@ -101,11 +101,12 @@ how the viewport is positioned relative to the active trigger:
 - `end` - Align viewport right edge with trigger right edge
 
 Can be set on:
-1. `navigation-menu-viewport-positioner` (or legacy `navigation-menu-positioner`) (highest priority)
-: Legacy `navigation-menu-positioner` is supported both as a viewport wrapper and as a content wrapper.
-2. `navigation-menu-content`
-3. `navigation-menu-item`
-4. `navigation-menu` root (lowest priority, applies to all items)
+1. `navigation-menu-content` (highest priority, per-panel)
+2. `navigation-menu-item`
+3. `navigation-menu` root (lowest priority, global default)
+
+`navigation-menu-viewport-positioner` / `navigation-menu-positioner` are styling containers.
+Their `data-side` / `data-align` are mirrored output values and are not used as placement inputs.
 
 ```html
 <!-- Faster hover response, no auto-open on focus -->

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`start`,`center`,`end`],n=[`top`,`right`,`bottom`,`left`];function r(r,i={}){let a=i.delayOpen??(0,e.getDataNumber)(r,`delayOpen`)??200,o=i.delayClose??(0,e.getDataNumber)(r,`delayClose`)??150,s=i.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,c=i.side??(0,e.getDataEnum)(r,`side`,n)??`bottom`,l=i.align??(0,e.getDataEnum)(r,`align`,t)??`start`,u=i.sideOffset??(0,e.getDataNumber)(r,`sideOffset`)??0,d=i.alignOffset??(0,e.getDataNumber)(r,`alignOffset`)??0,f=i.onValueChange,p=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),m=(e,t)=>{`inert`in e&&(e.inert=t)},h=(0,e.getPart)(r,`navigation-menu-list`),g=(0,e.getParts)(r,`navigation-menu-item`),_=(0,e.getPart)(r,`navigation-menu-viewport`),v=(0,e.getPart)(r,`navigation-menu-indicator`),y=(e,t)=>{let n=e.parentElement;for(;n&&n!==r;){if(n.getAttribute(`data-slot`)===t)return n;n=n.parentElement}return null};if(!h||g.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=!1,A=[],j=new Map,M=new Map,ee=_?y(_,`navigation-menu-viewport-positioner`):null,N=_?y(_,`navigation-menu-positioner`):null,P=ee??N,F=P?y(P,`navigation-menu-portal`):null,I=_?(0,e.createPortalLifecycle)({content:_,root:r,enabled:!0,wrapperSlot:P?void 0:`navigation-menu-viewport-positioner`,container:P??void 0,mountTarget:P?F??P:void 0}):null,L=_?(0,e.createPresenceLifecycle)({element:_,onExitComplete:()=>{k||(I?.restore(),_.hidden=!0,_.style.pointerEvents=`none`)}}):null,R=e=>{if(!_)return;let t=M.get(e)??{originalParent:null,originalNextSibling:null,mountedInViewport:!1};t.mountedInViewport||(t.originalParent=e.parentNode,t.originalNextSibling=e.nextSibling,t.mountedInViewport=!0,M.set(e,t)),e.parentNode!==_&&_.appendChild(e)},z=e=>{let t=M.get(e);if(!t||!t.mountedInViewport)return;let n=t.originalParent,r=t.originalNextSibling;n&&n.isConnected?r&&r.parentNode===n?n.insertBefore(e,r):n.appendChild(e):e.remove(),t.mountedInViewport=!1,t.originalParent=null,t.originalNextSibling=null},B=()=>{if(!_||!I)return;let e=I.container,t=r.ownerDocument.defaultView??window,n=r.getBoundingClientRect();e.style.position=`absolute`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${n.left+t.scrollX}px, ${n.top+t.scrollY}px, 0)`,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,e.style.margin=`0`,e.style.willChange=`transform`,e.style.pointerEvents=`none`},V=null,H=e=>{V?.disconnect(),V=null,!(!_||!e)&&(V=new ResizeObserver(()=>{let t=W(e.item,e.content,e.contentPositioner);X(e.content,e.trigger,t)}),V.observe(e.content))};A.push(()=>V?.disconnect()),A.push(()=>{j.forEach(e=>e.cleanup()),j.clear(),M.forEach((e,t)=>{z(t),t.hidden=!0,t.style.pointerEvents=`none`}),M.clear(),L?.cleanup(),I?.cleanup()});let U=new Map,W=(r,a,o)=>{let s=[I?.container instanceof HTMLElement&&I.container!==_?I.container:null,P,o],f=(t,n)=>{for(let r of s){if(!r)continue;let i=(0,e.getDataEnum)(r,t,n);if(i!=null)return i}return null},p=t=>{for(let n of s){if(!n)continue;let r=(0,e.getDataNumber)(n,t);if(r!=null)return r}return null},m=f(`side`,n),h=f(`align`,t),g=p(`sideOffset`),v=p(`alignOffset`);return{side:i.side??m??(0,e.getDataEnum)(a,`side`,n)??(0,e.getDataEnum)(r,`side`,n)??c,align:i.align??h??(0,e.getDataEnum)(a,`align`,t)??(0,e.getDataEnum)(r,`align`,t)??l,sideOffset:i.sideOffset??g??(0,e.getDataNumber)(a,`sideOffset`)??(0,e.getDataNumber)(r,`sideOffset`)??u,alignOffset:i.alignOffset??v??(0,e.getDataNumber)(a,`alignOffset`)??(0,e.getDataNumber)(r,`alignOffset`)??d}},te=0;g.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=(0,e.getPart)(t,`navigation-menu-trigger`),i=(0,e.getPart)(t,`navigation-menu-content`);if(r&&i){let a=y(i,`navigation-menu-positioner`);U.set(n,{item:t,trigger:r,content:i,contentPositioner:a,index:te++}),j.set(i,(0,e.createPresenceLifecycle)({element:i,onExitComplete:()=>{k||(z(i),i.hidden=!0,i.style.pointerEvents=`none`)}}));let o=p(n),s=(0,e.ensureId)(r,`nav-menu-trigger-${o}`),c=(0,e.ensureId)(i,`nav-menu-content-${o}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,c),i.setAttribute(`aria-labelledby`,s)}});let G=Array.from(U.values()).map(e=>e.trigger),K=new Map;for(let[e,t]of U)K.set(t.trigger,e);let q=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),J=()=>{C&&=(clearTimeout(C),null),w&&=(clearTimeout(w),null)},Y=null,ne=()=>{if(!_)return null;let e=I?.container;return e instanceof HTMLElement?e:_.parentElement instanceof HTMLElement?_.parentElement:_},re=()=>{let t=ne();return Y||(Y=document.createElement(`div`),Y.setAttribute(`data-slot`,`navigation-menu-bridge`),Y.style.cssText=`position: absolute; pointer-events: auto; z-index: 0;`,A.push((0,e.on)(Y,`pointerenter`,()=>{J()}))),t&&Y.parentElement!==t&&t.insertBefore(Y,t.firstChild),Y},X=(t,i,a)=>{_&&requestAnimationFrame(()=>{let o=t.firstElementChild,s=o?.getBoundingClientRect(),c=o?getComputedStyle(o):null,l=c&&parseFloat(c.marginTop)||0,u=c&&parseFloat(c.marginBottom)||0,d=s??t.getBoundingClientRect(),f=d.height+l+u,p=getComputedStyle(_),m=parseFloat(p.marginTop)||0,h=t.getBoundingClientRect();_.style.setProperty(`--viewport-width`,`${h.width}px`),_.style.setProperty(`--viewport-height`,`${f}px`);let g=r.getBoundingClientRect(),v=(0,e.computeFloatingPosition)({anchorRect:i.getBoundingClientRect(),contentRect:d,side:a.side,align:a.align,sideOffset:a.sideOffset,alignOffset:a.alignOffset,avoidCollisions:!1,collisionPadding:0,allowedSides:n}),y=v.x-g.left,b=v.y-g.top;_.style.setProperty(`--viewport-top`,`${b}px`),_.style.setProperty(`--viewport-left`,`${y}px`),_.style.top=`${b}px`,_.style.left=`${y}px`,t.style.top=`0px`,t.style.left=`0px`,_.setAttribute(`data-side`,v.side),_.setAttribute(`data-align`,v.align),t.setAttribute(`data-side`,v.side),t.setAttribute(`data-align`,v.align);let x=I?.container;x&&x!==_&&(x.setAttribute(`data-side`,v.side),x.setAttribute(`data-align`,v.align)),B();let S=_.getBoundingClientRect(),C=Math.max(0,S.top-g.bottom),w=Math.max(0,g.top-S.bottom),T=Math.max(0,S.left-g.right),E=Math.max(0,g.left-S.right),D=Math.max(0,l+m),O=Math.max(C,w,D),k=Math.max(T,E);if(Math.max(O,k)>0){let e=re();if(e.style.transform=`none`,e.style.bottom=`auto`,e.style.right=`auto`,O>=k){let t=Math.max(C,w,D);e.style.width=`${h.width}px`,e.style.height=`${t}px`,e.style.left=`${y}px`,w>C&&w>=D?e.style.top=`${b+f}px`:e.style.top=`${b-t}px`}else{let t=Math.max(T,E);e.style.height=`${f}px`,e.style.width=`${t}px`,e.style.top=`${b}px`,E>T?e.style.left=`${y+h.width}px`:e.style.left=`${y-t}px`}}else Y&&(Y.style.height=`0`,Y.style.width=`0`,Y.style.top=`0px`,Y.style.left=`0px`,Y.style.right=`0px`,Y.style.bottom=`auto`,Y.style.transform=`none`)})},ie=e=>S===-1||e>S?`right`:`left`,Z=e=>{if(!v)return;if(T=e,!e){v.setAttribute(`data-state`,`hidden`);return}let t=h.getBoundingClientRect(),n=e.getBoundingClientRect();v.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),v.style.setProperty(`--indicator-width`,`${n.width}px`),v.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(_&&parseFloat(getComputedStyle(_).marginTop)||0)<1?1:0;v.style.setProperty(`--indicator-height`,`${n.height-r}px`),v.setAttribute(`data-state`,`visible`)},Q=(t,n=!1)=>{if(t===b){J();return}if(t!==null&&t===x){J();return}J(),x=t===null?null:t;let i=()=>{let n=b,i=t?U.get(t):null,a=n!==null&&t!==null&&n!==t,o=a&&i?ie(i.index):null,s=document.activeElement;if(t===null&&s&&(0,e.containsWithPortals)(r,s)){let e=n?U.get(n)?.trigger:null;e&&e.focus()}if(U.forEach(({trigger:r,content:i,item:a},s)=>{let c=s===t,l=s===n;if((0,e.setAria)(r,`expanded`,c),r.setAttribute(`data-state`,c?`open`:`closed`),c||l&&t===null?r.tabIndex=0:r.tabIndex=-1,a.setAttribute(`data-state`,c?`open`:`closed`),!c){let e=j.get(i);if(i.setAttribute(`data-state`,`inactive`),i.setAttribute(`aria-hidden`,`true`),m(i,!0),i.style.pointerEvents=`none`,l&&o){let e=o===`right`?`to-left`:`to-right`;i.setAttribute(`data-motion`,e)}else l&&i.removeAttribute(`data-motion`);l?e?.exit():e?.isExiting||(i.removeAttribute(`data-motion`),z(i),i.hidden=!0)}}),i){if(I?.mount(),_&&(_.hidden=!1),n===null&&L?.enter(),R(i.content),j.get(i.content)?.enter(),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`),m(i.content,!1),i.content.hidden=!1,i.content.style.pointerEvents=`auto`,S=i.index;let e=W(i.item,i.content,i.contentPositioner);X(i.content,i.trigger,e),H(i),Z(i.trigger)}else L?.exit(),H(null);let c=t!==null;r.setAttribute(`data-state`,c?`open`:`closed`),o?r.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):r.removeAttribute(`data-motion`),_&&(_.setAttribute(`data-state`,c?`open`:`closed`),_.style.pointerEvents=c?`auto`:`none`,c&&!a?_.setAttribute(`data-instant`,``):a&&_.removeAttribute(`data-instant`),o&&_.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),b=t,x=null,t===null&&Z(null),(0,e.emit)(r,`navigation-menu:change`,{value:t}),f?.(t)};n?i():t!==null&&b===null?C=setTimeout(i,a):t!==null&&b!==null?i():w=setTimeout(i,o)};r.setAttribute(`data-state`,`closed`),_&&(_.setAttribute(`data-state`,`closed`),_.hidden=!0,_.style.pointerEvents=`none`),v&&v.setAttribute(`data-state`,`hidden`),U.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===G[0]?0:-1,r.setAttribute(`data-state`,`closed`),n.setAttribute(`data-state`,`inactive`),n.setAttribute(`aria-hidden`,`true`),n.tabIndex=-1,m(n,!0),n.hidden=!0,n.style.pointerEvents=`none`}),U.forEach(({item:t,trigger:n},r)=>{A.push((0,e.on)(n,`pointerenter`,()=>{E||Z(n)})),A.push((0,e.on)(t,`pointerenter`,()=>{E||Q(r)})),A.push((0,e.on)(t,`pointerleave`,()=>{x===r&&b===null&&(J(),x=null)})),A.push((0,e.on)(n,`focus`,()=>{D||(s&&Q(r,!0),Z(n))})),A.push((0,e.on)(n,`pointerdown`,()=>{D=!0})),A.push((0,e.on)(n,`click`,()=>{J(),b===r&&E?(E=!1,Q(null,!0),Z(null)):b===r&&!E?(E=!0,Z(n)):(E=!0,Q(r,!0),Z(n)),D=!1}))}),A.push((0,e.on)(r,`pointerenter`,()=>{O=!0}),(0,e.on)(r,`pointerleave`,t=>{let n=t.relatedTarget;(0,e.containsWithPortals)(r,n)||(O=!1,E||(Q(null),Z(null)))}),(0,e.on)(r,`pointerdown`,J)),_&&A.push((0,e.on)(_,`pointerenter`,()=>{J()}),(0,e.on)(_,`transitionend`,e=>{if(e.target!==_)return;let t=b?U.get(b):null;if(t){let e=W(t.item,t.content,t.contentPositioner);X(t.content,t.trigger,e)}})),U.forEach(({content:t})=>{A.push((0,e.on)(t,`pointerenter`,()=>{J()}),(0,e.on)(t,`pointerleave`,t=>{if(E)return;let n=t.relatedTarget;(0,e.containsWithPortals)(r,n)||(Q(null),Z(null))}))}),A.push((0,e.on)(h,`keydown`,e=>{let t=e.target,n=G.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=G.length-1);break;case`ArrowRight`:i=n+1,i>=G.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(E=!0,Q(r,!0),requestAnimationFrame(()=>{let e=U.get(r);if(!e)return;let t=q(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=G.length-1;break;case`Escape`:E=!1,Q(null,!0),Z(null);return;default:return}e.preventDefault();let a=G[i];a&&(G.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),Z(a))})),U.forEach(({content:t,trigger:n})=>{A.push((0,e.on)(t,`keydown`,e=>{let r=e.target,i=q(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(),E=!1,Q(null,!0),Z(null),n.focus();break}}))});let ae=()=>(0,e.containsWithPortals)(r,document.activeElement)||O||E,$=()=>{E=!1,Q(null,!0),Z(null)};return A.push((0,e.on)(document,`pointerup`,()=>{D=!1},{capture:!0}),(0,e.on)(document,`pointercancel`,()=>{D=!1},{capture:!0})),A.push((0,e.on)(document,`focusin`,t=>{b!==null&&((0,e.containsWithPortals)(r,t.target)||$())})),A.push((0,e.createDismissLayer)({root:r,isOpen:()=>b!==null&&ae(),onDismiss:$,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:t=>!!t&&(0,e.containsWithPortals)(r,t)})),A.push((0,e.on)(window,`resize`,()=>{b&&requestAnimationFrame(()=>B()),T&&requestAnimationFrame(()=>Z(T))}),(0,e.on)(h,`scroll`,()=>{T&&requestAnimationFrame(()=>Z(T))})),A.push((0,e.on)(r,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)$();else if(U.has(t.value)){E=!0,Q(t.value,!0);let e=U.get(t.value);e&&Z(e.trigger)}}})),{get value(){return b},open:e=>Q(e,!0),close:()=>Q(null,!0),destroy:()=>{k=!0,J(),A.forEach(e=>e()),A.length=0}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`navigation-menu`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createNavigationMenu=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`start`,`center`,`end`],n=[`top`,`right`,`bottom`,`left`];function r(r,i={}){let a=i.delayOpen??(0,e.getDataNumber)(r,`delayOpen`)??200,o=i.delayClose??(0,e.getDataNumber)(r,`delayClose`)??150,s=i.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,c=i.side??(0,e.getDataEnum)(r,`side`,n)??`bottom`,l=i.align??(0,e.getDataEnum)(r,`align`,t)??`start`,u=i.sideOffset??(0,e.getDataNumber)(r,`sideOffset`)??0,d=i.alignOffset??(0,e.getDataNumber)(r,`alignOffset`)??0,f=i.onValueChange,p=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),m=(e,t)=>{`inert`in e&&(e.inert=t)},h=(0,e.getPart)(r,`navigation-menu-list`),g=(0,e.getParts)(r,`navigation-menu-item`),_=(0,e.getPart)(r,`navigation-menu-viewport`),v=(0,e.getPart)(r,`navigation-menu-indicator`),y=(e,t)=>{let n=e.parentElement;for(;n&&n!==r;){if(n.getAttribute(`data-slot`)===t)return n;n=n.parentElement}return null};if(!h||g.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=!1,A=[],j=new Map,M=new Map,N=_?y(_,`navigation-menu-viewport-positioner`):null,P=_?y(_,`navigation-menu-positioner`):null,F=N??P,I=F?y(F,`navigation-menu-portal`):null,L=_?(0,e.createPortalLifecycle)({content:_,root:r,enabled:!0,wrapperSlot:F?void 0:`navigation-menu-viewport-positioner`,container:F??void 0,mountTarget:F?I??F:void 0}):null,R=_?(0,e.createPresenceLifecycle)({element:_,onExitComplete:()=>{k||(L?.restore(),_.hidden=!0,_.style.pointerEvents=`none`)}}):null,ee=e=>{if(!_)return;let t=M.get(e)??{originalParent:null,originalNextSibling:null,mountedInViewport:!1};t.mountedInViewport||(t.originalParent=e.parentNode,t.originalNextSibling=e.nextSibling,t.mountedInViewport=!0,M.set(e,t)),e.parentNode!==_&&_.appendChild(e)},z=e=>{let t=M.get(e);if(!t||!t.mountedInViewport)return;let n=t.originalParent,r=t.originalNextSibling;n&&n.isConnected?r&&r.parentNode===n?n.insertBefore(e,r):n.appendChild(e):e.remove(),t.mountedInViewport=!1,t.originalParent=null,t.originalNextSibling=null},B=()=>{if(!_||!L)return;let e=L.container,t=r.ownerDocument.defaultView??window,n=r.getBoundingClientRect();e.style.position=`absolute`,e.style.top=`0px`,e.style.left=`0px`,e.style.transform=`translate3d(${n.left+t.scrollX}px, ${n.top+t.scrollY}px, 0)`,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,e.style.margin=`0`,e.style.willChange=`transform`,e.style.pointerEvents=`none`},V=null,H=e=>{V?.disconnect(),V=null,!(!_||!e)&&(V=new ResizeObserver(()=>{let t=W(e.item,e.content);X(e.content,e.trigger,t)}),V.observe(e.content))};A.push(()=>V?.disconnect()),A.push(()=>{j.forEach(e=>e.cleanup()),j.clear(),M.forEach((e,t)=>{z(t),t.hidden=!0,t.style.pointerEvents=`none`}),M.clear(),R?.cleanup(),L?.cleanup()});let U=new Map,W=(r,a)=>({side:i.side??(0,e.getDataEnum)(a,`side`,n)??(0,e.getDataEnum)(r,`side`,n)??c,align:i.align??(0,e.getDataEnum)(a,`align`,t)??(0,e.getDataEnum)(r,`align`,t)??l,sideOffset:i.sideOffset??(0,e.getDataNumber)(a,`sideOffset`)??(0,e.getDataNumber)(r,`sideOffset`)??u,alignOffset:i.alignOffset??(0,e.getDataNumber)(a,`alignOffset`)??(0,e.getDataNumber)(r,`alignOffset`)??d}),te=0;g.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=(0,e.getPart)(t,`navigation-menu-trigger`),i=(0,e.getPart)(t,`navigation-menu-content`);if(r&&i){U.set(n,{item:t,trigger:r,content:i,index:te++}),j.set(i,(0,e.createPresenceLifecycle)({element:i,onExitComplete:()=>{k||(z(i),i.hidden=!0,i.style.pointerEvents=`none`)}}));let a=p(n),o=(0,e.ensureId)(r,`nav-menu-trigger-${a}`),s=(0,e.ensureId)(i,`nav-menu-content-${a}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,s),i.setAttribute(`aria-labelledby`,o)}});let G=Array.from(U.values()).map(e=>e.trigger),K=new Map;for(let[e,t]of U)K.set(t.trigger,e);let q=e=>Array.from(e.querySelectorAll(`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),J=()=>{C&&=(clearTimeout(C),null),w&&=(clearTimeout(w),null)},Y=null,ne=()=>{if(!_)return null;let e=L?.container;return e instanceof HTMLElement?e:_.parentElement instanceof HTMLElement?_.parentElement:_},re=()=>{let t=ne();return Y||(Y=document.createElement(`div`),Y.setAttribute(`data-slot`,`navigation-menu-bridge`),Y.style.cssText=`position: absolute; pointer-events: auto; z-index: 0;`,A.push((0,e.on)(Y,`pointerenter`,()=>{J()}))),t&&Y.parentElement!==t&&t.insertBefore(Y,t.firstChild),Y},X=(t,i,a)=>{_&&requestAnimationFrame(()=>{let o=t.firstElementChild,s=o?.getBoundingClientRect(),c=o?getComputedStyle(o):null,l=c&&parseFloat(c.marginTop)||0,u=c&&parseFloat(c.marginBottom)||0,d=s??t.getBoundingClientRect(),f=d.height+l+u,p=getComputedStyle(_),m=parseFloat(p.marginTop)||0,h=t.getBoundingClientRect();_.style.setProperty(`--viewport-width`,`${h.width}px`),_.style.setProperty(`--viewport-height`,`${f}px`);let g=r.getBoundingClientRect(),v=(0,e.computeFloatingPosition)({anchorRect:i.getBoundingClientRect(),contentRect:d,side:a.side,align:a.align,sideOffset:a.sideOffset,alignOffset:a.alignOffset,avoidCollisions:!1,collisionPadding:0,allowedSides:n}),y=v.x-g.left,b=v.y-g.top;_.style.setProperty(`--viewport-top`,`${b}px`),_.style.setProperty(`--viewport-left`,`${y}px`),_.style.top=`${b}px`,_.style.left=`${y}px`,t.style.top=`0px`,t.style.left=`0px`,_.setAttribute(`data-side`,v.side),_.setAttribute(`data-align`,v.align),t.setAttribute(`data-side`,v.side),t.setAttribute(`data-align`,v.align);let x=L?.container;x&&x!==_&&(x.setAttribute(`data-side`,v.side),x.setAttribute(`data-align`,v.align)),B();let S=_.getBoundingClientRect(),C=Math.max(0,S.top-g.bottom),w=Math.max(0,g.top-S.bottom),T=Math.max(0,S.left-g.right),E=Math.max(0,g.left-S.right),D=Math.max(0,l+m),O=Math.max(C,w,D),k=Math.max(T,E);if(Math.max(O,k)>0){let e=re();if(e.style.transform=`none`,e.style.bottom=`auto`,e.style.right=`auto`,O>=k){let t=Math.max(C,w,D);e.style.width=`${h.width}px`,e.style.height=`${t}px`,e.style.left=`${y}px`,w>C&&w>=D?e.style.top=`${b+f}px`:e.style.top=`${b-t}px`}else{let t=Math.max(T,E);e.style.height=`${f}px`,e.style.width=`${t}px`,e.style.top=`${b}px`,E>T?e.style.left=`${y+h.width}px`:e.style.left=`${y-t}px`}}else Y&&(Y.style.height=`0`,Y.style.width=`0`,Y.style.top=`0px`,Y.style.left=`0px`,Y.style.right=`0px`,Y.style.bottom=`auto`,Y.style.transform=`none`)})},ie=e=>S===-1||e>S?`right`:`left`,Z=e=>{if(!v)return;if(T=e,!e){v.setAttribute(`data-state`,`hidden`);return}let t=h.getBoundingClientRect(),n=e.getBoundingClientRect();v.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),v.style.setProperty(`--indicator-width`,`${n.width}px`),v.style.setProperty(`--indicator-top`,`${n.top-t.top}px`);let r=(_&&parseFloat(getComputedStyle(_).marginTop)||0)<1?1:0;v.style.setProperty(`--indicator-height`,`${n.height-r}px`),v.setAttribute(`data-state`,`visible`)},Q=(t,n=!1)=>{if(t===b){J();return}if(t!==null&&t===x){J();return}J(),x=t===null?null:t;let i=()=>{let n=b,i=t?U.get(t):null,a=n!==null&&t!==null&&n!==t,o=a&&i?ie(i.index):null,s=document.activeElement;if(t===null&&s&&(0,e.containsWithPortals)(r,s)){let e=n?U.get(n)?.trigger:null;e&&e.focus()}if(U.forEach(({trigger:r,content:i,item:a},s)=>{let c=s===t,l=s===n;if((0,e.setAria)(r,`expanded`,c),r.setAttribute(`data-state`,c?`open`:`closed`),c||l&&t===null?r.tabIndex=0:r.tabIndex=-1,a.setAttribute(`data-state`,c?`open`:`closed`),!c){let e=j.get(i);if(i.setAttribute(`data-state`,`inactive`),i.setAttribute(`aria-hidden`,`true`),m(i,!0),i.style.pointerEvents=`none`,l&&o){let e=o===`right`?`to-left`:`to-right`;i.setAttribute(`data-motion`,e)}else l&&i.removeAttribute(`data-motion`);l?e?.exit():e?.isExiting||(i.removeAttribute(`data-motion`),z(i),i.hidden=!0)}}),i){if(L?.mount(),_&&(_.hidden=!1),n===null&&R?.enter(),ee(i.content),j.get(i.content)?.enter(),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`),m(i.content,!1),i.content.hidden=!1,i.content.style.pointerEvents=`auto`,S=i.index;let e=W(i.item,i.content);X(i.content,i.trigger,e),H(i),Z(i.trigger)}else R?.exit(),H(null);let c=t!==null;r.setAttribute(`data-state`,c?`open`:`closed`),o?r.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):r.removeAttribute(`data-motion`),_&&(_.setAttribute(`data-state`,c?`open`:`closed`),_.style.pointerEvents=c?`auto`:`none`,c&&!a?_.setAttribute(`data-instant`,``):a&&_.removeAttribute(`data-instant`),o&&_.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),b=t,x=null,t===null&&Z(null),(0,e.emit)(r,`navigation-menu:change`,{value:t}),f?.(t)};n?i():t!==null&&b===null?C=setTimeout(i,a):t!==null&&b!==null?i():w=setTimeout(i,o)};r.setAttribute(`data-state`,`closed`),_&&(_.setAttribute(`data-state`,`closed`),_.hidden=!0,_.style.pointerEvents=`none`),v&&v.setAttribute(`data-state`,`hidden`),U.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===G[0]?0:-1,r.setAttribute(`data-state`,`closed`),n.setAttribute(`data-state`,`inactive`),n.setAttribute(`aria-hidden`,`true`),n.tabIndex=-1,m(n,!0),n.hidden=!0,n.style.pointerEvents=`none`}),U.forEach(({item:t,trigger:n},r)=>{A.push((0,e.on)(n,`pointerenter`,()=>{E||Z(n)})),A.push((0,e.on)(t,`pointerenter`,()=>{E||Q(r)})),A.push((0,e.on)(t,`pointerleave`,()=>{x===r&&b===null&&(J(),x=null)})),A.push((0,e.on)(n,`focus`,()=>{D||(s&&Q(r,!0),Z(n))})),A.push((0,e.on)(n,`pointerdown`,()=>{D=!0})),A.push((0,e.on)(n,`click`,()=>{J(),b===r&&E?(E=!1,Q(null,!0),Z(null)):b===r&&!E?(E=!0,Z(n)):(E=!0,Q(r,!0),Z(n)),D=!1}))}),A.push((0,e.on)(r,`pointerenter`,()=>{O=!0}),(0,e.on)(r,`pointerleave`,t=>{let n=t.relatedTarget;(0,e.containsWithPortals)(r,n)||(O=!1,E||(Q(null),Z(null)))}),(0,e.on)(r,`pointerdown`,J)),_&&A.push((0,e.on)(_,`pointerenter`,()=>{J()}),(0,e.on)(_,`transitionend`,e=>{if(e.target!==_)return;let t=b?U.get(b):null;if(t){let e=W(t.item,t.content);X(t.content,t.trigger,e)}})),U.forEach(({content:t})=>{A.push((0,e.on)(t,`pointerenter`,()=>{J()}),(0,e.on)(t,`pointerleave`,t=>{if(E)return;let n=t.relatedTarget;(0,e.containsWithPortals)(r,n)||(Q(null),Z(null))}))}),A.push((0,e.on)(h,`keydown`,e=>{let t=e.target,n=G.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=G.length-1);break;case`ArrowRight`:i=n+1,i>=G.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(E=!0,Q(r,!0),requestAnimationFrame(()=>{let e=U.get(r);if(!e)return;let t=q(e.content)[0];t?t.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=G.length-1;break;case`Escape`:E=!1,Q(null,!0),Z(null);return;default:return}e.preventDefault();let a=G[i];a&&(G.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),Z(a))})),U.forEach(({content:t,trigger:n})=>{A.push((0,e.on)(t,`keydown`,e=>{let r=e.target,i=q(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(),E=!1,Q(null,!0),Z(null),n.focus();break}}))});let ae=()=>(0,e.containsWithPortals)(r,document.activeElement)||O||E,$=()=>{E=!1,Q(null,!0),Z(null)};return A.push((0,e.on)(document,`pointerup`,()=>{D=!1},{capture:!0}),(0,e.on)(document,`pointercancel`,()=>{D=!1},{capture:!0})),A.push((0,e.on)(document,`focusin`,t=>{b!==null&&((0,e.containsWithPortals)(r,t.target)||$())})),A.push((0,e.createDismissLayer)({root:r,isOpen:()=>b!==null&&ae(),onDismiss:$,closeOnClickOutside:!0,closeOnEscape:!0,preventEscapeDefault:!1,isInside:t=>!!t&&(0,e.containsWithPortals)(r,t)})),A.push((0,e.on)(window,`resize`,()=>{b&&requestAnimationFrame(()=>B()),T&&requestAnimationFrame(()=>Z(T))}),(0,e.on)(h,`scroll`,()=>{T&&requestAnimationFrame(()=>Z(T))})),A.push((0,e.on)(r,`navigation-menu:set`,e=>{let t=e.detail;if(t?.value!==void 0){if(t.value===null)$();else if(U.has(t.value)){E=!0,Q(t.value,!0);let e=U.get(t.value);e&&Z(e.trigger)}}})),{get value(){return b},open:e=>Q(e,!0),close:()=>Q(null,!0),destroy:()=>{k=!0,J(),A.forEach(e=>e()),A.length=0}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`navigation-menu`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createNavigationMenu=r;

package/dist/index.js

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

package/package.json

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