@limetech/lime-elements 40.21.0 → 40.21.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [40.21.1](https://github.com/Lundalogik/lime-elements/compare/v40.21.0...v40.21.1) (2026-11-04)
+
+### Bug Fixes
+
+
+* **input-field:** give the focus back to the field with the up arrow ([e706469](https://github.com/Lundalogik/lime-elements/commit/e706469dbab4f84ff171e761aa77ecbf6be52933))
+* **picker:** give the focus back to the field with the up arrow ([d25ca36](https://github.com/Lundalogik/lime-elements/commit/d25ca36e2b2558739a7541d86b3504b1234a2c69))
+* **picker:** keep the suggestions open while one of them has the focus ([552f736](https://github.com/Lundalogik/lime-elements/commit/552f73688f21fc68780fdbfa0c03bf892b9fae7c))
+* **picker:** move into the suggestions when an arrow key comes early ([5bea664](https://github.com/Lundalogik/lime-elements/commit/5bea664878e68bcb4597dd1241ce71d4d96bc792))
+
 ## [40.21.0](https://github.com/Lundalogik/lime-elements/compare/v40.20.1...v40.21.0) (2026-11-03)
 
 ### Features

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

@@ -642,10 +642,20 @@ const InputField = class {
                 this.showCompletions = false;
                 return;
             }
+            if (event.key === keycodes.ARROW_UP && this.isKeyPressedOnFirstOption(event)) {
+                event.preventDefault();
+                this.setFocus();
+                return;
+            }
             if ([keycodes.TAB, keycodes.ENTER].includes(event.key) || typeahead.isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
+        this.isKeyPressedOnFirstOption = (event) => {
+            const list = event.currentTarget;
+            const firstOption = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
+            return !!firstOption && event.composedPath().includes(firstOption);
+        };
         this.handleCloseMenu = () => {
             this.showCompletions = false;
         };

package/dist/cjs/limel-file-viewer.cjs.entry.js

@@ -5850,6 +5850,164 @@ function base64ArrayBuffer(arrayBuffer) {
     return base64;
 }
 
+// Parser for the OTP-Token header of draft-goto-otp-token-01, an Internet-Draft that expires
+// on 25 March 2027. By then check for a newer revision of the draft or a published RFC, the
+// header name and its parameters are still open questions in the draft.
+//
+// The header value is a structured field item (RFC 9651): a String holding the passcode,
+// with an `origin` parameter naming the origin the passcode is bound to. Unknown parameters
+// are ignored, but they still have to be valid, otherwise the whole field fails to parse.
+// RFC 9651 lets a parser limit the size of a field. A passcode and an origin take well under
+// a kilobyte, the limit keeps the regular expressions below away from megabyte inputs
+const MAX_FIELD_LENGTH = 8192;
+// The bare item syntax of RFC 9651 4.2.3.1, keyed by the first character of the item. An
+// Integer has at most 15 digits, a Decimal at most 12 before and 1 to 3 after the dot, and a
+// Date is an Integer. Whatever follows a match is left for the caller, which only accepts a
+// parameter separator or the end of the field, so a 16th digit or a 4th decimal fails there
+const NUMBER = /-?(?:\d{1,12}\.\d{1,3}|\d{1,15})/y;
+const STRING = /"((?:[\x20\x21\x23-\x5b\x5d-\x7e]|\\["\\])*)"/y;
+const TOKEN = /[A-Za-z*][!#$%&'*+\-.^_`|~0-9A-Za-z:/]*/y;
+const BYTE_SEQUENCE = /:[A-Za-z0-9+/=]*:/y;
+const BOOLEAN = /\?[01]/y;
+const DATE = /@-?\d{1,15}/y;
+const DISPLAY_STRING = /%"((?:[\x20\x21\x23\x24\x26-\x7e]|%[0-9a-f]{2})*)"/y;
+const KEY = /[a-z*][a-z0-9_\-.*]*/y;
+const SPACES = / */y;
+// Matches the sticky expression at the cursor and moves past it, returns null if it does not match
+function match(cursor, re) {
+    re.lastIndex = cursor.pos;
+    const result = re.exec(cursor.input);
+    if (result) {
+        cursor.pos = re.lastIndex;
+    }
+    return result;
+}
+// RFC 9651 4.2.5, returns the unescaped String or null if there is no valid String at the cursor
+function parseString(cursor) {
+    const result = match(cursor, STRING);
+    return result && result[1].replace(/\\(["\\])/g, '$1');
+}
+// RFC 9651 4.2.10. The percent encoded bytes must be valid UTF-8, which decodeURIComponent
+// checks as it decodes them
+function isDisplayString(cursor) {
+    const result = match(cursor, DISPLAY_STRING);
+    if (!result) {
+        return false;
+    }
+    try {
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+// RFC 9651 4.2.3.1. Returns the value of a String, true for any other valid bare item and
+// false for an invalid one
+function parseBareItem(cursor) {
+    const c = cursor.input.charAt(cursor.pos);
+    switch (c) {
+        case '"':
+            return parseString(cursor) ?? false;
+        case ':':
+            return !!match(cursor, BYTE_SEQUENCE);
+        case '?':
+            return !!match(cursor, BOOLEAN);
+        case '@':
+            return !!match(cursor, DATE);
+        case '%':
+            return isDisplayString(cursor);
+    }
+    return !!match(cursor, c === '-' || (c >= '0' && c <= '9') ? NUMBER : TOKEN);
+}
+/**
+ * Parses a structured field item (RFC 9651 4.2 with field_type "item") whose bare item is a
+ * String. Returns the String and the String parameters, or null if the value does not parse
+ * or the bare item is of another type. A parameter of any other type is stored as true
+ * @internal
+ */
+function parseStringItem(value) {
+    const cursor = { input: value, pos: 0 };
+    match(cursor, SPACES);
+    const item = parseString(cursor);
+    if (item === null) {
+        return null;
+    }
+    // a later parameter with the same key replaces the earlier one
+    const params = new Map();
+    while (cursor.input[cursor.pos] === ';') {
+        cursor.pos++;
+        match(cursor, SPACES);
+        const key = match(cursor, KEY);
+        if (!key) {
+            return null;
+        }
+        let paramValue = true;
+        if (cursor.input[cursor.pos] === '=') {
+            cursor.pos++;
+            paramValue = parseBareItem(cursor);
+            if (paramValue === false) {
+                return null;
+            }
+        }
+        params.set(key[0], paramValue);
+    }
+    match(cursor, SPACES);
+    return cursor.pos === cursor.input.length ? { value: item, params } : null;
+}
+/**
+ * Checks that the origin is the canonical ASCII serialization of a potentially trustworthy
+ * origin, as the draft requires: https, or http on a loopback host
+ * @internal
+ */
+function isOtpOrigin(origin) {
+    let url;
+    try {
+        url = new URL(origin);
+    }
+    catch {
+        return false;
+    }
+    // the URL parser lowercases the host, converts it to punycode and drops the default port, so
+    // a value that is not canonical, or has a path, userinfo or an opaque origin, does not match
+    // its own origin. The WHATWG parser lets characters such as a quote or a brace into a host,
+    // which the origin grammar (RFC 6454) does not allow, so only a DNS name, an IPv4 address or a
+    // bracketed IPv6 address is accepted
+    if (url.origin !== origin || !/^([a-z0-9_-]+\.)*[a-z0-9_-]+$|^\[[0-9a-f:.]+\]$/.test(url.hostname)) {
+        return false;
+    }
+    const isLoopback = /^(localhost|.+\.localhost|127(\.\d+){3}|\[::1\])$/.test(url.hostname);
+    return url.protocol === 'https:' || (url.protocol === 'http:' && isLoopback);
+}
+/**
+ * Returns the one-time passcode from the OTP-Token header of a message, following the
+ * receiver steps of the draft (section 3.2), or undefined if the message has no valid one.
+ * Only the header of the message itself counts, the draft has an OTP-Token in a MIME part
+ * ignored, and more than one OTP-Token header makes the message have none
+ * @internal
+ */
+function getOtp(headers) {
+    let otpHeader;
+    for (const header of headers) {
+        if (header.key === 'otp-token') {
+            if (otpHeader) {
+                return undefined;
+            }
+            otpHeader = header;
+        }
+    }
+    if (!otpHeader || otpHeader.value.length > MAX_FIELD_LENGTH) {
+        return undefined;
+    }
+    // the header value is already unfolded, which the draft requires before the structured field parse
+    const parsed = parseStringItem(otpHeader.value);
+    const origin = parsed?.params.get('origin');
+    // an empty passcode is valid syntax, but there is nothing in it to fill in
+    if (!parsed?.value || typeof origin !== 'string' || !isOtpOrigin(origin)) {
+        return undefined;
+    }
+    return { code: parsed.value, origin };
+}
+
 function isReadableStream(value) {
     return !!value && typeof value.getReader === 'function';
 }
@@ -6425,6 +6583,10 @@ class PostalMime {
             // enforce ISO format if seems to be a valid date
             message.date = date.toString() === 'Invalid Date' ? dateHeader.value : date.toISOString();
         }
+        const otp = getOtp(headers);
+        if (otp) {
+            message.otp = otp;
+        }
         if (this.textContent.html) {
             message.html = this.textContent.html;
         }

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

@@ -19,6 +19,8 @@ const pickerCss = () => `@charset "UTF-8";:host{position:relative;display:block}
 const SEARCH_DEBOUNCE = 300;
 const CHIP_SET_TAG_NAME = 'limel-chip-set';
 const DEFAULT_SEARCHER_MAX_RESULTS = 20;
+const MAX_FRAMES_TO_WAIT_FOR_LIST = 20;
+const ENABLED_LIST_ITEM = '.mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled)';
 const Picker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -95,7 +97,8 @@ const Picker = class {
         this.chips = [];
         // Should NOT be decorated with State(), since this
         // should not trigger a re-render by itself.
-        this.chipSetEditMode = false;
+        this.isEditing = false;
+        this.suggestionHasFocus = false;
         this.suggestionsMessage = liveMessage.createLiveMessage(() => this.getSuggestionsMessage());
         this.getValueId = (item) => {
             const value = item.value;
@@ -179,6 +182,7 @@ const Picker = class {
         this.suggestionsMessage.update();
     }
     disconnectedCallback() {
+        this.forgetSuggestionFocus();
         this.debouncedSearch.cancel();
         this.suggestionsMessage.update.cancel();
     }
@@ -193,9 +197,10 @@ const Picker = class {
         this.host.setAttribute('tabindex', '0');
     }
     async componentWillUpdate() {
-        this.chipSetEditMode = false;
+        this.isEditing = false;
         if (this.chipSet) {
-            this.chipSetEditMode = await this.chipSet.getEditMode();
+            this.isEditing =
+                this.suggestionHasFocus || (await this.chipSet.getEditMode());
         }
     }
     render() {
@@ -204,7 +209,7 @@ const Picker = class {
         if (!this.multiple) {
             props.maxItems = 1;
         }
-        return (index.h(index.Host, { key: 'b8a2414331b89aa646ecdab2a0e5fb9bfce06de4' }, index.h("limel-chip-set", Object.assign({ key: 'bf4fe7ed7973f40c903116cd538f485e3f44881d', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), index.h("span", { key: '3967fc14d3207567c5976c48c1154b96ea3fe285', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
+        return (index.h(index.Host, { key: '1670bff5822f930a3eca69ad2a016cea978b3822' }, index.h("limel-chip-set", Object.assign({ key: '173a7facd5271992e792ce6a56a34a8890c9135f', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.isEditing, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), index.h("span", { key: 'c151104c5059aadc3cfa526267184b663e87bebd', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
     }
     onChangeValue() {
         this.chips = this.createChips(this.value);
@@ -277,7 +282,7 @@ const Picker = class {
         return !this.readonly && !this.isFull();
     }
     shouldShowDropDownContent() {
-        return this.canOpenList() && !!this.chipSetEditMode;
+        return this.canOpenList() && !!this.isEditing;
     }
     getDropdownContent() {
         var _a;
@@ -346,10 +351,20 @@ const Picker = class {
             this.chipSet.setFocus();
             return;
         }
+        if (event.key === keycodes.ARROW_UP && this.isKeyPressedOnFirstItem(event)) {
+            event.preventDefault();
+            this.chipSet.setFocus();
+            return;
+        }
         if ([keycodes.TAB, keycodes.ENTER].includes(event.key) || typeahead.isTextEditingKey(event)) {
             this.chipSet.setFocus();
         }
     }
+    isKeyPressedOnFirstItem(event) {
+        const list = event.currentTarget;
+        const firstItem = list.shadowRoot.querySelector(ENABLED_LIST_ITEM);
+        return !!firstItem && event.composedPath().includes(firstItem);
+    }
     renderPortal(content = []) {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         return (index.h("limel-portal", { visible: content.length > 0, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: content.length > 0, allowClicksElement: this.host, style: {
@@ -383,6 +398,7 @@ const Picker = class {
         const query = event.detail;
         this.textValue = query;
         this.suggestionsEngaged = true;
+        this.forgetSuggestionFocus();
         this.debouncedSearch(query);
         // If the search-query is an empty string, bypass debouncing.
         if (query === '') {
@@ -432,6 +448,7 @@ const Picker = class {
         if (!event.detail) {
             return;
         }
+        this.suggestionHasFocus = false;
         this.action.emit(event.detail.value);
         this.items = [];
     }
@@ -440,6 +457,7 @@ const Picker = class {
      * Prevent focus if the picker has a value and does not support multiple values
      */
     handleInputFieldFocus() {
+        this.forgetSuggestionFocus();
         const query = this.textValue;
         this.debouncedSearch(query);
     }
@@ -477,7 +495,6 @@ const Picker = class {
      * @param event - event
      */
     handleInputKeyDown(event) {
-        var _a;
         this.suggestionsEngaged = true;
         const isUp = event.key === keycodes.ARROW_UP;
         const isDown = event.key === keycodes.ARROW_DOWN;
@@ -491,28 +508,47 @@ const Picker = class {
         if (!isUp && !isDown) {
             return;
         }
-        const list = (_a = document.querySelector(` #${this.portalId} limel-list[data-suggestions]`)) !== null && _a !== void 0 ? _a : document.querySelector(` #${this.portalId} limel-list`);
-        if (!list) {
+        const position = isDown ? 'first' : 'last';
+        if (this.focusSuggestion(position)) {
+            event.preventDefault();
             return;
         }
-        if (isDown) {
-            // Match by class only (not `:first-child`) so a leading
-            // `ListSeparator` doesn't shadow the first focusable item.
-            const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
-            if (!listElement) {
+        this.suggestionToFocusWhenShown = position;
+    }
+    focusSuggestion(position) {
+        var _a;
+        const list = (_a = document.querySelector(` #${this.portalId} limel-list[data-suggestions]`)) !== null && _a !== void 0 ? _a : document.querySelector(` #${this.portalId} limel-list`);
+        if (!list) {
+            return false;
+        }
+        // Match by class only (not `:first-child`) so a leading
+        // `ListSeparator` doesn't shadow the first focusable item.
+        const items = list.shadowRoot.querySelectorAll(ENABLED_LIST_ITEM);
+        const item = position === 'first' ? items[0] : [...items].at(-1);
+        item === null || item === void 0 ? void 0 : item.focus();
+        this.suggestionHasFocus =
+            !!item && list.shadowRoot.activeElement === item;
+        return this.suggestionHasFocus;
+    }
+    focusSuggestionWhenShown(position) {
+        cancelAnimationFrame(this.suggestionFocusFrame);
+        let frames = 0;
+        const focusSuggestion = () => {
+            if (this.focusSuggestion(position)) {
                 return;
             }
-            event.preventDefault();
-            listElement.focus();
-            return;
-        }
-        const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-        const listElement = [...listItems].at(-1);
-        if (!listElement) {
-            return;
-        }
-        event.preventDefault();
-        listElement.focus();
+            frames += 1;
+            if (frames < MAX_FRAMES_TO_WAIT_FOR_LIST) {
+                this.suggestionFocusFrame =
+                    requestAnimationFrame(focusSuggestion);
+            }
+        };
+        this.suggestionFocusFrame = requestAnimationFrame(focusSuggestion);
+    }
+    forgetSuggestionFocus() {
+        this.suggestionHasFocus = false;
+        this.suggestionToFocusWhenShown = undefined;
+        cancelAnimationFrame(this.suggestionFocusFrame);
     }
     handleSearchResult(query, result) {
         var _a;
@@ -531,6 +567,11 @@ const Picker = class {
         }
         this.items = this.prependSearchHeader(query, nextItems);
         this.loading = false;
+        const position = this.suggestionToFocusWhenShown;
+        this.suggestionToFocusWhenShown = undefined;
+        if (position && this.hasPickableItems(nextItems)) {
+            this.focusSuggestionWhenShown(position);
+        }
     }
     hasPickableItems(items) {
         return items.some((item) => !('separator' in item));
@@ -553,7 +594,8 @@ const Picker = class {
     /**
      * Shared prelude for any flow that ends the current search session:
      * wipe the chip-set's visible text, reset the picker's `textValue`,
-     * and cancel any in-flight debounced search.
+     * cancel any in-flight debounced search, and forget that a suggestion
+     * has the focus, or that an arrow key is waiting for the suggestions.
      *
      * Used by `clearInputField` (which then drops the dropdown
      * entirely) and `resetSearchToDefault` (which re-runs the searcher
@@ -563,6 +605,7 @@ const Picker = class {
         this.chipSet.emptyInput();
         this.textValue = '';
         this.debouncedSearch.cancel();
+        this.forgetSuggestionFocus();
     }
     clearInputField() {
         this.clearTextValue();

package/dist/collection/components/input-field/input-field.js

@@ -524,10 +524,20 @@ export class InputField {
                 this.showCompletions = false;
                 return;
             }
+            if (event.key === ARROW_UP && this.isKeyPressedOnFirstOption(event)) {
+                event.preventDefault();
+                this.setFocus();
+                return;
+            }
             if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
+        this.isKeyPressedOnFirstOption = (event) => {
+            const list = event.currentTarget;
+            const firstOption = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
+            return !!firstOption && event.composedPath().includes(firstOption);
+        };
         this.handleCloseMenu = () => {
             this.showCompletions = false;
         };

package/dist/collection/components/picker/picker.js

@@ -10,6 +10,8 @@ import { debounce } from "lodash-es";
 const SEARCH_DEBOUNCE = 300;
 const CHIP_SET_TAG_NAME = 'limel-chip-set';
 const DEFAULT_SEARCHER_MAX_RESULTS = 20;
+const MAX_FRAMES_TO_WAIT_FOR_LIST = 20;
+const ENABLED_LIST_ITEM = '.mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled)';
 /**
  * @exampleComponent limel-example-picker-basic
  * @exampleComponent limel-example-picker-multiple
@@ -98,7 +100,8 @@ export class Picker {
         this.chips = [];
         // Should NOT be decorated with State(), since this
         // should not trigger a re-render by itself.
-        this.chipSetEditMode = false;
+        this.isEditing = false;
+        this.suggestionHasFocus = false;
         this.suggestionsMessage = createLiveMessage(() => this.getSuggestionsMessage());
         this.getValueId = (item) => {
             const value = item.value;
@@ -182,6 +185,7 @@ export class Picker {
         this.suggestionsMessage.update();
     }
     disconnectedCallback() {
+        this.forgetSuggestionFocus();
         this.debouncedSearch.cancel();
         this.suggestionsMessage.update.cancel();
     }
@@ -196,9 +200,10 @@ export class Picker {
         this.host.setAttribute('tabindex', '0');
     }
     async componentWillUpdate() {
-        this.chipSetEditMode = false;
+        this.isEditing = false;
         if (this.chipSet) {
-            this.chipSetEditMode = await this.chipSet.getEditMode();
+            this.isEditing =
+                this.suggestionHasFocus || (await this.chipSet.getEditMode());
         }
     }
     render() {
@@ -207,7 +212,7 @@ export class Picker {
         if (!this.multiple) {
             props.maxItems = 1;
         }
-        return (h(Host, { key: 'b8a2414331b89aa646ecdab2a0e5fb9bfce06de4' }, h("limel-chip-set", Object.assign({ key: 'bf4fe7ed7973f40c903116cd538f485e3f44881d', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), h("span", { key: '3967fc14d3207567c5976c48c1154b96ea3fe285', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
+        return (h(Host, { key: '1670bff5822f930a3eca69ad2a016cea978b3822' }, h("limel-chip-set", Object.assign({ key: '173a7facd5271992e792ce6a56a34a8890c9135f', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.isEditing, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), h("span", { key: 'c151104c5059aadc3cfa526267184b663e87bebd', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
     }
     onChangeValue() {
         this.chips = this.createChips(this.value);
@@ -280,7 +285,7 @@ export class Picker {
         return !this.readonly && !this.isFull();
     }
     shouldShowDropDownContent() {
-        return this.canOpenList() && !!this.chipSetEditMode;
+        return this.canOpenList() && !!this.isEditing;
     }
     getDropdownContent() {
         var _a;
@@ -349,10 +354,20 @@ export class Picker {
             this.chipSet.setFocus();
             return;
         }
+        if (event.key === ARROW_UP && this.isKeyPressedOnFirstItem(event)) {
+            event.preventDefault();
+            this.chipSet.setFocus();
+            return;
+        }
         if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
             this.chipSet.setFocus();
         }
     }
+    isKeyPressedOnFirstItem(event) {
+        const list = event.currentTarget;
+        const firstItem = list.shadowRoot.querySelector(ENABLED_LIST_ITEM);
+        return !!firstItem && event.composedPath().includes(firstItem);
+    }
     renderPortal(content = []) {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         return (h("limel-portal", { visible: content.length > 0, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: content.length > 0, allowClicksElement: this.host, style: {
@@ -386,6 +401,7 @@ export class Picker {
         const query = event.detail;
         this.textValue = query;
         this.suggestionsEngaged = true;
+        this.forgetSuggestionFocus();
         this.debouncedSearch(query);
         // If the search-query is an empty string, bypass debouncing.
         if (query === '') {
@@ -435,6 +451,7 @@ export class Picker {
         if (!event.detail) {
             return;
         }
+        this.suggestionHasFocus = false;
         this.action.emit(event.detail.value);
         this.items = [];
     }
@@ -443,6 +460,7 @@ export class Picker {
      * Prevent focus if the picker has a value and does not support multiple values
      */
     handleInputFieldFocus() {
+        this.forgetSuggestionFocus();
         const query = this.textValue;
         this.debouncedSearch(query);
     }
@@ -480,7 +498,6 @@ export class Picker {
      * @param event - event
      */
     handleInputKeyDown(event) {
-        var _a;
         this.suggestionsEngaged = true;
         const isUp = event.key === ARROW_UP;
         const isDown = event.key === ARROW_DOWN;
@@ -494,28 +511,47 @@ export class Picker {
         if (!isUp && !isDown) {
             return;
         }
+        const position = isDown ? 'first' : 'last';
+        if (this.focusSuggestion(position)) {
+            event.preventDefault();
+            return;
+        }
+        this.suggestionToFocusWhenShown = position;
+    }
+    focusSuggestion(position) {
+        var _a;
         const list = (_a = document.querySelector(` #${this.portalId} limel-list[data-suggestions]`)) !== null && _a !== void 0 ? _a : document.querySelector(` #${this.portalId} limel-list`);
         if (!list) {
-            return;
+            return false;
         }
-        if (isDown) {
-            // Match by class only (not `:first-child`) so a leading
-            // `ListSeparator` doesn't shadow the first focusable item.
-            const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
-            if (!listElement) {
+        // Match by class only (not `:first-child`) so a leading
+        // `ListSeparator` doesn't shadow the first focusable item.
+        const items = list.shadowRoot.querySelectorAll(ENABLED_LIST_ITEM);
+        const item = position === 'first' ? items[0] : [...items].at(-1);
+        item === null || item === void 0 ? void 0 : item.focus();
+        this.suggestionHasFocus =
+            !!item && list.shadowRoot.activeElement === item;
+        return this.suggestionHasFocus;
+    }
+    focusSuggestionWhenShown(position) {
+        cancelAnimationFrame(this.suggestionFocusFrame);
+        let frames = 0;
+        const focusSuggestion = () => {
+            if (this.focusSuggestion(position)) {
                 return;
             }
-            event.preventDefault();
-            listElement.focus();
-            return;
-        }
-        const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-        const listElement = [...listItems].at(-1);
-        if (!listElement) {
-            return;
-        }
-        event.preventDefault();
-        listElement.focus();
+            frames += 1;
+            if (frames < MAX_FRAMES_TO_WAIT_FOR_LIST) {
+                this.suggestionFocusFrame =
+                    requestAnimationFrame(focusSuggestion);
+            }
+        };
+        this.suggestionFocusFrame = requestAnimationFrame(focusSuggestion);
+    }
+    forgetSuggestionFocus() {
+        this.suggestionHasFocus = false;
+        this.suggestionToFocusWhenShown = undefined;
+        cancelAnimationFrame(this.suggestionFocusFrame);
     }
     handleSearchResult(query, result) {
         var _a;
@@ -534,6 +570,11 @@ export class Picker {
         }
         this.items = this.prependSearchHeader(query, nextItems);
         this.loading = false;
+        const position = this.suggestionToFocusWhenShown;
+        this.suggestionToFocusWhenShown = undefined;
+        if (position && this.hasPickableItems(nextItems)) {
+            this.focusSuggestionWhenShown(position);
+        }
     }
     hasPickableItems(items) {
         return items.some((item) => !('separator' in item));
@@ -556,7 +597,8 @@ export class Picker {
     /**
      * Shared prelude for any flow that ends the current search session:
      * wipe the chip-set's visible text, reset the picker's `textValue`,
-     * and cancel any in-flight debounced search.
+     * cancel any in-flight debounced search, and forget that a suggestion
+     * has the focus, or that an arrow key is waiting for the suggestions.
      *
      * Used by `clearInputField` (which then drops the dropdown
      * entirely) and `resetSearchToDefault` (which re-runs the searcher
@@ -566,6 +608,7 @@ export class Picker {
         this.chipSet.emptyInput();
         this.textValue = '';
         this.debouncedSearch.cancel();
+        this.forgetSuggestionFocus();
     }
     clearInputField() {
         this.clearTextValue();

package/dist/esm/limel-badge_7.entry.js

@@ -640,10 +640,20 @@ const InputField = class {
                 this.showCompletions = false;
                 return;
             }
+            if (event.key === ARROW_UP && this.isKeyPressedOnFirstOption(event)) {
+                event.preventDefault();
+                this.setFocus();
+                return;
+            }
             if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
+        this.isKeyPressedOnFirstOption = (event) => {
+            const list = event.currentTarget;
+            const firstOption = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
+            return !!firstOption && event.composedPath().includes(firstOption);
+        };
         this.handleCloseMenu = () => {
             this.showCompletions = false;
         };