@limetech/lime-elements 40.18.2 → 40.18.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [40.18.3](https://github.com/Lundalogik/lime-elements/compare/v40.18.2...v40.18.3) (2026-10-30)
+
+### Bug Fixes
+
+
+* **input-field:** let Tab leave the field and Esc close the list ([aa83c1d](https://github.com/Lundalogik/lime-elements/commit/aa83c1d93d3acb1c22456fdceff0e22247b94320)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+* **input-field:** type in the field when a key is pressed on an option ([83611ae](https://github.com/Lundalogik/lime-elements/commit/83611aefe9b92aa3d512688a74a33ba5db6dd597)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+* **list:** leave the typed characters to the browser ([d831b6c](https://github.com/Lundalogik/lime-elements/commit/d831b6c1d861cfc8e6844b7793fd36bfa841cf78)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+* **picker:** let Tab leave the field while the list is open ([3be6096](https://github.com/Lundalogik/lime-elements/commit/3be6096c9a8a879a8dfeaacc00703f4c00e27e62)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+* **picker:** move to the suggestions with the down arrow, not to the actions ([7dba41d](https://github.com/Lundalogik/lime-elements/commit/7dba41da0922c252d464450fae31cdb0197466c8)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+* **picker:** type in the field when a key is pressed on a suggestion ([670db45](https://github.com/Lundalogik/lime-elements/commit/670db4592a4e2482543700f0c19404e8f5b4dd34)), closes [#4468](https://github.com/Lundalogik/lime-elements/issues/4468)
+
 ## [40.18.2](https://github.com/Lundalogik/lime-elements/compare/v40.18.1...v40.18.2) (2026-10-30)
 
 ### Bug Fixes

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

@@ -6,6 +6,7 @@ var randomString = require('./random-string-CFCtFh5l.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var keycodes = require('./keycodes-BQ_AERli.js');
 var linkHelper = require('./link-helper-DwlfFJVL.js');
+var typeahead = require('./typeahead-CnyIjog_.js');
 var config = require('./config-dit--4m5.js');
 var debounce = require('./debounce-DgDnRSlt.js');
 var component = require('./component-Cz24PdGy.js');
@@ -109,6 +110,7 @@ const inputFieldCss = () => `@charset "UTF-8";:host([type=url]) .mdc-text-field-
 
 const CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;
 const RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;
+const MAX_FRAMES_TO_WAIT_FOR_LIST = 20;
 const InputField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -453,41 +455,64 @@ const InputField = class {
             }
             return (index.h("span", { class: "lime-formatted-input lime-looks-like-input-value", "aria-hidden": this.readonly ? 'true' : undefined }, renderValue));
         };
-        /**
-         * Key handler for the input field
-         * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-         *
-         * @param event - event
-         */
         this.onKeyDown = (event) => {
-            this.showCompletions = true;
-            const isForwardTab = event.key === keycodes.TAB &&
+            if (event.key === keycodes.ESCAPE) {
+                this.closeListWithEscape(event);
+                return;
+            }
+            const isTab = event.key === keycodes.TAB &&
                 !event.altKey &&
                 !event.metaKey &&
-                !event.shiftKey;
-            const isUp = event.key === keycodes.ARROW_UP;
-            const isDown = event.key === keycodes.ARROW_DOWN;
-            if (event.key === keycodes.TAB && event.shiftKey) {
+                !event.ctrlKey;
+            if (isTab) {
                 this.showCompletions = false;
-            }
-            if (!isForwardTab && !isUp && !isDown) {
                 return;
             }
-            const list = document.querySelector(` #${this.portalId} limel-list`);
-            if (!list) {
+            const wasOpen = this.isSuggestionListOpen();
+            this.showCompletions = true;
+            if (event.key === keycodes.ARROW_DOWN || event.key === keycodes.ARROW_UP) {
+                this.moveIntoList(event, wasOpen);
+            }
+        };
+        this.moveIntoList = (event, wasOpen) => {
+            var _a;
+            if (!this.isSuggestionListOpen()) {
                 return;
             }
             event.preventDefault();
-            if (isForwardTab || isDown) {
-                const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
-                listElement.focus();
+            const position = event.key === keycodes.ARROW_DOWN ? 'first' : 'last';
+            if (wasOpen) {
+                (_a = this.getListOption(position)) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
-            if (!isUp) {
+            this.focusOptionWhenShown(position);
+        };
+        this.getListOption = (position) => {
+            const list = document.querySelector(` #${this.portalId} limel-list`);
+            return list === null || list === void 0 ? void 0 : list.shadowRoot.querySelector(`.mdc-deprecated-list-item:${position}-child`);
+        };
+        this.focusOptionWhenShown = (position) => {
+            let frames = 0;
+            const focusOption = () => {
+                const option = this.getListOption(position);
+                if ((option === null || option === void 0 ? void 0 : option.getClientRects().length) > 0) {
+                    option.focus();
+                    return;
+                }
+                frames += 1;
+                if (frames < MAX_FRAMES_TO_WAIT_FOR_LIST) {
+                    requestAnimationFrame(focusOption);
+                }
+            };
+            requestAnimationFrame(focusOption);
+        };
+        this.closeListWithEscape = (event) => {
+            if (!this.isSuggestionListOpen()) {
                 return;
             }
-            const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
-            listElement.focus();
+            event.preventDefault();
+            event.stopPropagation();
+            this.showCompletions = false;
         };
         this.handleCompletionChange = (event) => {
             event.stopPropagation();
@@ -504,10 +529,18 @@ const InputField = class {
             this.changeEmitter(event.detail.text);
             this.changeEmitter.flush();
         };
+        this.hasSuggestions = () => {
+            return (!this.readonly &&
+                this.type !== 'textarea' &&
+                this.completions.length > 0);
+        };
+        this.isSuggestionListOpen = () => {
+            return (this.hasSuggestions() &&
+                this.showCompletions &&
+                this.filterCompletions(this.getCurrentValue()).length > 0);
+        };
         this.renderAutocompleteList = () => {
-            if (this.readonly ||
-                this.type === 'textarea' ||
-                this.completions.length === 0) {
+            if (!this.hasSuggestions()) {
                 return;
             }
             const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
@@ -525,8 +558,14 @@ const InputField = class {
             return (index.h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
         };
         this.handleKeyDownInDropdown = (event) => {
-            const keyFound = [keycodes.TAB, keycodes.ESCAPE, keycodes.ENTER].includes(event.key);
-            if (keyFound) {
+            if (event.key === keycodes.ESCAPE) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setFocus();
+                this.showCompletions = false;
+                return;
+            }
+            if ([keycodes.TAB, keycodes.ENTER].includes(event.key) || typeahead.isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
@@ -684,10 +723,10 @@ const InputField = class {
         if (this.isInvalid()) {
             properties['aria-invalid'] = 'true';
         }
-        if (this.renderAutocompleteList()) {
+        if (this.hasSuggestions()) {
             properties['aria-controls'] = this.portalId;
         }
-        return (index.h(index.Host, { key: '3abb0e074f55f8e47f46cf77ed885797047e44b9' }, index.h("limel-notched-outline", { key: '0d25df2774e7cda39da90163b0832a1ea117d7c8', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, index.h("label", { key: 'a60a2bfcdafe232b32a0d67f972c3885fc5b6428', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (index.h(index.Host, { key: 'e09ee9e3102d6a15d0806602c65361001cd20c63' }, index.h("limel-notched-outline", { key: 'c2301d9fd1af41e8b4396dc5f2978e51b260fe2f', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, index.h("label", { key: '69e02e5df31a6ce10743c3c8a9e78c5765794a18', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

package/dist/cjs/limel-helper-line_3.cjs.entry.js

@@ -190,26 +190,16 @@ const List = class {
             this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
             this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
             this.mdcList = new component.MDCList(element);
-            // NOTE: This has no effect. It is kept as a marker rather than
-            // removed, so that its absence isn't mistaken for an oversight.
+            // MDC's typeahead (`hasTypeahead`) is left off, so that typed
+            // characters are not taken from a field with a list under it. The list
+            // test in `list.e2e.tsx` fails if it is turned on. `limel-select` has
+            // its own typeahead, see `src/util/typeahead.ts`.
             //
-            // MDC indexes each row for typeahead by looking for
-            // `.mdc-deprecated-list-item__primary-text` inside it, while
-            // `limel-list-item` renders its label as `<span class="label">`. MDC
-            // therefore builds an empty index, and typing does nothing.
-            //
-            // Do not "fix" this by adding MDC's class name to `limel-list-item`.
-            // That revives MDC's typeahead along with three behaviors that cannot
-            // be configured from the outside: a hard coded 300ms buffer, `Enter`
-            // being ignored for as long as that buffer lives (its `notifyAction`
-            // is guarded by `isTypeaheadInProgress`), and the space bar being
-            // excluded from matches. It would also collide with `limel-menu`,
-            // where single characters are used as item hotkeys.
-            //
-            // `limel-select` implements its own typeahead instead, see
-            // `src/util/typeahead.ts`. It intercepts typed characters in the
-            // capture phase on this very element, so they never reach MDC.
-            this.mdcList.hasTypeahead = true;
+            // Adding MDC's class name to `limel-list-item` does nothing while it is
+            // off. Turning it on as well would bring its 300ms buffer, `Enter`
+            // being ignored while the buffer lives and the space bar being left out
+            // of matches, none of which can be configured, and it would collide
+            // with the single characters that `limel-menu` uses as hotkeys.
         };
         /**
          * Focus the pressed list item directly, without scrolling.

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

@@ -5,6 +5,7 @@ var translations = require('./translations-CLSqfR3x.js');
 var dom = require('./dom-BWMDM6En.js');
 var keycodes = require('./keycodes-BQ_AERli.js');
 var randomString = require('./random-string-CFCtFh5l.js');
+var typeahead = require('./typeahead-CnyIjog_.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var debounce = require('./debounce-DgDnRSlt.js');
 require('./language-v-MMS6ym.js');
@@ -197,7 +198,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            index.h("limel-chip-set", Object.assign({ key: 'eed0789b538bd50638936e1c6ad7e9deaef954ec', 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 }, props)),
+            index.h("limel-chip-set", Object.assign({ key: 'c3f4fd001d63a287a8a9f447f7c9df65279fbc34', 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 }, props)),
             this.renderDropdown(),
         ];
     }
@@ -245,7 +246,7 @@ const Picker = class {
                     'is-on-top': this.actionPosition === 'top',
                     'is-at-bottom': this.actionPosition === 'bottom',
                     'has-position-sticky': this.actionScrollBehavior === 'sticky',
-                }, badgeIcons: true, type: 'selectable', onChange: this.handleActionListChange, items: this.actions.map(this.removeUnusedPropertiesOnAction) }),
+                }, badgeIcons: true, type: 'selectable', onChange: this.handleActionListChange, onKeyDown: this.onListKeyDown, items: this.actions.map(this.removeUnusedPropertiesOnAction) }),
         ];
     }
     removeUnusedPropertiesOnAction(action) {
@@ -309,7 +310,7 @@ const Picker = class {
         return index.h("p", { style: style }, text);
     }
     renderListResult() {
-        return (index.h("limel-list", { badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
+        return (index.h("limel-list", { "data-suggestions": "", badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
     }
     onListKeyDown(event) {
         if (event.key === keycodes.ESCAPE) {
@@ -321,7 +322,7 @@ const Picker = class {
             this.chipSet.setFocus();
             return;
         }
-        if ([keycodes.TAB, keycodes.ENTER].includes(event.key)) {
+        if ([keycodes.TAB, keycodes.ENTER].includes(event.key) || typeahead.isTextEditingKey(event)) {
             this.chipSet.setFocus();
         }
     }
@@ -450,10 +451,7 @@ const Picker = class {
      * @param event - event
      */
     handleInputKeyDown(event) {
-        const isForwardTab = event.key === keycodes.TAB &&
-            !event.altKey &&
-            !event.metaKey &&
-            !event.shiftKey;
+        var _a;
         const isUp = event.key === keycodes.ARROW_UP;
         const isDown = event.key === keycodes.ARROW_DOWN;
         const isEscape = event.key === keycodes.ESCAPE;
@@ -463,14 +461,14 @@ const Picker = class {
             this.handleEscape();
             return;
         }
-        if (!isForwardTab && !isUp && !isDown) {
+        if (!isUp && !isDown) {
             return;
         }
-        const list = document.querySelector(` #${this.portalId} limel-list`);
+        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;
         }
-        if (isForwardTab || isDown) {
+        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');
@@ -481,9 +479,6 @@ const Picker = class {
             listElement.focus();
             return;
         }
-        if (!isUp) {
-            return;
-        }
         const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
         const listElement = [...listItems].at(-1);
         if (!listElement) {

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

@@ -5,6 +5,7 @@ var device = require('./device-C9O7lYI9.js');
 var keycodes = require('./keycodes-BQ_AERli.js');
 var multiple = require('./multiple-DYfiga7l.js');
 var randomString = require('./random-string-CFCtFh5l.js');
+var typeahead = require('./typeahead-CnyIjog_.js');
 var renderListComponent = require('./render-list-component-BtAliHQp.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var component = require('./component-DNiVfYHV.js');
@@ -256,166 +257,6 @@ var MDCSelectHelperText = /** @class */ (function (_super) {
     return MDCSelectHelperText;
 }(ponyfill.MDCComponent));
 
-/**
- * These helpers implement "type to jump", the behavior a native `<select>` has:
- * typing characters moves to the option whose text starts with those
- * characters. Characters accumulate into a short-lived buffer, so typing
- * `n`, `e` finds "Netherlands" instead of re-matching on `n` every time.
- *
- * The matching itself is pure and stateless — all the state lives in a
- * `TypeaheadBuffer`, which owns the timer that discards the buffer once the
- * user stops typing.
- */
-/**
- * How long a buffer of typed characters is kept before it is discarded, in
- * milliseconds. Roughly matches a native `<select>`.
- */
-const TYPEAHEAD_BUFFER_TIMEOUT = 1000;
-/**
- * Returned by `findTypeaheadMatch` when nothing matched.
- */
-const NO_TYPEAHEAD_MATCH = -1;
-/**
- * Whether a keyboard event should be treated as a typed character.
- *
- * The space bar counts as a character here. Whether a *bare* space should
- * start a buffer, or keep whatever meaning it has in the consuming component,
- * is the consumer's decision.
- *
- * `shiftKey` is allowed, since capital letters are typed with it, and
- * `event.repeat` is allowed, since holding a key down cycles through matches
- * in a native `<select>` too.
- *
- * @param event - the keyboard event to inspect
- * @returns `true` when the event represents a typed character
- */
-function isTypeaheadKey(event) {
-    return (event.key.length === 1 &&
-        !event.altKey &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !event.isComposing);
-}
-/**
- * Find the candidate to move to for a given buffer of typed characters.
- *
- * Two different searches are used, mirroring a native `<select>`:
- * - When the buffer is a single character, possibly repeated (`b`, `bb`,
- *   `bbb`), only that character is matched and the search starts *after*
- *   `currentIndex`. Pressing the same key repeatedly therefore cycles through
- *   all candidates starting with it.
- * - Otherwise the whole buffer is matched and the search starts *at*
- *   `currentIndex`, so continuing to type on an already-matching candidate
- *   keeps it rather than jumping to the next one.
- *
- * Both searches wrap around the end of the list.
- *
- * @param candidates - the candidates to search, index-aligned with the rows
- * they are rendered as. Use `null` for rows that can never match, such as
- * separators, so that they still occupy their index.
- * @param buffer - the characters typed so far
- * @param currentIndex - the index to search from. Anything outside
- * `candidates` is treated as "no current candidate", and the search starts
- * from the beginning.
- * @returns the index of the matching candidate, or `NO_TYPEAHEAD_MATCH`
- */
-function findTypeaheadMatch(candidates, buffer, currentIndex) {
-    const count = candidates.length;
-    const query = buffer.toLowerCase();
-    if (!query || count === 0) {
-        return NO_TYPEAHEAD_MATCH;
-    }
-    const characters = [...query];
-    const cycles = isSingleDistinctCharacter(characters);
-    const needle = cycles ? characters[0] : query;
-    // Cycling starts one past the current candidate, so that pressing the same
-    // key again advances. Matching several characters starts at it, so that
-    // continuing to type keeps a candidate that already matches.
-    const offset = cycles ? 1 : 0;
-    const hasCurrent = currentIndex >= 0 && currentIndex < count;
-    const start = hasCurrent ? (currentIndex + offset) % count : 0;
-    for (let step = 0; step < count; step += 1) {
-        const index = (start + step) % count;
-        if (candidateMatches(candidates[index], needle)) {
-            return index;
-        }
-    }
-    return NO_TYPEAHEAD_MATCH;
-}
-/**
- * Whether a string consists of a single character, possibly repeated. Also
- * `true` for one character on its own, which is what makes a single key press
- * advance past the current candidate rather than re-matching it.
- *
- * Takes the characters already split apart, so that the caller and this
- * function agree on what "a character" is for anything outside the basic
- * multilingual plane.
- *
- * @param characters - the characters of the string
- * @returns `true` when every character is the same
- */
-function isSingleDistinctCharacter(characters) {
-    return characters.every((character) => character === characters[0]);
-}
-/**
- * @param candidate - the candidate to test, or `null` for a row that can
- * never match
- * @param needle - the lower cased characters to match
- * @returns `true` when the candidate starts with the given characters
- */
-function candidateMatches(candidate, needle) {
-    var _a;
-    if (!candidate || candidate.disabled) {
-        return false;
-    }
-    const text = (_a = candidate.text) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
-    return !!text && text.startsWith(needle);
-}
-/**
- * Accumulates typed characters, and discards them again once the user stops
- * typing for `TYPEAHEAD_BUFFER_TIMEOUT`.
- */
-class TypeaheadBuffer {
-    constructor(timeout = TYPEAHEAD_BUFFER_TIMEOUT) {
-        this.buffer = '';
-        this.timeout = timeout;
-    }
-    /**
-     * The characters typed so far.
-     */
-    get value() {
-        return this.buffer;
-    }
-    /**
-     * Whether nothing has been typed, or the buffer has been discarded.
-     */
-    get isEmpty() {
-        return this.buffer === '';
-    }
-    /**
-     * Append a character, and restart the timer that discards the buffer.
-     *
-     * @param character - the character to append
-     * @returns the buffer, including the appended character
-     */
-    append(character) {
-        this.buffer += character;
-        clearTimeout(this.resetTimeoutId);
-        this.resetTimeoutId = setTimeout(() => {
-            this.clear();
-        }, this.timeout);
-        return this.buffer;
-    }
-    /**
-     * Discard the buffer, and cancel the timer that would have discarded it.
-     */
-    clear() {
-        this.buffer = '';
-        clearTimeout(this.resetTimeoutId);
-        this.resetTimeoutId = undefined;
-    }
-}
-
 const TRIGGER_ID = 's-trigger';
 const LABEL_ID = 's-label';
 const SELECTED_TEXT_ID = 's-selected-text';
@@ -715,7 +556,7 @@ const Select = class {
         this.hasChanged = false;
         this.hasRichOptions = false;
         this.checkValid = false;
-        this.typeaheadBuffer = new TypeaheadBuffer();
+        this.typeaheadBuffer = new typeahead.TypeaheadBuffer();
         this.handleMenuTriggerKeyDown = (event) => {
             if (this.readonly) {
                 return;
@@ -723,7 +564,7 @@ const Select = class {
             // Typeahead runs first, so that a space extends an ongoing typeahead
             // instead of just opening the dropdown. A *bare* space is declined by
             // `handleTypeaheadKey`, and keeps its usual meaning below.
-            if (this.handleTypeaheadKey(event, NO_TYPEAHEAD_MATCH)) {
+            if (this.handleTypeaheadKey(event, typeahead.NO_TYPEAHEAD_MATCH)) {
                 return;
             }
             const isEnter = event.key === keycodes.ENTER;
@@ -868,7 +709,7 @@ const Select = class {
                 // without closing it, which brings us back here with a row
                 // already focused. Moving to the first option then would lose
                 // the user's place in the list after every pick.
-                if (this.getFocusedMenuItemIndex() !== NO_TYPEAHEAD_MATCH) {
+                if (this.getFocusedMenuItemIndex() !== typeahead.NO_TYPEAHEAD_MATCH) {
                     return;
                 }
                 this.focusFirstMenuItem(list);
@@ -1019,7 +860,7 @@ const Select = class {
         // The native dropdown does its own typeahead. Note that
         // `setMenuFocus` bails out there too, so a pending index would never
         // be consumed anyway.
-        if (this.shouldRenderNative() || !isTypeaheadKey(event)) {
+        if (this.shouldRenderNative() || !typeahead.isTypeaheadKey(event)) {
             return false;
         }
         // A space only continues an ongoing typeahead. On its own it keeps its
@@ -1036,8 +877,8 @@ const Select = class {
         const candidates = items.map((item) => ('separator' in item ? null : item));
         const buffer = this.typeaheadBuffer.append(event.key);
         const currentIndex = this.resolveTypeaheadIndex(items, focusedIndex);
-        const index = findTypeaheadMatch(candidates, buffer, currentIndex);
-        if (index !== NO_TYPEAHEAD_MATCH) {
+        const index = typeahead.findTypeaheadMatch(candidates, buffer, currentIndex);
+        if (index !== typeahead.NO_TYPEAHEAD_MATCH) {
             this.focusTypeaheadMatch(index);
         }
         return true;
@@ -1048,7 +889,7 @@ const Select = class {
      * @returns the index a typeahead search should start from
      */
     resolveTypeaheadIndex(items, focusedIndex) {
-        if (focusedIndex !== NO_TYPEAHEAD_MATCH) {
+        if (focusedIndex !== typeahead.NO_TYPEAHEAD_MATCH) {
             return focusedIndex;
         }
         // Typed again before focus had time to land in the dropdown.
@@ -1102,7 +943,7 @@ const Select = class {
         const focused = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
         const row = focused === null || focused === void 0 ? void 0 : focused.closest('[data-index]');
         const index = Number.parseInt((_c = row === null || row === void 0 ? void 0 : row.dataset.index) !== null && _c !== void 0 ? _c : '', 10);
-        return Number.isNaN(index) ? NO_TYPEAHEAD_MATCH : index;
+        return Number.isNaN(index) ? typeahead.NO_TYPEAHEAD_MATCH : index;
     }
     resetTypeahead() {
         this.typeaheadBuffer.clear();