@limetech/lime-elements 38.33.5 → 38.33.7

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [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)
+
+
+### Bug Fixes
+
+
+* **tab-bar:** allow consumers to override tab's badge background color ([01c8747](https://github.com/Lundalogik/lime-elements/commit/01c8747522d9c323b92db0c254f0e5b38d54a328))
+* **tab-bar:** better icon color in dark mode ([728138f](https://github.com/Lundalogik/lime-elements/commit/728138fdb68d1b8d584ebe9e0f651157cf498675))
+
 ## [38.33.5](https://github.com/Lundalogik/lime-elements/compare/v38.33.4...v38.33.5) (2025-12-11)
 
 

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

@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
 const format = require('./format-c8759d02.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
+const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
 
 const Badge = class {
   constructor(hostRef) {

package/dist/cjs/limel-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,i0BAAi0B;;MCgBr0B,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;;;","names":["h","Host","abbreviate"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n"],"version":3}
+{"file":"limel-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,22BAA22B;;MCgB/2B,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;;;","names":["h","Host","abbreviate"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n    border-radius: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n"],"version":3}

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) {