@limetech/lime-elements 40.21.0 → 40.22.0

package/dist/collection/components/chart/options.js

@@ -1,12 +1,12 @@
 import { format } from "echarts/core";
-import { formatValue, getAxisRange, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
+import { getAxisRange, getDateRange, getDateTicks, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
+import { formatShare, formatValue, getAxisValueFormatter, } from "./format";
 const DOT_SIZE = 8;
 const LINE_DOT_SIZE = 6;
 const CONNECTOR_WIDTH = 2;
 const DIMMED_OPACITY = 0.4;
 const AREA_OPACITY = 0.4;
 const PADDING = 8;
-const PERCENT_DECIMALS = 2;
 const NPS_MIN = -100;
 const NPS_MAX = 100;
 const NPS_START_ANGLE = 200;
@@ -96,8 +96,8 @@ export function getItemLabel(settings, index) {
         return item.text;
     }
     const whole = getWholeRange(settings.items, settings.maxValue);
-    const share = getShare(item, whole).toFixed(PERCENT_DECIMALS);
-    return `${item.text} (${share}%)`;
+    const share = formatShare(getShare(item, whole), settings.language);
+    return `${item.text} (${share})`;
 }
 /**
  * The tooltip of an item, as HTML: its label and its value.
@@ -109,7 +109,7 @@ export function getTooltip(settings, index) {
     if (!item) {
         return '';
     }
-    return [getItemLabel(settings, index), formatValue(item, settings.type)]
+    return [getItemLabel(settings, index), formatValue(item, settings)]
         .map((text) => format.encodeHTML(text))
         .join('<br/>');
 }
@@ -138,12 +138,17 @@ function drawSeries(settings, theme, itemSpace) {
 }
 function drawOnAxes(settings, theme, itemSpace) {
     const { items, orientation } = settings;
-    const range = getAxisRange(items, settings.maxValue, settings.axisIncrement);
+    const range = settings.valueFormat === 'date'
+        ? getDateRange(items.flatMap((item) => [
+            getMinimumValue(item),
+            getMaximumValue(item),
+        ]), settings.maxValue)
+        : getAxisRange(items, settings.maxValue, settings.axisIncrement);
     const itemTextAxis = getItemTextAxis(settings);
     const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
             itemSpace &&
             getItemTextLayout(itemTextAxis, itemSpace))), axisTick: hidden, axisLine: { lineStyle: { color: theme.axisLineColor } } }), getAxisName(settings, settings.itemsLabel, theme));
-    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const { series, seriesIndex } = getAxisSeries(settings, theme);
     const option = {
         grid: getGrid(theme),
@@ -306,10 +311,15 @@ function getRangeStarts(items) {
 }
 function drawScatter(settings, theme) {
     const { items } = settings;
-    const ranges = getScatterRanges(items);
+    const ranges = settings.valueFormat === 'date'
+        ? {
+            x: getDateRange(items.map((item) => getXValue(item))),
+            y: getDateRange(items.map((item) => getYValue(item))),
+        }
+        : getScatterRanges(items);
     const landscape = settings.orientation === 'landscape';
-    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), theme);
-    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), theme);
+    const firstAxis = getValueAxis(ranges.x, getAxisName(settings, settings.itemsLabel, theme), settings, theme);
+    const secondAxis = getValueAxis(ranges.y, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
     const scatter = {
         type: 'scatter',
         symbolSize: theme.scatterItemSize,
@@ -531,8 +541,10 @@ function getGrid(theme) {
         borderWidth: 0,
     };
 }
-function getValueAxis(range, name, theme) {
-    return Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: range.increment, axisLabel: { show: true, color: theme.textColor }, axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }, name);
+function getValueAxis(range, name, settings, theme) {
+    const dates = settings.valueFormat === 'date' && getDateTicks(range);
+    const ticks = dates && { customValues: dates.values };
+    return Object.assign(Object.assign(Object.assign({ type: 'value', min: range.minValue, max: range.maxValue, interval: dates ? undefined : range.increment, axisLabel: Object.assign({ show: true, color: theme.textColor, formatter: getAxisValueFormatter(range, settings, dates || undefined) }, ticks) }, (ticks && { axisTick: ticks })), { axisLine: { lineStyle: { color: theme.axisLineColor } }, splitLine: { lineStyle: { color: theme.axisLineColor } } }), name);
 }
 function getAxisName(settings, name, theme) {
     if (!settings.displayAxisLabels) {
@@ -545,7 +557,7 @@ function getAxisName(settings, name, theme) {
     };
 }
 function getValueLabel(settings, theme) {
-    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type) });
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings) });
 }
 function getLabelStyle(theme) {
     return { color: theme.textColor, textBorderWidth: 0 };
@@ -556,7 +568,7 @@ function getPointLabel(settings, item) {
         parts.push(item.text);
     }
     if (settings.displayItemValue) {
-        parts.push(formatValue(item, settings.type));
+        parts.push(formatValue(item, settings));
     }
     return parts.join(' ');
 }

package/dist/collection/components/chart/scale.js

@@ -1,5 +1,6 @@
 const PERCENT = 100;
 const STEP_COUNT = 10;
+const DAY = 24 * 60 * 60 * 1000;
 /**
  * The most steps that an `axisIncrement` may divide a value axis into.
  */
@@ -102,6 +103,114 @@ export function getAxisRange(items, maxValue, axisIncrement) {
         : getNiceStep(span);
     return roundOutwards(minRange, finalMaxRange, increment);
 }
+/**
+ * Whether `value` is a date in milliseconds that `Date` can hold. A date
+ * in nanoseconds is not, and neither is a date given as text.
+ * @param value - the value to check
+ */
+export function isDate(value) {
+    return (typeof value === 'number' && Number.isFinite(new Date(value).getTime()));
+}
+/**
+ * The range of an axis of dates, in milliseconds: from the start of the
+ * earliest day to the latest date, or to `maxValue` when that is set, as an
+ * axis of numbers ends at `maxValue`. An end during a day is moved to the
+ * end of that day. Unlike an axis of numbers, it does not reach down to
+ * zero, which would be 1970, and values that are not dates are left out.
+ * Its increment is a day, though `getDateTicks` decides what the axis
+ * marks.
+ * @param values - the dates on the axis
+ * @param maxValue - the requested upper bound, if any
+ */
+export function getDateRange(values, maxValue) {
+    const dates = values.filter((value) => isDate(value));
+    const start = new Date(dates.length > 0 ? Math.min(...dates) : Date.now());
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(isDate(maxValue) ? maxValue : Math.max(start.getTime(), ...dates));
+    if (end.getTime() <= start.getTime()) {
+        end.setTime(addDays(start, 1).getTime());
+    }
+    else if (end.getTime() > startOfDay(end)) {
+        end.setTime(addDays(new Date(startOfDay(end)), 1).getTime());
+    }
+    return {
+        minValue: start.getTime(),
+        maxValue: end.getTime(),
+        totalRange: end.getTime() - start.getTime(),
+        increment: DAY,
+    };
+}
+const DAYS_IN_MONTH = 30.44;
+const DAYS_IN_YEAR = 365.25;
+const DATE_STEP_COUNT = 6;
+const dayStep = (count) => ({
+    unit: 'day',
+    days: count,
+    first: (date) => date,
+    next: (date) => addDays(date, count),
+});
+const weekStep = (count) => ({
+    unit: 'day',
+    days: 7 * count,
+    first: (date) => addDays(date, (8 - date.getDay()) % 7),
+    next: (date) => addDays(date, 7 * count),
+});
+const monthStep = (count) => ({
+    unit: 'month',
+    days: DAYS_IN_MONTH * count,
+    first: (date) => {
+        let month = date.getDate() === 1 ? date : getFirstOfMonth(date, 1);
+        while (month.getMonth() % count !== 0) {
+            month = getFirstOfMonth(month, 1);
+        }
+        return month;
+    },
+    next: (date) => getFirstOfMonth(date, count),
+});
+const yearStep = (count) => ({
+    unit: 'year',
+    days: DAYS_IN_YEAR * count,
+    first: (date) => {
+        let year = date.getFullYear();
+        if (date.getTime() > createDate(year, 0, 1).getTime()) {
+            year += 1;
+        }
+        return createDate(Math.ceil(year / count) * count, 0, 1);
+    },
+    next: (date) => createDate(date.getFullYear() + count, 0, 1),
+});
+const DATE_STEPS = [
+    dayStep(1),
+    dayStep(2),
+    weekStep(1),
+    weekStep(2),
+    monthStep(1),
+    monthStep(3),
+    monthStep(6),
+    yearStep(1),
+    yearStep(2),
+    yearStep(5),
+    yearStep(10),
+];
+/**
+ * The dates to mark on an axis of dates: days, Mondays, or the first days
+ * of months, quarters, half years or years, whichever divides the axis
+ * into at most about six steps. Dates take more room than numbers, so
+ * they get fewer steps.
+ * @param range - the range of the axis, from `getDateRange`
+ * @returns the dates to mark, and whether they are days, months or years
+ */
+export function getDateTicks(range) {
+    var _a;
+    const days = (range.maxValue - range.minValue) / DAY;
+    const decades = days / DAYS_IN_YEAR / 10;
+    const step = (_a = DATE_STEPS.find((candidate) => days / candidate.days <= DATE_STEP_COUNT)) !== null && _a !== void 0 ? _a : yearStep(10 * Math.ceil(decades / DATE_STEP_COUNT));
+    const ticks = [];
+    for (let date = step.first(new Date(range.minValue)); date.getTime() <= range.maxValue; date = step.next(date)) {
+        ticks.push(date.getTime());
+    }
+    return { values: ticks, unit: step.unit };
+}
 /**
  * The range of a chart whose items are parts of one whole: `maxValue`
  * when set, otherwise the combined item values or range extents. The value
@@ -144,25 +253,6 @@ export function getScatterRanges(items) {
 export function getShare(item, whole) {
     return (getValueSpan(item) / whole.totalRange) * PERCENT;
 }
-/**
- * The item's value as text: its `formattedValue` when set, otherwise its
- * value, range, or scatter point.
- * @param item - the item
- * @param type - the chart type
- */
-export function formatValue(item, type) {
-    const { value, formattedValue } = item;
-    if (formattedValue) {
-        return formattedValue;
-    }
-    if (Array.isArray(value)) {
-        if (type === 'scatter') {
-            return `(${value[0]}, ${value[1]})`;
-        }
-        return `${value[0]} — ${value[1]}`;
-    }
-    return `${value}`;
-}
 function isUsableStep(step, span) {
     return step > 0 && span / step <= MAX_AXIS_STEPS;
 }
@@ -181,6 +271,29 @@ function getZeroAnchoredRange(values) {
     const maxValue = Math.max(0, ...values);
     return roundOutwards(minValue, maxValue, getNiceStep(maxValue - minValue));
 }
+function addDays(date, days) {
+    return createDate(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function getFirstOfMonth(date, monthsLater) {
+    return createDate(date.getFullYear(), date.getMonth() + monthsLater, 1);
+}
+/**
+ * The start of a day in local time. Unlike `new Date(year, month, day)`, it
+ * keeps the years 0 to 99 rather than reading them as 1900 to 1999, see
+ * https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-makefullyear
+ * @param year - the full year
+ * @param month - the month, from 0 for January
+ * @param day - the day of the month
+ */
+function createDate(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month, day);
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function startOfDay(date) {
+    return new Date(date).setHours(0, 0, 0, 0);
+}
 function roundOutwards(minValue, maxValue, increment) {
     const lowerEnd = Math.floor(minValue / increment) * increment;
     const upperEnd = Math.ceil(maxValue / increment) * increment;

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/pagination/pagination.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import translate from "../../global/translations";
 import { createRandomString } from "../../util/random-string";
-import { getPrimarySubtag } from "../../util/language";
+import { getSupportedLocale } from "../../util/language";
 import { getPageSlots } from "./pagination.util";
 const FIRST_PAGE = 1;
 const DEFAULT_PAGE_SIZE = 100;
@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: '924becb588f7d773572b61865b9dd79b14171153' }, h("nav", { key: 'f517b62cf0107c912d576f08e9d99594f868be44', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '21758520849acfe32f43e86570fe60a040cf2748', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '7c47cdc658859b4cd8199ef92ebd9bc48275a8ae' }, h("nav", { key: '3bba45547a7183a4b1df58294a56788f9b2e078f', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '60fff33d8e135b1605d0a0f68b6c1ede1b571281', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -620,9 +620,7 @@ export class Pagination {
     }
     /**
      * What the jump form is given, so that the one warning about a language
-     * this browser cannot write numbers in describes both of us. A tag it
-     * accepts but does not support, `zz`, resolves to the viewer's own locale
-     * rather than throwing, so asking the formatter is the only way to know.
+     * this browser cannot write numbers in describes both of us.
      */
     get languageForNumbers() {
         var _a;
@@ -630,31 +628,21 @@ export class Pagination {
         return this.settledLanguage;
     }
     /**
-     * `Intl.NumberFormat` throws on a language it cannot parse, and this is
-     * called from `render`, so an unusable one would leave the control drawing
-     * nothing at all — the single state a user cannot click their way out of.
-     * `src/util/language.ts` states the rule this keeps.
-     *
-     * A tag it cannot parse throws; a well-formed tag it does not support, like
-     * `zz`, does not — it quietly resolves to whatever locale the machine runs
-     * in. Both end up formatting numbers in something other than what was
-     * asked for, so both are worth saying out loud.
+     * This is called from `render`, so a language that `Intl` cannot write
+     * numbers in must not throw, or the control would draw nothing at all —
+     * the single state a user cannot click their way out of.
+     * `getSupportedLocale` in `src/util/language.ts` decides which languages
+     * those are.
      *
      * @returns a formatter, in the given language where that is possible
      */
     createNumberFormat() {
         const { language } = this;
-        try {
-            const format = new Intl.NumberFormat(language);
-            const resolved = format.resolvedOptions().locale;
-            if (getPrimarySubtag(resolved) === getPrimarySubtag(language)) {
-                this.warnedAbout.delete('language');
-                this.settledLanguage = language;
-                return format;
-            }
-        }
-        catch (_a) {
-            // Fall through to the warning below.
+        const locale = getSupportedLocale(language);
+        if (locale) {
+            this.warnedAbout.delete('language');
+            this.settledLanguage = language;
+            return new Intl.NumberFormat(locale);
         }
         this.warnOnce('language', language, () => `\`language\` must be one this browser can write numbers in, but was ${JSON.stringify(language)}. Using ${FALLBACK_LANGUAGE}.`);
         // Where the translations land for the same unusable value, rather than

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/collection/util/language.js

@@ -22,3 +22,32 @@ export function getPrimarySubtag(language) {
     }
     return language.toLowerCase().split('-', 1)[0];
 }
+/**
+ * The locale that `Intl` writes numbers and dates in for `language`, or
+ * `undefined` when it cannot write in that language. `Intl` throws on a
+ * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
+ * locale for one it does not know, such as `zz`. A component that writes in
+ * its `language` while it renders checks it here, and falls back to English
+ * when this gives `undefined`.
+ *
+ * Examples:
+ *  - "sv" => "sv"
+ *  - "SV-se" => "sv-SE"
+ *  - "sv_SE" => undefined
+ *  - "zz" => undefined
+ *  - undefined => undefined
+ *
+ * @param language - the language to write in
+ * @returns the locale, or `undefined`
+ */
+export function getSupportedLocale(language) {
+    if (typeof language !== 'string') {
+        return;
+    }
+    try {
+        return Intl.NumberFormat.supportedLocalesOf(language)[0];
+    }
+    catch (_a) {
+        return;
+    }
+}

package/dist/esm/language-VamkUr90.js

@@ -0,0 +1,55 @@
+/**
+ * Reduce a language to the primary subtag that our language maps are keyed by.
+ *
+ * A `language` prop is typed, but a custom element takes whatever string an
+ * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
+ * application often derives the language from `document.documentElement.lang`.
+ * Anything that is not a string must resolve rather than throw, so that an
+ * unexpected value can never break a component's render.
+ *
+ * Examples:
+ *  - "nb" => "nb"
+ *  - "nb-NO" => "nb"
+ *  - "SV-SE" => "sv"
+ *  - undefined => ""
+ *
+ * @param language - the language to reduce
+ * @returns the lower-cased primary subtag, or an empty string
+ */
+function getPrimarySubtag(language) {
+    if (typeof language !== 'string') {
+        return '';
+    }
+    return language.toLowerCase().split('-', 1)[0];
+}
+/**
+ * The locale that `Intl` writes numbers and dates in for `language`, or
+ * `undefined` when it cannot write in that language. `Intl` throws on a
+ * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
+ * locale for one it does not know, such as `zz`. A component that writes in
+ * its `language` while it renders checks it here, and falls back to English
+ * when this gives `undefined`.
+ *
+ * Examples:
+ *  - "sv" => "sv"
+ *  - "SV-se" => "sv-SE"
+ *  - "sv_SE" => undefined
+ *  - "zz" => undefined
+ *  - undefined => undefined
+ *
+ * @param language - the language to write in
+ * @returns the locale, or `undefined`
+ */
+function getSupportedLocale(language) {
+    if (typeof language !== 'string') {
+        return;
+    }
+    try {
+        return Intl.NumberFormat.supportedLocalesOf(language)[0];
+    }
+    catch (_a) {
+        return;
+    }
+}
+
+export { getPrimarySubtag as a, getSupportedLocale as g };