@data-slot/navigation-menu 0.2.6 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -2
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,14 +83,34 @@ Options can also be set via data attributes on the root element. JS options take
|
|
|
83
83
|
| `data-delay-open` | number | `200` | Delay before opening on hover (ms) |
|
|
84
84
|
| `data-delay-close` | number | `150` | Delay before closing on mouse leave (ms) |
|
|
85
85
|
| `data-open-on-focus` | boolean | `true` | Whether focusing a trigger opens its content |
|
|
86
|
+
| `data-align` | string | `"start"` | Viewport alignment: `"start"`, `"center"`, or `"end"` |
|
|
86
87
|
|
|
87
88
|
Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
|
|
88
89
|
|
|
90
|
+
The `data-align` attribute controls how the viewport is positioned relative to the active trigger:
|
|
91
|
+
- `start` - Align viewport left edge with trigger left edge (default)
|
|
92
|
+
- `center` - Center viewport under trigger
|
|
93
|
+
- `end` - Align viewport right edge with trigger right edge
|
|
94
|
+
|
|
95
|
+
Can be set on:
|
|
96
|
+
1. `navigation-menu-content` (highest priority)
|
|
97
|
+
2. `navigation-menu-item`
|
|
98
|
+
3. `navigation-menu` root (lowest priority, applies to all items)
|
|
99
|
+
|
|
89
100
|
```html
|
|
90
101
|
<!-- Faster hover response, no auto-open on focus -->
|
|
91
102
|
<nav data-slot="navigation-menu" data-delay-open="100" data-open-on-focus="false">
|
|
92
103
|
...
|
|
93
104
|
</nav>
|
|
105
|
+
|
|
106
|
+
<!-- Center-align a narrow submenu under its trigger -->
|
|
107
|
+
<li data-slot="navigation-menu-item" data-value="company" data-align="center">
|
|
108
|
+
<button data-slot="navigation-menu-trigger">Company</button>
|
|
109
|
+
<div data-slot="navigation-menu-content">
|
|
110
|
+
<a href="/about">About</a>
|
|
111
|
+
<a href="/careers">Careers</a>
|
|
112
|
+
</div>
|
|
113
|
+
</li>
|
|
94
114
|
```
|
|
95
115
|
|
|
96
116
|
### Controller
|
|
@@ -140,11 +160,12 @@ Boolean attributes: present or `"true"` = true, `"false"` = false, absent = defa
|
|
|
140
160
|
display: block;
|
|
141
161
|
}
|
|
142
162
|
|
|
143
|
-
/* Viewport sizing */
|
|
163
|
+
/* Viewport sizing and positioning */
|
|
144
164
|
[data-slot="navigation-menu-viewport"] {
|
|
165
|
+
left: var(--viewport-left, 0);
|
|
145
166
|
width: var(--viewport-width);
|
|
146
167
|
height: var(--viewport-height);
|
|
147
|
-
transition: width 0.3s, height 0.3s;
|
|
168
|
+
transition: left 0.3s, width 0.3s, height 0.3s;
|
|
148
169
|
}
|
|
149
170
|
|
|
150
171
|
/* Skip animation on initial open */
|
|
@@ -191,6 +212,7 @@ Content panels receive `data-motion` attributes for enter/exit animations:
|
|
|
191
212
|
|
|
192
213
|
| Variable | Element | Description |
|
|
193
214
|
|----------|---------|-------------|
|
|
215
|
+
| `--viewport-left` | viewport | Left offset based on alignment |
|
|
194
216
|
| `--viewport-width` | viewport | Width of active content |
|
|
195
217
|
| `--viewport-height` | viewport | Height of active content |
|
|
196
218
|
| `--indicator-left` | indicator | Left offset from list |
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}let
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const _=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),v=[`start`,`center`,`end`];function y(n,r={}){let i=r.delayOpen??d(n,`delayOpen`)??200,a=r.delayClose??d(n,`delayClose`)??150,o=r.openOnFocus??u(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},p=e(n,`navigation-menu-list`),y=t(n,`navigation-menu-item`),b=e(n,`navigation-menu-viewport`),x=e(n,`navigation-menu-indicator`);if(!p||y.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let S=null,C=null,w=-1,T=null,E=null,D=null,O=!1,k=!1,A=!1,j=[],M=null,N=e=>{M?.disconnect(),M=null,!(!b||!e)&&(M=new ResizeObserver(()=>U(e.content,e.trigger,e.align)),M.observe(e.content))};j.push(()=>M?.disconnect());let P=new Map,F=0;y.forEach(t=>{let r=t.dataset.value;if(!r)return;let i=e(t,`navigation-menu-trigger`),a=e(t,`navigation-menu-content`);if(i&&a){let e=f(a,`align`,v)??f(t,`align`,v)??f(n,`align`,v)??`start`;P.set(r,{item:t,trigger:i,content:a,index:F++,align:e});let o=c(r),s=m(i,`nav-menu-trigger-${o}`),l=m(a,`nav-menu-content-${o}`);i.setAttribute(`aria-haspopup`,`true`),i.setAttribute(`aria-controls`,l),a.setAttribute(`aria-labelledby`,s)}});let I=Array.from(P.values()).map(e=>e.trigger),L=new Map;for(let[e,t]of P)L.set(t.trigger,e);let R=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,z=e=>Array.from(e.querySelectorAll(R)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),B=()=>{T&&(clearTimeout(T),T=null),E&&(clearTimeout(E),E=null)},V=null,H=()=>(V||(V=document.createElement(`div`),V.setAttribute(`data-slot`,`navigation-menu-bridge`),V.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,b&&b.insertBefore(V,b.firstChild),j.push(g(V,`pointerenter`,()=>{B()}))),V),U=(e,t,r)=>{b&&requestAnimationFrame(()=>{let i=e.getBoundingClientRect(),a=getComputedStyle(e),o=parseFloat(a.marginTop)||0,s=getComputedStyle(b),c=parseFloat(s.marginTop)||0,l=parseFloat(s.marginBottom)||0;b.style.setProperty(`--viewport-width`,`${i.width}px`),b.style.setProperty(`--viewport-height`,`${i.height+c+l}px`);let u=n.getBoundingClientRect(),d=t.getBoundingClientRect(),f;f=r===`center`?d.left-u.left+d.width/2-i.width/2:r===`end`?d.right-u.left-i.width:d.left-u.left,b.style.setProperty(`--viewport-left`,`${f}px`),b.style.left=`${f}px`,e.style.left=`${f}px`;let p=o+c;if(p>0){let e=H();e.style.height=`${p}px`,e.style.transform=`translateY(-${p}px)`}else V&&(V.style.height=`0`)})},W=e=>w===-1||e>w?`right`:`left`,G=e=>{if(!x)return;if(D=e,!e){x.setAttribute(`data-state`,`hidden`);return}let t=p.getBoundingClientRect(),n=e.getBoundingClientRect();x.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),x.style.setProperty(`--indicator-width`,`${n.width}px`),x.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),x.style.setProperty(`--indicator-height`,`${n.height}px`),x.setAttribute(`data-state`,`visible`)},K=(e,t=!1)=>{if(e===S){B();return}if(e!==null&&e===C){B();return}B(),C=e===null?null:e;let r=()=>{let t=S,r=e?P.get(e):null,i=t!==null&&e!==null&&t!==e,a=i&&r?W(r.index):null,o=document.activeElement;if(e===null&&o&&n.contains(o)){let e=t?P.get(t)?.trigger:null;e&&e.focus()}if(P.forEach(({trigger:n,content:r,item:i},o)=>{let s=o===e,c=o===t;if(h(n,`expanded`,s),n.setAttribute(`data-state`,s?`open`:`closed`),s||c&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),l(r,!0),r.hidden=!0,c&&a){let e=a===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(a){let e=a===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),l(r.content,!1),r.content.hidden=!1,w=r.index,U(r.content,r.trigger,r.align),N(r),G(r.trigger)}else N(null);let c=e!==null;n.setAttribute(`data-state`,c?`open`:`closed`),a?n.setAttribute(`data-motion`,a===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),b&&(b.setAttribute(`data-state`,c?`open`:`closed`),c&&!i?b.setAttribute(`data-instant`,``):i&&b.removeAttribute(`data-instant`),a&&b.style.setProperty(`--motion-direction`,a===`right`?`1`:`-1`)),S=e,C=null,e===null&&G(null),_(n,`navigation-menu:change`,{value:e}),s?.(e)};t?r():e!==null&&S===null?T=setTimeout(r,i):e!==null&&S!==null?r():E=setTimeout(r,a)};n.setAttribute(`data-state`,`closed`),b&&b.setAttribute(`data-state`,`closed`),x&&x.setAttribute(`data-state`,`hidden`),P.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),h(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===I[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,l(t,!0),t.hidden=!0}),P.forEach(({item:e,trigger:t},n)=>{j.push(g(t,`pointerenter`,()=>{O||G(t)})),j.push(g(e,`pointerenter`,()=>{O||K(n)})),j.push(g(e,`pointerleave`,()=>{C===n&&S===null&&(B(),C=null)})),j.push(g(t,`focus`,()=>{k||(o&&K(n,!0),G(t))})),j.push(g(t,`pointerdown`,()=>{k=!0})),j.push(g(t,`click`,()=>{B(),S===n&&O?(O=!1,K(null,!0),G(null)):S===n&&!O?(O=!0,G(t)):(O=!0,K(n,!0),G(t)),k=!1}))}),j.push(g(n,`pointerenter`,()=>{A=!0}),g(n,`pointerleave`,()=>{A=!1,O||(K(null),G(null))}),g(n,`pointerdown`,B)),b&&j.push(g(b,`pointerenter`,()=>{B()}),g(b,`transitionend`,e=>{if(e.target!==b)return;let t=S?P.get(S):null;t&&U(t.content,t.trigger,t.align)})),P.forEach(({content:e})=>{j.push(g(e,`pointerenter`,()=>{B()}))}),j.push(g(p,`keydown`,e=>{let t=e.target,n=I.indexOf(t);if(n===-1)return;let r=L.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=I.length-1);break;case`ArrowRight`:i=n+1,i>=I.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(O=!0,K(r,!0),requestAnimationFrame(()=>{let e=P.get(r);if(!e)return;let t=z(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=I.length-1;break;case`Escape`:O=!1,K(null,!0),G(null);return;default:return}e.preventDefault();let a=I[i];a&&(I.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),G(a))})),P.forEach(({content:e,trigger:t})=>{j.push(g(e,`keydown`,n=>{let r=n.target,i=z(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),O=!1,K(null,!0),G(null),t.focus();break}}))});let q=()=>n.contains(document.activeElement)||A||O;j.push(g(document,`pointerup`,()=>{k=!1},{capture:!0}),g(document,`pointercancel`,()=>{k=!1},{capture:!0})),j.push(g(document,`focusin`,e=>{S!==null&&(n.contains(e.target)||(O=!1,K(null,!0),G(null)))})),j.push(g(document,`pointerdown`,e=>{S!==null&&q()&&(n.contains(e.target)||(O=!1,K(null,!0),G(null)))})),j.push(g(document,`keydown`,e=>{e.key!==`Escape`||S===null||q()&&(O=!1,K(null,!0),G(null))})),j.push(g(window,`resize`,()=>{D&&requestAnimationFrame(()=>G(D))}),g(p,`scroll`,()=>{D&&requestAnimationFrame(()=>G(D))}));let J={get value(){return S},open:e=>K(e,!0),close:()=>K(null,!0),destroy:()=>{B(),j.forEach(e=>e()),j.length=0}};return J}const b=new WeakSet;function x(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(b.has(r))continue;b.add(r),t.push(y(r))}return t}exports.create=x,exports.createNavigationMenu=y;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
//#region src/index.d.ts
|
|
2
|
+
/** Alignment of the viewport relative to the trigger */
|
|
3
|
+
type Align = "start" | "center" | "end";
|
|
2
4
|
interface NavigationMenuOptions {
|
|
3
5
|
/** Delay before opening on hover (ms) */
|
|
4
6
|
delayOpen?: number;
|
|
@@ -44,4 +46,4 @@ declare function createNavigationMenu(root: Element, options?: NavigationMenuOpt
|
|
|
44
46
|
*/
|
|
45
47
|
declare function create(scope?: ParentNode): NavigationMenuController[];
|
|
46
48
|
//#endregion
|
|
47
|
-
export { NavigationMenuController, NavigationMenuOptions, create, createNavigationMenu };
|
|
49
|
+
export { Align, NavigationMenuController, NavigationMenuOptions, create, createNavigationMenu };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
//#region src/index.d.ts
|
|
2
|
+
/** Alignment of the viewport relative to the trigger */
|
|
3
|
+
type Align = "start" | "center" | "end";
|
|
2
4
|
interface NavigationMenuOptions {
|
|
3
5
|
/** Delay before opening on hover (ms) */
|
|
4
6
|
delayOpen?: number;
|
|
@@ -44,4 +46,4 @@ declare function createNavigationMenu(root: Element, options?: NavigationMenuOpt
|
|
|
44
46
|
*/
|
|
45
47
|
declare function create(scope?: ParentNode): NavigationMenuController[];
|
|
46
48
|
//#endregion
|
|
47
|
-
export { NavigationMenuController, NavigationMenuOptions, create, createNavigationMenu };
|
|
49
|
+
export { Align, NavigationMenuController, NavigationMenuOptions, create, createNavigationMenu };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}let
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const _=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),v=[`start`,`center`,`end`];function y(n,r={}){let i=r.delayOpen??d(n,`delayOpen`)??200,a=r.delayClose??d(n,`delayClose`)??150,o=r.openOnFocus??u(n,`openOnFocus`)??!0,s=r.onValueChange,c=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),l=(e,t)=>{`inert`in e&&(e.inert=t)},p=e(n,`navigation-menu-list`),y=t(n,`navigation-menu-item`),b=e(n,`navigation-menu-viewport`),x=e(n,`navigation-menu-indicator`);if(!p||y.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let S=null,C=null,w=-1,T=null,E=null,D=null,O=!1,k=!1,A=!1,j=[],M=null,N=e=>{M?.disconnect(),M=null,!(!b||!e)&&(M=new ResizeObserver(()=>U(e.content,e.trigger,e.align)),M.observe(e.content))};j.push(()=>M?.disconnect());let P=new Map,F=0;y.forEach(t=>{let r=t.dataset.value;if(!r)return;let i=e(t,`navigation-menu-trigger`),a=e(t,`navigation-menu-content`);if(i&&a){let e=f(a,`align`,v)??f(t,`align`,v)??f(n,`align`,v)??`start`;P.set(r,{item:t,trigger:i,content:a,index:F++,align:e});let o=c(r),s=m(i,`nav-menu-trigger-${o}`),l=m(a,`nav-menu-content-${o}`);i.setAttribute(`aria-haspopup`,`true`),i.setAttribute(`aria-controls`,l),a.setAttribute(`aria-labelledby`,s)}});let I=Array.from(P.values()).map(e=>e.trigger),L=new Map;for(let[e,t]of P)L.set(t.trigger,e);let R=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,z=e=>Array.from(e.querySelectorAll(R)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),B=()=>{T&&(clearTimeout(T),T=null),E&&(clearTimeout(E),E=null)},V=null,H=()=>(V||(V=document.createElement(`div`),V.setAttribute(`data-slot`,`navigation-menu-bridge`),V.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,b&&b.insertBefore(V,b.firstChild),j.push(g(V,`pointerenter`,()=>{B()}))),V),U=(e,t,r)=>{b&&requestAnimationFrame(()=>{let i=e.getBoundingClientRect(),a=getComputedStyle(e),o=parseFloat(a.marginTop)||0,s=getComputedStyle(b),c=parseFloat(s.marginTop)||0,l=parseFloat(s.marginBottom)||0;b.style.setProperty(`--viewport-width`,`${i.width}px`),b.style.setProperty(`--viewport-height`,`${i.height+c+l}px`);let u=n.getBoundingClientRect(),d=t.getBoundingClientRect(),f;f=r===`center`?d.left-u.left+d.width/2-i.width/2:r===`end`?d.right-u.left-i.width:d.left-u.left,b.style.setProperty(`--viewport-left`,`${f}px`),b.style.left=`${f}px`,e.style.left=`${f}px`;let p=o+c;if(p>0){let e=H();e.style.height=`${p}px`,e.style.transform=`translateY(-${p}px)`}else V&&(V.style.height=`0`)})},W=e=>w===-1||e>w?`right`:`left`,G=e=>{if(!x)return;if(D=e,!e){x.setAttribute(`data-state`,`hidden`);return}let t=p.getBoundingClientRect(),n=e.getBoundingClientRect();x.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),x.style.setProperty(`--indicator-width`,`${n.width}px`),x.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),x.style.setProperty(`--indicator-height`,`${n.height}px`),x.setAttribute(`data-state`,`visible`)},K=(e,t=!1)=>{if(e===S){B();return}if(e!==null&&e===C){B();return}B(),C=e===null?null:e;let r=()=>{let t=S,r=e?P.get(e):null,i=t!==null&&e!==null&&t!==e,a=i&&r?W(r.index):null,o=document.activeElement;if(e===null&&o&&n.contains(o)){let e=t?P.get(t)?.trigger:null;e&&e.focus()}if(P.forEach(({trigger:n,content:r,item:i},o)=>{let s=o===e,c=o===t;if(h(n,`expanded`,s),n.setAttribute(`data-state`,s?`open`:`closed`),s||c&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,s?`open`:`closed`),!s)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),l(r,!0),r.hidden=!0,c&&a){let e=a===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(a){let e=a===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),l(r.content,!1),r.content.hidden=!1,w=r.index,U(r.content,r.trigger,r.align),N(r),G(r.trigger)}else N(null);let c=e!==null;n.setAttribute(`data-state`,c?`open`:`closed`),a?n.setAttribute(`data-motion`,a===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),b&&(b.setAttribute(`data-state`,c?`open`:`closed`),c&&!i?b.setAttribute(`data-instant`,``):i&&b.removeAttribute(`data-instant`),a&&b.style.setProperty(`--motion-direction`,a===`right`?`1`:`-1`)),S=e,C=null,e===null&&G(null),_(n,`navigation-menu:change`,{value:e}),s?.(e)};t?r():e!==null&&S===null?T=setTimeout(r,i):e!==null&&S!==null?r():E=setTimeout(r,a)};n.setAttribute(`data-state`,`closed`),b&&b.setAttribute(`data-state`,`closed`),x&&x.setAttribute(`data-state`,`hidden`),P.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),h(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===I[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,l(t,!0),t.hidden=!0}),P.forEach(({item:e,trigger:t},n)=>{j.push(g(t,`pointerenter`,()=>{O||G(t)})),j.push(g(e,`pointerenter`,()=>{O||K(n)})),j.push(g(e,`pointerleave`,()=>{C===n&&S===null&&(B(),C=null)})),j.push(g(t,`focus`,()=>{k||(o&&K(n,!0),G(t))})),j.push(g(t,`pointerdown`,()=>{k=!0})),j.push(g(t,`click`,()=>{B(),S===n&&O?(O=!1,K(null,!0),G(null)):S===n&&!O?(O=!0,G(t)):(O=!0,K(n,!0),G(t)),k=!1}))}),j.push(g(n,`pointerenter`,()=>{A=!0}),g(n,`pointerleave`,()=>{A=!1,O||(K(null),G(null))}),g(n,`pointerdown`,B)),b&&j.push(g(b,`pointerenter`,()=>{B()}),g(b,`transitionend`,e=>{if(e.target!==b)return;let t=S?P.get(S):null;t&&U(t.content,t.trigger,t.align)})),P.forEach(({content:e})=>{j.push(g(e,`pointerenter`,()=>{B()}))}),j.push(g(p,`keydown`,e=>{let t=e.target,n=I.indexOf(t);if(n===-1)return;let r=L.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=I.length-1);break;case`ArrowRight`:i=n+1,i>=I.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(O=!0,K(r,!0),requestAnimationFrame(()=>{let e=P.get(r);if(!e)return;let t=z(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=I.length-1;break;case`Escape`:O=!1,K(null,!0),G(null);return;default:return}e.preventDefault();let a=I[i];a&&(I.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),G(a))})),P.forEach(({content:e,trigger:t})=>{j.push(g(e,`keydown`,n=>{let r=n.target,i=z(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),O=!1,K(null,!0),G(null),t.focus();break}}))});let q=()=>n.contains(document.activeElement)||A||O;j.push(g(document,`pointerup`,()=>{k=!1},{capture:!0}),g(document,`pointercancel`,()=>{k=!1},{capture:!0})),j.push(g(document,`focusin`,e=>{S!==null&&(n.contains(e.target)||(O=!1,K(null,!0),G(null)))})),j.push(g(document,`pointerdown`,e=>{S!==null&&q()&&(n.contains(e.target)||(O=!1,K(null,!0),G(null)))})),j.push(g(document,`keydown`,e=>{e.key!==`Escape`||S===null||q()&&(O=!1,K(null,!0),G(null))})),j.push(g(window,`resize`,()=>{D&&requestAnimationFrame(()=>G(D))}),g(p,`scroll`,()=>{D&&requestAnimationFrame(()=>G(D))}));let J={get value(){return S},open:e=>K(e,!0),close:()=>K(null,!0),destroy:()=>{B(),j.forEach(e=>e()),j.length=0}};return J}const b=new WeakSet;function x(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(b.has(r))continue;b.add(r),t.push(y(r))}return t}export{x as create,y as createNavigationMenu};
|