dap-design-system 0.61.2 → 0.61.4

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

@@ -1,28 +1,28 @@
 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) => {
+var w = (f, t, i) => C(x(f), i, t);
+var v = (f, t, i) => new Promise((e, s) => {
+  var n = (d) => {
     try {
-      l(e.next(p));
-    } catch (d) {
-      o(d);
+      h(i.next(d));
+    } catch (p) {
+      s(p);
     }
-  }, a = (p) => {
+  }, o = (d) => {
     try {
-      l(e.throw(p));
-    } catch (d) {
-      o(d);
+      h(i.throw(d));
+    } catch (p) {
+      s(p);
     }
-  }, l = (p) => p.done ? s(p.value) : Promise.resolve(p.value).then(i, a);
-  l((e = e.apply(f, t)).next());
+  }, h = (d) => d.done ? e(d.value) : Promise.resolve(d.value).then(n, o);
+  h((i = i.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 { autoUpdate as A, computePosition as k, offset as E, flip as S, shift as T, size as P } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { clsx as I } 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 { property as l } 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";
@@ -38,143 +38,144 @@ 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;
+var M = Object.defineProperty, K = Object.getOwnPropertyDescriptor, a = (f, t, i, e) => {
+  for (var s = e > 1 ? void 0 : e ? K(t, i) : t, n = f.length - 1, o; n >= 0; n--)
+    (o = f[n]) && (s = (e ? o(t, i, s) : o(s)) || s);
+  return e && s && M(t, i, s), s;
 };
 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"));
+      const i = t.target;
+      if (i) {
+        const e = i.assignedElements();
+        this.hasLink = e.length > 0, e.forEach((s) => s.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;
+      const i = t.target;
+      if (i) {
+        const e = i.assignedNodes({ flatten: !0 });
+        this.hasTitleSlot = e.some(
+          (s) => {
+            var n;
+            return (s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && ((n = s.textContent) == null ? void 0 : n.trim().length)) && s !== i;
           }
-        ), this._titleText = s.map((o) => {
-          var i, a;
-          return (a = (i = o.textContent) == null ? void 0 : i.trim()) != null ? a : "";
+        ), this._titleText = e.map((s) => {
+          var n, o;
+          return (o = (n = s.textContent) == null ? void 0 : n.trim()) != null ? o : "";
         }).join(" ").trim();
       }
     }, this._handleClick = (t) => {
-      var s, o, i;
+      var e, s, n;
       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) => {
+        const o = this._trigger, h = t.composedPath();
+        o.some(
+          (p) => h.includes(p)
+        ) ? (t.preventDefault(), t.stopPropagation(), this.opened && this.openedByHover ? this.openedByHover = !1 : this.opened ? this.hideDropDown() : this.showDropDown(!1)) : this.opened && h.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)
+        const o = this._trigger, h = t.composedPath();
+        if (o.some(
+          (p) => h.includes(p)
         )) {
           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 });
+          const p = this._getLinkElement();
+          if (p) {
+            const b = p.getAttribute("href");
+            p.click(), b && this.emit("dds-navigation-item-click", { href: b, event: t });
           }
-          let c = (s = this.parentElement) == null ? void 0 : s.closest(
+          let c = (e = this.parentElement) == null ? void 0 : e.closest(
             "dap-ds-navigation-menu-item"
           );
           for (; c; )
-            c.opened && c.hideDropDown(), c = (o = c.parentElement) == null ? void 0 : o.closest(
+            c.opened && c.hideDropDown(), c = (s = c.parentElement) == null ? void 0 : s.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,
+        const h = (n = this._trigger[0]) == null ? void 0 : n.getAttribute("href");
+        h && this.emit("dds-navigation-item-click", {
+          href: h,
           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();
+      const i = this.parentElement;
+      i && (i.querySelectorAll(":scope > dap-ds-navigation-menu-item") || []).forEach((s) => {
+        if (s !== this) {
+          const n = s;
+          n.submenuController.cancelPendingOpen(), n.opened && n.hideDropDown();
         }
       }), t.stopPropagation();
     }, this._handleMouseLeave = (t) => {
       this.opened || this.submenuController.cancelPendingOpen();
     }, this._handleKeyDown = (t) => {
+      var i;
       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
+          const s = t.target, n = e.findIndex(
+            (o) => o.contains(s) || o === s
           );
           if (t.key === "ArrowDown") {
             t.preventDefault(), t.stopPropagation();
-            const i = o < e.length - 1 ? o + 1 : 0;
-            e[i].focus();
+            const o = n < e.length - 1 ? n + 1 : 0;
+            e[o].focus();
             return;
           } else if (t.key === "ArrowUp") {
             t.preventDefault(), t.stopPropagation();
-            const i = o > 0 ? o - 1 : e.length - 1;
-            e[i].focus();
+            const o = n > 0 ? n - 1 : e.length - 1;
+            e[o].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(
+          } else if (t.key === "ArrowRight" && n >= 0) {
+            const o = e[n];
+            if (o.hasNestedItems || o.hasContent) {
+              t.preventDefault(), t.stopPropagation(), o.opened || (o.showDropDown(), o.updateComplete.then(() => {
+                const h = o.querySelector(
                   "dap-ds-navigation-menu-item"
                 );
-                a && a.focus();
+                h && h.focus();
               }));
               return;
             }
-          } else if ((t.key === "Enter" || t.key === " ") && o >= 0) {
-            const i = e[o], a = i.querySelector(
-              '[slot="trigger"]'
-            ), l = [
+          } else if ((t.key === "Enter" || t.key === " ") && n >= 0) {
+            const o = e[n], h = o.activationTrigger, p = [
               "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());
+            ].includes(
+              ((i = h == null ? void 0 : h.tagName) != null ? i : "").toUpperCase()
+            );
+            (!p || t.key === " ") && (t.preventDefault(), t.stopPropagation()), o.hasNestedItems || o.hasContent ? (t.preventDefault(), t.stopPropagation(), o.opened || o.showDropDown()) : (!p || t.key === " ") && o.activateTrigger();
             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)
+            const n = t.target, o = s.findIndex(
+              (h) => h === n || h.contains(n)
             );
             if (t.key === "ArrowDown") {
               t.preventDefault(), t.stopPropagation();
-              const a = i < 0 ? 0 : i < s.length - 1 ? i + 1 : 0;
-              this._focusPopupItem(s[a]);
+              const h = o < 0 ? 0 : o < s.length - 1 ? o + 1 : 0;
+              this._focusPopupItem(s[h]);
               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]);
+              const h = o < 0 ? s.length - 1 : o > 0 ? o - 1 : s.length - 1;
+              this._focusPopupItem(s[h]);
               return;
             } else if (t.key === "Home") {
               t.preventDefault(), t.stopPropagation(), this._focusPopupItem(s[0]);
@@ -182,8 +183,8 @@ const y = class y extends $(H) {
             } 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]);
+            } else if ((t.key === "Enter" || t.key === " ") && o >= 0) {
+              t.preventDefault(), t.stopPropagation(), this._activateFocusableItem(s[o]);
               return;
             }
           }
@@ -196,48 +197,48 @@ const y = class y extends $(H) {
           e.querySelectorAll(":scope > dap-ds-navigation-menu-item")
         );
         if (s.length === 0) return;
-        const o = s.indexOf(this);
+        const n = s.indexOf(this);
         if (t.key === "ArrowDown") {
           t.preventDefault(), t.stopPropagation();
-          const i = o < s.length - 1 ? o + 1 : 0;
-          s[i].focus();
+          const o = n < s.length - 1 ? n + 1 : 0;
+          s[o].focus();
         } else if (t.key === "ArrowUp") {
           t.preventDefault(), t.stopPropagation();
-          const i = o > 0 ? o - 1 : s.length - 1;
-          s[i].focus();
+          const o = n > 0 ? n - 1 : s.length - 1;
+          s[o].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(
+          const o = e.closest(
             "dap-ds-navigation-menu-item"
           );
-          i && (i.hideDropDown(), i.focus());
+          o && (o.hideDropDown(), o.focus());
         } else if (t.key === "Escape") {
           t.preventDefault(), t.stopPropagation();
-          const i = e.closest(
+          const o = e.closest(
             "dap-ds-navigation-menu-item"
           );
-          i && (i.hideDropDown(), i.focus());
+          o && (o.hideDropDown(), o.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)
+          const o = this.activationTrigger, h = ["A", "DAP-DS-LINK", "LINK"], d = o && (h.includes(o.tagName.toLowerCase()) || h.includes(o.tagName));
+          if ((!d || 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 });
+              const c = p.getAttribute("href");
+              p.click(), c && this.emit("dds-navigation-item-click", { href: c, event: t });
             }
-          } else (!l || t.key === " ") && (i == null || i.click());
+          } else (!d || t.key === " ") && this.activateTrigger();
         }
       }
     }, this.handleDocumentMouseDown = (t) => {
-      const e = t.target, o = t.composedPath().includes(this), i = this._isWithinNestedItems(e);
-      !o && !i && this.hideDropDown();
+      const i = t.target, s = t.composedPath().includes(this), n = this._isWithinNestedItems(i);
+      !s && !n && this.hideDropDown();
     }, this.submenuController = new U(this);
   }
   /** Computed property to detect if this item contains nested navigation menu items. */
@@ -245,26 +246,44 @@ const y = class y extends $(H) {
     return this.querySelectorAll("dap-ds-navigation-menu-item").length > 0;
   }
   get _trigger() {
-    var e;
+    var i;
     if (this._assignedTrigger && this._assignedTrigger.length > 0) {
-      const s = this._assignedTrigger.filter(
-        (o) => o.parentElement === this
+      const e = this._assignedTrigger.filter(
+        (s) => s.parentElement === this
       );
-      if (s.length > 0)
-        return s;
+      if (e.length > 0)
+        return e;
     }
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("dap-ds-button");
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("dap-ds-button");
     return t ? [t] : [];
   }
+  /**
+   * The element keyboard activation should act on: the element slotted into
+   * `trigger` when one is provided, otherwise the default trigger button
+   * rendered in the shadow root.
+   */
+  get activationTrigger() {
+    var t;
+    return (t = this._trigger[0]) != null ? t : null;
+  }
+  /**
+   * Activate the trigger the way a mouse click would. Custom element triggers
+   * -- including the default `dap-ds-button` -- keep the real interactive
+   * element inside their shadow root, so clicking the host alone does nothing.
+   */
+  activateTrigger() {
+    const t = this.activationTrigger;
+    t && this._activateFocusableItem(t);
+  }
   /** Get the element slotted into the `link` slot, if any. */
   _getLinkElement() {
-    var s;
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
       'slot[name="link"]'
     );
     if (!t) return null;
-    const e = t.assignedElements();
-    return e.length > 0 ? e[0] : null;
+    const i = t.assignedElements();
+    return i.length > 0 ? i[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();
@@ -274,7 +293,7 @@ const y = class y extends $(H) {
   }
   firstUpdated(t) {
     return v(this, null, function* () {
-      I(y.prototype, this, "firstUpdated").call(this, t), this._updateNestedItems(), this._handleTriggerSlotChangeCallback();
+      w(y.prototype, this, "firstUpdated").call(this, t), this._updateNestedItems(), this._handleTriggerSlotChangeCallback();
     });
   }
   handleOpenedChange() {
@@ -296,13 +315,13 @@ const y = class y extends $(H) {
     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(
+    Array.from(t).filter((e) => {
+      var n;
+      return ((n = e.parentElement) == null ? void 0 : n.closest(
         "dap-ds-navigation-menu-item"
       )) === this;
-    }).forEach((s) => {
-      s.level = this.level + 1, s.orientation = this.orientation, this.activeHref && (s.activeHref = this.activeHref);
+    }).forEach((e) => {
+      e.level = this.level + 1, e.orientation = this.orientation, this.activeHref && (e.activeHref = this.activeHref);
     });
   }
   /** Update placement based on nesting level and orientation. */
@@ -334,28 +353,28 @@ const y = class y extends $(H) {
   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, {
+      const t = this.floatingStrategy === "fixed" ? void 0 : this.closest("dap-ds-navigation-menu") || void 0, { x: i, y: e } = yield k(this.triggerElement, this.popup, {
         placement: this.placement,
         strategy: this.floatingStrategy,
         middleware: [
-          S(this.offset),
-          E({
+          E(this.offset),
+          S({
             boundary: t
           }),
-          P({
+          T({
             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");
+          P({
+            apply: ({ availableHeight: s, rects: n }) => {
+              this.sync && (this.popup.style.width = `${n.reference.width}px`), this.maxHeight !== "auto" && (this.popup.style.maxHeight = `${Math.min(this.maxHeight, s)}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`
+        left: this.fullWidth ? "0px" : `${i}px`,
+        top: `${e}px`
       });
     });
   }
@@ -363,16 +382,16 @@ const y = class y extends $(H) {
   _isWithinNestedItems(t) {
     return Array.from(
       this.querySelectorAll("dap-ds-navigation-menu-item")
-    ).some((s) => s.contains(t) || s.shadowRoot && s.shadowRoot.contains(t));
+    ).some((e) => e.contains(t) || e.shadowRoot && e.shadowRoot.contains(t));
   }
   focus() {
-    var e;
-    const t = (e = this._trigger) == null ? void 0 : e[0];
+    var i;
+    const t = (i = this._trigger) == null ? void 0 : i[0];
     if (t) {
       if (!t.shadowRoot) {
-        const s = this._getInnerLightDomFocusable(t);
-        if (s) {
-          s.focus();
+        const e = this._getInnerLightDomFocusable(t);
+        if (e) {
+          e.focus();
           return;
         }
       }
@@ -385,33 +404,33 @@ const y = class y extends $(H) {
    * All others are removed (tabindex="-1") so Tab exits the whole nav in one step.
    */
   setRovingTabIndex(t) {
-    var s;
+    var e;
     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);
+    const i = (e = this._trigger) == null ? void 0 : e[0];
+    i ? this._applyTriggerTabIndex(i, t) : this.updateComplete.then(() => {
+      var n;
+      const s = (n = this._trigger) == null ? void 0 : n[0];
+      s && this._applyTriggerTabIndex(s, t);
     });
   }
   /** Apply tabindex to a trigger element and its inner focusable element. */
-  _applyTriggerTabIndex(t, e) {
+  _applyTriggerTabIndex(t, i) {
     if (t.shadowRoot) {
-      const s = t.shadowRoot.querySelector(
+      const e = t.shadowRoot.querySelector(
         "a[href], button:not([disabled])"
       );
-      if (s) {
-        t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
+      if (e) {
+        t.removeAttribute("tabindex"), e.setAttribute("tabindex", i ? "0" : "-1");
         return;
       }
     } else {
-      const s = this._getInnerLightDomFocusable(t);
-      if (s) {
-        t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
+      const e = this._getInnerLightDomFocusable(t);
+      if (e) {
+        t.removeAttribute("tabindex"), e.setAttribute("tabindex", i ? "0" : "-1");
         return;
       }
     }
-    t.setAttribute("tabindex", e ? "0" : "-1");
+    t.setAttribute("tabindex", i ? "0" : "-1");
   }
   /**
    * Returns the inner light-DOM focusable element of a non-focusable wrapper
@@ -429,8 +448,8 @@ const y = class y extends $(H) {
       t.focus();
       return;
     }
-    const e = this._getFocusablePopupItems();
-    e.length > 0 && this._focusPopupItem(e[0]);
+    const i = this._getFocusablePopupItems();
+    i.length > 0 && this._focusPopupItem(i[0]);
   }
   /** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */
   focusLastDropdownChild() {
@@ -441,41 +460,41 @@ const y = class y extends $(H) {
       t[t.length - 1].focus();
       return;
     }
-    const e = this._getFocusablePopupItems();
-    e.length > 0 && this._focusPopupItem(e[e.length - 1]);
+    const i = this._getFocusablePopupItems();
+    i.length > 0 && this._focusPopupItem(i[i.length - 1]);
   }
   /** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */
   _getFocusablePopupItems() {
-    var o;
+    var s;
     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;
+    ), i = (s = t == null ? void 0 : t.assignedElements({ flatten: !0 })) != null ? s : [], e = [];
+    for (const n of i)
+      this._collectFocusableItems(n, e);
+    return e;
   }
-  _collectFocusableItems(t, e) {
+  _collectFocusableItems(t, i) {
     if (t.shadowRoot && t.shadowRoot.querySelector(
       'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])'
     )) {
-      e.push(t);
+      i.push(t);
       return;
     }
     if (["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) && !t.hasAttribute("disabled") && t.getAttribute("tabindex") !== "-1") {
-      e.push(t);
+      i.push(t);
       return;
     }
-    for (const s of t.children)
-      this._collectFocusableItems(s, e);
+    for (const e of t.children)
+      this._collectFocusableItems(e, i);
   }
   _activateFocusableItem(t) {
     if (t.shadowRoot) {
-      const e = t.shadowRoot.querySelector(
+      const i = t.shadowRoot.querySelector(
         "a[href], button:not([disabled])"
       );
-      if (e) {
-        e.click();
+      if (i) {
+        i.click();
         return;
       }
     }
@@ -483,11 +502,11 @@ const y = class y extends $(H) {
   }
   _focusPopupItem(t) {
     if (t.shadowRoot) {
-      const e = t.shadowRoot.querySelector(
+      const i = t.shadowRoot.querySelector(
         "a[href], button:not([disabled])"
       );
-      if (e) {
-        e.focus();
+      if (i) {
+        i.focus();
         return;
       }
     }
@@ -495,21 +514,21 @@ const y = class y extends $(H) {
   }
   showDropDown(t = !1) {
     return v(this, null, function* () {
-      var o;
-      const e = this.hasContent || this.hasNestedItems;
-      if (this.opened || !e)
+      var s;
+      const i = this.hasContent || this.hasNestedItems;
+      if (this.opened || !i)
         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();
+      this._updatePlacementForLevel(), this.emit("dds-navigation-dropdown-open", { item: this }), this.opened = !0, this.openedByHover = t, (s = this._trigger[0]) == null || s.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, this._applyZIndex();
     });
   }
   hideDropDown() {
     return v(this, null, function* () {
-      var s;
+      var e;
       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;
+      this.querySelectorAll("dap-ds-navigation-menu-item").forEach((s) => {
+        s.opened && s.hideDropDown();
+      }), this.opened = !1, this.openedByHover = !1, (e = this._trigger[0]) == null || e.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete;
     });
   }
   /** Handle trigger slot change events. */
@@ -529,27 +548,27 @@ const y = class y extends $(H) {
     });
   }
   _updateActiveState() {
-    var e, s;
+    var i, e;
     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;
+      this.exactHref ? this.active = this.baseHref === this.activeHref : this.active = ((i = this.activeHref) == null ? void 0 : i.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;
+      const s = ((e = t[0]) == null ? void 0 : e.getAttribute("href")) || this.href;
+      this.active = s === 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));
+      const s = this._getLinkElement(), n = s == null ? void 0 : s.getAttribute("href");
+      n && (this.active = this.exactHref ? n === this.activeHref : this.activeHref.startsWith(n));
     }
     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;
+    const i = t.target;
+    if (i) {
+      const e = i.assignedElements();
+      this.hasContent = e.length > 0;
     }
     this._updateNestedItems();
   }
@@ -572,14 +591,14 @@ const y = class y extends $(H) {
     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;
+    const t = this.hasContent || this.hasNestedItems, i = t ? this.opened ? "true" : "false" : void 0, e = 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)}
+        aria-expanded=${g(i)}
+        aria-label=${g(e)}
         href=${g(this.href)}
         target=${g(this.target)}
         rel=${g(this.rel)}
@@ -611,7 +630,7 @@ const y = class y extends $(H) {
         part="popup"
         id="popup"
         ?inert=${!this.opened}
-        class=${w("popup", `popup--${this.effectiveSize}`, {
+        class=${I("popup", `popup--${this.effectiveSize}`, {
       "popup--opened": this.opened,
       "popup--fixed": this.floatingStrategy === "fixed",
       "popup--has-arrow": this.hasArrow,
@@ -623,7 +642,7 @@ const y = class y extends $(H) {
         </div>
         ${this.hasArrow ? m`<div
               part="arrow"
-              class=${w("popup__arrow")}
+              class=${I("popup__arrow")}
               role="presentation"></div>` : ""}
       </div>
     `;
@@ -633,7 +652,7 @@ const y = class y extends $(H) {
     return m`
       <div
         part="base"
-        class=${w("navigation-item", {
+        class=${I("navigation-item", {
       "navigation-item--has-content": t,
       "navigation-item--opened": this.opened,
       [`navigation-item--level-${this.level}`]: !0
@@ -648,119 +667,119 @@ y.tagName = "dap-ds-navigation-menu-item", y.dependencies = {
   "dap-ds-button": R,
   "dap-ds-stack": q
 }, y.styles = W(`${F}${O}`);
-let n = y;
-r([
+let r = y;
+a([
   N(".popup")
-], n.prototype, "popup", 2);
-r([
+], r.prototype, "popup", 2);
+a([
   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([
+], r.prototype, "_assignedTrigger", 2);
+a([
+  l({ reflect: !0, type: Boolean })
+], r.prototype, "disabled", 2);
+a([
+  l({ reflect: !0, type: Boolean })
+], r.prototype, "opened", 2);
+a([
+  l({ reflect: !0 })
+], r.prototype, "placement", 2);
+a([
+  l({ reflect: !0 })
+], r.prototype, "floatingStrategy", 2);
+a([
+  l({ type: Number })
+], r.prototype, "offset", 2);
+a([
+  l({ type: Boolean })
+], r.prototype, "sync", 2);
+a([
+  l({ type: Number })
+], r.prototype, "maxHeight", 2);
+a([
+  l({ type: Number })
+], r.prototype, "maxWidth", 2);
+a([
+  l({ type: Boolean })
+], r.prototype, "hasArrow", 2);
+a([
+  l({ type: Boolean })
+], r.prototype, "overflow", 2);
+a([
+  l({ type: Boolean })
+], r.prototype, "fullWidth", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "icon", 2);
+a([
+  l({ type: String, attribute: "aria-labelledby" })
+], r.prototype, "ariaLabelledBy", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "activeHref", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "baseHref", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "exactHref", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "href", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "target", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "rel", 2);
+a([
+  l({ type: String })
+], r.prototype, "label", 2);
+a([
+  l({ type: Number, reflect: !0 })
+], r.prototype, "level", 2);
+a([
+  l({ reflect: !0 })
+], r.prototype, "orientation", 2);
+a([
+  l({ type: String })
+], r.prototype, "tabMode", 2);
+a([
+  l()
+], r.prototype, "triggerButtonTestId", 2);
+a([
   u()
-], n.prototype, "hasContent", 2);
-r([
+], r.prototype, "hasContent", 2);
+a([
   u()
-], n.prototype, "hasLink", 2);
-r([
+], r.prototype, "hasLink", 2);
+a([
   u()
-], n.prototype, "hasTitleSlot", 2);
-r([
+], r.prototype, "hasTitleSlot", 2);
+a([
   u()
-], n.prototype, "_titleText", 2);
-r([
+], r.prototype, "_titleText", 2);
+a([
   u()
-], n.prototype, "active", 2);
-r([
+], r.prototype, "active", 2);
+a([
   u()
-], n.prototype, "openedByHover", 2);
-r([
+], r.prototype, "openedByHover", 2);
+a([
   u()
-], n.prototype, "_isRovingActive", 2);
-r([
+], r.prototype, "_isRovingActive", 2);
+a([
   _("opened")
-], n.prototype, "handleOpenedChange", 1);
-r([
+], r.prototype, "handleOpenedChange", 1);
+a([
   _("activeHref")
-], n.prototype, "handleActiveHrefChange", 1);
-r([
+], r.prototype, "handleActiveHrefChange", 1);
+a([
   _("href")
-], n.prototype, "handleHrefChange", 1);
-r([
+], r.prototype, "handleHrefChange", 1);
+a([
   _(["level", "orientation"])
-], n.prototype, "handleLayoutChange", 1);
+], r.prototype, "handleLayoutChange", 1);
 export {
-  n as default
+  r as default
 };
 //# sourceMappingURL=navigation-menu-item.component.js.map