dap-design-system 0.60.2 → 0.61.0

package/dist/components/navigation-menu/navigation-menu-item.component.js

@@ -0,0 +1,766 @@
+var x = Object.getPrototypeOf;
+var C = Reflect.get;
+var I = (f, t, e) => C(x(f), e, t);
+var v = (f, t, e) => new Promise((s, o) => {
+  var i = (p) => {
+    try {
+      l(e.next(p));
+    } catch (d) {
+      o(d);
+    }
+  }, a = (p) => {
+    try {
+      l(e.throw(p));
+    } catch (d) {
+      o(d);
+    }
+  }, l = (p) => p.done ? s(p.value) : Promise.resolve(p.value).then(i, a);
+  l((e = e.apply(f, t)).next());
+});
+import { autoUpdate as A, computePosition as k, offset as S, flip as E, shift as P, size as T } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { clsx as w } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as D } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as N } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as L } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { ifDefined as g } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as m } from "../../node_modules/lit-html/static.js";
+import { watch as _ } from "../../common/decorators.js";
+import { DdsElement as H } from "../../internal/dds-hu-element.js";
+import { SizedMixin as $ } from "../../internal/mixin/sizedMixin.js";
+import R from "../button/button.component.js";
+import B from "../icon/icon.component.js";
+import O from "../popup/popup.scss.js";
+import q from "../stack/stack.component.js";
+import F from "./navigation-menu-item.scss.js";
+import { SubmenuController as U } from "./submenu-controller.js";
+import { unsafeCSS as W } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var M = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (f, t, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? K(t, e) : t, i = f.length - 1, a; i >= 0; i--)
+    (a = f[i]) && (o = (s ? a(t, e, o) : a(o)) || o);
+  return s && o && M(t, e, o), o;
+};
+const y = class y extends $(H) {
+  constructor() {
+    super(), this.triggerElement = null, this.disabled = !1, this.opened = !1, this.placement = "bottom-start", this.floatingStrategy = "fixed", this.offset = 0, this.sync = !1, this.maxHeight = 250, this.maxWidth = "auto", this.hasArrow = !1, this.overflow = !0, this.fullWidth = !1, this.exactHref = !1, this.level = 0, this.orientation = "horizontal", this.tabMode = "group", this.triggerButtonTestId = "navigation-menu-item-trigger-button", this.hasContent = !1, this.hasLink = !1, this.hasTitleSlot = !1, this._titleText = "", this.active = !1, this.openedByHover = !1, this._isRovingActive = !1, this._handleLinkSlotChange = (t) => {
+      const e = t.target;
+      if (e) {
+        const s = e.assignedElements();
+        this.hasLink = s.length > 0, s.forEach((o) => o.setAttribute("tabindex", "-1"));
+      }
+      this._updateActiveState();
+    }, this._handleTitleSlotChange = (t) => {
+      const e = t.target;
+      if (e) {
+        const s = e.assignedNodes({ flatten: !0 });
+        this.hasTitleSlot = s.some(
+          (o) => {
+            var i;
+            return (o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && ((i = o.textContent) == null ? void 0 : i.trim().length)) && o !== e;
+          }
+        ), this._titleText = s.map((o) => {
+          var i, a;
+          return (a = (i = o.textContent) == null ? void 0 : i.trim()) != null ? a : "";
+        }).join(" ").trim();
+      }
+    }, this._handleClick = (t) => {
+      var s, o, i;
+      if (this.disabled) {
+        t.preventDefault(), t.stopImmediatePropagation();
+        return;
+      }
+      if (this.hasContent || this.hasNestedItems) {
+        const a = this._trigger, l = t.composedPath();
+        a.some(
+          (d) => l.includes(d)
+        ) ? (t.preventDefault(), t.stopPropagation(), this.opened && this.openedByHover ? this.openedByHover = !1 : this.opened ? this.hideDropDown() : this.showDropDown(!1)) : this.opened && l.some((c) => {
+          if (!(c instanceof Element)) return !1;
+          const b = c.tagName.toUpperCase();
+          return b === "A" || b === "DAP-DS-LINK";
+        }) && this.hideDropDown();
+      } else if (this.hasLink) {
+        const a = this._trigger, l = t.composedPath();
+        if (a.some(
+          (d) => l.includes(d)
+        )) {
+          t.preventDefault();
+          const d = this._getLinkElement();
+          if (d) {
+            const b = d.getAttribute("href");
+            d.click(), b && this.emit("dds-navigation-item-click", { href: b, event: t });
+          }
+          let c = (s = this.parentElement) == null ? void 0 : s.closest(
+            "dap-ds-navigation-menu-item"
+          );
+          for (; c; )
+            c.opened && c.hideDropDown(), c = (o = c.parentElement) == null ? void 0 : o.closest(
+              "dap-ds-navigation-menu-item"
+            );
+        }
+      } else {
+        const l = (i = this._trigger[0]) == null ? void 0 : i.getAttribute("href");
+        l && this.emit("dds-navigation-item-click", {
+          href: l,
+          event: t
+        });
+      }
+    }, this._handleMouseOver = (t) => {
+      const e = this.parentElement;
+      e && (e.querySelectorAll(":scope > dap-ds-navigation-menu-item") || []).forEach((o) => {
+        if (o !== this) {
+          const i = o;
+          i.submenuController.cancelPendingOpen(), i.opened && i.hideDropDown();
+        }
+      }), t.stopPropagation();
+    }, this._handleMouseLeave = (t) => {
+      this.opened || this.submenuController.cancelPendingOpen();
+    }, this._handleKeyDown = (t) => {
+      if (this.opened && (this.hasNestedItems || this.hasContent)) {
+        const e = Array.from(
+          this.querySelectorAll(":scope > dap-ds-navigation-menu-item")
+        );
+        if (e.length > 0) {
+          const s = t.target, o = e.findIndex(
+            (i) => i.contains(s) || i === s
+          );
+          if (t.key === "ArrowDown") {
+            t.preventDefault(), t.stopPropagation();
+            const i = o < e.length - 1 ? o + 1 : 0;
+            e[i].focus();
+            return;
+          } else if (t.key === "ArrowUp") {
+            t.preventDefault(), t.stopPropagation();
+            const i = o > 0 ? o - 1 : e.length - 1;
+            e[i].focus();
+            return;
+          } else if (t.key === "ArrowRight" && o >= 0) {
+            const i = e[o];
+            if (i.hasNestedItems || i.hasContent) {
+              t.preventDefault(), t.stopPropagation(), i.opened || (i.showDropDown(), i.updateComplete.then(() => {
+                const a = i.querySelector(
+                  "dap-ds-navigation-menu-item"
+                );
+                a && a.focus();
+              }));
+              return;
+            }
+          } else if ((t.key === "Enter" || t.key === " ") && o >= 0) {
+            const i = e[o], a = i.querySelector(
+              '[slot="trigger"]'
+            ), l = [
+              "A",
+              "DAP-DS-LINK",
+              "DAP-DS-BUTTON",
+              "BUTTON",
+              "LINK"
+            ], p = l.includes(a == null ? void 0 : a.tagName.toLowerCase()) || l.includes(a == null ? void 0 : a.tagName);
+            (!p || t.key === " ") && (t.preventDefault(), t.stopPropagation()), i.hasNestedItems || i.hasContent ? (t.preventDefault(), t.stopPropagation(), i.opened || i.showDropDown()) : (!p || t.key === " ") && (a == null || a.click());
+            return;
+          }
+        } else if (this.hasContent) {
+          const s = this._getFocusablePopupItems();
+          if (s.length > 0) {
+            const o = t.target, i = s.findIndex(
+              (a) => a === o || a.contains(o)
+            );
+            if (t.key === "ArrowDown") {
+              t.preventDefault(), t.stopPropagation();
+              const a = i < 0 ? 0 : i < s.length - 1 ? i + 1 : 0;
+              this._focusPopupItem(s[a]);
+              return;
+            } else if (t.key === "ArrowUp") {
+              t.preventDefault(), t.stopPropagation();
+              const a = i < 0 ? s.length - 1 : i > 0 ? i - 1 : s.length - 1;
+              this._focusPopupItem(s[a]);
+              return;
+            } else if (t.key === "Home") {
+              t.preventDefault(), t.stopPropagation(), this._focusPopupItem(s[0]);
+              return;
+            } else if (t.key === "End") {
+              t.preventDefault(), t.stopPropagation(), this._focusPopupItem(s[s.length - 1]);
+              return;
+            } else if ((t.key === "Enter" || t.key === " ") && i >= 0) {
+              t.preventDefault(), t.stopPropagation(), this._activateFocusableItem(s[i]);
+              return;
+            }
+          }
+        }
+      }
+      if (this.level > 0) {
+        const e = this.parentElement;
+        if (!e) return;
+        const s = Array.from(
+          e.querySelectorAll(":scope > dap-ds-navigation-menu-item")
+        );
+        if (s.length === 0) return;
+        const o = s.indexOf(this);
+        if (t.key === "ArrowDown") {
+          t.preventDefault(), t.stopPropagation();
+          const i = o < s.length - 1 ? o + 1 : 0;
+          s[i].focus();
+        } else if (t.key === "ArrowUp") {
+          t.preventDefault(), t.stopPropagation();
+          const i = o > 0 ? o - 1 : s.length - 1;
+          s[i].focus();
+        } else if (t.key === "ArrowRight")
+          (this.hasNestedItems || this.hasContent) && (t.preventDefault(), t.stopPropagation(), this.opened ? this.focusFirstDropdownChild() : (this.showDropDown(), this.updateComplete.then(() => {
+            this.focusFirstDropdownChild();
+          })));
+        else if (t.key === "ArrowLeft") {
+          t.preventDefault(), t.stopPropagation();
+          const i = e.closest(
+            "dap-ds-navigation-menu-item"
+          );
+          i && (i.hideDropDown(), i.focus());
+        } else if (t.key === "Escape") {
+          t.preventDefault(), t.stopPropagation();
+          const i = e.closest(
+            "dap-ds-navigation-menu-item"
+          );
+          i && (i.hideDropDown(), i.focus());
+        } else if (t.key === "Enter" || t.key === " ") {
+          const i = this.querySelector('[slot="trigger"]'), a = ["A", "DAP-DS-LINK", "LINK"], l = i && (a.includes(i.tagName.toLowerCase()) || a.includes(i.tagName));
+          if ((!l || t.key === " ") && (t.preventDefault(), t.stopPropagation()), this.hasNestedItems || this.hasContent)
+            t.preventDefault(), t.stopPropagation(), this.opened || this.showDropDown(!1);
+          else if (this.hasLink) {
+            t.preventDefault(), t.stopPropagation();
+            const p = this._getLinkElement();
+            if (p) {
+              const d = p.getAttribute("href");
+              p.click(), d && this.emit("dds-navigation-item-click", { href: d, event: t });
+            }
+          } else (!l || t.key === " ") && (i == null || i.click());
+        }
+      }
+    }, this.handleDocumentMouseDown = (t) => {
+      const e = t.target, o = t.composedPath().includes(this), i = this._isWithinNestedItems(e);
+      !o && !i && this.hideDropDown();
+    }, this.submenuController = new U(this);
+  }
+  /** Computed property to detect if this item contains nested navigation menu items. */
+  get hasNestedItems() {
+    return this.querySelectorAll("dap-ds-navigation-menu-item").length > 0;
+  }
+  get _trigger() {
+    var e;
+    if (this._assignedTrigger && this._assignedTrigger.length > 0) {
+      const s = this._assignedTrigger.filter(
+        (o) => o.parentElement === this
+      );
+      if (s.length > 0)
+        return s;
+    }
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("dap-ds-button");
+    return t ? [t] : [];
+  }
+  /** Get the element slotted into the `link` slot, if any. */
+  _getLinkElement() {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+      'slot[name="link"]'
+    );
+    if (!t) return null;
+    const e = t.assignedElements();
+    return e.length > 0 ? e[0] : null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this._handleClick), this.addEventListener("mouseover", this._handleMouseOver), this.addEventListener("mouseleave", this._handleMouseLeave), this.addEventListener("keydown", this._handleKeyDown), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this._updatePlacementForLevel(), this.startPositionUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("mouseover", this._handleMouseOver), this.removeEventListener("mouseleave", this._handleMouseLeave), this.removeEventListener("keydown", this._handleKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown), this.stopPositionUpdate();
+  }
+  firstUpdated(t) {
+    return v(this, null, function* () {
+      I(y.prototype, this, "firstUpdated").call(this, t), this._updateNestedItems(), this._handleTriggerSlotChangeCallback();
+    });
+  }
+  handleOpenedChange() {
+    this.opened && (this.hasNestedItems || this.hasContent) && (this._applyZIndex(), this.updateComplete.then(() => {
+      this.updatePosition(), this.submenuController.updateSafeTriangle();
+    }));
+  }
+  handleActiveHrefChange() {
+    this._updateActiveState(), this._updateNestedItems();
+  }
+  handleHrefChange() {
+    this._updateActiveState();
+  }
+  handleLayoutChange() {
+    this._updateNestedItems(), this._updatePlacementForLevel();
+  }
+  /** Update nested navigation menu items with current properties. */
+  _updateNestedItems() {
+    const t = this.querySelectorAll(
+      "dap-ds-navigation-menu-item"
+    );
+    Array.from(t).filter((s) => {
+      var i;
+      return ((i = s.parentElement) == null ? void 0 : i.closest(
+        "dap-ds-navigation-menu-item"
+      )) === this;
+    }).forEach((s) => {
+      s.level = this.level + 1, s.orientation = this.orientation, this.activeHref && (s.activeHref = this.activeHref);
+    });
+  }
+  /** Update placement based on nesting level and orientation. */
+  _updatePlacementForLevel() {
+    this.level === 0 ? this.placement = this.orientation === "horizontal" ? "bottom-start" : "right-start" : this.placement = "right-start";
+  }
+  /** Calculate z-index based on nesting level. */
+  _calculateZIndex() {
+    return 1e3 + this.level * 10;
+  }
+  /** Apply z-index based on nesting level. */
+  _applyZIndex() {
+    if (this.popup) {
+      const t = this._calculateZIndex();
+      this.popup.style.zIndex = String(t);
+    }
+  }
+  /** Start automatic position updates using Floating UI. */
+  startPositionUpdate() {
+    !this.triggerElement || !this.popup || (this.cleanup = A(this.triggerElement, this.popup, () => {
+      this.updatePosition();
+    }));
+  }
+  /** Stop automatic position updates. */
+  stopPositionUpdate() {
+    this.cleanup && (this.cleanup(), this.cleanup = void 0);
+  }
+  /** Update popup position using Floating UI. */
+  updatePosition() {
+    return v(this, null, function* () {
+      if (!this.triggerElement || !this.popup) return;
+      const t = this.floatingStrategy === "fixed" ? void 0 : this.closest("dap-ds-navigation-menu") || void 0, { x: e, y: s } = yield k(this.triggerElement, this.popup, {
+        placement: this.placement,
+        strategy: this.floatingStrategy,
+        middleware: [
+          S(this.offset),
+          E({
+            boundary: t
+          }),
+          P({
+            padding: this.fullWidth ? 0 : 8,
+            boundary: t
+          }),
+          T({
+            apply: ({ availableHeight: o, rects: i }) => {
+              this.sync && (this.popup.style.width = `${i.reference.width}px`), this.maxHeight !== "auto" && (this.popup.style.maxHeight = `${Math.min(this.maxHeight, o)}px`), this.maxWidth !== "auto" && (this.popup.style.maxWidth = `${this.maxWidth}px`), this.fullWidth && (this.popup.style.width = "100vw");
+            }
+          })
+        ]
+      });
+      Object.assign(this.popup.style, {
+        left: this.fullWidth ? "0px" : `${e}px`,
+        top: `${s}px`
+      });
+    });
+  }
+  /** Check if target is within any nested navigation menu items. */
+  _isWithinNestedItems(t) {
+    return Array.from(
+      this.querySelectorAll("dap-ds-navigation-menu-item")
+    ).some((s) => s.contains(t) || s.shadowRoot && s.shadowRoot.contains(t));
+  }
+  focus() {
+    var e;
+    const t = (e = this._trigger) == null ? void 0 : e[0];
+    if (t) {
+      if (!t.shadowRoot) {
+        const s = this._getInnerLightDomFocusable(t);
+        if (s) {
+          s.focus();
+          return;
+        }
+      }
+      t.focus();
+    }
+  }
+  /**
+   * Sets this item as the active (or inactive) roving tabindex target.
+   * Only the active item's trigger is in the sequential tab order (tabindex="0").
+   * All others are removed (tabindex="-1") so Tab exits the whole nav in one step.
+   */
+  setRovingTabIndex(t) {
+    var s;
+    t ? this.setAttribute("data-nav-current", "") : this.removeAttribute("data-nav-current"), this._isRovingActive = t;
+    const e = (s = this._trigger) == null ? void 0 : s[0];
+    e ? this._applyTriggerTabIndex(e, t) : this.updateComplete.then(() => {
+      var i;
+      const o = (i = this._trigger) == null ? void 0 : i[0];
+      o && this._applyTriggerTabIndex(o, t);
+    });
+  }
+  /** Apply tabindex to a trigger element and its inner focusable element. */
+  _applyTriggerTabIndex(t, e) {
+    if (t.shadowRoot) {
+      const s = t.shadowRoot.querySelector(
+        "a[href], button:not([disabled])"
+      );
+      if (s) {
+        t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
+        return;
+      }
+    } else {
+      const s = this._getInnerLightDomFocusable(t);
+      if (s) {
+        t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
+        return;
+      }
+    }
+    t.setAttribute("tabindex", e ? "0" : "-1");
+  }
+  /**
+   * Returns the inner light-DOM focusable element of a non-focusable wrapper
+   * trigger, or null when the trigger itself should be the tab stop.
+   */
+  _getInnerLightDomFocusable(t) {
+    return ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) ? null : t.querySelector("a[href], button:not([disabled])");
+  }
+  /** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */
+  focusFirstDropdownChild() {
+    const t = this.querySelector(
+      "dap-ds-navigation-menu-item"
+    );
+    if (t) {
+      t.focus();
+      return;
+    }
+    const e = this._getFocusablePopupItems();
+    e.length > 0 && this._focusPopupItem(e[0]);
+  }
+  /** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */
+  focusLastDropdownChild() {
+    const t = Array.from(
+      this.querySelectorAll(":scope > dap-ds-navigation-menu-item")
+    );
+    if (t.length > 0) {
+      t[t.length - 1].focus();
+      return;
+    }
+    const e = this._getFocusablePopupItems();
+    e.length > 0 && this._focusPopupItem(e[e.length - 1]);
+  }
+  /** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */
+  _getFocusablePopupItems() {
+    var o;
+    if (!this.popup) return [];
+    const t = this.popup.querySelector(
+      "slot:not([name])"
+    ), e = (o = t == null ? void 0 : t.assignedElements({ flatten: !0 })) != null ? o : [], s = [];
+    for (const i of e)
+      this._collectFocusableItems(i, s);
+    return s;
+  }
+  _collectFocusableItems(t, e) {
+    if (t.shadowRoot && t.shadowRoot.querySelector(
+      'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])'
+    )) {
+      e.push(t);
+      return;
+    }
+    if (["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) && !t.hasAttribute("disabled") && t.getAttribute("tabindex") !== "-1") {
+      e.push(t);
+      return;
+    }
+    for (const s of t.children)
+      this._collectFocusableItems(s, e);
+  }
+  _activateFocusableItem(t) {
+    if (t.shadowRoot) {
+      const e = t.shadowRoot.querySelector(
+        "a[href], button:not([disabled])"
+      );
+      if (e) {
+        e.click();
+        return;
+      }
+    }
+    t.click();
+  }
+  _focusPopupItem(t) {
+    if (t.shadowRoot) {
+      const e = t.shadowRoot.querySelector(
+        "a[href], button:not([disabled])"
+      );
+      if (e) {
+        e.focus();
+        return;
+      }
+    }
+    t.focus();
+  }
+  showDropDown(t = !1) {
+    return v(this, null, function* () {
+      var o;
+      const e = this.hasContent || this.hasNestedItems;
+      if (this.opened || !e)
+        return;
+      this._updatePlacementForLevel(), this.emit("dds-navigation-dropdown-open", { item: this }), this.opened = !0, this.openedByHover = t, (o = this._trigger[0]) == null || o.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, this._applyZIndex();
+    });
+  }
+  hideDropDown() {
+    return v(this, null, function* () {
+      var s;
+      if (!this.opened)
+        return;
+      this.querySelectorAll("dap-ds-navigation-menu-item").forEach((o) => {
+        o.opened && o.hideDropDown();
+      }), this.opened = !1, this.openedByHover = !1, (s = this._trigger[0]) == null || s.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete;
+    });
+  }
+  /** Handle trigger slot change events. */
+  _handleTriggerSlotChange() {
+    this._handleTriggerSlotChangeCallback(), this.stopPositionUpdate(), this.updateComplete.then(() => {
+      this.triggerElement && this.startPositionUpdate();
+    });
+  }
+  /** Update trigger element attributes and properties. */
+  _handleTriggerSlotChangeCallback() {
+    this.updateComplete.then(() => {
+      const t = this._trigger;
+      t && t.length > 0 && (this.triggerElement = t[0], t[0].setAttribute("aria-controls", "dropdown"), this.hasContent || this.hasNestedItems ? (t[0].setAttribute(
+        "aria-expanded",
+        this.opened ? "true" : "false"
+      ), t[0].setAttribute("aria-haspopup", "true")) : t[0].removeAttribute("aria-expanded"), t[0].style.display = "flex", this._updateActiveState(), this._applyTriggerTabIndex(t[0], this._isRovingActive));
+    });
+  }
+  _updateActiveState() {
+    var e, s;
+    const t = this._trigger;
+    if ((!t || t.length === 0 || !this.activeHref) && !this.baseHref)
+      this.active = !1;
+    else if (this.baseHref)
+      this.exactHref ? this.active = this.baseHref === this.activeHref : this.active = ((e = this.activeHref) == null ? void 0 : e.startsWith(this.baseHref)) || !1;
+    else {
+      const o = ((s = t[0]) == null ? void 0 : s.getAttribute("href")) || this.href;
+      this.active = o === this.activeHref, t[0].active = this.active;
+    }
+    if (!this.active && this.hasLink && this.activeHref) {
+      const o = this._getLinkElement(), i = o == null ? void 0 : o.getAttribute("href");
+      i && (this.active = this.exactHref ? i === this.activeHref : this.activeHref.startsWith(i));
+    }
+    t && t.length > 0 && (this.active ? t[0].setAttribute("aria-current", "page") : t[0].removeAttribute("aria-current"));
+  }
+  _handleContentSlotChange(t) {
+    const e = t.target;
+    if (e) {
+      const s = e.assignedElements();
+      this.hasContent = s.length > 0;
+    }
+    this._updateNestedItems();
+  }
+  /** Render expand indicator icon based on nesting level and orientation. */
+  renderExpandIndicator() {
+    return !this.hasNestedItems && !this.hasContent ? m`` : m`
+      <span class="navigation-item__indicator" part="indicator">
+        <slot name="indicator">
+          <dap-ds-icon
+            part="indicator-icon"
+            exportparts="base:indicator-icon-base,icon:indicator-icon-icon"
+            name=${this._getDefaultIconName()}
+            aria-hidden="true"></dap-ds-icon>
+        </slot>
+      </span>
+    `;
+  }
+  /** Get the default icon name based on orientation and level. */
+  _getDefaultIconName() {
+    return this.orientation === "vertical" ? "arrow-right-s-line" : this.level === 0 ? "arrow-down-s-line" : "arrow-right-s-line";
+  }
+  renderTrigger() {
+    const t = this.hasContent || this.hasNestedItems, e = t ? this.opened ? "true" : "false" : void 0, s = this._titleText || this.label || void 0;
+    return m`
+      <dap-ds-button
+        variant="subtle-menu"
+        tabindex=${this._isRovingActive ? "0" : "-1"}
+        ?active=${this.active}
+        aria-expanded=${g(e)}
+        aria-label=${g(s)}
+        href=${g(this.href)}
+        target=${g(this.target)}
+        rel=${g(this.rel)}
+        forceRole=${g(!t && this.hasLink ? "link" : void 0)}
+        part="trigger"
+        data-testid=${this.triggerButtonTestId}
+        exportparts="base:trigger-base,content:trigger-content,high-contrast:trigger-high-contrast">
+        <dap-ds-stack direction="row" exportparts="base:trigger-stack-base">
+          <span part="title">
+            <slot name="title" @slotchange=${this._handleTitleSlotChange}>
+              ${this.hasTitleSlot ? D : this.label || D}
+            </slot>
+          </span>
+          ${this.renderExpandIndicator()}
+        </dap-ds-stack>
+      </dap-ds-button>
+    `;
+  }
+  renderPopup() {
+    return m`
+      <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}>
+        ${this.renderTrigger()}
+      </slot>
+      <!-- Link slot: outside inert popup, visually hidden, for SPA router links -->
+      <div class="navigation-item__link-wrapper" aria-hidden="true">
+        <slot name="link" @slotchange=${this._handleLinkSlotChange}></slot>
+      </div>
+      <div
+        part="popup"
+        id="popup"
+        ?inert=${!this.opened}
+        class=${w("popup", `popup--${this.effectiveSize}`, {
+      "popup--opened": this.opened,
+      "popup--fixed": this.floatingStrategy === "fixed",
+      "popup--has-arrow": this.hasArrow,
+      "popup--overflow": this.overflow,
+      "popup--full-width": this.fullWidth
+    })}>
+        <div part="content">
+          <slot @slotchange=${this._handleContentSlotChange}></slot>
+        </div>
+        ${this.hasArrow ? m`<div
+              part="arrow"
+              class=${w("popup__arrow")}
+              role="presentation"></div>` : ""}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.hasContent || this.hasNestedItems;
+    return m`
+      <div
+        part="base"
+        class=${w("navigation-item", {
+      "navigation-item--has-content": t,
+      "navigation-item--opened": this.opened,
+      [`navigation-item--level-${this.level}`]: !0
+    })}>
+        ${this.renderPopup()}
+      </div>
+    `;
+  }
+};
+y.tagName = "dap-ds-navigation-menu-item", y.dependencies = {
+  "dap-ds-icon": B,
+  "dap-ds-button": R,
+  "dap-ds-stack": q
+}, y.styles = W(`${F}${O}`);
+let n = y;
+r([
+  N(".popup")
+], n.prototype, "popup", 2);
+r([
+  L({ slot: "trigger" })
+], n.prototype, "_assignedTrigger", 2);
+r([
+  h({ reflect: !0, type: Boolean })
+], n.prototype, "disabled", 2);
+r([
+  h({ reflect: !0, type: Boolean })
+], n.prototype, "opened", 2);
+r([
+  h({ reflect: !0 })
+], n.prototype, "placement", 2);
+r([
+  h({ reflect: !0 })
+], n.prototype, "floatingStrategy", 2);
+r([
+  h({ type: Number })
+], n.prototype, "offset", 2);
+r([
+  h({ type: Boolean })
+], n.prototype, "sync", 2);
+r([
+  h({ type: Number })
+], n.prototype, "maxHeight", 2);
+r([
+  h({ type: Number })
+], n.prototype, "maxWidth", 2);
+r([
+  h({ type: Boolean })
+], n.prototype, "hasArrow", 2);
+r([
+  h({ type: Boolean })
+], n.prototype, "overflow", 2);
+r([
+  h({ type: Boolean })
+], n.prototype, "fullWidth", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "icon", 2);
+r([
+  h({ type: String, attribute: "aria-labelledby" })
+], n.prototype, "ariaLabelledBy", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "activeHref", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "baseHref", 2);
+r([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "exactHref", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "href", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "target", 2);
+r([
+  h({ type: String, reflect: !0 })
+], n.prototype, "rel", 2);
+r([
+  h({ type: String })
+], n.prototype, "label", 2);
+r([
+  h({ type: Number, reflect: !0 })
+], n.prototype, "level", 2);
+r([
+  h({ reflect: !0 })
+], n.prototype, "orientation", 2);
+r([
+  h({ type: String })
+], n.prototype, "tabMode", 2);
+r([
+  h()
+], n.prototype, "triggerButtonTestId", 2);
+r([
+  u()
+], n.prototype, "hasContent", 2);
+r([
+  u()
+], n.prototype, "hasLink", 2);
+r([
+  u()
+], n.prototype, "hasTitleSlot", 2);
+r([
+  u()
+], n.prototype, "_titleText", 2);
+r([
+  u()
+], n.prototype, "active", 2);
+r([
+  u()
+], n.prototype, "openedByHover", 2);
+r([
+  u()
+], n.prototype, "_isRovingActive", 2);
+r([
+  _("opened")
+], n.prototype, "handleOpenedChange", 1);
+r([
+  _("activeHref")
+], n.prototype, "handleActiveHrefChange", 1);
+r([
+  _("href")
+], n.prototype, "handleHrefChange", 1);
+r([
+  _(["level", "orientation"])
+], n.prototype, "handleLayoutChange", 1);
+export {
+  n as default
+};
+//# sourceMappingURL=navigation-menu-item.component.js.map