@limetech/lime-elements 38.33.6 → 38.33.7

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [38.33.7](https://github.com/Lundalogik/lime-elements/compare/v38.33.6...v38.33.7) (2025-12-12)
+
+
+### Bug Fixes
+
+
+* **menu:** improve keyboard navigation ([eecb117](https://github.com/Lundalogik/lime-elements/commit/eecb11780af9be340b365f1b2f62f77b3133a57b))
+
 ## [38.33.6](https://github.com/Lundalogik/lime-elements/compare/v38.33.5...v38.33.6) (2025-12-11)
 
 

package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js

@@ -2514,10 +2514,10 @@ const Menu = class {
       if (breadcrumbsItems.length === 0) {
         return;
       }
-      return (index.h("limel-breadcrumbs", { style: {
+      return (index.h("limel-breadcrumbs", { ref: this.setBreadcrumbsElement, style: {
           'border-bottom': 'solid 1px rgb(var(--contrast-500))',
           'flex-shrink': '0',
-        }, onSelect: this.handleBreadcrumbsSelect, items: breadcrumbsItems }));
+        }, onSelect: this.handleBreadcrumbsSelect, onKeyDown: this.handleBreadcrumbsKeyDown, items: breadcrumbsItems }));
     };
     this.handleBreadcrumbsSelect = (event) => {
       if (!event.detail.menuItem) {
@@ -2582,8 +2582,8 @@ const Menu = class {
       this.loadingSubItems = false;
     };
     // Key handler for the input search field
-    // Will change focus to the first/last item in the dropdown
-    // list to enable selection with the keyboard
+    // Will change focus to breadcrumbs (if present) or the first/last item
+    // in the dropdown list to enable selection with the keyboard
     this.handleInputKeyDown = (event) => {
       const isForwardTab = event.key === keycodes.TAB &&
         !event.altKey &&
@@ -2594,26 +2594,58 @@ const Menu = class {
       if (!isForwardTab && !isUp && !isDown) {
         return;
       }
-      if (!this.list) {
-        return;
-      }
       event.stopPropagation();
       event.preventDefault();
       if (isForwardTab || isDown) {
-        const listItems = this.list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-        const listElement = listItems[0];
-        listElement === null || listElement === void 0 ? void 0 : listElement.focus();
+        if (this.focusBreadcrumbs()) {
+          return;
+        }
+        this.focusFirstListItem();
         return;
       }
       if (isUp) {
-        const listItems = this.list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-        const listElement = [...listItems].at(-1);
-        listElement === null || listElement === void 0 ? void 0 : listElement.focus();
+        // Focus the last list item (wrapping behavior)
+        this.focusLastListItem();
       }
     };
-    // Key handler for the menu list
+    // Key handler for the menu list (capture phase)
+    // Handles Up arrow on first item and Down arrow on last item
+    // Must run in capture phase to intercept before MDC Menu wraps focus
+    // Only intercepts when there's a search input or breadcrumbs to navigate to
+    this.handleListKeyDownCapture = (event) => {
+      const isUp = event.key === keycodes.ARROW_UP;
+      const isDown = event.key === keycodes.ARROW_DOWN;
+      if (!isUp && !isDown) {
+        return;
+      }
+      // Up on first item: go to breadcrumbs or search input (if they exist)
+      if (isUp && this.isFirstListItemFocused()) {
+        // Try to focus breadcrumbs first
+        if (this.focusBreadcrumbs()) {
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
+        // Then try search input
+        if (this.searchInput) {
+          event.stopPropagation();
+          event.preventDefault();
+          this.searchInput.focus();
+        }
+        // If neither exists, let MDC Menu handle wrap-around
+        return;
+      }
+      // Down on last item: go to search input (if it exists)
+      if (isDown && this.isLastListItemFocused() && this.searchInput) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.searchInput.focus();
+      }
+      // If no search input, let MDC Menu handle wrap-around
+    };
+    // Key handler for the menu list (bubble phase)
     // Will change focus to the search field if using shift+tab
-    // And can go forward/back with righ/left arrow keys
+    // And can go forward/back with right/left arrow keys
     this.handleMenuKeyDown = (event) => {
       var _a;
       const isBackwardTab = event.key === keycodes.TAB &&
@@ -2629,8 +2661,9 @@ const Menu = class {
         event.stopPropagation();
         event.preventDefault();
         (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+        return;
       }
-      else if (!this.gridLayout) {
+      if (!this.gridLayout && (isLeft || isRight)) {
         const currentItem = this.getCurrentItem();
         event.stopPropagation();
         event.preventDefault();
@@ -2642,17 +2675,43 @@ const Menu = class {
         }
       }
     };
+    // Key handler for breadcrumbs
+    // Up arrow: focus search input
+    // Down arrow: focus first list item
+    this.handleBreadcrumbsKeyDown = (event) => {
+      var _a;
+      const isUp = event.key === keycodes.ARROW_UP;
+      const isDown = event.key === keycodes.ARROW_DOWN;
+      if (!isUp && !isDown) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      if (isUp) {
+        (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+        return;
+      }
+      if (isDown) {
+        this.focusFirstListItem();
+      }
+    };
     this.clearSearch = () => {
       this.searchValue = '';
       this.searchResults = null;
       this.loadingSubItems = false;
     };
     this.getCurrentItem = () => {
-      var _a, _b, _c;
-      const activeItem = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="menuitem"][tabindex="0"]');
-      const attrIndex = (_c = activeItem === null || activeItem === void 0 ? void 0 : activeItem.attributes) === null || _c === void 0 ? void 0 : _c.getNamedItem('data-index');
-      const dataIndex = Number.parseInt((attrIndex === null || attrIndex === void 0 ? void 0 : attrIndex.value) || '0', 10);
-      return this.visibleItems[dataIndex];
+      var _a, _b, _c, _d, _e, _f;
+      let menuElement = (_c = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) !== null && _c !== void 0 ? _c : null;
+      if (menuElement && menuElement.getAttribute('role') !== 'menuitem') {
+        menuElement = menuElement.closest('[role="menuitem"]');
+      }
+      if (!menuElement) {
+        menuElement = (_e = (_d = this.list) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('[role="menuitem"][tabindex="0"]');
+      }
+      const dataIndex = Number.parseInt((_f = menuElement === null || menuElement === void 0 ? void 0 : menuElement.dataset.index) !== null && _f !== void 0 ? _f : '0', 10);
+      const item = this.visibleItems[dataIndex];
+      return (item !== null && item !== void 0 ? item : this.visibleItems[0]);
     };
     this.goForward = (currentItem) => {
       this.handleSelect(currentItem, false);
@@ -2745,7 +2804,13 @@ const Menu = class {
       this.handleSelect(event.detail);
     };
     this.setListElement = (element) => {
+      if (this.list) {
+        this.list.removeEventListener('keydown', this.handleListKeyDownCapture, true);
+      }
       this.list = element;
+      if (this.list) {
+        this.list.addEventListener('keydown', this.handleListKeyDownCapture, true);
+      }
     };
     this.setFocus = () => {
       setTimeout(() => {
@@ -2771,6 +2836,67 @@ const Menu = class {
     this.setSearchElement = (element) => {
       this.searchInput = element;
     };
+    this.setBreadcrumbsElement = (element) => {
+      this.breadcrumbs = element;
+    };
+    /**
+     * Focuses the first focusable element inside breadcrumbs.
+     * Returns true if breadcrumbs exist and were focused,
+     * false otherwise.
+     */
+    this.focusBreadcrumbs = () => {
+      var _a;
+      if (!this.breadcrumbs) {
+        return false;
+      }
+      const focusableElement = (_a = this.breadcrumbs.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, a');
+      if (focusableElement) {
+        focusableElement.focus();
+        return true;
+      }
+      return false;
+    };
+    this.focusFirstListItem = () => {
+      const listItems = this.getListItems();
+      const firstItem = listItems === null || listItems === void 0 ? void 0 : listItems[0];
+      firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+    };
+    this.focusLastListItem = () => {
+      const listItems = this.getListItems();
+      const lastItem = listItems === null || listItems === void 0 ? void 0 : listItems.at(-1);
+      lastItem === null || lastItem === void 0 ? void 0 : lastItem.focus();
+    };
+    this.isFirstListItemFocused = () => {
+      var _a;
+      const listItems = this.getListItems();
+      if (!listItems) {
+        return false;
+      }
+      const firstItem = listItems[0];
+      const activeElement = (_a = this.list.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+      return firstItem === activeElement;
+    };
+    this.isLastListItemFocused = () => {
+      var _a;
+      const listItems = this.getListItems();
+      if (!listItems) {
+        return false;
+      }
+      const lastItem = listItems.at(-1);
+      const activeElement = (_a = this.list.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+      return lastItem === activeElement;
+    };
+    this.getListItems = () => {
+      var _a;
+      if (!this.list) {
+        return null;
+      }
+      const items = (_a = this.list.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.mdc-deprecated-list-item');
+      if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        return null;
+      }
+      return [...items];
+    };
     this.focusMenuItem = () => {
       var _a;
       if (!this.list) {