@limetech/lime-elements 39.44.4 → 39.44.6

package/dist/cjs/{markdown-parser-F3YRMjcy.js → markdown-parser-ChnRAxpZ.js}

@@ -33792,26 +33792,31 @@ function sanitizeStyle(node) {
     var _a;
     if (node.tagName && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.style)) {
         // Sanitize the 'style' attribute of the node.
-        node.properties.style = sanitizeStyleValue(node.properties.style);
+        node.properties.style = sanitizeStyleValue(node.properties.style, node.tagName);
     }
 }
 /**
  * Applies a whitelist to the CSS properties in the input string.
  * Any CSS properties not in the whitelist will be removed.
  *
+ * A zero width is also removed from `table` elements. Some HTML sources
+ * (e.g. Google Sheets) set `width: 0px` on the table element and define
+ * the real column widths in `colgroup`; a zero width forces the table
+ * down to its min-content size, crushing every column to its longest
+ * word. A zero width on a table can only ever harm rendering, since
+ * auto layout already floors the table at min-content.
+ *
  * @param styleValue - a string with CSS properties and values
+ * @param tagName - tag name of the element the style belongs to
  * @returns a sanitized version of the input string
  */
-/**
- *
- * @param styleValue
- */
-function sanitizeStyleValue(styleValue) {
+function sanitizeStyleValue(styleValue, tagName) {
     try {
         const css = StyleToObject(styleValue);
         const normalizedCss = normalizeBackgroundColor(css);
         return Object.entries(normalizedCss)
             .filter(([key]) => allowedCssProperties.includes(key))
+            .filter(([key, value]) => !isCollapsedTableWidth(tagName, key, value))
             .map(([key, value]) => `${key}: ${value}`)
             .join('; ');
     }
@@ -33820,6 +33825,12 @@ function sanitizeStyleValue(styleValue) {
         return '';
     }
 }
+function isCollapsedTableWidth(tagName, property, value) {
+    return tagName === 'table' && property === 'width' && isZeroLength(value);
+}
+function isZeroLength(value) {
+    return Number.parseFloat(value) === 0;
+}
 /**
  * Returns a copy of the input object with the `background` property removed.
  * If the `background` property's value was a valid CSS color value, the
@@ -34119,6 +34130,11 @@ function getWhiteList(allowedComponents) {
         // elements only.
         clobberPrefix: '', strip: [...((_b = index$2.defaultSchema.strip) !== null && _b !== void 0 ? _b : []), 'style'], tagNames: [
             ...(index$2.defaultSchema.tagNames || []),
+            // Table column definitions carry the column widths for tables
+            // from sources like Google Sheets, where the table element
+            // itself has no usable width.
+            'colgroup',
+            'col',
             ...allowedComponents.map((component) => component.tagName),
         ], attributes: Object.assign(Object.assign({}, index$2.defaultSchema.attributes), { p: [
                 ...((_c = index$2.defaultSchema.attributes.p) !== null && _c !== void 0 ? _c : []),

package/dist/collection/components/list/list.js

@@ -50,6 +50,25 @@ export class List {
             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 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;
         };
         /**

package/dist/collection/components/markdown/markdown-parser.js

@@ -107,6 +107,11 @@ function getWhiteList(allowedComponents) {
         // elements only.
         clobberPrefix: '', strip: [...((_b = defaultSchema.strip) !== null && _b !== void 0 ? _b : []), 'style'], tagNames: [
             ...(defaultSchema.tagNames || []),
+            // Table column definitions carry the column widths for tables
+            // from sources like Google Sheets, where the table element
+            // itself has no usable width.
+            'colgroup',
+            'col',
             ...allowedComponents.map((component) => component.tagName),
         ], attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { p: [
                 ...((_c = defaultSchema.attributes.p) !== null && _c !== void 0 ? _c : []),

package/dist/collection/components/markdown/markdown.js

@@ -28,6 +28,7 @@ import { adaptColorContrast } from "../../util/adapt-color-contrast";
  * @exampleComponent limel-example-markdown-code
  * @exampleComponent limel-example-markdown-footnotes
  * @exampleComponent limel-example-markdown-tables
+ * @exampleComponent limel-example-markdown-html-tables
  * @exampleComponent limel-example-markdown-html
  * @exampleComponent limel-example-markdown-keys
  * @exampleComponent limel-example-markdown-blockquotes
@@ -143,7 +144,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: '79583ca7783472254c84899b2709d20e21bb442f' }, h("div", { key: 'd06c81a4098a25b97a6ed56d2830205228933c6e', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: '527dafa3c663a214860ebf7bae33f568f21d4b2d' }, h("div", { key: '79a0d02a4118e94723c6ddfbb94a91875dfe3d2b', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/markdown/sanitize-style.js

@@ -10,26 +10,31 @@ export function sanitizeStyle(node) {
     var _a;
     if (node.tagName && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.style)) {
         // Sanitize the 'style' attribute of the node.
-        node.properties.style = sanitizeStyleValue(node.properties.style);
+        node.properties.style = sanitizeStyleValue(node.properties.style, node.tagName);
     }
 }
 /**
  * Applies a whitelist to the CSS properties in the input string.
  * Any CSS properties not in the whitelist will be removed.
  *
+ * A zero width is also removed from `table` elements. Some HTML sources
+ * (e.g. Google Sheets) set `width: 0px` on the table element and define
+ * the real column widths in `colgroup`; a zero width forces the table
+ * down to its min-content size, crushing every column to its longest
+ * word. A zero width on a table can only ever harm rendering, since
+ * auto layout already floors the table at min-content.
+ *
  * @param styleValue - a string with CSS properties and values
+ * @param tagName - tag name of the element the style belongs to
  * @returns a sanitized version of the input string
  */
-/**
- *
- * @param styleValue
- */
-export function sanitizeStyleValue(styleValue) {
+export function sanitizeStyleValue(styleValue, tagName) {
     try {
         const css = parse(styleValue);
         const normalizedCss = normalizeBackgroundColor(css);
         return Object.entries(normalizedCss)
             .filter(([key]) => allowedCssProperties.includes(key))
+            .filter(([key, value]) => !isCollapsedTableWidth(tagName, key, value))
             .map(([key, value]) => `${key}: ${value}`)
             .join('; ');
     }
@@ -38,6 +43,12 @@ export function sanitizeStyleValue(styleValue) {
         return '';
     }
 }
+function isCollapsedTableWidth(tagName, property, value) {
+    return tagName === 'table' && property === 'width' && isZeroLength(value);
+}
+function isZeroLength(value) {
+    return Number.parseFloat(value) === 0;
+}
 /**
  * Returns a copy of the input object with the `background` property removed.
  * If the `background` property's value was a valid CSS color value, the

package/dist/collection/components/select/select.js

@@ -2,11 +2,23 @@ import { MDCFloatingLabel } from "@material/floating-label";
 import { MDCSelectHelperText } from "@material/select/helper-text";
 import { h, } from "@stencil/core";
 import { isMobileDevice } from "../../util/device";
-import { ENTER, SPACE } from "../../util/keycodes";
+import { ENTER, SPACEBAR } from "../../util/keycodes";
 import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
-import { SelectTemplate, triggerIconColorWarning } from "./select.template";
+import { findTypeaheadMatch, isTypeaheadKey, NO_TYPEAHEAD_MATCH, TypeaheadBuffer, } from "../../util/typeahead";
+import { createMenuItems, SelectTemplate, triggerIconColorWarning, } from "./select.template";
 /**
+ * ## Keyboard
+ *
+ * Typing characters jumps to the option whose text starts with them, the way
+ * a native `<select>` does. Characters accumulate for a short while, so typing
+ * `n`, `e` finds "Netherlands" rather than the next option starting with `n`.
+ * Pressing the same character repeatedly cycles through all options starting
+ * with it. This works both while the dropdown is open, and while the closed
+ * component has focus — in which case the dropdown opens with the match
+ * highlighted. Typing only moves the highlight; the value is not changed until
+ * the option is picked with `Enter` or a click.
+ *
  * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
@@ -26,6 +38,15 @@ export class Select {
     updateHasPrimaryComponent() {
         this.hasPrimaryComponentMemo = this.computeHasPrimaryComponent();
     }
+    /**
+     * `options` and `required` are the inputs that decide which rows the
+     * dropdown renders, and therefore which row an index refers to. When
+     * either changes, a buffered typeahead match no longer points at what the
+     * user was aiming for.
+     */
+    resetTypeaheadOnItemsChange() {
+        this.resetTypeahead();
+    }
     constructor() {
         /**
          * Set to `true` to make the field disabled.
@@ -57,10 +78,51 @@ export class Select {
         this.hasChanged = false;
         this.hasPrimaryComponentMemo = false;
         this.checkValid = false;
+        this.typeaheadBuffer = new TypeaheadBuffer();
+        this.handleMenuTriggerKeyDown = (event) => {
+            // 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)) {
+                return;
+            }
+            const isEnter = event.key === ENTER;
+            const isSpace = event.key === SPACEBAR;
+            if (!this.menuOpen && (isSpace || isEnter)) {
+                event.stopPropagation();
+                event.preventDefault();
+                // `preventDefault` cancels the activation click that the trigger
+                // `button` would otherwise synthesize, so the menu has to be
+                // opened here rather than through the click handler.
+                this.openMenu();
+            }
+        };
+        this.setListElement = (element) => {
+            var _a, _b;
+            if (this.list === element) {
+                return;
+            }
+            (_a = this.list) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleListKeyDownCapture, true);
+            this.list = element;
+            (_b = this.list) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleListKeyDownCapture, true);
+        };
+        /**
+         * Key handler for the dropdown, in the capture phase.
+         *
+         * `MDCList` listens for `keydown` on the `ul` inside `limel-list`'s shadow
+         * root, so capturing on the `limel-list` element itself is the only place
+         * a typed character can be stopped before MDC sees it. It has to be
+         * stopped: MDC would add it to its own typeahead buffer, which suppresses
+         * selection with `Enter` for as long as that buffer lives, and it treats
+         * the space bar as a selection.
+         *
+         * @param event - the key that was pressed
+         */
+        this.handleListKeyDownCapture = (event) => {
+            this.handleTypeaheadKey(event, this.getFocusedMenuItemIndex());
+        };
         this.handleMenuChange = this.handleMenuChange.bind(this);
         this.handleNativeChange = this.handleNativeChange.bind(this);
-        this.handleMenuTriggerKeyPress =
-            this.handleMenuTriggerKeyPress.bind(this);
         this.openMenu = this.openMenu.bind(this);
         this.closeMenu = this.closeMenu.bind(this);
         this.portalId = createRandomString();
@@ -96,6 +158,7 @@ export class Select {
     }
     disconnectedCallback() {
         this.cancelPendingFocus();
+        this.resetTypeahead();
         if (this.mdcFloatingLabel) {
             this.mdcFloatingLabel.destroy();
         }
@@ -110,7 +173,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '8f65bfbadfa797644b4d458452e2eceac2dbcda8', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '97e6b0b033a487e26ab7e4abe7165837ebe08911', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {
@@ -145,6 +208,21 @@ export class Select {
                 if (!this.menuOpen) {
                     return;
                 }
+                // Consumed on read, so that a later, unrelated re-render
+                // cannot resurrect a stale index and yank focus.
+                const typeaheadIndex = this.pendingTypeaheadIndex;
+                this.pendingTypeaheadIndex = undefined;
+                if (typeaheadIndex !== undefined &&
+                    this.focusMenuItemAtIndex(list, typeaheadIndex)) {
+                    return;
+                }
+                // Picking an option while `multiple` re-renders the dropdown
+                // 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) {
+                    return;
+                }
                 this.focusFirstMenuItem(list);
             });
             this.focusObserver.observe(list);
@@ -167,6 +245,30 @@ export class Select {
             firstItem.focus({ preventScroll: true });
         }
     }
+    /**
+     * Focus the row at a given index in the dropdown.
+     *
+     * The rows only become focusable once `limel-list` has set up `MDCList`,
+     * which is what gives them a `tabindex`. Callers use the return value to
+     * fall back to `pendingTypeaheadIndex` when that has not happened yet.
+     *
+     * @param list - the `limel-list` of the dropdown
+     * @param index - the index of the row, as rendered in its `data-index`
+     * @returns whether the row could be focused
+     */
+    focusMenuItemAtIndex(list, index) {
+        var _a;
+        const item = (_a = list === null || list === void 0 ? void 0 : list.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index}"]`);
+        if (!item) {
+            return false;
+        }
+        // Scrolled explicitly, and only within the dropdown: letting `focus()`
+        // scroll would scroll the page, since the dropdown is rendered into a
+        // portal that is absolutely positioned on the `body`.
+        item.focus({ preventScroll: true });
+        item.scrollIntoView({ block: 'nearest' });
+        return list.shadowRoot.activeElement === item;
+    }
     setTriggerFocus() {
         const trigger = this.host.shadowRoot.querySelector('.limel-select-trigger');
         trigger.focus();
@@ -218,6 +320,7 @@ export class Select {
         this.change.emit(option);
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
     openMenu() {
@@ -251,17 +354,111 @@ export class Select {
     closeMenu() {
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
-    handleMenuTriggerKeyPress(event) {
-        const isEnter = event.key === ENTER;
-        const isSpace = event.key === SPACE;
-        if (!this.menuOpen && (isSpace || isEnter)) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.menuOpen = true;
+    /**
+     * Move the highlight to the option matching the characters typed so far,
+     * the way a native `<select>` does. Never changes the value — the option
+     * still has to be picked with `Enter` or a click.
+     *
+     * @param event - the key that was pressed
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns whether the key was handled as typeahead
+     */
+    handleTypeaheadKey(event, focusedIndex) {
+        // The native dropdown on mobile devices does its own typeahead. Note
+        // that `setMenuFocus` bails out on mobile too, so a pending index
+        // would never be consumed there.
+        if (this.isMobileDevice || !isTypeaheadKey(event)) {
+            return false;
+        }
+        // A space only continues an ongoing typeahead. On its own it keeps its
+        // usual meaning of opening the dropdown, or selecting the focused
+        // option.
+        if (event.key === SPACEBAR && this.typeaheadBuffer.isEmpty) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // Derived per key press rather than cached, so that the indices always
+        // refer to the rows the dropdown renders right now.
+        const items = createMenuItems(this.options, this.value, this.required);
+        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) {
+            this.focusTypeaheadMatch(index);
+        }
+        return true;
+    }
+    /**
+     * @param items - the items of the dropdown
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns the index a typeahead search should start from
+     */
+    resolveTypeaheadIndex(items, focusedIndex) {
+        if (focusedIndex !== NO_TYPEAHEAD_MATCH) {
+            return focusedIndex;
+        }
+        // Typed again before focus had time to land in the dropdown.
+        if (this.pendingTypeaheadIndex !== undefined) {
+            return this.pendingTypeaheadIndex;
+        }
+        // Falls back to the selected option, so that typing continues from
+        // wherever the highlight already is. `findIndex` returning `-1` for a
+        // select without a value is exactly the "no current row" that
+        // `findTypeaheadMatch` expects.
+        return items.findIndex((item) => !('separator' in item) && item.selected);
+    }
+    focusTypeaheadMatch(index) {
+        // Overwrites any index still pending from an earlier character, even
+        // when this one can be focused right away. Opening the dropdown queues
+        // a `setMenuFocus` that waits for it to become visible, and someone
+        // typing quickly gets the next character in before that resolves;
+        // leaving the earlier index in place would let the queued focus apply
+        // it on top of this newer match.
+        this.pendingTypeaheadIndex = index;
+        if (this.menuOpen && this.focusMenuItemAtIndex(this.list, index)) {
+            // Focus landed synchronously, so this index has already done its
+            // job. Clearing it — rather than leaving it for `setMenuFocus` to
+            // consume later — stops it from being replayed by some unrelated
+            // future re-render, such as picking an option in a `multiple`
+            // select, after the user has since moved focus elsewhere with the
+            // arrow keys. A `setMenuFocus` still queued from opening the
+            // dropdown a moment ago is unaffected: it finds this row already
+            // focused and leaves it alone, below.
+            this.pendingTypeaheadIndex = undefined;
+            return;
+        }
+        if (this.menuOpen) {
+            // Already open, so no re-render is coming that would trigger
+            // `componentDidUpdate`. Schedule the focus explicitly.
+            this.setMenuFocus();
+        }
+        else {
+            this.openMenu();
         }
     }
+    /**
+     * @returns the index of the focused row of the dropdown, or
+     * `NO_TYPEAHEAD_MATCH` when no row has focus
+     */
+    getFocusedMenuItemIndex() {
+        var _a, _b, _c;
+        // Deliberately not `event.target`: a listener on the `limel-list`
+        // element sees events from inside its shadow root retargeted to the
+        // element itself, never to the row that was actually focused.
+        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;
+    }
+    resetTypeahead() {
+        this.typeaheadBuffer.clear();
+        this.pendingTypeaheadIndex = undefined;
+    }
     handleNativeChange(event) {
         event.stopPropagation();
         const element = this.host.shadowRoot.querySelector('select.limel-select__native-control');
@@ -543,6 +740,12 @@ export class Select {
             }, {
                 "propName": "options",
                 "methodName": "updateHasPrimaryComponent"
+            }, {
+                "propName": "options",
+                "methodName": "resetTypeaheadOnItemsChange"
+            }, {
+                "propName": "required",
+                "methodName": "resetTypeaheadOnItemsChange"
             }, {
                 "propName": "menuOpen",
                 "methodName": "watchOpen"

package/dist/collection/components/select/select.template.js

@@ -52,7 +52,7 @@ const SelectValue = (props) => {
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -80,7 +80,7 @@ const MenuDropdown = (props) => {
             display: 'flex',
             'min-width': '100%',
             width: 'fit-content',
-        } }, h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
+        } }, h("limel-list", { ref: props.listRef, items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
     const options = props.options
@@ -103,7 +103,21 @@ function isSelected(option, value) {
     }
     return option.value === value.value;
 }
-function createMenuItems(options, value, selectIsRequired = false) {
+/**
+ * Create the items for the dropdown.
+ *
+ * The returned array is index-aligned with the `data-index` attribute that
+ * `limel-list` renders on each row. Separators are included, and occupy an
+ * index. Anything that needs to address a row by index — such as the
+ * typeahead in `select.tsx` — must derive its indices from this same array.
+ *
+ * @param options - the options of the select
+ * @param value - the currently selected option or options
+ * @param selectIsRequired - whether the select requires a value, in which
+ * case the "empty" option is left out
+ * @returns the items to render in the dropdown
+ */
+export function createMenuItems(options, value, selectIsRequired = false) {
     const menuOptionFilter = getMenuOptionFilter(selectIsRequired);
     return options.filter(menuOptionFilter).map((option) => {
         if ('separator' in option) {

package/dist/collection/util/keycodes.js

@@ -3,7 +3,10 @@
 export const TAB = 'Tab';
 export const ENTER = 'Enter';
 export const ESCAPE = 'Escape';
+/** `KeyboardEvent.code` for the space bar. NOT a `KeyboardEvent.key`. */
 export const SPACE = 'Space';
+/** `KeyboardEvent.key` for the space bar. */
+export const SPACEBAR = ' ';
 export const BACKSPACE = 'Backspace';
 export const DELETE = 'Delete';
 export const ARROW_UP = 'ArrowUp';