@editora/ui-core 0.1.9 → 0.1.12

package/dist/navigation-menu.cjs.js

@@ -0,0 +1,382 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-1b301e7f.js"),x=`
+  :host {
+    display: block;
+    position: relative;
+    z-index: var(--ui-nav-z-index, 20);
+    color-scheme: light dark;
+
+    --ui-nav-gap: var(--base-navigation-menu-gap, 6px);
+    --ui-nav-padding: var(--base-navigation-menu-padding, 6px);
+    --ui-nav-radius: var(--base-navigation-menu-radius, var(--ui-radius, 4px));
+    --ui-nav-bg: var(--base-navigation-menu-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-nav-border: var(--base-navigation-menu-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent));
+    --ui-nav-shadow: var(--base-navigation-menu-shadow, var(--shadow-2, none));
+    --ui-nav-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-nav-item-radius: var(--base-navigation-menu-item-radius, var(--radius-2, 4px));
+    --ui-nav-item-min-height: var(--base-navigation-menu-item-height, 44px);
+    --ui-nav-item-pad-x: var(--base-navigation-menu-item-padding-x, 12px);
+    --ui-nav-item-pad-y: var(--base-navigation-menu-item-padding-y, 8px);
+    --ui-nav-item-font-size: var(--base-navigation-menu-item-font-size, 14px);
+    --ui-nav-item-font-weight: var(--base-navigation-menu-item-font-weight, 600);
+    --ui-nav-item-line-height: var(--base-navigation-menu-item-line-height, 20px);
+    --ui-nav-item-color: var(--ui-color-muted, var(--ui-muted, #475569));
+    --ui-nav-item-hover-bg: color-mix(in srgb, var(--ui-nav-ring) 10%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, var(--ui-nav-ring) 18%, transparent);
+    --ui-nav-item-active-color: var(--accent-12, var(--ui-color-text, #0f172a));
+    --ui-nav-panel-bg: var(--base-navigation-menu-panel-bg, var(--color-panel-solid, #ffffff));
+    --ui-nav-panel-border: var(--base-navigation-menu-panel-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
+    --ui-nav-panel-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-nav-panel-radius: var(--base-navigation-menu-panel-radius, var(--ui-nav-radius));
+    --ui-nav-panel-shadow: var(--base-navigation-menu-panel-shadow, var(--shadow-3, none));
+    --ui-nav-panel-padding: var(--base-navigation-menu-panel-padding, 16px);
+    --ui-nav-panel-min-width: min(100%, 720px);
+    --ui-nav-panel-max-width: min(100%, 960px);
+    --ui-nav-viewport-offset: 8px;
+  }
+
+  :host([data-open="true"]) {
+    z-index: var(--ui-nav-z-index-open, 80);
+  }
+
+  .root {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    align-content: start;
+    gap: 0;
+    isolation: isolate;
+  }
+
+  .bar {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    width: 100%;
+    z-index: 20;
+  }
+
+  .list {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-nav-gap);
+    width: max-content;
+    max-width: 100%;
+    padding: var(--ui-nav-padding);
+    border: var(--ui-nav-border);
+    border-radius: var(--ui-nav-radius);
+    background: var(--ui-nav-bg);
+    box-shadow: var(--ui-nav-shadow);
+    box-sizing: border-box;
+  }
+
+  .indicator {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 1px);
+    width: 100%;
+    height: 14px;
+    display: flex;
+    justify-content: flex-start;
+    pointer-events: none;
+    overflow: visible;
+    z-index: 40;
+  }
+
+  .indicator[hidden] {
+    display: none;
+  }
+
+  .indicator-thumb {
+    width: 12px;
+    height: 12px;
+    margin-left: var(--ui-nav-indicator-offset, 0px);
+    background: var(--ui-nav-panel-bg);
+    border: 1px solid var(--ui-nav-panel-border-color);
+    border-radius: 3px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);
+    transform: translateY(2px) rotate(45deg);
+    transition: margin-left 200ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  :host([data-side="top"]) .indicator {
+    top: auto;
+    bottom: calc(100% + 1px);
+  }
+
+  :host([data-side="top"]) .indicator-thumb {
+    transform: translateY(-2px) rotate(225deg);
+  }
+
+  .viewport-shell {
+    position: absolute;
+    top: calc(100% + var(--ui-nav-viewport-offset));
+    left: 50%;
+    width: min(var(--ui-nav-panel-max-width), 100%);
+    min-width: min(100%, var(--ui-nav-panel-min-width));
+    transform: translateX(-50%);
+    z-index: 30;
+  }
+
+  :host([data-side="top"]) .viewport-shell {
+    top: auto;
+    bottom: calc(100% + var(--ui-nav-viewport-offset));
+  }
+
+  .viewport-shell[hidden] {
+    display: none;
+  }
+
+  .viewport {
+    position: relative;
+    z-index: 30;
+    min-width: 0;
+    border: var(--ui-nav-panel-border);
+    border-radius: var(--ui-nav-panel-radius);
+    background: var(--ui-nav-panel-bg);
+    box-shadow: var(--ui-nav-panel-shadow);
+    padding: var(--ui-nav-panel-padding);
+    box-sizing: border-box;
+    overflow: visible;
+  }
+
+  ::slotted([slot="item"]) {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: var(--ui-nav-item-min-height);
+    padding: var(--ui-nav-item-pad-y) var(--ui-nav-item-pad-x);
+    border: 1px solid transparent;
+    border-radius: var(--ui-nav-item-radius);
+    background: transparent;
+    color: var(--ui-nav-item-color);
+    font: var(--ui-nav-item-font-weight) var(--ui-nav-item-font-size)/var(--ui-nav-item-line-height) Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+  }
+
+  ::slotted([slot="item"]:hover),
+  ::slotted([slot="item"]:focus-visible) {
+    background: var(--ui-nav-item-hover-bg);
+  }
+
+  ::slotted([slot="item"]:focus-visible) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-nav-ring) 34%, transparent);
+  }
+
+  ::slotted([slot="item"][data-active="true"]) {
+    background: var(--ui-nav-item-active-bg);
+    color: var(--ui-nav-item-active-color);
+    border-color: color-mix(in srgb, var(--ui-nav-ring) 28%, transparent);
+  }
+
+  ::slotted([slot="panel"]) {
+    display: none;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  ::slotted([slot="panel"][data-active="true"]) {
+    display: block;
+  }
+
+  :host([orientation="vertical"]) .root {
+    justify-items: stretch;
+  }
+
+  :host([orientation="vertical"]) .bar {
+    justify-items: stretch;
+  }
+
+  :host([orientation="vertical"]) .list {
+    display: grid;
+    width: 100%;
+  }
+
+  :host([orientation="vertical"]) .viewport-shell {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    transform: none;
+    margin-top: 10px;
+  }
+
+  :host([orientation="vertical"]) .indicator {
+    display: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-nav-bg: color-mix(in srgb, var(--base-navigation-menu-bg, var(--color-panel-solid, #ffffff)) 95%, var(--accent-surface, transparent));
+    --ui-nav-panel-bg: color-mix(in srgb, var(--base-navigation-menu-panel-bg, var(--color-panel-solid, #ffffff)) 96%, var(--accent-surface, transparent));
+  }
+
+  :host([variant="solid"]) {
+    --ui-nav-item-hover-bg: color-mix(in srgb, var(--ui-nav-ring) 14%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, var(--ui-nav-ring) 24%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([variant="flat"]) {
+    --ui-nav-bg: transparent;
+    --ui-nav-border: 1px solid transparent;
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-nav-bg: #0f172a;
+    --ui-nav-border: 1px solid #334155;
+    --ui-nav-shadow: none;
+    --ui-nav-item-color: #cbd5e1;
+    --ui-nav-item-hover-bg: color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-nav-item-active-color: #ffffff;
+    --ui-nav-panel-bg: #0f172a;
+    --ui-nav-panel-border: 1px solid #334155;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-nav-gap: 4px;
+    --ui-nav-padding: 4px;
+    --ui-nav-item-radius: 6px;
+    --ui-nav-item-min-height: 36px;
+    --ui-nav-item-pad-x: 10px;
+    --ui-nav-item-pad-y: 6px;
+    --ui-nav-item-font-size: 13px;
+    --ui-nav-item-line-height: 18px;
+    --ui-nav-panel-padding: 12px;
+    --ui-nav-panel-min-width: min(100%, 620px);
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-nav-gap: 8px;
+    --ui-nav-padding: 8px;
+    --ui-nav-item-radius: 10px;
+    --ui-nav-item-min-height: 52px;
+    --ui-nav-item-pad-x: 16px;
+    --ui-nav-item-pad-y: 10px;
+    --ui-nav-item-font-size: 15px;
+    --ui-nav-item-line-height: 22px;
+    --ui-nav-panel-padding: 18px;
+    --ui-nav-panel-min-width: min(100%, 780px);
+  }
+
+  :host([elevation="none"]) {
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-nav-shadow: 0 14px 30px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.05);
+    --ui-nav-panel-shadow: 0 20px 40px rgba(2, 6, 23, 0.12), 0 4px 12px rgba(2, 6, 23, 0.06);
+  }
+
+  :host([elevation="high"]) {
+    --ui-nav-shadow: 0 24px 52px rgba(2, 6, 23, 0.18), 0 8px 18px rgba(2, 6, 23, 0.08);
+    --ui-nav-panel-shadow: 0 28px 64px rgba(2, 6, 23, 0.24), 0 10px 24px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="neutral"]) {
+    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-color-text, #0f172a));
+  }
+
+  :host([tone="info"]) {
+    --ui-nav-ring: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="success"]) {
+    --ui-nav-ring: #16a34a;
+    --ui-nav-item-active-color: #166534;
+  }
+
+  :host([tone="warning"]) {
+    --ui-nav-ring: #d97706;
+    --ui-nav-item-active-color: #92400e;
+  }
+
+  :host([tone="danger"]) {
+    --ui-nav-ring: #ef4444;
+    --ui-nav-item-active-color: #b91c1c;
+  }
+
+  :host([headless]) .list,
+  :host([headless]) .indicator,
+  :host([headless]) .viewport-shell {
+    display: none !important;
+  }
+
+  @media (prefers-contrast: more) {
+    .list,
+    .viewport {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-nav-bg: Canvas;
+      --ui-nav-border: 1px solid CanvasText;
+      --ui-nav-shadow: none;
+      --ui-nav-item-color: CanvasText;
+      --ui-nav-item-hover-bg: Highlight;
+      --ui-nav-item-active-bg: Highlight;
+      --ui-nav-item-active-color: HighlightText;
+      --ui-nav-panel-bg: Canvas;
+      --ui-nav-panel-border: 1px solid CanvasText;
+      --ui-nav-panel-shadow: none;
+    }
+
+    .list,
+    .viewport {
+      forced-color-adjust: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([slot="item"]) {
+      transition: none !important;
+    }
+
+    .indicator-thumb {
+      transition: none !important;
+    }
+  }
+`;function m(l,t){return t<=0?-1:Number.isNaN(l)||l<0?0:l>=t?t-1:l}function w(l){return!l||l==="default"?null:l==="none"||l==="square"?"0px":l==="sm"?"8px":l==="md"||l==="soft"?"12px":l==="lg"?"16px":l==="full"?"999px":/^\d+(\.\d+)?$/.test(l)?`${l}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(l)?l:null}const b=class v extends _.ElementBase{constructor(){super(),this._items=[],this._panels=[],this._itemPanels=[],this._ignoreSelectedAttribute=!1,this._itemSlot=null,this._panelSlot=null,this._uid=Math.random().toString(36).slice(2,8),this._closeTimer=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPointerOver=this._onPointerOver.bind(this),this._onPointerEnter=this._onPointerEnter.bind(this),this._onPointerLeave=this._onPointerLeave.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onViewportEnvironmentChange=this._onViewportEnvironmentChange.bind(this),this._onPeerMenuOpen=this._onPeerMenuOpen.bind(this)}static get observedAttributes(){return["selected","orientation","activation","headless","collapsible","loop","variant","size","radius","elevation","tone"]}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","navigation"),super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("pointerover",this._onPointerOver),this.root.addEventListener("pointerenter",this._onPointerEnter),this.root.addEventListener("pointerleave",this._onPointerLeave),document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),document.addEventListener("keydown",this._onDocumentKeyDown,!0),document.addEventListener(v.OPEN_EVENT,this._onPeerMenuOpen),window.addEventListener("resize",this._onViewportEnvironmentChange,{passive:!0}),window.addEventListener("scroll",this._onViewportEnvironmentChange,{passive:!0,capture:!0}),this._attachSlotHandlers(),this._syncStructure()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("pointerover",this._onPointerOver),this.root.removeEventListener("pointerenter",this._onPointerEnter),this.root.removeEventListener("pointerleave",this._onPointerLeave),document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),document.removeEventListener("keydown",this._onDocumentKeyDown,!0),document.removeEventListener(v.OPEN_EVENT,this._onPeerMenuOpen),window.removeEventListener("resize",this._onViewportEnvironmentChange),window.removeEventListener("scroll",this._onViewportEnvironmentChange,!0),this._detachSlotHandlers(),this._clearCloseTimer(),super.disconnectedCallback()}attributeChangedCallback(t,i,n){if(!(t==="selected"&&this._ignoreSelectedAttribute)&&i!==n&&this.isConnected){if(t==="radius"){this._syncVisualState();return}if(t==="variant"||t==="size"||t==="elevation"||t==="tone"||t==="orientation"){t==="orientation"?this.requestRender():this._syncVisualState(),this._syncStructure();return}this._syncStructure()}}render(){const t=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal";this.setContent(`
+      <style>${x}</style>
+      <div class="root" part="root">
+        <div class="bar" part="bar">
+          <div class="list" part="list" role="menubar" aria-orientation="${t}">
+            <slot name="item"></slot>
+          </div>
+          <div class="indicator" part="indicator" hidden>
+            <div class="indicator-thumb"></div>
+          </div>
+        </div>
+        <div class="viewport-shell" part="viewport-shell" hidden>
+          <div class="viewport" part="viewport">
+            <slot name="panel"></slot>
+          </div>
+        </div>
+      </div>
+    `),this._syncVisualState(),this._attachSlotHandlers(),this._syncStructure()}_syncVisualState(){const t=w(this.getAttribute("radius"));t?(this.style.setProperty("--ui-nav-radius",t),this.style.setProperty("--ui-nav-item-radius",t==="999px"?"999px":`max(0px, calc(${t} - 2px))`),this.style.setProperty("--ui-nav-panel-radius",t)):(this.style.removeProperty("--ui-nav-radius"),this.style.removeProperty("--ui-nav-item-radius"),this.style.removeProperty("--ui-nav-panel-radius"))}_attachSlotHandlers(){const t=this.root.querySelector('slot[name="item"]'),i=this.root.querySelector('slot[name="panel"]');this._itemSlot&&this._itemSlot!==t&&this._itemSlot.removeEventListener("slotchange",this._onSlotChange),this._panelSlot&&this._panelSlot!==i&&this._panelSlot.removeEventListener("slotchange",this._onSlotChange),t&&this._itemSlot!==t&&t.addEventListener("slotchange",this._onSlotChange),i&&this._panelSlot!==i&&i.addEventListener("slotchange",this._onSlotChange),this._itemSlot=t,this._panelSlot=i}_detachSlotHandlers(){this._itemSlot&&this._itemSlot.removeEventListener("slotchange",this._onSlotChange),this._panelSlot&&this._panelSlot.removeEventListener("slotchange",this._onSlotChange),this._itemSlot=null,this._panelSlot=null}_onSlotChange(){this._syncStructure()}_onViewportEnvironmentChange(){this._syncViewportSide(this._getSelectedFromAttribute())}_onPeerMenuOpen(t){const i=t.detail;!i||i.uid===this._uid||this._getSelectedFromAttribute()>=0&&this._selectIndex(-1,"programmatic")}_getSelectedFromAttribute(){const t=this.getAttribute("selected");if(t==null||t==="")return-1;const i=Number(t);return Number.isNaN(i)||i<0?-1:m(i,this._items.length)}_setSelectedAttribute(t){this._ignoreSelectedAttribute=!0,t<0?this.setAttribute("selected","-1"):this.setAttribute("selected",String(t)),this._ignoreSelectedAttribute=!1}_activationMode(){return this.getAttribute("activation")==="manual"?"manual":"automatic"}_loopEnabled(){const t=this.getAttribute("loop");if(t==null)return!0;const i=String(t).toLowerCase();return i!=="false"&&i!=="0"}_syncStructure(){const t=this.root.querySelector('slot[name="item"]'),i=this.root.querySelector('slot[name="panel"]');this._items=t?t.assignedElements({flatten:!0}):[],this._panels=i?i.assignedElements({flatten:!0}):[];const n=new Map;this._panels.forEach((e,a)=>{const u=e.getAttribute("data-nav-panel-for")||e.getAttribute("data-nav-key")||String(a);n.set(u,e)}),this._itemPanels=this._items.map((e,a)=>{const u=e.getAttribute("data-nav-key")||String(a);return n.get(u)??this._panels[a]??null});const o=this._getSelectedFromAttribute(),r=o>=0?o:this._items.length>0?0:-1,s=this.root.querySelector(".viewport-shell");if(this._items.forEach((e,a)=>{const u=this._itemPanels[a],d=o===a,h=e.id||`ui-navigation-menu-item-${this._uid}-${a}`,c=u?u.id||`ui-navigation-menu-panel-${this._uid}-${a}`:"";e.id=h,e.setAttribute("role","menuitem"),e.setAttribute("tabindex",a===r?"0":"-1"),e.setAttribute("data-active",d?"true":"false"),c?(e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-controls",c),e.setAttribute("aria-expanded",d?"true":"false")):(e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded"))}),this._panels.forEach((e,a)=>{const u=this._itemPanels.findIndex(p=>p===e),d=u>=0&&o===u,h=u>=0?this._items[u]:null,c=e.id||`ui-navigation-menu-panel-${this._uid}-${a}`;e.id=c,e.setAttribute("role","group"),h!=null&&h.id?e.setAttribute("aria-labelledby",h.id):e.removeAttribute("aria-labelledby"),e.setAttribute("aria-hidden",d?"false":"true"),e.setAttribute("data-active",d?"true":"false"),d?e.removeAttribute("hidden"):e.setAttribute("hidden","")}),s){const e=o>=0&&!!this._itemPanels[o];e?s.removeAttribute("hidden"):s.setAttribute("hidden",""),e?this.setAttribute("data-open","true"):this.removeAttribute("data-open")}else this.removeAttribute("data-open");this._syncIndicator(o),this._syncViewportSide(o)}_syncIndicator(t){const i=this.root.querySelector(".indicator"),n=this.root.querySelector(".list"),o=this.root.querySelector(".bar");if(!i||!n||!o)return;if((this.getAttribute("orientation")==="vertical"?"vertical":"horizontal")==="vertical"||t<0||!this._itemPanels[t]||!this._items[t]){i.setAttribute("hidden",""),this.style.removeProperty("--ui-nav-indicator-offset");return}i.removeAttribute("hidden");const s=this._items[t];queueMicrotask(()=>{const e=o.getBoundingClientRect(),a=n.getBoundingClientRect(),u=s.getBoundingClientRect(),d=a.left-e.left+(u.left-a.left)+u.width/2-6;this.style.setProperty("--ui-nav-indicator-offset",`${Math.max(0,d)}px`)})}_syncViewportSide(t){if((this.getAttribute("orientation")==="vertical"?"vertical":"horizontal")==="vertical"){this.removeAttribute("data-side");return}const n=this.root.querySelector(".viewport-shell"),o=this.root.querySelector(".viewport"),r=this.root.querySelector(".bar");if(!n||!o||!r)return;if(!(t>=0&&!!this._itemPanels[t])||n.hasAttribute("hidden")){this.removeAttribute("data-side");return}queueMicrotask(()=>{if(!this.isConnected)return;const e=parseFloat(getComputedStyle(this).getPropertyValue("--ui-nav-viewport-offset"))||8,a=12,u=r.getBoundingClientRect(),d=o.getBoundingClientRect(),h=Math.max(d.height,o.scrollHeight),c=window.innerHeight-u.bottom-e-a,p=u.top-e-a,f=h>c&&p>c;this.setAttribute("data-side",f?"top":"bottom")})}_selectIndex(t,i){const n=this._getSelectedFromAttribute(),o=t<0?-1:m(t,this._items.length);if(o===n)return;const r=o>=0&&!!this._itemPanels[o];this._setSelectedAttribute(o),this._syncStructure(),r&&document.dispatchEvent(new CustomEvent(v.OPEN_EVENT,{detail:{uid:this._uid}})),this.dispatchEvent(new CustomEvent("change",{detail:{selected:o,previous:n,reason:i},bubbles:!0})),this.dispatchEvent(new CustomEvent("select",{detail:{selected:o,previous:n,reason:i},bubbles:!0}))}_focusItem(t){const i=this._items[t];if(i)try{i.focus()}catch{}}_clearCloseTimer(){this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_scheduleClose(){this._clearCloseTimer(),this._closeTimer=window.setTimeout(()=>{this._selectIndex(-1,"programmatic"),this._closeTimer=null},120)}_onPointerEnter(){this._clearCloseTimer()}_onPointerLeave(){this._activationMode()==="automatic"&&this._scheduleClose()}_onDocumentPointerDown(t){!this.isConnected||!this.shadowRoot||t.composedPath().includes(this)||this._getSelectedFromAttribute()>=0&&this._selectIndex(-1,"programmatic")}_onDocumentKeyDown(t){if(t.key!=="Escape")return;const i=this._getSelectedFromAttribute();i<0||(this._selectIndex(-1,"keyboard"),this._focusItem(i))}_onClick(t){const i=t.composedPath(),n=this._items.findIndex(e=>i.includes(e));if(n<0)return;const o=!!this._itemPanels[n],r=this._getSelectedFromAttribute(),s=this.hasAttribute("collapsible");if(o){s&&r===n?this._selectIndex(-1,"click"):this._selectIndex(n,"click");return}this._selectIndex(n,"click")}_onPointerOver(t){if(t.pointerType==="touch"||this._activationMode()!=="automatic")return;const i=t.composedPath(),n=this._items.findIndex(o=>i.includes(o));n<0||this._getSelectedFromAttribute()!==n&&this._selectIndex(n,"programmatic")}_moveFocus(t,i){if(this._items.length===0)return-1;const n=this._loopEnabled();let o=t+i;return o<0&&(o=n?this._items.length-1:0),o>=this._items.length&&(o=n?0:this._items.length-1),o}_onKeyDown(t){const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",n=this._items.findIndex(e=>e===t.target||e.contains(t.target));if(n<0)return;const o=this._activationMode();let r=!1,s=n;i==="horizontal"?t.key==="ArrowRight"?(s=this._moveFocus(n,1),r=!0):t.key==="ArrowLeft"?(s=this._moveFocus(n,-1),r=!0):t.key==="ArrowDown"&&this._itemPanels[n]&&(this._selectIndex(n,"keyboard"),r=!0):t.key==="ArrowDown"?(s=this._moveFocus(n,1),r=!0):t.key==="ArrowUp"?(s=this._moveFocus(n,-1),r=!0):t.key==="ArrowRight"&&this._itemPanels[n]&&(this._selectIndex(n,"keyboard"),r=!0),t.key==="Home"&&(s=this._items.length>0?0:-1,r=!0),t.key==="End"&&(s=this._items.length>0?this._items.length-1:-1,r=!0),(t.key==="Enter"||t.key===" ")&&(this._selectIndex(n,"keyboard"),r=!0),t.key==="Escape"&&(this._selectIndex(-1,"keyboard"),r=!0),r&&(t.preventDefault(),s>=0&&s!==n?(this._focusItem(s),o==="automatic"?this._selectIndex(s,"keyboard"):this._items.forEach((e,a)=>{e.setAttribute("tabindex",a===s?"0":"-1")})):s===n&&o==="manual"&&this._items.forEach((e,a)=>{e.setAttribute("tabindex",a===n?"0":"-1")}))}};b.OPEN_EVENT="ui-navigation-menu:open";let g=b;typeof customElements<"u"&&!customElements.get("ui-navigation-menu")&&customElements.define("ui-navigation-menu",g);exports.UINavigationMenu=g;