@skdx/web-components 0.26.0

package/dist/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,125 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu>` — the Web Components implementation of the shared
+ * NavigationMenu contract (see `@skdx/shared`'s `navigationMenuContract`).
+ * A hover/click-driven navigation menu: owns which item's content is open
+ * and hands hover-intent timers down to descendant parts via
+ * `closest('skdx-navigation-menu')`. Sets `role="navigation"` and
+ * `aria-label="Main"` by default (override via `aria-label`).
+ *
+ * Opening a trigger is delayed by `delay-duration` on first hover, but once
+ * one item is open, moving to a sibling trigger within `skip-delay-duration`
+ * of closing switches instantly.
+ *
+ * @example
+ * ```html
+ * <skdx-navigation-menu>
+ *   <skdx-navigation-menu-list>
+ *     <skdx-navigation-menu-item value="products">
+ *       <skdx-navigation-menu-trigger>Products</skdx-navigation-menu-trigger>
+ *       <skdx-navigation-menu-content>
+ *         <skdx-navigation-menu-link href="/products/a">Product A</skdx-navigation-menu-link>
+ *       </skdx-navigation-menu-content>
+ *     </skdx-navigation-menu-item>
+ *   </skdx-navigation-menu-list>
+ *   <skdx-navigation-menu-indicator></skdx-navigation-menu-indicator>
+ * </skdx-navigation-menu>
+ * ```
+ *
+ * @fires value-change - Fired with the `value` of the item whose content is now open, or `''` when the menu closes.
+ */
+export declare class SkdxNavigationMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Value of the currently open item's content (`""` when none are open). Listen for `value-change`. */
+    value: string;
+    /** Delay before hovering a trigger opens its content (ms). */
+    delayDuration: number;
+    /** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
+    skipDelayDuration: number;
+    private isOpenDelayed;
+    private openTimer?;
+    private closeTimer?;
+    private skipDelayTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setValue;
+    /**
+     * Starts (or, once already delay-skipped, immediately runs) the open timer for
+     * `itemValue`.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onTriggerEnter(itemValue: string): void;
+    /**
+     * Starts the close timer.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onTriggerLeave(): void;
+    /**
+     * Cancels a pending close (pointer moved from trigger onto content).
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onContentEnter(): void;
+    /**
+     * Same as {@link onTriggerLeave} — restarts the close timer.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onContentLeave(): void;
+    /**
+     * Opens `itemValue` immediately (click/keyboard selection, not hover-delayed).
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onItemSelect(itemValue: string): void;
+    /**
+     * Closes whatever is open immediately.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onClose(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu': SkdxNavigationMenu;
+    }
+}

package/dist/navigation-menu/NavigationMenu.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(a,r,e,o)=>{for(var i=o>1?void 0:o?c(r,e):r,l=a.length-1,n;l>=0;l--)(n=a[l])&&(i=(o?n(r,e,i):n(i))||i);return o&&i&&u(r,e,i),i};import{css as p,html as T,LitElement as h}from"lit";import{property as m}from"lit/decorators.js";import{customElement as d}from"../internal/define.js";var v=150,t=class extends h{constructor(){super(...arguments);this.value="";this.delayDuration=200;this.skipDelayDuration=300;this.isOpenDelayed=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","navigation"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Main")}disconnectedCallback(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}setValue(e){this.value=e,clearTimeout(this.skipDelayTimer),e?this.isOpenDelayed=!1:this.skipDelayTimer=setTimeout(()=>this.isOpenDelayed=!0,this.skipDelayDuration),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-navigation-menu-internal-update",{composed:!0}))}onTriggerEnter(e){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.isOpenDelayed?this.openTimer=setTimeout(()=>this.setValue(e),this.delayDuration):this.setValue(e)}onTriggerLeave(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>this.setValue(""),v)}onContentEnter(){clearTimeout(this.closeTimer)}onContentLeave(){this.onTriggerLeave()}onItemSelect(e){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue(e)}onClose(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue("")}render(){return T`<slot></slot>`}};t.styles=p`
+    :host {
+      display: block;
+    }
+  `,s([m({type:String,reflect:!0})],t.prototype,"value",2),s([m({type:Number,attribute:"delay-duration"})],t.prototype,"delayDuration",2),s([m({type:Number,attribute:"skip-delay-duration"})],t.prototype,"skipDelayDuration",2),t=s([d("skdx-navigation-menu","navigation-menu","root")],t);export{t as SkdxNavigationMenu};

package/dist/navigation-menu/NavigationMenuContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},E=(i,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!g.call(i,n)&&n!==t&&a(i,n,{get:()=>e[n],enumerable:!(o=m(e,n))||o.enumerable});return i};var f=i=>E(a({},"__esModule",{value:!0}),i),h=(i,e,t,o)=>{for(var n=o>1?void 0:o?m(e,t):e,d=i.length-1,l;d>=0;d--)(l=i[d])&&(n=(o?l(e,t,n):l(n))||n);return o&&n&&a(e,t,n),n};var L={};y(L,{SkdxNavigationMenuContent:()=>r});module.exports=f(L);var s=require("lit"),v=require("lit/decorators.js"),c=require("../internal/define.cjs"),p=require("../internal/styles.cjs");var r=class extends s.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.item=null;this.onUpdate=()=>this.syncHostState();this.handlePointerEnter=()=>this.root?.onContentEnter();this.handlePointerLeave=()=>this.root?.onContentLeave();this.handleKeyDown=t=>{t.key==="Escape"&&(this.root?.onClose(),document.getElementById(this.item?.triggerId??"")?.focus())};this.handleOutsidePointerDown=t=>{if(!this.open)return;let o=t.target,n=document.getElementById(this.item?.triggerId??"");this.contains(o)||n?.contains(o)||this.root?.onClose()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.root=this.closest("skdx-navigation-menu"),this.item=this.closest("skdx-navigation-menu-item"),this.item&&(this.id=this.item.contentId,this.setAttribute("aria-labelledby",this.item.triggerId)),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),super.disconnectedCallback()}get open(){return!!this.item&&this.root?.value===this.item.value}syncHostState(){let t=this.open;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!(t||this.forceMount)}render(){return s.html`<slot></slot>`}};r.styles=[p.hiddenHostStyles,s.css`
+      :host {
+        display: block;
+      }
+    `],h([(0,v.property)({type:Boolean,attribute:"force-mount"})],r.prototype,"forceMount",2),r=h([(0,c.customElement)("skdx-navigation-menu-content","navigation-menu","content")],r);0&&(module.exports={SkdxNavigationMenuContent});

package/dist/navigation-menu/NavigationMenuContent.d.cts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-content>` — content panel revealed by an
+ * `<skdx-navigation-menu-trigger>`. Sets `role="region"`, `id`, and
+ * `aria-labelledby` (pointing at the trigger's id) directly on this host
+ * element, with `data-state`. Pointer-enter cancels the root's close timer,
+ * pointer-leave restarts it, and Escape closes the menu and refocuses the
+ * trigger. Also dismisses on outside pointerdown.
+ */
+export declare class SkdxNavigationMenuContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Keep this panel in the DOM even while its item isn't open. */
+    forceMount: boolean;
+    private root;
+    private item;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get open();
+    private syncHostState;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleKeyDown;
+    private readonly handleOutsidePointerDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-content': SkdxNavigationMenuContent;
+    }
+}

package/dist/navigation-menu/NavigationMenuContent.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-content>` — content panel revealed by an
+ * `<skdx-navigation-menu-trigger>`. Sets `role="region"`, `id`, and
+ * `aria-labelledby` (pointing at the trigger's id) directly on this host
+ * element, with `data-state`. Pointer-enter cancels the root's close timer,
+ * pointer-leave restarts it, and Escape closes the menu and refocuses the
+ * trigger. Also dismisses on outside pointerdown.
+ */
+export declare class SkdxNavigationMenuContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Keep this panel in the DOM even while its item isn't open. */
+    forceMount: boolean;
+    private root;
+    private item;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get open();
+    private syncHostState;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleKeyDown;
+    private readonly handleOutsidePointerDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-content': SkdxNavigationMenuContent;
+    }
+}

package/dist/navigation-menu/NavigationMenuContent.js

@@ -0,0 +1,5 @@
+var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(r,o,e,n)=>{for(var t=n>1?void 0:n?h(o,e):o,s=r.length-1,a;s>=0;s--)(a=r[s])&&(t=(n?a(o,e,t):a(t))||t);return n&&t&&l(o,e,t),t};import{css as m,html as v,LitElement as c}from"lit";import{property as p}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{hiddenHostStyles as g}from"../internal/styles.js";var i=class extends c{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.item=null;this.onUpdate=()=>this.syncHostState();this.handlePointerEnter=()=>this.root?.onContentEnter();this.handlePointerLeave=()=>this.root?.onContentLeave();this.handleKeyDown=e=>{e.key==="Escape"&&(this.root?.onClose(),document.getElementById(this.item?.triggerId??"")?.focus())};this.handleOutsidePointerDown=e=>{if(!this.open)return;let n=e.target,t=document.getElementById(this.item?.triggerId??"");this.contains(n)||t?.contains(n)||this.root?.onClose()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.root=this.closest("skdx-navigation-menu"),this.item=this.closest("skdx-navigation-menu-item"),this.item&&(this.id=this.item.contentId,this.setAttribute("aria-labelledby",this.item.triggerId)),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),super.disconnectedCallback()}get open(){return!!this.item&&this.root?.value===this.item.value}syncHostState(){let e=this.open;this.setAttribute("data-state",e?"open":"closed"),this.hidden=!(e||this.forceMount)}render(){return v`<slot></slot>`}};i.styles=[g,m`
+      :host {
+        display: block;
+      }
+    `],d([p({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=d([u("skdx-navigation-menu-content","navigation-menu","content")],i);export{i as SkdxNavigationMenuContent};

package/dist/navigation-menu/NavigationMenuIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},b=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!f.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(n=m(e,t))||n.enumerable});return o};var k=o=>b(a({},"__esModule",{value:!0}),o),c=(o,e,i,n)=>{for(var t=n>1?void 0:n?m(e,i):e,d=o.length-1,l;d>=0;d--)(l=o[d])&&(t=(n?l(e,i,t):l(t))||t);return n&&t&&a(e,i,t),t};var g={};y(g,{SkdxNavigationMenuIndicator:()=>s});module.exports=k(g);var r=require("lit"),p=require("lit/decorators.js"),v=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var s=class extends r.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.sync()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),super.disconnectedCallback()}sync(){let i=(this.root?.value??"")!=="";this.setAttribute("data-state",i?"visible":"hidden"),this.hidden=!this.forceMount&&!i}render(){return r.html`<slot></slot>`}};s.styles=[u.hiddenHostStyles,r.css`
+      :host {
+        display: block;
+      }
+    `],c([(0,p.property)({type:Boolean,attribute:"force-mount"})],s.prototype,"forceMount",2),s=c([(0,v.customElement)("skdx-navigation-menu-indicator","navigation-menu","indicator")],s);0&&(module.exports={SkdxNavigationMenuIndicator});

package/dist/navigation-menu/NavigationMenuIndicator.d.cts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-indicator>` — optional visual pointer (e.g. an
+ * arrow/caret) tracking whether any item is open: sets `data-state`
+ * (`visible`/`hidden`) on itself, hidden while no item is open unless
+ * `force-mount` is set. Sizing/positioning it under the active trigger is
+ * left to your CSS.
+ */
+export declare class SkdxNavigationMenuIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Renders even while no item is open, instead of hiding. */
+    forceMount: boolean;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-indicator': SkdxNavigationMenuIndicator;
+    }
+}

package/dist/navigation-menu/NavigationMenuIndicator.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-indicator>` — optional visual pointer (e.g. an
+ * arrow/caret) tracking whether any item is open: sets `data-state`
+ * (`visible`/`hidden`) on itself, hidden while no item is open unless
+ * `force-mount` is set. Sizing/positioning it under the active trigger is
+ * left to your CSS.
+ */
+export declare class SkdxNavigationMenuIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Renders even while no item is open, instead of hiding. */
+    forceMount: boolean;
+    private root;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-indicator': SkdxNavigationMenuIndicator;
+    }
+}

package/dist/navigation-menu/NavigationMenuIndicator.js

@@ -0,0 +1,5 @@
+var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,i,t,n)=>{for(var e=n>1?void 0:n?c(i,t):i,r=s.length-1,a;r>=0;r--)(a=s[r])&&(e=(n?a(i,t,e):a(e))||e);return n&&e&&l(i,t,e),e};import{css as m,html as p,LitElement as v}from"lit";import{property as u}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var o=class extends v{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.sync()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),super.disconnectedCallback()}sync(){let t=(this.root?.value??"")!=="";this.setAttribute("data-state",t?"visible":"hidden"),this.hidden=!this.forceMount&&!t}render(){return p`<slot></slot>`}};o.styles=[f,m`
+      :host {
+        display: block;
+      }
+    `],d([u({type:Boolean,attribute:"force-mount"})],o.prototype,"forceMount",2),o=d([h("skdx-navigation-menu-indicator","navigation-menu","indicator")],o);export{o as SkdxNavigationMenuIndicator};

package/dist/navigation-menu/NavigationMenuItem.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var u=(t,e)=>{for(var o in e)m(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of y(e))!v.call(t,r)&&r!==o&&m(t,r,{get:()=>e[r],enumerable:!(n=p(e,r))||n.enumerable});return t};var E=t=>x(m({},"__esModule",{value:!0}),t),d=(t,e,o,n)=>{for(var r=n>1?void 0:n?p(e,o):e,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=(n?a(e,o,r):a(r))||r);return n&&r&&m(e,o,r),r};var b={};u(b,{SkdxNavigationMenuItem:()=>l});module.exports=E(b);var s=require("lit"),f=require("lit/decorators.js"),g=require("../internal/define.cjs"),c=require("../internal/ids.cjs");var l=class extends s.LitElement{constructor(){super(...arguments);this.value="";this.triggerId=(0,c.nextId)("skdx-nav-trigger");this.contentId=(0,c.nextId)("skdx-nav-content")}render(){return s.html`<slot></slot>`}};l.styles=s.css`
+    :host {
+      display: block;
+    }
+  `,d([(0,f.property)({type:String,reflect:!0})],l.prototype,"value",2),l=d([(0,g.customElement)("skdx-navigation-menu-item","navigation-menu","item")],l);0&&(module.exports={SkdxNavigationMenuItem});

package/dist/navigation-menu/NavigationMenuItem.d.cts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-item>` — a single entry in the menu: generates the
+ * ids that link its `<skdx-navigation-menu-trigger>` and
+ * `<skdx-navigation-menu-content>` together, read by them via
+ * `closest('skdx-navigation-menu-item')`.
+ */
+export declare class SkdxNavigationMenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** This item's identifying value, matched against the ancestor menu's `value`. */
+    value: string;
+    readonly triggerId: string;
+    readonly contentId: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-item': SkdxNavigationMenuItem;
+    }
+}

package/dist/navigation-menu/NavigationMenuItem.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-item>` — a single entry in the menu: generates the
+ * ids that link its `<skdx-navigation-menu-trigger>` and
+ * `<skdx-navigation-menu-content>` together, read by them via
+ * `closest('skdx-navigation-menu-item')`.
+ */
+export declare class SkdxNavigationMenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** This item's identifying value, matched against the ancestor menu's `value`. */
+    value: string;
+    readonly triggerId: string;
+    readonly contentId: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-item': SkdxNavigationMenuItem;
+    }
+}

package/dist/navigation-menu/NavigationMenuItem.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(n,t,l,o)=>{for(var e=o>1?void 0:o?c(t,l):t,s=n.length-1,m;s>=0;s--)(m=n[s])&&(e=(o?m(t,l,e):m(e))||e);return o&&e&&d(t,l,e),e};import{css as p,html as f,LitElement as g}from"lit";import{property as y}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{nextId as a}from"../internal/ids.js";var r=class extends g{constructor(){super(...arguments);this.value="";this.triggerId=a("skdx-nav-trigger");this.contentId=a("skdx-nav-content")}render(){return f`<slot></slot>`}};r.styles=p`
+    :host {
+      display: block;
+    }
+  `,i([y({type:String,reflect:!0})],r.prototype,"value",2),r=i([v("skdx-navigation-menu-item","navigation-menu","item")],r);export{r as SkdxNavigationMenuItem};

package/dist/navigation-menu/NavigationMenuLink.cjs

@@ -0,0 +1,19 @@
+"use strict";var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var u=(o,t)=>{for(var a in t)s(o,a,{get:t[a],enumerable:!0})},y=(o,t,a,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of f(t))!g.call(o,e)&&e!==a&&s(o,e,{get:()=>t[e],enumerable:!(l=d(t,e))||l.enumerable});return o};var b=o=>y(s({},"__esModule",{value:!0}),o),n=(o,t,a,l)=>{for(var e=l>1?void 0:l?d(t,a):t,h=o.length-1,m;h>=0;h--)(m=o[h])&&(e=(l?m(t,a,e):m(e))||e);return l&&e&&s(t,a,e),e};var C={};u(C,{SkdxNavigationMenuLink:()=>i});module.exports=b(C);var r=require("lit"),p=require("lit/decorators.js"),v=require("../internal/define.cjs"),c=require("../internal/styles.cjs");var i=class extends r.LitElement{constructor(){super(...arguments);this.active=!1;this.root=null;this.handleClick=()=>this.root?.onClose()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.setAttribute("data-skdx-nav-trigger","")}render(){return r.html`
+      <a
+        part="link"
+        href=${this.href??r.nothing}
+        data-active=${this.active?"":r.nothing}
+        aria-current=${this.active?"page":r.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </a>
+    `}};i.shadowRootOptions=c.delegatesFocusShadowRootOptions,i.styles=[r.css`
+      :host {
+        display: inline-block;
+      }
+      a {
+        font: inherit;
+        color: inherit;
+      }
+    `,c.controlBoxOnHost],n([(0,p.property)({type:String})],i.prototype,"href",2),n([(0,p.property)({type:Boolean,reflect:!0})],i.prototype,"active",2),i=n([(0,v.customElement)("skdx-navigation-menu-link","navigation-menu","link")],i);0&&(module.exports={SkdxNavigationMenuLink});

package/dist/navigation-menu/NavigationMenuLink.d.cts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-link>` — a plain navigable link, usable both inside
+ * an `<skdx-navigation-menu-list>` item (marked `data-skdx-nav-trigger` so it
+ * joins roving focus) and inside an `<skdx-navigation-menu-content>` panel.
+ * When `active`, sets `data-active` and `aria-current="page"`. Clicking it
+ * closes the open menu.
+ *
+ * @csspart link - The native `<a>` element inside the shadow root.
+ */
+export declare class SkdxNavigationMenuLink extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The link's destination URL. Renders a plain, non-navigating anchor when omitted.
+     * @default undefined
+     */
+    href?: string;
+    /** Marks this link as representing the current page. */
+    active: boolean;
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-link': SkdxNavigationMenuLink;
+    }
+}

package/dist/navigation-menu/NavigationMenuLink.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-link>` — a plain navigable link, usable both inside
+ * an `<skdx-navigation-menu-list>` item (marked `data-skdx-nav-trigger` so it
+ * joins roving focus) and inside an `<skdx-navigation-menu-content>` panel.
+ * When `active`, sets `data-active` and `aria-current="page"`. Clicking it
+ * closes the open menu.
+ *
+ * @csspart link - The native `<a>` element inside the shadow root.
+ */
+export declare class SkdxNavigationMenuLink extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The link's destination URL. Renders a plain, non-navigating anchor when omitted.
+     * @default undefined
+     */
+    href?: string;
+    /** Marks this link as representing the current page. */
+    active: boolean;
+    private root;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-link': SkdxNavigationMenuLink;
+    }
+}

package/dist/navigation-menu/NavigationMenuLink.js

@@ -0,0 +1,19 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(a,o,l,r)=>{for(var e=r>1?void 0:r?p(o,l):o,s=a.length-1,n;s>=0;s--)(n=a[s])&&(e=(r?n(o,l,e):n(e))||e);return r&&e&&m(o,l,e),e};import{css as d,html as v,LitElement as f,nothing as c}from"lit";import{property as h}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{controlBoxOnHost as u,delegatesFocusShadowRootOptions as y}from"../internal/styles.js";var t=class extends f{constructor(){super(...arguments);this.active=!1;this.root=null;this.handleClick=()=>this.root?.onClose()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.setAttribute("data-skdx-nav-trigger","")}render(){return v`
+      <a
+        part="link"
+        href=${this.href??c}
+        data-active=${this.active?"":c}
+        aria-current=${this.active?"page":c}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </a>
+    `}};t.shadowRootOptions=y,t.styles=[d`
+      :host {
+        display: inline-block;
+      }
+      a {
+        font: inherit;
+        color: inherit;
+      }
+    `,u],i([h({type:String})],t.prototype,"href",2),i([h({type:Boolean,reflect:!0})],t.prototype,"active",2),t=i([g("skdx-navigation-menu-link","navigation-menu","link")],t);export{t as SkdxNavigationMenuLink};

package/dist/navigation-menu/NavigationMenuList.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(r,t)=>{for(var o in t)c(r,o,{get:t[o],enumerable:!0})},k=(r,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!E.call(r,e)&&e!==o&&c(r,e,{get:()=>t[e],enumerable:!(n=m(t,e))||n.enumerable});return r};var b=r=>k(c({},"__esModule",{value:!0}),r),d=(r,t,o,n)=>{for(var e=n>1?void 0:n?m(t,o):t,a=r.length-1,l;a>=0;a--)(l=r[a])&&(e=(n?l(t,o,e):l(e))||e);return n&&e&&c(t,o,e),e};var x={};g(x,{SkdxNavigationMenuList:()=>i});module.exports=b(x);var s=require("lit"),h=require("lit/decorators.js"),p=require("../internal/define.cjs"),f=require("../internal/direction.cjs"),u=require("../internal/positioning.cjs");var w="[data-skdx-nav-trigger]",i=class extends s.LitElement{constructor(){super(...arguments);this.loop=!0;this.handleKeyDown=o=>{let n=(0,f.directionalKey)(o.key,this);if(n!=="ArrowRight"&&n!=="ArrowLeft")return;let e=Array.from(this.querySelectorAll(w)).filter(y=>!y.closest("skdx-navigation-menu-content"));if(e.length===0)return;let l=e.indexOf(document.activeElement)+(n==="ArrowRight"?1:-1);l<0&&(l=this.loop?e.length-1:0),l>=e.length&&(l=this.loop?0:e.length-1),o.preventDefault(),e[l]?.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("data-orientation","horizontal"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return s.html`<slot></slot>`}};i.styles=s.css`
+    :host {
+      display: block;
+    }
+  `,d([(0,h.property)({converter:u.optOutBoolean})],i.prototype,"loop",2),i=d([(0,p.customElement)("skdx-navigation-menu-list","navigation-menu","list")],i);0&&(module.exports={SkdxNavigationMenuList});

package/dist/navigation-menu/NavigationMenuList.d.cts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-list>` — container for `<skdx-navigation-menu-item>`s.
+ * Sets `data-orientation="horizontal"` and drives roving-focus Left/Right
+ * arrow-key navigation across items marked `data-skdx-nav-trigger`, wrapping
+ * by default.
+ */
+export declare class SkdxNavigationMenuList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether arrow-key navigation wraps from the last trigger back to the first. */
+    loop: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-list': SkdxNavigationMenuList;
+    }
+}

package/dist/navigation-menu/NavigationMenuList.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-list>` — container for `<skdx-navigation-menu-item>`s.
+ * Sets `data-orientation="horizontal"` and drives roving-focus Left/Right
+ * arrow-key navigation across items marked `data-skdx-nav-trigger`, wrapping
+ * by default.
+ */
+export declare class SkdxNavigationMenuList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether arrow-key navigation wraps from the last trigger back to the first. */
+    loop: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-list': SkdxNavigationMenuList;
+    }
+}

package/dist/navigation-menu/NavigationMenuList.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(s,l,o,r)=>{for(var e=r>1?void 0:r?m(l,o):l,i=s.length-1,t;i>=0;i--)(t=s[i])&&(e=(r?t(l,o,e):t(e))||e);return r&&e&&d(l,o,e),e};import{css as h,html as p,LitElement as f}from"lit";import{property as u}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{directionalKey as v}from"../internal/direction.js";import{optOutBoolean as E}from"../internal/positioning.js";var g="[data-skdx-nav-trigger]",n=class extends f{constructor(){super(...arguments);this.loop=!0;this.handleKeyDown=o=>{let r=v(o.key,this);if(r!=="ArrowRight"&&r!=="ArrowLeft")return;let e=Array.from(this.querySelectorAll(g)).filter(c=>!c.closest("skdx-navigation-menu-content"));if(e.length===0)return;let t=e.indexOf(document.activeElement)+(r==="ArrowRight"?1:-1);t<0&&(t=this.loop?e.length-1:0),t>=e.length&&(t=this.loop?0:e.length-1),o.preventDefault(),e[t]?.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("data-orientation","horizontal"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return p`<slot></slot>`}};n.styles=h`
+    :host {
+      display: block;
+    }
+  `,a([u({converter:E})],n.prototype,"loop",2),n=a([y("skdx-navigation-menu-list","navigation-menu","list")],n);export{n as SkdxNavigationMenuList};

package/dist/navigation-menu/NavigationMenuTrigger.cjs

@@ -0,0 +1,14 @@
+"use strict";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(n,t)=>{for(var e in t)a(n,e,{get:t[e],enumerable:!0})},g=(n,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of c(t))!u.call(n,i)&&i!==e&&a(n,i,{get:()=>t[i],enumerable:!(o=l(t,i))||o.enumerable});return n};var E=n=>g(a({},"__esModule",{value:!0}),n),v=(n,t,e,o)=>{for(var i=o>1?void 0:o?l(t,e):t,h=n.length-1,d;h>=0;h--)(d=n[h])&&(i=(o?d(t,e,i):d(i))||i);return o&&i&&a(t,e,i),i};var f={};y(f,{SkdxNavigationMenuTrigger:()=>r});module.exports=E(f);var s=require("lit"),p=require("../internal/define.cjs"),m=require("../internal/styles.cjs");var r=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.item=null;this.onUpdate=()=>this.syncHostAttributes();this.hoverOpened=!1;this.handlePointerEnter=e=>{e.pointerType!=="touch"&&(this.hoverOpened=!0,this.item&&this.root?.onTriggerEnter(this.item.value))};this.handlePointerLeave=e=>{e.pointerType!=="touch"&&(this.hoverOpened=!1,this.root?.onTriggerLeave())};this.select=()=>{this.item&&(this.open&&!this.hoverOpened?this.root?.onClose():this.root?.onItemSelect(this.item.value))};this.handleKeyDown=e=>{e.key==="Escape"?(this.root?.onClose(),this.focus()):(e.key===" "||e.key==="Enter")&&this.item&&(e.preventDefault(),this.select())}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.item=this.closest("skdx-navigation-menu-item"),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.setAttribute("data-skdx-nav-trigger",""),this.setAttribute("role","button"),this.tabIndex=-1,this.item&&(this.id=this.item.triggerId),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("click",this.select),this.addEventListener("keydown",this.handleKeyDown),this.syncHostAttributes()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("click",this.select),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}get open(){return!!this.item&&this.root?.value===this.item.value}syncHostAttributes(){let e=this.open;this.setAttribute("aria-expanded",String(e)),this.item&&this.setAttribute("aria-controls",this.item.contentId),this.setAttribute("data-state",e?"open":"closed")}render(){return s.html`
+      <div part="trigger">
+        <slot></slot>
+      </div>
+    `}};r.shadowRootOptions=m.delegatesFocusShadowRootOptions,r.styles=s.css`
+    :host {
+      display: inline-block;
+    }
+    div {
+      font: inherit;
+      color: inherit;
+      width: 100%;
+    }
+  `,r=v([(0,p.customElement)("skdx-navigation-menu-trigger","navigation-menu","trigger")],r);0&&(module.exports={SkdxNavigationMenuTrigger});

package/dist/navigation-menu/NavigationMenuTrigger.d.cts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-trigger>` — opens its item's
+ * `<skdx-navigation-menu-content>`: sets `id`, `aria-expanded`,
+ * `aria-controls`, `data-skdx-nav-trigger` (for the list's roving focus), and
+ * `data-state` directly on this **host** element rather than inside shadow
+ * DOM, because `aria-controls`/`aria-labelledby` IDREFs can't cross a shadow
+ * boundary (same reasoning as `<skdx-dialog-content>`). Renders a plain
+ * `<div part="trigger">` in shadow DOM for styling only — every listener and
+ * every ARIA attribute lives on the host, so a native `<button>` there would
+ * only add a second, separately-focusable control inside this one. Non-touch
+ * pointer-enter/leave start the root's open/close hover timers; click or
+ * Enter/Space selects the item immediately, or *closes* it when it was not a
+ * hover that opened it (see {@link hoverOpened}); Escape closes and refocuses
+ * the trigger.
+ *
+ * @csspart trigger - The `<div>` wrapping the trigger content inside the shadow root.
+ */
+export declare class SkdxNavigationMenuTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult;
+    private root;
+    private item;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get open();
+    private syncHostAttributes;
+    /**
+     * Whether a hovering pointer is what opened this item.
+     *
+     * The root deliberately treats selection as "ensure open" rather than
+     * "toggle", because a mouse click is always preceded by a pointer-enter that
+     * has already opened the item — toggling there would close it on the very
+     * click meant to open it. That reasoning holds only for pointers that hover.
+     * Touch is excluded from the hover handlers by design and the keyboard never
+     * fires them at all, so for those two inputs the item opened *without* a
+     * hover — and with no hover to leave, no outside-hover close and (on touch)
+     * no Escape key, the menu could be opened and then never closed. This flag
+     * separates the two cases: toggle when hover did not open it, ensure-open
+     * when it did. Mirrors React's `hoverOpenedRef`.
+     */
+    private hoverOpened;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly select;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-trigger': SkdxNavigationMenuTrigger;
+    }
+}