@brandsync/wc 1.19.0 → 1.20.1

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

@@ -5,7 +5,9 @@ import { h } from "@stencil/core";
  * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
  * share the same label/description/error/icon-slot chrome.
  *
- * Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
+ * Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`), `bs-chip-informative` + `bs-icon-button` (`type="chip"`),
+ * and `bs-icon-button` + `bs-spinner` (`type="combobox"` clear button / loading indicator; its listbox is a
+ * hand-built `role="listbox"` because `bs-menu` is `role="menu"` and cannot host `option`s).
  *
  * ## When to use
  * - Collecting a single line of free-text, email, password, or numeric input.
@@ -28,13 +30,15 @@ import { h } from "@stencil/core";
  *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
  * @part field - The bordered field wrapper containing the icon(s) and native control(s).
  *   `type="initials"` renders this part on TWO separate elements instead of one (the title
- *   `<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two
+ *   picker's own small box, and the name `<input>`'s own box) -- Figma specs these as two
  *   genuinely independent bordered containers with a gap between them, not one shared field the
- *   way every other composite type (`country` included) renders, so `::part(field)` reaches
+ *   way every other composite type renders, so `::part(field)` reaches
  *   whichever of the two a given selector context matches, same "multiple elements, one shared
  *   part name" convention as `bs-attachment`'s own `star` part.
  * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
- *   `options` is non-empty.
+ *   `options` is non-empty; for `type="combobox"` the popup (listbox + status message) while `open`.
+ * @part option - A single `role="option"` row of the `type="combobox"` listbox.
+ * @part clear - The clear button (`bs-icon-button`) of `type="combobox"`.
  * @part label - The `<label>` element.
  * @part required - The red `*` rendered after the label text when `required` is set.
  * @part icon - The leading icon wrapper element.
@@ -70,6 +74,10 @@ export class BsInput {
     decrementLabel = 'Decrement';
     type = 'text';
     label;
+    /** Accessible name for the control, used only when no visible `label` is set (e.g. a search field
+     * with no visible label). Passed to the inner native control, because an `aria-label` on the
+     * `<bs-input>` host cannot name an element inside its shadow root. */
+    ariaLabel = null;
     placeholder;
     description;
     error;
@@ -83,7 +91,7 @@ export class BsInput {
     min;
     /** Maximum value for `type="number"`'s stepper buttons. */
     max;
-    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+    /** Options for `type="select"` (rendered as `role="option"` rows of an in-shadow listbox) and `type="dropdown"` (rendered
      * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
      * attribute -- see CONVENTIONS.md's non-string props rule. */
     options = [];
@@ -99,14 +107,33 @@ export class BsInput {
      * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
      * Stencil warns against shadowing it with a component `@Prop`. */
     initialsTitle = '';
+    /** `type="initials"`: accessible name of the title picker (its visible text is just the title). */
+    titleLabel = 'Title';
     /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
      * attribute -- see CONVENTIONS.md's non-string props rule. */
     countryOptions = [];
     /** Current selected country code for `type="country"`. */
     country = '';
+    /** `type="country"`: accessible name of the country picker (its visible content is just the flag). */
+    countryLabel = 'Country';
     /** Number of cells for `type="pin"`. */
     length = 4;
-    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+    /** `type="combobox"`: shows a loading indicator and, while no options match, a loading message
+     * in the popup instead of "no results". Use while fetching `options` asynchronously. */
+    loading = false;
+    /** `type="combobox"`: when true (default) `options` are filtered client-side by whether the label
+     * contains the typed text. Set false when you supply already-filtered results yourself (e.g. from
+     * a server) in response to `bsInput`. */
+    filterOptions = true;
+    /** `type="combobox"`: text of the popup row shown when no option matches. */
+    noResultsLabel = 'No results';
+    /** `type="combobox"`: text of the popup row shown while `loading` and nothing matches. */
+    loadingLabel = 'Loading...';
+    /** `type="combobox"`: accessible name of the clear button. */
+    clearLabel = 'Clear';
+    /** `type="date"`: accessible name of the default calendar button that opens the native picker. */
+    openPickerLabel = 'Open date picker';
+    /** Whether the `type="dropdown"` / `type="combobox"` popup is open. Reflects to an attribute so consumers can style
      * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
      * of `bs-menu-item`s is rendered below the field. */
     open = false;
@@ -116,12 +143,15 @@ export class BsInput {
      * shell-only limitation. */
     bsOpen;
     /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    /** Emitted when an option is chosen for `type="combobox"` (click or Enter), with the option's
+     * `{ label, value }`. `value` of the component itself becomes the option's label (the text shown). */
+    bsOptionSelect;
     bsChipAdd;
     /** Emitted when a chip's remove button is clicked for `type="chip"`. */
     bsChipRemove;
-    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    /** Emitted when a title is chosen from the picker for `type="initials"`. */
     bsTitleChange;
-    /** Emitted when the country `<select>` changes for `type="country"`. */
+    /** Emitted when a country is chosen from the picker for `type="country"`. */
     bsCountryChange;
     /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
      * up space in the field when there's actually an icon (same pattern as `bs-button`). */
@@ -134,7 +164,50 @@ export class BsInput {
     passwordVisible = false;
     /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
     chipDraft = '';
+    /** Index into the visible (filtered) options of the active option for `type="combobox"`, -1 for none. */
+    activeIndex = -1;
+    /** True once the user has typed in the `type="combobox"` input, so opening it with a value that is
+     * already a chosen label still lists every option instead of only that one. */
+    comboFiltering = false;
     pinInputs = [];
+    get isPopupType() {
+        return this.type === 'dropdown' || this.type === 'combobox';
+    }
+    /** `select`, `initials` (title) and `country` render a trigger button plus an in-shadow listbox
+     * styled like `bs-menu`, instead of a native `<select>` whose popup cannot be themed. */
+    get isPickerType() {
+        return this.type === 'select' || this.type === 'initials' || this.type === 'country';
+    }
+    typeahead = '';
+    typeaheadTimer;
+    get pickerItems() {
+        if (this.type === 'select')
+            return this.options.map(o => ({ value: o.value, label: o.label }));
+        if (this.type === 'initials')
+            return this.titleOptions.map(o => ({ value: o, label: o }));
+        if (this.type === 'country') {
+            return this.countryOptions.map(o => ({ value: o.code, label: `${o.code} ${o.label}`, flag: o.flagIcon }));
+        }
+        return [];
+    }
+    get pickerSelectedValue() {
+        return this.type === 'select' ? this.value : this.type === 'initials' ? this.initialsTitle : this.country;
+    }
+    get pickerSelectedIndex() {
+        return this.pickerItems.findIndex(i => i.value === this.pickerSelectedValue);
+    }
+    get visibleOptions() {
+        if (this.type !== 'combobox' || !this.filterOptions || !this.comboFiltering || !this.value)
+            return this.options;
+        const q = this.value.toLowerCase();
+        return this.options.filter(o => o.label.toLowerCase().includes(q));
+    }
+    componentDidRender() {
+        if ((this.type === 'combobox' || this.isPickerType) && this.open && this.activeIndex >= 0) {
+            const opt = this.el.shadowRoot?.getElementById(`option-${this.activeIndex}`);
+            opt?.scrollIntoView?.({ block: 'nearest' });
+        }
+    }
     /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
      * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
      * alone isn't enough for a slot that starts (and stays) empty. */
@@ -189,8 +262,90 @@ export class BsInput {
     onInput = (ev) => {
         const value = ev.target.value;
         this.value = value;
+        if (this.type === 'combobox') {
+            this.comboFiltering = true;
+            this.activeIndex = -1;
+            this.setOpen(true);
+        }
         this.bsInput.emit(value);
     };
+    setOpen(open) {
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (!open) {
+            this.activeIndex = -1;
+            this.comboFiltering = false;
+        }
+        this.bsOpen.emit(open);
+    }
+    onComboboxKeydown = (ev) => {
+        if (this.disabled)
+            return;
+        const n = this.visibleOptions.length;
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.setOpen(true);
+                    this.activeIndex = n === 0 ? -1 : ev.key === 'ArrowDown' ? 0 : n - 1;
+                }
+                else if (n > 0) {
+                    const down = ev.key === 'ArrowDown';
+                    this.activeIndex = this.activeIndex === -1 ? (down ? 0 : n - 1) : (this.activeIndex + (down ? 1 : -1) + n) % n;
+                }
+                break;
+            }
+            // Home/End only drive the list while an option is active; otherwise they keep moving the
+            // caret in the text field, as users expect from an editable combobox.
+            case 'Home':
+            case 'End':
+                if (this.open && this.activeIndex >= 0 && n > 0) {
+                    ev.preventDefault();
+                    this.activeIndex = ev.key === 'Home' ? 0 : n - 1;
+                }
+                break;
+            case 'Enter':
+                if (this.open && this.activeIndex >= 0 && this.visibleOptions[this.activeIndex]) {
+                    ev.preventDefault();
+                    this.selectComboOption(this.visibleOptions[this.activeIndex]);
+                }
+                break;
+        }
+    };
+    selectComboOption(option) {
+        this.value = option.label;
+        this.setOpen(false);
+        this.bsChange.emit(this.value);
+        this.bsOptionSelect.emit({ label: option.label, value: option.value });
+    }
+    onClear = () => {
+        if (this.disabled)
+            return;
+        this.value = '';
+        this.comboFiltering = true;
+        this.activeIndex = -1;
+        this.bsInput.emit('');
+        this.bsChange.emit('');
+        this.el.shadowRoot?.getElementById('control')?.focus();
+    };
+    onDatePickerOpen = () => {
+        if (this.disabled || this.type !== 'date')
+            return;
+        const input = this.el.shadowRoot?.getElementById('control');
+        if (!input)
+            return;
+        try {
+            if (typeof input.showPicker === 'function')
+                input.showPicker();
+            else
+                input.focus();
+        }
+        catch {
+            input.focus();
+        }
+    };
     onChange = (ev) => {
         const value = ev.target.value;
         this.value = value;
@@ -241,21 +396,35 @@ export class BsInput {
      * default @Listen target, and both keydown from the native control and from `bs-menu-item`
      * buttons bubble/compose up to it). */
     onHostKeydown(ev) {
-        if (this.type === 'dropdown' && this.open && ev.key === 'Escape') {
-            this.open = false;
+        if ((this.isPopupType || this.isPickerType) && this.open && ev.key === 'Escape') {
+            if (this.type === 'combobox' || this.isPickerType)
+                this.setOpen(false);
+            else
+                this.open = false;
         }
     }
     /** Closes the `type="dropdown"` menu once focus leaves the component entirely (e.g. Tab away, or
      * a click outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across
      * the `bs-menu-item` shadow boundary too. */
     onHostFocusOut(ev) {
-        if (this.type !== 'dropdown' || !this.open)
+        if (!(this.isPopupType || this.isPickerType) || !this.open)
             return;
         const related = ev.relatedTarget;
         if (!related || !this.el.contains(related)) {
-            this.open = false;
+            if (this.type === 'combobox' || this.isPickerType)
+                this.setOpen(false);
+            else
+                this.open = false;
         }
     }
+    /** Closes an open picker on a click anywhere outside the component (focusout alone misses clicks
+     * on non-focusable page areas in some browsers). */
+    onDocumentClick(ev) {
+        if (!this.isPickerType || !this.open)
+            return;
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    }
     onChipDraftInput = (ev) => {
         this.chipDraft = ev.target.value;
     };
@@ -272,11 +441,108 @@ export class BsInput {
     onChipRemove = (chip) => () => {
         this.bsChipRemove.emit(chip);
     };
-    onTitleChange = (ev) => {
-        this.bsTitleChange.emit(ev.target.value);
+    pickerCommit(item) {
+        if (this.type === 'select') {
+            this.value = item.value;
+            this.bsInput.emit(item.value);
+            this.bsChange.emit(item.value);
+        }
+        else if (this.type === 'initials') {
+            this.initialsTitle = item.value;
+            this.bsTitleChange.emit(item.value);
+        }
+        else {
+            this.country = item.value;
+            this.bsCountryChange.emit(item.value);
+        }
+    }
+    pickerOpen() {
+        if (this.pickerItems.length === 0)
+            return;
+        this.setOpen(true);
+        this.activeIndex = Math.max(this.pickerSelectedIndex, 0);
+    }
+    onPickerToggle = () => {
+        if (this.disabled)
+            return;
+        if (this.open)
+            this.setOpen(false);
+        else
+            this.pickerOpen();
+    };
+    onPickerOptionClick = (item) => () => {
+        this.pickerCommit(item);
+        this.setOpen(false);
     };
-    onCountryChange = (ev) => {
-        this.bsCountryChange.emit(ev.target.value);
+    onPickerKeyup = (ev) => {
+        // Some browsers synthesize a click from Space on keyup even if keydown was prevented.
+        if (ev.key === ' ')
+            ev.preventDefault();
+    };
+    onPickerKeydown = (ev) => {
+        if (this.disabled)
+            return;
+        const items = this.pickerItems;
+        const n = items.length;
+        if (n === 0)
+            return;
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.pickerOpen();
+                }
+                else {
+                    const down = ev.key === 'ArrowDown';
+                    this.activeIndex = (this.activeIndex + (down ? 1 : -1) + n) % n;
+                }
+                return;
+            }
+            case 'Home':
+            case 'End':
+                ev.preventDefault();
+                if (!this.open)
+                    this.pickerOpen();
+                this.activeIndex = ev.key === 'Home' ? 0 : n - 1;
+                return;
+            case 'Enter':
+            case ' ':
+                if (ev.key === ' ' && this.typeahead)
+                    break;
+                ev.preventDefault();
+                if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+                    this.pickerCommit(items[this.activeIndex]);
+                    this.setOpen(false);
+                }
+                else if (!this.open) {
+                    this.pickerOpen();
+                }
+                return;
+            case 'Tab':
+                return;
+        }
+        if (ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+            ev.preventDefault();
+            this.typeahead += ev.key.toLowerCase();
+            clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+            const from = this.open ? this.activeIndex : this.pickerSelectedIndex;
+            // The same repeated letter cycles through matches; a longer prefix keeps the current match.
+            const single = this.typeahead.split('').every(c => c === this.typeahead[0]);
+            const needle = single ? this.typeahead[0] : this.typeahead;
+            const start = single ? from + 1 : Math.max(from, 0);
+            for (let k = 0; k < n; k++) {
+                const idx = (start + k + n) % n;
+                if (items[idx].label.toLowerCase().startsWith(needle)) {
+                    if (this.open)
+                        this.activeIndex = idx;
+                    else
+                        this.pickerCommit(items[idx]);
+                    return;
+                }
+            }
+        }
     };
     onPinInput = (index) => (ev) => {
         const input = ev.target;
@@ -297,7 +563,7 @@ export class BsInput {
         }
     };
     get showsEndIconArea() {
-        return (this.type === 'number' || this.type === 'password' || this.type === 'dropdown' || this.type === 'date' || this.hasEndIcon);
+        return (this.type === 'number' || this.type === 'password' || this.type === 'dropdown' || this.type === 'combobox' || this.type === 'date' || this.hasEndIcon);
     }
     get showsIconArea() {
         return (this.type === 'search' && !this.hasIcon) || this.hasIcon;
@@ -315,29 +581,64 @@ export class BsInput {
         if (this.type === 'password') {
             return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? this.hidePasswordLabel : this.showPasswordLabel, disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
         }
+        if (this.type === 'combobox') {
+            return [
+                this.loading && h("bs-spinner", { class: "bs-input__combobox-spinner", size: "sm", label: this.loadingLabel }),
+                this.value && !this.disabled && (h("bs-icon-button", { part: "clear", class: "bs-input__clear", variant: "subtle", size: "xs", ariaLabel: this.clearLabel, onMouseDown: (ev) => ev.preventDefault(), onClick: this.onClear }, h(ChipRemoveIcon, null))),
+                h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ];
+        }
         if (this.type === 'dropdown') {
             return (h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
         }
         if (this.type === 'date' && !this.hasEndIcon) {
-            return (h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" })));
+            return (h("button", { type: "button", class: "bs-input__calendar-btn", "aria-label": this.openPickerLabel, tabIndex: -1, disabled: this.disabled }, h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))));
         }
         return h("slot", { name: "end-icon", onSlotchange: this.onEndIconSlotchange });
     }
     renderStandardControl() {
-        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
+        const isCombobox = this.type === 'combobox';
+        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.isPopupType ? 'text' : this.type;
+        const activeId = isCombobox && this.open && this.activeIndex >= 0 ? `option-${this.activeIndex}` : undefined;
         return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown',
             // The popup state belongs on the focusable control (a roleless wrapper div can't carry
             // aria-haspopup/aria-expanded -- axe's aria-allowed-attr flags it).
-            role: this.type === 'dropdown' ? 'combobox' : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.open) : undefined, min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+            role: this.isPopupType ? 'combobox' : undefined, "aria-haspopup": this.isPopupType ? 'listbox' : undefined, "aria-expanded": this.isPopupType ? String(this.open) : undefined, "aria-controls": isCombobox ? 'listbox' : undefined, "aria-activedescendant": activeId, "aria-autocomplete": isCombobox ? 'list' : undefined, autocomplete: isCombobox ? 'off' : undefined, "aria-label": this.label ? undefined : this.ariaLabel ?? undefined, min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange, onKeyDown: isCombobox ? this.onComboboxKeydown : undefined }));
+    }
+    /** An image URL flag renders as `<img>`; anything else (an emoji) as text. */
+    renderFlag(flag) {
+        const isUrl = /^(https?:|\/|\.|data:)/.test(flag);
+        return isUrl ? (h("img", { part: "flag", class: "bs-input__flag bs-input__flag--img", src: flag, alt: "" })) : (h("span", { part: "flag", class: "bs-input__flag", "aria-hidden": "true" }, flag));
+    }
+    /** The trigger button of the select/title/country pickers: a focusable `role="combobox"` whose
+     * listbox lives in this same shadow root so aria-controls/aria-activedescendant resolve. */
+    renderPickerTrigger() {
+        const items = this.pickerItems;
+        const sel = items[this.pickerSelectedIndex];
+        const shown = sel ?? (this.placeholder ? undefined : items[0]);
+        const isCountry = this.type === 'country';
+        const isTitle = this.type === 'initials';
+        const isSelect = this.type === 'select';
+        const name = isCountry ? this.countryLabel : isTitle ? this.titleLabel : this.label ? undefined : this.ariaLabel ?? undefined;
+        const countryName = isCountry && shown ? this.countryOptions.find(o => o.code === shown.value)?.label : undefined;
+        const ariaLabel = isCountry ? `${name}${countryName ? `: ${countryName}` : ''}` : name;
+        return (h("button", { type: "button", id: isSelect ? 'control' : undefined, part: "control", class: `bs-input__control bs-input__picker-trigger ${isCountry ? 'bs-input__country-select' : isTitle ? 'bs-input__title-select' : ''}`, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": "listbox", "aria-activedescendant": this.open && this.activeIndex >= 0 ? `option-${this.activeIndex}` : undefined, "aria-label": ariaLabel, "aria-describedby": isSelect && (this.error || this.description) ? 'description-or-error' : undefined, "aria-invalid": isSelect && this.error ? 'true' : undefined, "aria-required": isSelect && this.required ? 'true' : undefined, disabled: this.disabled, onKeyDown: this.onPickerKeydown, onKeyUp: this.onPickerKeyup }, isCountry ? (shown?.flag ? (this.renderFlag(shown.flag)) : (h("span", { class: "bs-input__picker-text" }, shown?.value))) : (h("span", { class: "bs-input__picker-text" }, shown ? shown.label : this.placeholder))));
+    }
+    renderPickerPopup() {
+        const listName = this.type === 'initials' ? this.titleLabel : this.type === 'country' ? this.countryLabel : this.label || this.ariaLabel || undefined;
+        return (h("div", { part: "menu", class: "bs-input__combobox-popup bs-input__picker-popup" }, h("ul", { id: "listbox", role: "listbox", class: "bs-input__listbox", "aria-label": listName }, this.pickerItems.map((item, i) => {
+            const selected = item.value === this.pickerSelectedValue;
+            return (h("li", { key: item.value, id: `option-${i}`, part: "option", role: "option", "aria-selected": String(selected), class: `bs-input__option ${i === this.activeIndex ? 'bs-input__option--active' : ''} ${selected ? 'bs-input__option--selected' : ''}`, onMouseDown: (ev) => ev.preventDefault(), onClick: this.onPickerOptionClick(item) }, item.flag && this.renderFlag(item.flag), h("span", { class: "bs-input__option-label" }, item.label), selected && (h("svg", { class: "bs-input__option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M3 8.5L6.5 12L13 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        }))));
     }
     renderSelectControl() {
-        return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
+        return [this.renderPickerTrigger(), this.renderSelectChevron()];
     }
     renderTextareaControl() {
-        return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+        return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-label": this.label ? undefined : this.ariaLabel ?? undefined, onInput: this.onInput, onChange: this.onChange }));
     }
     renderChipControl() {
-        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("bs-chip-informative", { part: "chip", class: "bs-input__chip", size: "sm", disabled: this.disabled }, chip, h("bs-icon-button", { part: "chip-remove", class: "bs-input__chip-remove", variant: "subtle", size: "xs", ariaLabel: `Remove ${chip}`, disabled: this.disabled, onClick: this.onChipRemove(chip) }, h(ChipRemoveIcon, null))))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
+        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("bs-chip-informative", { part: "chip", class: "bs-input__chip", size: "md", disabled: this.disabled }, chip, h("bs-icon-button", { part: "chip-remove", class: "bs-input__chip-remove", variant: "subtle", size: "xs", ariaLabel: `Remove ${chip}`, disabled: this.disabled, onClick: this.onChipRemove(chip) }, h(ChipRemoveIcon, null))))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
     }
     // type="initials" renders two genuinely separate bordered boxes side by side (each with its own
     // border/radius/background, a small gap between them), not one shared field wrapper -- Figma
@@ -347,7 +648,15 @@ export class BsInput {
     // `pin` already does with its own renderPinField().
     renderInitialsField() {
         const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
-        return (h("div", { class: "bs-input__initials-row" }, h("div", { part: "field", class: `bs-input__field bs-input__field--initials-title ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))), this.renderSelectChevron()), h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }))));
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        return (h("div", { class: "bs-input__initials-row" }, h("div", { class: "bs-input__picker-wrap" }, h("div", { part: "field", class: `bs-input__field bs-input__field--initials-title ${errorClass} ${disabledClass}`, onClick: this.onPickerToggle }, this.renderPickerTrigger(), this.renderSelectChevron()), this.open && this.renderPickerPopup()), h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${errorClass} ${disabledClass}` }, h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }))));
+    }
+    // type="country": like initials, two separate bordered fields -- a compact flag picker and the
+    // phone input.
+    renderCountryField() {
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        return (h("div", { class: "bs-input__initials-row bs-input__country-row" }, h("div", { class: "bs-input__picker-wrap" }, h("div", { part: "field", class: `bs-input__field bs-input__field--country ${errorClass} ${disabledClass}`, onClick: this.onPickerToggle }, this.renderPickerTrigger(), this.renderSelectChevron()), this.open && this.renderPickerPopup()), h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${errorClass} ${disabledClass}` }, h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }))));
     }
     /* Both the initials title <select> and the country <select> have their native OS arrow
        suppressed (appearance: none in CSS) in favor of this single chevron-down, matching
@@ -356,13 +665,6 @@ export class BsInput {
     renderSelectChevron() {
         return (h("svg", { class: "bs-input__select-chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
-    renderCountryControl() {
-        return [
-            h("select", { part: "control", class: "bs-input__control bs-input__country-select", disabled: this.disabled, onChange: this.onCountryChange }, this.countryOptions.map(opt => (h("option", { value: opt.code, selected: opt.code === this.country }, opt.flagIcon ? `${opt.flagIcon} ` : '', opt.code, " ", opt.label)))),
-            this.renderSelectChevron(),
-            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
-        ];
-    }
     renderControl() {
         switch (this.type) {
             case 'select':
@@ -371,12 +673,26 @@ export class BsInput {
                 return this.renderTextareaControl();
             case 'chip':
                 return this.renderChipControl();
-            case 'country':
-                return this.renderCountryControl();
             default:
                 return this.renderStandardControl();
         }
     }
+    onComboboxFieldClick = (ev) => {
+        if (this.disabled)
+            return;
+        // The clear button handles itself; only plain field clicks toggle the popup.
+        if (ev.target.closest?.('[part="clear"]'))
+            return;
+        this.setOpen(!this.open);
+    };
+    /** The `type="combobox"` popup. Rendered inside this shadow root so `aria-controls` and
+     * `aria-activedescendant` on the input resolve to real elements. */
+    renderComboboxPopup() {
+        const opts = this.visibleOptions;
+        return (h("div", { part: "menu", class: "bs-input__combobox-popup" }, h("ul", { id: "listbox", role: "listbox", class: "bs-input__listbox", "aria-label": this.label || this.ariaLabel || undefined }, opts.map((option, i) => (h("li", { key: option.value, id: `option-${i}`, part: "option", role: "option", "aria-selected": String(i === this.activeIndex), class: `bs-input__option ${i === this.activeIndex ? 'bs-input__option--active' : ''}`,
+            // Keep focus in the input while choosing with the mouse.
+            onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectComboOption(option) }, option.label)))), opts.length === 0 && (h("div", { role: "status", class: "bs-input__listbox-status" }, this.loading ? this.loadingLabel : this.noResultsLabel))));
+    }
     renderField() {
         const fieldClasses = [
             'bs-input__field',
@@ -388,7 +704,7 @@ export class BsInput {
             .filter(Boolean)
             .join(' ');
         const isDropdown = this.type === 'dropdown';
-        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : this.type === 'combobox' ? this.onComboboxFieldClick : this.type === 'select' ? this.onPickerToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}`, onClick: this.type === 'date' ? this.onDatePickerOpen : undefined }, this.renderEndIconContent())), this.type === 'combobox' && this.open && this.renderComboboxPopup(), this.type === 'select' && this.open && this.renderPickerPopup(), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
     }
     renderPinField() {
         this.pinInputs = [];
@@ -397,10 +713,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: 'a462df7f8f0e0a78a90cadb6453cbccd120e9baf', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '9eea22c2c7cbcbdcb2c37403b89c10efc145228d', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '7aebd73c573b3fb1b26ea0ca0959db890073d9f5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '40bb309ab983fbccd797e878aa78e612e65c6b56', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'cbd4e5f0cd8fb0f004f7bc9f7e0dc3433d25e8dc', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'bcd1fb8d607e87c204cb7d93506aa1c648478f34', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.type === 'country' ? this.renderCountryField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
@@ -541,8 +857,8 @@ export class BsInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'date'\n    | 'dropdown'\n    | 'select'\n    | 'textarea'\n    | 'chip'\n    | 'initials'\n    | 'country'\n    | 'pin'",
-                    "resolved": "\"chip\" | \"country\" | \"date\" | \"dropdown\" | \"email\" | \"initials\" | \"number\" | \"password\" | \"pin\" | \"search\" | \"select\" | \"text\" | \"textarea\"",
+                    "original": "| 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'date'\n    | 'dropdown'\n    | 'select'\n    | 'textarea'\n    | 'chip'\n    | 'initials'\n    | 'country'\n    | 'pin'\n    | 'combobox'",
+                    "resolved": "\"chip\" | \"combobox\" | \"country\" | \"date\" | \"dropdown\" | \"email\" | \"initials\" | \"number\" | \"password\" | \"pin\" | \"search\" | \"select\" | \"text\" | \"textarea\"",
                     "references": {}
                 },
                 "required": false,
@@ -576,6 +892,26 @@ export class BsInput {
                 "reflect": false,
                 "attribute": "label"
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the control, used only when no visible `label` is set (e.g. a search field\nwith no visible label). Passed to the inner native control, because an `aria-label` on the\n`<bs-input>` host cannot name an element inside its shadow root."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,
@@ -743,7 +1079,7 @@ export class BsInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Options for `type=\"select\"` (rendered as native `<option>`s) and `type=\"dropdown\"` (rendered\nas a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML\nattribute -- see CONVENTIONS.md's non-string props rule."
+                    "text": "Options for `type=\"select\"` (rendered as `role=\"option\"` rows of an in-shadow listbox) and `type=\"dropdown\"` (rendered\nas a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML\nattribute -- see CONVENTIONS.md's non-string props rule."
                 },
                 "getter": false,
                 "setter": false,
@@ -807,7 +1143,7 @@ export class BsInput {
             },
             "initialsTitle": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -825,6 +1161,26 @@ export class BsInput {
                 "attribute": "initials-title",
                 "defaultValue": "''"
             },
+            "titleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"initials\"`: accessible name of the title picker (its visible text is just the title)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-label",
+                "defaultValue": "'Title'"
+            },
             "countryOptions": {
                 "type": "unknown",
                 "mutable": false,
@@ -845,7 +1201,7 @@ export class BsInput {
             },
             "country": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -863,6 +1219,26 @@ export class BsInput {
                 "attribute": "country",
                 "defaultValue": "''"
             },
+            "countryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"country\"`: accessible name of the country picker (its visible content is just the flag)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country-label",
+                "defaultValue": "'Country'"
+            },
             "length": {
                 "type": "number",
                 "mutable": false,
@@ -883,6 +1259,126 @@ export class BsInput {
                 "attribute": "length",
                 "defaultValue": "4"
             },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"combobox\"`: shows a loading indicator and, while no options match, a loading message\nin the popup instead of \"no results\". Use while fetching `options` asynchronously."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "filterOptions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"combobox\"`: when true (default) `options` are filtered client-side by whether the label\ncontains the typed text. Set false when you supply already-filtered results yourself (e.g. from\na server) in response to `bsInput`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-options",
+                "defaultValue": "true"
+            },
+            "noResultsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"combobox\"`: text of the popup row shown when no option matches."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-label",
+                "defaultValue": "'No results'"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"combobox\"`: text of the popup row shown while `loading` and nothing matches."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-label",
+                "defaultValue": "'Loading...'"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"combobox\"`: accessible name of the clear button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label",
+                "defaultValue": "'Clear'"
+            },
+            "openPickerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"date\"`: accessible name of the default calendar button that opens the native picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-picker-label",
+                "defaultValue": "'Open date picker'"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -895,7 +1391,7 @@ export class BsInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the `type=\"dropdown\"` trigger is open. Reflects to an attribute so consumers can style\nan open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`\nof `bs-menu-item`s is rendered below the field."
+                    "text": "Whether the `type=\"dropdown\"` / `type=\"combobox\"` popup is open. Reflects to an attribute so consumers can style\nan open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`\nof `bs-menu-item`s is rendered below the field."
                 },
                 "getter": false,
                 "setter": false,
@@ -910,7 +1406,9 @@ export class BsInput {
             "hasIcon": {},
             "hasEndIcon": {},
             "passwordVisible": {},
-            "chipDraft": {}
+            "chipDraft": {},
+            "activeIndex": {},
+            "comboFiltering": {}
         };
     }
     static get events() {
@@ -959,6 +1457,21 @@ export class BsInput {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "bsOptionSelect",
+                "name": "bsOptionSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an option is chosen for `type=\"combobox\"` (click or Enter), with the option's\n`{ label, value }`. `value` of the component itself becomes the option's label (the text shown)."
+                },
+                "complexType": {
+                    "original": "{ label: string; value: string }",
+                    "resolved": "{ label: string; value: string; }",
+                    "references": {}
+                }
             }, {
                 "method": "bsChipAdd",
                 "name": "bsChipAdd",
@@ -967,7 +1480,7 @@ export class BsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a chip is committed (Enter pressed in the draft input) for `type=\"chip\"`."
+                    "text": ""
                 },
                 "complexType": {
                     "original": "string",
@@ -997,7 +1510,7 @@ export class BsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the title `<select>` changes for `type=\"initials\"`."
+                    "text": "Emitted when a title is chosen from the picker for `type=\"initials\"`."
                 },
                 "complexType": {
                     "original": "string",
@@ -1012,7 +1525,7 @@ export class BsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the country `<select>` changes for `type=\"country\"`."
+                    "text": "Emitted when a country is chosen from the picker for `type=\"country\"`."
                 },
                 "complexType": {
                     "original": "string",
@@ -1050,6 +1563,12 @@ export class BsInput {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }