@limetech/lime-elements 40.18.1 → 40.18.3

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

@@ -2,8 +2,9 @@ import { r as registerInstance, c as createEvent, h, a as getElement, H as Host
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-CIf8aGSd.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { g as getIconName, b as getIconColor } from './get-icon-props-CgNJbSP4.js';
-import { T as TAB, A as ARROW_UP, b as ARROW_DOWN, E as ESCAPE, a as ENTER, f as SPACE, c as ARROW_LEFT, d as ARROW_RIGHT } from './keycodes-Bu6-QXrA.js';
+import { E as ESCAPE, b as ARROW_DOWN, A as ARROW_UP, T as TAB, a as ENTER, f as SPACE, c as ARROW_LEFT, d as ARROW_RIGHT } from './keycodes-Bu6-QXrA.js';
 import { b as getHref, a as getTarget, g as getRel } from './link-helper-5KsJICvh.js';
+import { i as isTextEditingKey } from './typeahead-DOlnT3wh.js';
 import { g as globalConfig } from './config-Dnt5w_Bp.js';
 import { d as debounce } from './debounce-B67JMchz.js';
 import { M as MDCTextField } from './component-CVihTrav.js';
@@ -107,6 +108,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) {
         registerInstance(this, hostRef);
@@ -451,41 +453,64 @@ const InputField = class {
             }
             return (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 === TAB &&
+            if (event.key === ESCAPE) {
+                this.closeListWithEscape(event);
+                return;
+            }
+            const isTab = event.key === TAB &&
                 !event.altKey &&
                 !event.metaKey &&
-                !event.shiftKey;
-            const isUp = event.key === ARROW_UP;
-            const isDown = event.key === ARROW_DOWN;
-            if (event.key === 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 === ARROW_DOWN || event.key === 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 === 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();
@@ -502,10 +527,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');
@@ -523,8 +556,14 @@ const InputField = class {
             return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
         };
         this.handleKeyDownInDropdown = (event) => {
-            const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
-            if (keyFound) {
+            if (event.key === ESCAPE) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setFocus();
+                this.showCompletions = false;
+                return;
+            }
+            if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
@@ -682,10 +721,10 @@ const InputField = class {
         if (this.isInvalid()) {
             properties['aria-invalid'] = 'true';
         }
-        if (this.renderAutocompleteList()) {
+        if (this.hasSuggestions()) {
             properties['aria-controls'] = this.portalId;
         }
-        return (h(Host, { key: '3abb0e074f55f8e47f46cf77ed885797047e44b9' }, 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 }, 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 (h(Host, { key: 'e09ee9e3102d6a15d0806602c65361001cd20c63' }, 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 }, 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/esm/limel-callout.entry.js

@@ -40,7 +40,7 @@ function getHeading(heading, type = 'note', language = 'en') {
     }
 }
 
-const calloutCss = () => `*,*::before,*::after{box-sizing:border-box;min-height:0;min-width:0}:host(limel-callout){box-sizing:border-box;display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-contrast-100))   );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-gray-default))   )}:host([type=important]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-sky-default))   )}:host([type=tip]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-green-default))   )}:host([type=caution]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-orange-light))   )}:host([type=warning]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-red-dark))   )}.side{padding:0.25rem;position:relative}.side:before{content:"";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}`;
+const calloutCss = () => `*,*::before,*::after{box-sizing:border-box;min-height:0;min-width:0}:host(limel-callout){box-sizing:border-box;display:flex;border-radius:0.5rem;overflow:hidden;border:0.0625rem solid color-mix(in srgb, var(--limel-callout-tint-color), transparent 70%);--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-contrast-100))   );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-gray-default))   )}:host([type=important]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-sky-default))   )}:host([type=tip]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-green-default))   )}:host([type=caution]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-orange-light))   )}:host([type=warning]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-red-dark))   )}.side{padding:0.25rem;position:relative}.side:before{content:"";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}`;
 
 const Callout = class {
     constructor(hostRef) {

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

@@ -188,26 +188,16 @@ const List = class {
             this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
             this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
             this.mdcList = new 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/esm/limel-picker.entry.js

@@ -3,6 +3,7 @@ import { t as translations } from './translations-Drl5LNAD.js';
 import { i as isDescendant } from './dom-B9Ofc5RB.js';
 import { E as ESCAPE, T as TAB, a as ENTER, A as ARROW_UP, b as ARROW_DOWN } from './keycodes-Bu6-QXrA.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import { i as isTextEditingKey } from './typeahead-DOlnT3wh.js';
 import { a as getIconFillColor, g as getIconName } from './get-icon-props-CgNJbSP4.js';
 import { d as debounce } from './debounce-B67JMchz.js';
 import './language-ChagAaNf.js';
@@ -195,7 +196,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            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)),
+            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(),
         ];
     }
@@ -243,7 +244,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) {
@@ -307,7 +308,7 @@ const Picker = class {
         return h("p", { style: style }, text);
     }
     renderListResult() {
-        return (h("limel-list", { badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
+        return (h("limel-list", { "data-suggestions": "", badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
     }
     onListKeyDown(event) {
         if (event.key === ESCAPE) {
@@ -319,7 +320,7 @@ const Picker = class {
             this.chipSet.setFocus();
             return;
         }
-        if ([TAB, ENTER].includes(event.key)) {
+        if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
             this.chipSet.setFocus();
         }
     }
@@ -448,10 +449,7 @@ const Picker = class {
      * @param event - event
      */
     handleInputKeyDown(event) {
-        const isForwardTab = event.key === TAB &&
-            !event.altKey &&
-            !event.metaKey &&
-            !event.shiftKey;
+        var _a;
         const isUp = event.key === ARROW_UP;
         const isDown = event.key === ARROW_DOWN;
         const isEscape = event.key === ESCAPE;
@@ -461,14 +459,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');
@@ -479,9 +477,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/esm/limel-select.entry.js

@@ -3,6 +3,7 @@ import { b as isMobileDevice } from './device-B-tmXAXV.js';
 import { b as ARROW_DOWN, A as ARROW_UP, S as SPACEBAR, a as ENTER } from './keycodes-Bu6-QXrA.js';
 import { i as isMultiple } from './multiple-BylwpiM6.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
+import { T as TypeaheadBuffer, N as NO_TYPEAHEAD_MATCH, a as isTypeaheadKey, f as findTypeaheadMatch } from './typeahead-DOlnT3wh.js';
 import { r as renderListComponent } from './render-list-component-J1IzNpbv.js';
 import { b as getIconColor, g as getIconName } from './get-icon-props-CgNJbSP4.js';
 import { M as MDCFloatingLabel } from './component-CyFeUQ0l.js';
@@ -254,166 +255,6 @@ var MDCSelectHelperText = /** @class */ (function (_super) {
     return MDCSelectHelperText;
 }(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';

package/dist/esm/typeahead-DOlnT3wh.js

@@ -0,0 +1,188 @@
+import { B as BACKSPACE, D as DELETE, S as SPACEBAR } from './keycodes-Bu6-QXrA.js';
+
+/**
+ * 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.
+ *
+ * `isTextEditingKey` is for the other side of a list: a field with a list
+ * under it uses it to tell which keys belong to the field.
+ */
+/**
+ * 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;
+    }
+}
+/**
+ * Whether a keyboard event edits text: a typed character, or Backspace or
+ * Delete. A bare space is left out, since on an option of a list it selects
+ * the option.
+ *
+ * A character typed with Option, or with AltGr, which is reported as Ctrl and
+ * Alt together, counts, since many layouts type `@` and `$` that way. A
+ * shortcut with Ctrl or Meta does not.
+ *
+ * @param event - the keyboard event to inspect
+ * @returns `true` when the event edits text
+ */
+function isTextEditingKey(event) {
+    if (event.key === BACKSPACE || event.key === DELETE) {
+        return true;
+    }
+    const isCharacter = event.key.length === 1 &&
+        event.key !== SPACEBAR &&
+        !event.metaKey &&
+        !event.isComposing;
+    return isCharacter && (!event.ctrlKey || event.altKey);
+}
+
+export { NO_TYPEAHEAD_MATCH as N, TypeaheadBuffer as T, isTypeaheadKey as a, findTypeaheadMatch as f, isTextEditingKey as i };