@data-slot/navigation-menu 0.2.55 → 0.2.57

package/README.md

@@ -145,14 +145,16 @@ 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`
-- `navigation-menu-viewport-positioner` - Generated wrapper used while viewport is portaled to `document.body`
+- `navigation-menu-positioner` - Positioning wrapper for active content (generated if not authored)
+- `navigation-menu-viewport-positioner` - Positioning wrapper for viewport (generated if not authored)
+- `navigation-menu-portal` - Optional authored portal wrapper that can contain positioners
 
 ## Styling
 
 Active `navigation-menu-content` and `navigation-menu-viewport` are portaled to `document.body`
-while open. Generated `navigation-menu-positioner` and `navigation-menu-viewport-positioner`
-wrappers are positioned at the navigation root so submenu layers are not clipped by local
+while open. If authored `navigation-menu-portal` / positioner slots are present, they are reused.
+Otherwise, `navigation-menu-positioner` and `navigation-menu-viewport-positioner` wrappers are
+generated and positioned at the navigation root so submenu layers are not clipped by local
 stacking contexts.
 
 ### Basic Styling

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

package/package.json

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