@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/navigation/nav-menu/nav-menu.js

@@ -0,0 +1,673 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _EunomiaNavMenu_instances, _EunomiaNavMenu_locked, _EunomiaNavMenu_showTimer, _EunomiaNavMenu_hideTimer, _EunomiaNavMenu_childObserver, _EunomiaNavMenu_syncChildren, _EunomiaNavMenu_assignSlots, _EunomiaNavMenu_applyOpen, _EunomiaNavMenu_setOpen, _EunomiaNavMenu_clearTimers, _EunomiaNavMenu_toggleOpenListeners, _EunomiaNavMenu_anchorPanel, _EunomiaNavMenu_focusTarget, _EunomiaNavMenu_focusLinkAt, _EunomiaNavMenu_openAndFocus, _EunomiaNavMenu_handleTriggerClick, _EunomiaNavMenu_handlePointerEnter, _EunomiaNavMenu_handlePointerLeave, _EunomiaNavMenu_focusTargets, _EunomiaNavMenu_handleKeydown, _EunomiaNavMenu_handleTriggerKey, _EunomiaNavMenu_handleLinkKey, _EunomiaNavMenu_closeFromEscape, _EunomiaNavMenu_handleFocusOut, _EunomiaNavMenu_handleDocumentKeydown, _EunomiaNavMenu_handleOutsidePointerDown, _EunomiaNavMenu_handleLinkClick, _EunomiaNavMenu_renderChevron, _EunomiaNavMenu_renderTriggerContent;
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html, LitElement, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ChangeEvent } from "../../../events/change.event.js";
+import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
+import { navMenuStyles } from "./nav-menu.styles.js";
+/**
+ * Tag name of the nav-menu component.
+ */
+export const EunomiaNavMenuTagName = "eun-nav-menu";
+/**
+ * The slots named by the host's children, every other child being a link.
+ */
+const NAMED_SLOTS = ["label", "icon", "chevron"];
+/**
+ * A site navigation entry that reveals a group of links, such as the pages
+ * of a section, in a panel under its trigger. It follows the disclosure
+ * navigation pattern : the trigger is a button that shows and hides the
+ * panel, and every entry of the panel is a real link, so crawlers follow
+ * it, a middle click opens it in a new tab, and a framework's own link
+ * component keeps its client-side navigation.
+ *
+ * Each direct child is one link, wrapped by the menu in its own list item
+ * without any attribute being written on it : an eun-link, a native anchor,
+ * or a framework's own link component. The trigger shows the current state
+ * on its own as soon as one of the links is the current page, and
+ * announces it to assistive technology.
+ *
+ * @slot [default] - The links, one per direct child : an eun-link, which fills its row on its own, a native anchor, or a framework's own link component
+ * @slot [label] - The trigger's label as light DOM content, so it's part of the server-rendered HTML. Falls back to label when empty
+ * @slot [icon] - Replaces the trigger's leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * @slot [chevron] - Replaces the trigger's trailing chevron entirely with any content, not just an icon element. Falls back to chevronIcon when empty. Whatever ends up there still rotates while open, unless that rotation is set to zero
+ * @prop {string} label - The trigger's text. Ignored once something is slotted into label
+ * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} [icon] - An optional decorative icon shown before the label. Ignored once the icon slot has content
+ * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} [chevronIcon='keyboard_arrow_down'] - The trailing chevron icon. Ignored once the chevron slot has content
+ * @prop {boolean} [hideChevron=false] - Hides the trailing chevron, leaving the label alone in the trigger
+ * @prop {'hover' | 'click'} [trigger='hover'] - What opens the panel. With hover, it opens when the pointer rests on the trigger and a click keeps it open. With click, only a click opens and closes it. Touch screens and the keyboard always use the click behavior
+ * @prop {'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'} [placement='bottom-start'] - Where the panel opens relative to the trigger. It flips to the other side on its own when there isn't enough room
+ * @prop {boolean} [open=false] - Whether the panel is currently open
+ * @prop {boolean} [current=false] - Shows the trigger as the current section. Already set on its own when one of the links is the current page, so only needed when the current page isn't one of them
+ * @prop {'light' | 'dark'} [theme='light'] - The color theme of the trigger and the panel. Use dark on a dark background, such as a dark toolbar
+ * @prop {number} [showDelay=100] - Milliseconds the pointer rests on the trigger before the panel opens, with trigger set to hover
+ * @attr {number} [show-delay=100] - Milliseconds the pointer rests on the trigger before the panel opens
+ * @prop {number} [hideDelay=200] - Milliseconds before the panel closes once the pointer leaves it, long enough to move from the trigger into the panel, with trigger set to hover
+ * @attr {number} [hide-delay=200] - Milliseconds before the panel closes once the pointer leaves it
+ * @attr {string} aria-label - The accessible label of the trigger, required when it has no visible label, such as an icon only trigger
+ * @fires {ChangeEvent} eunchange - Fired whenever the panel opens or closes from an interaction. Read the new state from open
+ * @csspart trigger - The trigger button, for effects its custom properties don't cover, such as an active indicator
+ * @csspart panel - The floating panel holding the links
+ * @cssprop [--nav-menu-trigger-color] - Sets the text and icon color of the trigger
+ * @cssprop [--nav-menu-trigger-color-hover] - Sets the text and icon color of the trigger on hover, on keyboard focus and while open
+ * @cssprop [--nav-menu-trigger-color-current] - Sets the text and icon color of the trigger when it's the current section
+ * @cssprop [--nav-menu-trigger-background] - Sets the background of the trigger, transparent by default
+ * @cssprop [--nav-menu-trigger-background-hover] - Sets the background of the trigger on hover, on keyboard focus and while open
+ * @cssprop [--nav-menu-trigger-shadow] - Sets the box shadow of the trigger, none by default
+ * @cssprop [--nav-menu-trigger-shadow-hover] - Sets the box shadow of the trigger on hover, on keyboard focus and while open, falling back to --nav-menu-trigger-shadow
+ * @cssprop [--nav-menu-trigger-font-size] - Sets the font size of the trigger, inherited from the surrounding text by default
+ * @cssprop [--nav-menu-trigger-font-weight] - Sets the font weight of the trigger
+ * @cssprop [--nav-menu-trigger-padding] - Sets the padding of the trigger
+ * @cssprop [--nav-menu-trigger-padding-block] - Sets the vertical padding of the trigger, as one length applied to both sides. Ignored when --nav-menu-trigger-padding is set
+ * @cssprop [--nav-menu-trigger-padding-inline] - Sets the horizontal padding of the trigger, as one length applied to both sides. Ignored when --nav-menu-trigger-padding is set
+ * @cssprop [--nav-menu-trigger-gap] - Sets the gap between the trigger's icon, label and chevron
+ * @cssprop [--nav-menu-trigger-border-radius] - Sets the corner radius of the trigger and its focus ring
+ * @cssprop [--nav-menu-focus-outline-color] - Sets the color of the trigger's focus ring, and of plain anchors in the panel
+ * @cssprop [--nav-menu-icon-size] - Sets the size of the leading icon and the chevron, 1.25em by default so they follow the font size
+ * @cssprop [--nav-menu-chevron-rotation] - Sets the rotation applied to the chevron while open, 180deg by default. Zero disables it
+ * @cssprop [--nav-menu-panel-background] - Sets the background of the panel
+ * @cssprop [--nav-menu-panel-border-color] - Sets the border color of the panel
+ * @cssprop [--nav-menu-panel-border-radius] - Sets the corner radius of the panel
+ * @cssprop [--nav-menu-panel-shadow] - Sets the box shadow of the panel
+ * @cssprop [--nav-menu-panel-padding] - Sets the padding of the panel
+ * @cssprop [--nav-menu-panel-gap] - Sets the gap between the links of the panel
+ * @cssprop [--nav-menu-panel-min-width] - Sets the minimum width of the panel, which is never narrower than the trigger
+ * @cssprop [--nav-menu-panel-max-height] - Sets the maximum height of the panel, beyond which it scrolls
+ * @cssprop [--nav-menu-offset] - Sets the distance between the trigger and the panel
+ * @cssprop [--nav-menu-link-color] - Sets the color of the links in the panel
+ * @cssprop [--nav-menu-link-color-hover] - Sets the color of the links in the panel on hover and focus
+ * @cssprop [--nav-menu-link-color-current] - Sets the color of the current page's link in the panel
+ * @cssprop [--nav-menu-link-background-hover] - Sets the background of the links in the panel on hover and focus
+ * @cssprop [--nav-menu-link-padding] - Sets the padding of the links in the panel
+ * @cssprop [--nav-menu-link-border-radius] - Sets the corner radius of the links in the panel
+ * @cssprop [--nav-menu-transition-duration] - Sets the duration of the panel's open and close animation, the chevron's rotation and the color transitions
+ * @element eun-nav-menu
+ */
+let EunomiaNavMenu = class EunomiaNavMenu extends AnchorPositionMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        _EunomiaNavMenu_instances.add(this);
+        /**
+         * The trailing chevron icon ; ignored once the `chevron` slot has
+         * content.
+         * @default keyboard_arrow_down
+         */
+        this.chevronIcon = "keyboard_arrow_down";
+        /**
+         * Hides the trailing chevron.
+         * @default false
+         */
+        this.hideChevron = false;
+        /**
+         * What opens the panel. Touch screens and the keyboard always use the
+         * click behavior, since they have no hover.
+         * @default hover
+         */
+        this.trigger = "hover";
+        /**
+         * Where the panel opens relative to the trigger.
+         * @default bottom-start
+         */
+        this.placement = "bottom-start";
+        /**
+         * Indicates whether the panel is currently open.
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Shows the trigger as the current section, on top of the state the
+         * menu derives from its own links.
+         * @default false
+         */
+        this.current = false;
+        /**
+         * The color theme of the trigger and the panel.
+         * @default light
+         */
+        this.theme = "light";
+        /**
+         * Milliseconds the pointer rests on the trigger before the panel opens.
+         * @default 100
+         */
+        this.showDelay = 100;
+        /**
+         * Milliseconds before the panel closes once the pointer leaves it.
+         * @default 200
+         */
+        this.hideDelay = 200;
+        /**
+         * The links, the host's element children without a `slot` attribute.
+         * @internal
+         */
+        this.links = [];
+        /**
+         * Whether one of the links is the current page.
+         * @internal
+         */
+        this.hasCurrentLink = false;
+        /**
+         * The children assigned to each named slot.
+         * @internal
+         */
+        this.named = {
+            label: [],
+            icon: [],
+            chevron: [],
+        };
+        /**
+         * Whether a click or the keyboard opened the panel, so the pointer
+         * leaving it doesn't close it.
+         * @internal
+         */
+        _EunomiaNavMenu_locked.set(this, false);
+        /**
+         * Pending hover timers.
+         * @internal
+         */
+        _EunomiaNavMenu_showTimer.set(this, void 0);
+        _EunomiaNavMenu_hideTimer.set(this, void 0);
+        /**
+         * Keeps {@link links}, {@link named} and {@link hasCurrentLink} in sync
+         * with the host's children. Created on connection rather than as a
+         * field, so the class stays constructible where `MutationObserver`
+         * doesn't exist, such as during SSR.
+         * @internal
+         */
+        _EunomiaNavMenu_childObserver.set(this, void 0);
+        /**
+         * Handles a click on the trigger. With trigger set to hover, a pointer
+         * click on a panel the hover already opened keeps it open rather than
+         * closing it under the pointer ; a second click closes it. A keyboard
+         * activation always toggles.
+         * @param event the trigger's click event.
+         * @private
+         */
+        _EunomiaNavMenu_handleTriggerClick.set(this, (event) => {
+            const fromPointer = event.detail > 0;
+            if (this.trigger === "hover" && fromPointer && this.open && !__classPrivateFieldGet(this, _EunomiaNavMenu_locked, "f")) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_clearTimers).call(this);
+                __classPrivateFieldSet(this, _EunomiaNavMenu_locked, true, "f");
+                return;
+            }
+            __classPrivateFieldSet(this, _EunomiaNavMenu_locked, !this.open, "f");
+            __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, !this.open);
+        });
+        /**
+         * Opens the panel after {@link showDelay} when a mouse or a pen rests on
+         * the trigger, and cancels a pending close when it comes back over the
+         * trigger or the panel.
+         * @param event the host's pointerenter event.
+         * @private
+         */
+        _EunomiaNavMenu_handlePointerEnter.set(this, (event) => {
+            if (this.trigger !== "hover" || event.pointerType === "touch") {
+                return;
+            }
+            clearTimeout(__classPrivateFieldGet(this, _EunomiaNavMenu_hideTimer, "f"));
+            if (this.open) {
+                return;
+            }
+            __classPrivateFieldSet(this, _EunomiaNavMenu_showTimer, setTimeout(() => {
+                __classPrivateFieldSet(this, _EunomiaNavMenu_locked, false, "f");
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, true);
+            }, this.showDelay), "f");
+        });
+        /**
+         * Closes the panel after {@link hideDelay} once the pointer leaves both
+         * the trigger and the panel, unless a click or the keyboard opened it.
+         * @param event the host's pointerleave event.
+         * @private
+         */
+        _EunomiaNavMenu_handlePointerLeave.set(this, (event) => {
+            if (this.trigger !== "hover" || event.pointerType === "touch") {
+                return;
+            }
+            clearTimeout(__classPrivateFieldGet(this, _EunomiaNavMenu_showTimer, "f"));
+            if (!this.open || __classPrivateFieldGet(this, _EunomiaNavMenu_locked, "f")) {
+                return;
+            }
+            __classPrivateFieldSet(this, _EunomiaNavMenu_hideTimer, setTimeout(() => __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false), this.hideDelay), "f");
+        });
+        /**
+         * Keyboard support of the disclosure navigation pattern : `Escape`
+         * closes the panel and returns focus to the trigger, `ArrowDown` and
+         * `ArrowUp` open it from the trigger and move between its links, `Home`
+         * and `End` jump to the first and last link. `Tab` keeps its native
+         * order, through the links and out of the menu.
+         * @param event the host's keydown event.
+         * @private
+         */
+        _EunomiaNavMenu_handleKeydown.set(this, (event) => {
+            const path = event.composedPath();
+            if (this.triggerEl && path.includes(this.triggerEl)) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_handleTriggerKey).call(this, event);
+                return;
+            }
+            const index = __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_focusTargets).call(this).findIndex((target) => path.includes(target));
+            if (index !== -1) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_handleLinkKey).call(this, event, index);
+            }
+        });
+        /**
+         * Closes the panel once focus moves to an element outside the menu, such
+         * as tabbing past its last link. A focus lost to nothing, such as a
+         * click on the page, is left to {@link handleOutsidePointerDown}.
+         * @param event the host's focusout event.
+         * @private
+         */
+        _EunomiaNavMenu_handleFocusOut.set(this, (event) => {
+            if (this.open &&
+                event.relatedTarget instanceof Node &&
+                !this.contains(event.relatedTarget)) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false);
+            }
+        });
+        /**
+         * Closes the panel on `Escape` while focus is outside the menu, such as a
+         * panel opened by hover, so it can be dismissed without moving the
+         * pointer. A key pressed inside the menu is handled by
+         * {@link handleKeydown}, which stops it before it gets here.
+         * @param event the document's keydown event.
+         * @private
+         */
+        _EunomiaNavMenu_handleDocumentKeydown.set(this, (event) => {
+            if (event.key === "Escape" && !event.defaultPrevented) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false);
+            }
+        });
+        /**
+         * Closes the panel on a press anywhere outside the menu.
+         * @param event the document's pointerdown event.
+         * @private
+         */
+        _EunomiaNavMenu_handleOutsidePointerDown.set(this, (event) => {
+            if (!event.composedPath().includes(this)) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false);
+            }
+        });
+        /**
+         * Closes the panel once one of its links is followed in the same tab, so
+         * it doesn't stay open over the next page of a single-page app.
+         * @param event the host's click event.
+         * @private
+         */
+        _EunomiaNavMenu_handleLinkClick.set(this, (event) => {
+            if (!this.open ||
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey) {
+                return;
+            }
+            const path = event.composedPath();
+            if (this.links.some((link) => path.includes(link))) {
+                __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false);
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_syncChildren).call(this);
+        __classPrivateFieldSet(this, _EunomiaNavMenu_childObserver, __classPrivateFieldGet(this, _EunomiaNavMenu_childObserver, "f") ?? new MutationObserver(() => __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_syncChildren).call(this)), "f");
+        __classPrivateFieldGet(this, _EunomiaNavMenu_childObserver, "f").observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["slot", "current", "aria-current"],
+        });
+        this.addEventListener("pointerenter", __classPrivateFieldGet(this, _EunomiaNavMenu_handlePointerEnter, "f"));
+        this.addEventListener("pointerleave", __classPrivateFieldGet(this, _EunomiaNavMenu_handlePointerLeave, "f"));
+        this.addEventListener("keydown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleKeydown, "f"));
+        this.addEventListener("focusout", __classPrivateFieldGet(this, _EunomiaNavMenu_handleFocusOut, "f"));
+        this.addEventListener("click", __classPrivateFieldGet(this, _EunomiaNavMenu_handleLinkClick, "f"));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _EunomiaNavMenu_childObserver, "f")?.disconnect();
+        this.removeEventListener("pointerenter", __classPrivateFieldGet(this, _EunomiaNavMenu_handlePointerEnter, "f"));
+        this.removeEventListener("pointerleave", __classPrivateFieldGet(this, _EunomiaNavMenu_handlePointerLeave, "f"));
+        this.removeEventListener("keydown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleKeydown, "f"));
+        this.removeEventListener("focusout", __classPrivateFieldGet(this, _EunomiaNavMenu_handleFocusOut, "f"));
+        this.removeEventListener("click", __classPrivateFieldGet(this, _EunomiaNavMenu_handleLinkClick, "f"));
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_clearTimers).call(this);
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_toggleOpenListeners).call(this, false);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_assignSlots).call(this);
+        if (changed.has("open")) {
+            __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_applyOpen).call(this, changed.get("open") === true);
+        }
+    }
+    render() {
+        const current = this.current || this.hasCurrentLink;
+        /* eslint-disable lit-a11y/no-redundant-role */
+        return html `
+      <button
+        type="button"
+        id="trigger"
+        part="trigger"
+        class=${classMap({ current })}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls="panel"
+        aria-current=${ifDefined(current ? "true" : undefined)}
+        aria-label=${ifDefined(this.ariaLabel ?? undefined)}
+        @click=${__classPrivateFieldGet(this, _EunomiaNavMenu_handleTriggerClick, "f")}
+      >
+        ${__classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_renderTriggerContent).call(this)}
+      </button>
+      <ul
+        id="panel"
+        part="panel"
+        role="list"
+        popover="manual"
+        data-light-dismiss
+        aria-labelledby="trigger"
+      >
+        ${this.links.map(() => html `<li><slot></slot></li>`)}
+      </ul>
+    `;
+        /* eslint-enable lit-a11y/no-redundant-role */
+    }
+};
+_EunomiaNavMenu_locked = new WeakMap();
+_EunomiaNavMenu_showTimer = new WeakMap();
+_EunomiaNavMenu_hideTimer = new WeakMap();
+_EunomiaNavMenu_childObserver = new WeakMap();
+_EunomiaNavMenu_handleTriggerClick = new WeakMap();
+_EunomiaNavMenu_handlePointerEnter = new WeakMap();
+_EunomiaNavMenu_handlePointerLeave = new WeakMap();
+_EunomiaNavMenu_handleKeydown = new WeakMap();
+_EunomiaNavMenu_handleFocusOut = new WeakMap();
+_EunomiaNavMenu_handleDocumentKeydown = new WeakMap();
+_EunomiaNavMenu_handleOutsidePointerDown = new WeakMap();
+_EunomiaNavMenu_handleLinkClick = new WeakMap();
+_EunomiaNavMenu_instances = new WeakSet();
+_EunomiaNavMenu_syncChildren = function _EunomiaNavMenu_syncChildren() {
+    const children = Array.from(this.children);
+    const named = { label: [], icon: [], chevron: [] };
+    const links = [];
+    for (const child of children) {
+        const slot = child.getAttribute("slot");
+        if (slot === null) {
+            links.push(child);
+        }
+        else if (NAMED_SLOTS.includes(slot)) {
+            named[slot].push(child);
+        }
+    }
+    if (links.length !== this.links.length ||
+        links.some((link, index) => link !== this.links[index])) {
+        this.links = links;
+    }
+    if (NAMED_SLOTS.some((name) => named[name].length !== this.named[name].length ||
+        named[name].some((el, index) => el !== this.named[name][index]))) {
+        this.named = named;
+    }
+    this.hasCurrentLink = links.some((link) => link.matches('[current], [aria-current="page"]') ||
+        link.querySelector('[aria-current="page"]') !== null);
+};
+_EunomiaNavMenu_assignSlots = function _EunomiaNavMenu_assignSlots() {
+    const root = this.renderRoot;
+    root
+        .querySelectorAll("#panel > li > slot")
+        .forEach((slot, index) => {
+        const link = this.links[index];
+        if (link && slot.assignedElements()[0] !== link) {
+            slot.assign(link);
+        }
+    });
+    for (const name of NAMED_SLOTS) {
+        const slot = root.querySelector(`slot[name="${name}"]`);
+        const elements = this.named[name];
+        if (slot &&
+            (slot.assignedElements().length !== elements.length ||
+                elements.some((el, index) => slot.assignedElements()[index] !== el))) {
+            slot.assign(...elements);
+        }
+    }
+};
+_EunomiaNavMenu_applyOpen = function _EunomiaNavMenu_applyOpen(wasOpen) {
+    const panel = this.panelEl;
+    if (!panel) {
+        return;
+    }
+    if (this.open) {
+        if (!panel.matches(":popover-open")) {
+            panel.showPopover();
+        }
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_anchorPanel).call(this);
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_toggleOpenListeners).call(this, true);
+        return;
+    }
+    __classPrivateFieldSet(this, _EunomiaNavMenu_locked, false, "f");
+    __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_toggleOpenListeners).call(this, false);
+    this.unanchorFloatingElement();
+    const focusInside = this.links.some((link) => link.contains(document.activeElement));
+    if (panel.matches(":popover-open")) {
+        panel.hidePopover();
+    }
+    if (wasOpen && focusInside) {
+        this.triggerEl?.focus();
+    }
+};
+_EunomiaNavMenu_setOpen = function _EunomiaNavMenu_setOpen(open) {
+    __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_clearTimers).call(this);
+    if (this.open === open) {
+        return;
+    }
+    this.open = open;
+    this.dispatchEvent(new ChangeEvent());
+};
+_EunomiaNavMenu_clearTimers = function _EunomiaNavMenu_clearTimers() {
+    clearTimeout(__classPrivateFieldGet(this, _EunomiaNavMenu_showTimer, "f"));
+    clearTimeout(__classPrivateFieldGet(this, _EunomiaNavMenu_hideTimer, "f"));
+};
+_EunomiaNavMenu_toggleOpenListeners = function _EunomiaNavMenu_toggleOpenListeners(on) {
+    if (on) {
+        document.addEventListener("pointerdown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleOutsidePointerDown, "f"), true);
+        document.addEventListener("keydown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleDocumentKeydown, "f"));
+        return;
+    }
+    document.removeEventListener("pointerdown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleOutsidePointerDown, "f"), true);
+    document.removeEventListener("keydown", __classPrivateFieldGet(this, _EunomiaNavMenu_handleDocumentKeydown, "f"));
+};
+_EunomiaNavMenu_anchorPanel = function _EunomiaNavMenu_anchorPanel() {
+    const trigger = this.triggerEl;
+    const panel = this.panelEl;
+    if (!trigger || !panel) {
+        return;
+    }
+    const [side, align = "center"] = this.placement.split("-");
+    const gap = Number.parseFloat(getComputedStyle(panel).scrollMarginTop) || 0;
+    const options = { gap, side, align };
+    this.anchorFloatingElement(trigger, panel, options);
+    const native = panel.style.getPropertyValue("position-anchor") !== "";
+    panel.toggleAttribute("data-native-anchor", native);
+    if (native) {
+        this.anchorFloatingElement(trigger, panel, options);
+    }
+};
+_EunomiaNavMenu_focusTarget = function _EunomiaNavMenu_focusTarget(link) {
+    if (link.matches("a[href]")) {
+        return link;
+    }
+    return (link.querySelector("a[href]") ??
+        link.shadowRoot?.querySelector("a[href]") ??
+        null);
+};
+_EunomiaNavMenu_focusLinkAt = function _EunomiaNavMenu_focusLinkAt(index) {
+    const targets = __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_focusTargets).call(this);
+    if (!targets.length) {
+        return;
+    }
+    targets[(index + targets.length) % targets.length].focus();
+};
+_EunomiaNavMenu_openAndFocus = 
+/**
+ * Opens the panel for the keyboard, then focuses one of its links.
+ * @param index the link to focus.
+ * @private
+ */
+async function _EunomiaNavMenu_openAndFocus(index) {
+    __classPrivateFieldSet(this, _EunomiaNavMenu_locked, true, "f");
+    __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, true);
+    await this.updateComplete;
+    __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_focusLinkAt).call(this, index);
+};
+_EunomiaNavMenu_focusTargets = function _EunomiaNavMenu_focusTargets() {
+    return this.links
+        .map((link) => __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_focusTarget).call(this, link))
+        .filter((target) => target !== null);
+};
+_EunomiaNavMenu_handleTriggerKey = function _EunomiaNavMenu_handleTriggerKey(event) {
+    switch (event.key) {
+        case "Escape":
+            __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_closeFromEscape).call(this, event);
+            return;
+        case "ArrowDown":
+        case "ArrowUp":
+            event.preventDefault();
+            void __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_openAndFocus).call(this, event.key === "ArrowDown" ? 0 : -1);
+            return;
+    }
+};
+_EunomiaNavMenu_handleLinkKey = function _EunomiaNavMenu_handleLinkKey(event, index) {
+    const moves = {
+        ArrowDown: index + 1,
+        ArrowUp: index - 1,
+        Home: 0,
+        End: -1,
+    };
+    if (event.key === "Escape") {
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_closeFromEscape).call(this, event);
+        return;
+    }
+    if (event.key in moves) {
+        event.preventDefault();
+        __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_focusLinkAt).call(this, moves[event.key]);
+    }
+};
+_EunomiaNavMenu_closeFromEscape = function _EunomiaNavMenu_closeFromEscape(event) {
+    if (!this.open) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    __classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_setOpen).call(this, false);
+    this.triggerEl?.focus();
+};
+_EunomiaNavMenu_renderChevron = function _EunomiaNavMenu_renderChevron() {
+    if (this.hideChevron) {
+        return nothing;
+    }
+    const fallback = this.named.chevron.length
+        ? nothing
+        : html `<eun-icon class="icon" name=${this.chevronIcon}></eun-icon>`;
+    return html `<span id="chevron" aria-hidden="true">
+      <slot name="chevron">${fallback}</slot>
+    </span>`;
+};
+_EunomiaNavMenu_renderTriggerContent = function _EunomiaNavMenu_renderTriggerContent() {
+    const hasIcon = this.named.icon.length > 0 || Boolean(this.icon);
+    return html `
+      <slot name="icon" class=${classMap({ hidden: !hasIcon })}>
+        ${this.icon
+        ? html `<eun-icon class="icon" name=${this.icon}></eun-icon>`
+        : nothing}
+      </slot>
+      <span id="label"><slot name="label">${this.label}</slot></span>
+      ${__classPrivateFieldGet(this, _EunomiaNavMenu_instances, "m", _EunomiaNavMenu_renderChevron).call(this)}
+    `;
+};
+/**
+ * Styles to import to the component.
+ *
+ * @static
+ * @internal
+ * @readonly
+ */
+EunomiaNavMenu.styles = [navMenuStyles];
+/**
+ * Manual slot assignment : each link is assigned to the slot of its own
+ * list item without the menu writing a `slot` attribute on the
+ * consumer's elements, which a framework would then reset or report as
+ * a hydration mismatch. The named slots are assigned by hand too, from
+ * the `slot` attribute the consumer wrote.
+ * @internal
+ */
+EunomiaNavMenu.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    slotAssignment: "manual",
+};
+__decorate([
+    property()
+], EunomiaNavMenu.prototype, "label", void 0);
+__decorate([
+    property()
+], EunomiaNavMenu.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: "chevron-icon" })
+], EunomiaNavMenu.prototype, "chevronIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "hide-chevron" })
+], EunomiaNavMenu.prototype, "hideChevron", void 0);
+__decorate([
+    property({ reflect: true })
+], EunomiaNavMenu.prototype, "trigger", void 0);
+__decorate([
+    property({ reflect: true })
+], EunomiaNavMenu.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaNavMenu.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaNavMenu.prototype, "current", void 0);
+__decorate([
+    property({ reflect: true })
+], EunomiaNavMenu.prototype, "theme", void 0);
+__decorate([
+    property({ type: Number, attribute: "show-delay" })
+], EunomiaNavMenu.prototype, "showDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: "hide-delay" })
+], EunomiaNavMenu.prototype, "hideDelay", void 0);
+__decorate([
+    state()
+], EunomiaNavMenu.prototype, "links", void 0);
+__decorate([
+    state()
+], EunomiaNavMenu.prototype, "hasCurrentLink", void 0);
+__decorate([
+    state()
+], EunomiaNavMenu.prototype, "named", void 0);
+__decorate([
+    query("#trigger")
+], EunomiaNavMenu.prototype, "triggerEl", void 0);
+__decorate([
+    query("#panel")
+], EunomiaNavMenu.prototype, "panelEl", void 0);
+EunomiaNavMenu = __decorate([
+    customElement(EunomiaNavMenuTagName)
+], EunomiaNavMenu);
+export { EunomiaNavMenu };

package/dist/components/navigation/nav-menu/nav-menu.styles.d.ts

@@ -0,0 +1 @@
+export declare const navMenuStyles: import("lit").CSSResult;