@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.4

package/dist/src/combo-box/ia-combo-box.js

@@ -1,43 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement, css, } from 'lit';
+import { html, LitElement, nothing, css, } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { when } from 'lit/directives/when.js';
 import { msg } from '@lit/localize';
-import { hasAnyOf, } from './models';
-import caretClosed from './caret-closed';
-import caretOpen from './caret-open';
-/**
- * Tests whether the given `haystack` string has the given `needle` as a subsequence.
- * Returns `true` if the characters of `needle` appear in order within `haystack`,
- * regardless of whether they are contiguous. Returns `false` otherwise.
- *
- * E.g., `ace` is a subsequence of `archive` (but not a contiguous substring).
- *
- * Note: The empty string is a subsequence of any string, including itself.
- *
- * @param needle The potential subsequence to check for inside `haystack`.
- * @param haystack The string to be tested for containing the `needle` subsequence.
- * @returns Whether `haystack` has `needle` as a subsequence.
- */
-const isSubsequence = (needle, haystack) => {
-    const needleLen = needle.length;
-    const haystackLen = haystack.length;
-    if (needleLen === 0)
-        return true;
-    let needleIdx = 0;
-    let haystackIdx = 0;
-    while (haystackIdx < haystackLen) {
-        if (haystack[haystackIdx] === needle[needleIdx])
-            needleIdx += 1;
-        if (needleIdx >= needleLen)
-            return true;
-        haystackIdx += 1;
-    }
-    return false;
-};
+import { hasAnyOf, isSubsequence, } from './models';
+import caretClosedIcon from './caret-closed';
+import caretOpenIcon from './caret-open';
+import clearIcon from './clear';
 /**
  * Map from filter preset keys to their associated filtering function.
  * @see {@linkcode IAComboBox.filter}
@@ -59,6 +31,7 @@ const STRING_LOWER_CASE_FN = (str) => str.toLocaleLowerCase();
  * freeform text to filter down & find specific options.
  */
 let IAComboBox = class IAComboBox extends LitElement {
+    static { this.formAssociated = true; }
     constructor() {
         super();
         /**
@@ -119,7 +92,8 @@ let IAComboBox = class IAComboBox extends LitElement {
          */
         this.caseSensitive = false;
         /**
-         * Whether the filtered options should be listed in lexicographically-sorted order.
+         * Whether the filtered options should be listed in lexicographically-sorted order,
+         * respecting the current `caseSensitive` setting.
          * Default is `false`, displaying them in the same order as the provided options array.
          */
         this.sort = false;
@@ -141,6 +115,11 @@ let IAComboBox = class IAComboBox extends LitElement {
          * Default is `false`, closing the options list when a selection is made.
          */
         this.stayOpen = false;
+        /**
+         * Whether the combo box shows a clear button when a value is selected.
+         * Default is `false`.
+         */
+        this.clearable = false;
         /**
          * Whether the combo box's option menu is currently expanded. Default is `false`.
          */
@@ -213,22 +192,20 @@ let IAComboBox = class IAComboBox extends LitElement {
         this.internals = this.attachInternals();
     }
     render() {
-        return html `
-      <div
-        id="container"
-        class=${classMap({ focused: this.hasFocus })}
-        part="container"
-      >
-        ${this.labelTemplate}
-        <div
-          id="main-widget-row"
-          class=${classMap({ disabled: this.disabled })}
-          part="combo-box"
-        >
-          ${this.textInputTemplate} ${this.caretButtonTemplate}
-        </div>
-        ${this.optionsListTemplate}
-      </div>
+        const mainWidgetClasses = classMap({
+            disabled: this.disabled,
+            focused: this.hasFocus,
+        });
+        return html `
+      <div id="container" part="container">
+        ${this.labelTemplate}
+        <div id="main-widget-row" class=${mainWidgetClasses} part="combo-box">
+          ${this.textInputTemplate}
+          ${this.clearable ? this.clearButtonTemplate : nothing}
+          ${this.caretButtonTemplate}
+        </div>
+        ${this.optionsListTemplate}
+      </div>
     `;
     }
     willUpdate(changed) {
@@ -276,15 +253,14 @@ let IAComboBox = class IAComboBox extends LitElement {
         }
     }
     updated(changed) {
-        var _a, _b, _c, _d;
         if (changed.has('open')) {
             if (this.open) {
                 this.positionOptionsMenu();
-                (_b = (_a = this.optionsList).showPopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.optionsList.showPopover?.();
                 this.optionsList.classList.add('visible');
             }
             else {
-                (_d = (_c = this.optionsList).hidePopover) === null || _d === void 0 ? void 0 : _d.call(_c);
+                this.optionsList.hidePopover?.();
                 this.optionsList.classList.remove('visible');
             }
         }
@@ -295,42 +271,65 @@ let IAComboBox = class IAComboBox extends LitElement {
     /**
      * Template for the main label for the combo box.
      *
-     * Uses the contents of the default (unnamed) slot as the label text.
+     * Uses the contents of the `label` named slot as the label text.
      */
     get labelTemplate() {
-        return html `<label id="label" for="text-input"><slot></slot></label>`;
+        return html `
+      <label id="label" for="text-input">
+        <slot name="label"></slot>
+      </label>
+    `;
     }
     /**
      * Template for the text input field that users can edit to filter the available
      * options or (if freeform behavior) to enter a custom value.
      */
     get textInputTemplate() {
-        var _a;
         const textInputClasses = classMap({
-            editable: this.behavior !== 'select-only',
+            'clear-padding': this.clearable && !this.shouldShowClearButton,
         });
-        return html `
-      <input
-        type="text"
-        id="text-input"
-        class=${textInputClasses}
-        .value=${live(this.enteredText)}
-        placeholder=${ifDefined(this.placeholder)}
-        part="text-input"
-        role="combobox"
-        autocomplete="off"
-        aria-autocomplete="list"
-        aria-controls="options-list"
-        aria-expanded=${this.open}
-        aria-activedescendant=${ifDefined((_a = this.highlightedOption) === null || _a === void 0 ? void 0 : _a.id)}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        @click=${this.handleComboBoxClick}
-        @keydown=${this.handleComboBoxKeyDown}
-        @input=${this.handleTextBoxInput}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      />
+        return html `
+      <input
+        type="text"
+        id="text-input"
+        class=${textInputClasses}
+        .value=${live(this.enteredText)}
+        placeholder=${ifDefined(this.placeholder)}
+        part="text-input"
+        role="combobox"
+        autocomplete="off"
+        aria-autocomplete="list"
+        aria-controls="options-list"
+        aria-expanded=${this.open}
+        aria-activedescendant=${ifDefined(this.highlightedOption?.id)}
+        ?readonly=${this.behavior === 'select-only'}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        @click=${this.handleComboBoxClick}
+        @keydown=${this.handleComboBoxKeyDown}
+        @input=${this.handleTextBoxInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      />
+    `;
+    }
+    /**
+     * Template for the clear button that is shown when the `clearable` property
+     * is true.
+     */
+    get clearButtonTemplate() {
+        return html `
+      <button
+        type="button"
+        id="clear-button"
+        part="clear-button"
+        tabindex="-1"
+        ?hidden=${!this.shouldShowClearButton}
+        @click=${this.handleClearButtonClick}
+      >
+        <span class="sr-only">${msg('Clear')}</span>
+        <slot name="clear-button"> ${clearIcon} </slot>
+      </button>
     `;
     }
     /**
@@ -338,51 +337,53 @@ let IAComboBox = class IAComboBox extends LitElement {
      * The icons are wrapped in named slots to allow consumers to override them.
      */
     get caretTemplate() {
-        return html `
-      <slot name="caret-closed" ?hidden=${this.open}> ${caretClosed} </slot>
-      <slot name="caret-open" ?hidden=${!this.open}> ${caretOpen} </slot>
+        return html `
+      <slot name="caret-closed" ?hidden=${this.open}> ${caretClosedIcon} </slot>
+      <slot name="caret-open" ?hidden=${!this.open}> ${caretOpenIcon} </slot>
     `;
     }
     /**
      * Template for the caret button to be shown beside the text input.
      */
     get caretButtonTemplate() {
-        return html `
-      <button
-        type="button"
-        id="caret-button"
-        part="caret-button"
-        tabindex="-1"
-        aria-controls="options-list"
-        aria-expanded=${this.open}
-        ?disabled=${this.disabled}
-        @click=${this.handleComboBoxClick}
-        @keydown=${this.handleComboBoxKeyDown}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      >
-        ${this.caretTemplate}
-      </button>
+        return html `
+      <button
+        type="button"
+        id="caret-button"
+        part="caret-button"
+        tabindex="-1"
+        aria-controls="options-list"
+        aria-expanded=${this.open}
+        ?disabled=${this.disabled}
+        @click=${this.handleComboBoxClick}
+        @keydown=${this.handleComboBoxKeyDown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <span class="sr-only">${msg('Toggle options')}</span>
+        ${this.caretTemplate}
+      </button>
     `;
     }
     /**
      * Template for the options list that is displayed when the combo box is open.
      */
     get optionsListTemplate() {
-        return html `
-      <ul
-        id="options-list"
-        part="options-list"
-        role="listbox"
-        popover
-        ?hidden=${!this.open}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      >
-        <slot name="options-list-top"></slot>
-        ${when(this.open, () => this.optionTemplates)}
-        <slot name="options-list-bottom"></slot>
-      </ul>
+        return html `
+      <ul
+        id="options-list"
+        part="options-list"
+        role="listbox"
+        tabindex="-1"
+        popover
+        ?hidden=${!this.open}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot name="options-list-top"></slot>
+        ${when(this.open, () => this.optionTemplates)}
+        <slot name="options-list-bottom"></slot>
+      </ul>
     `;
     }
     /**
@@ -394,26 +395,26 @@ let IAComboBox = class IAComboBox extends LitElement {
             return [this.emptyOptionsTemplate];
         }
         // Otherwise build a list item for each filtered option
-        return this.filteredOptions.map((opt) => {
-            var _a;
+        return this.filteredOptions.map(opt => {
             const optionClasses = classMap({
                 option: true,
                 highlight: opt === this.highlightedOption,
             });
-            return html `
-        <li
-          id=${opt.id}
-          class=${optionClasses}
-          part="option"
-          tabindex="-1"
-          @pointerenter=${this.handleOptionPointerEnter}
-          @pointermove=${this.handleOptionPointerMove}
-          @click=${this.handleOptionClick}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-        >
-          ${(_a = opt.content) !== null && _a !== void 0 ? _a : opt.text}
-        </li>
+            return html `
+        <li
+          id=${opt.id}
+          class=${optionClasses}
+          part="option"
+          role="option"
+          tabindex="-1"
+          @pointerenter=${this.handleOptionPointerEnter}
+          @pointermove=${this.handleOptionPointerMove}
+          @click=${this.handleOptionClick}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        >
+          ${opt.content ?? opt.text}
+        </li>
       `;
         });
     }
@@ -422,10 +423,10 @@ let IAComboBox = class IAComboBox extends LitElement {
      * Renders within an `empty-options` named slot so that its content can be customized.
      */
     get emptyOptionsTemplate() {
-        return html `
-      <li id="empty-options" part="empty-options">
-        <slot name="empty-options">${msg('No matching options')}</slot>
-      </li>
+        return html `
+      <li id="empty-options" part="empty-options">
+        <slot name="empty-options">${msg('No matching options')}</slot>
+      </li>
     `;
     }
     //
@@ -441,7 +442,7 @@ let IAComboBox = class IAComboBox extends LitElement {
      * Handler for when the pointer device is moved within an option in the dropdown.
      */
     handleOptionPointerMove(e) {
-        const target = e.target;
+        const target = e.currentTarget;
         const option = this.getOptionFor(target.id);
         if (option)
             this.setHighlightedOption(option);
@@ -450,7 +451,7 @@ let IAComboBox = class IAComboBox extends LitElement {
      * Handler for when the user clicks on an option in the dropdown.
      */
     handleOptionClick(e) {
-        const target = e.target;
+        const target = e.currentTarget;
         const option = this.getOptionFor(target.id);
         if (option) {
             this.setSelectedOption(option.id);
@@ -485,10 +486,16 @@ let IAComboBox = class IAComboBox extends LitElement {
                 }
                 break;
             case 'Tab':
-                this.textInput.focus();
-                return;
+                this.handleTabPressed();
+                return; // Never cancel the default behavior for Tab
+            case ' ':
+                this.handleSpacePressed();
+                // In the specific case of picking an option in select-only, we skip the defaults
+                if (this.behavior === 'select-only' && this.highlightedOption)
+                    break;
+                return; // Otherwise, don't cancel the default behavior
             default:
-                // Do nothing and allow propagation otherwise
+                // Do nothing and allow propagation for all other keys
                 return;
         }
         e.stopPropagation();
@@ -567,20 +574,46 @@ let IAComboBox = class IAComboBox extends LitElement {
     handleAltDownArrowPressed() {
         this.openOptionsMenu();
     }
+    /**
+     * Handler for when the Tab key is pressed
+     */
+    handleTabPressed() {
+        if (this.highlightedOption) {
+            this.setSelectedOption(this.highlightedOption.id);
+            if (!this.stayOpen)
+                this.open = false;
+        }
+    }
+    /**
+     * Handler for when the Space key is pressed
+     */
+    handleSpacePressed() {
+        if (this.behavior === 'select-only' && this.highlightedOption) {
+            this.setSelectedOption(this.highlightedOption.id);
+            if (!this.stayOpen)
+                this.open = false;
+        }
+    }
     /**
      * Handler for clicks on the combo box input field or caret button.
      */
     handleComboBoxClick() {
         this.toggleOptionsMenu();
     }
+    /**
+     * Handler for when the clear button is clicked.
+     */
+    handleClearButtonClick() {
+        this.clearSelectedOption();
+        this.textInput.focus();
+        this.openOptionsMenu();
+    }
     /**
      * Handler for when any part of the combo box receives focus.
      */
     handleFocus() {
-        if (this.behavior === 'select-only') {
-            this.caretButton.focus();
-        }
-        else {
+        if (this.behavior !== 'select-only') {
+            // Always keep focus on the text input if it's editable
             this.textInput.focus();
         }
         this.hasFocus = true;
@@ -592,13 +625,20 @@ let IAComboBox = class IAComboBox extends LitElement {
     handleBlur() {
         this.hasFocus = false;
         this.losingFocus = true;
+        // On the next tick, check whether we've actually lost focus to some other element,
+        // or just had a momentary internal focus switch. If it's the former, we should
+        // close the menu and possibly make a selection (depending on desired behavior).
         setTimeout(() => {
-            var _a;
-            if (this.losingFocus && !((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+            if (this.losingFocus && !this.shadowRoot?.activeElement) {
                 this.losingFocus = false;
                 this.closeOptionsMenu();
-                if (this.behavior === 'freeform')
+                if (this.behavior === 'list') {
+                    this.setTextValue(this.selectedOption?.text ?? '', false);
+                }
+                else if (this.behavior === 'freeform' &&
+                    (this.enteredText || this.value)) {
                     this.setValue(this.enteredText);
+                }
             }
         }, 0);
     }
@@ -686,18 +726,18 @@ let IAComboBox = class IAComboBox extends LitElement {
      * held by this combo box.
      */
     setSelectedOption(id) {
-        var _a;
         const option = this.getOptionFor(id);
         if (!option)
             throw new RangeError('Unknown option ID');
         const prevValue = this.value;
         this.value = option.id;
         this.internals.setFormValue(this.value);
-        this.setTextValue(option.text);
+        this.setTextValue(option.text, false);
+        this.setFilterText('');
         if (this.value !== prevValue)
             this.emitChangeEvent();
         // Invoke the option's select callback if defined
-        (_a = option.onSelected) === null || _a === void 0 ? void 0 : _a.call(option, option);
+        option.onSelected?.(option);
     }
     /**
      * Clears any currently selected option from this combo box, setting it to null
@@ -738,10 +778,20 @@ let IAComboBox = class IAComboBox extends LitElement {
     /**
      * Changes the value of the text input box, and updates the filter accordingly.
      */
-    setTextValue(value) {
+    setTextValue(value, setFilter = true) {
         this.textInput.value = value;
         this.enteredText = value;
-        this.setFilterText(value);
+        if (setFilter)
+            this.setFilterText(value);
+    }
+    /**
+     * Sets the current filter text based on the provided string. The resulting filter
+     * text might not exactly match the provided value, depending on the current case
+     * sensitivity.
+     */
+    setFilterText(baseFilterText) {
+        const { caseTransform } = this;
+        this.filterText = caseTransform(baseFilterText);
     }
     openOptionsMenu() {
         this.open = true;
@@ -777,6 +827,19 @@ let IAComboBox = class IAComboBox extends LitElement {
     //
     // HELPERS
     //
+    /**
+     * True iff no selection has been made and no text has been entered.
+     */
+    get isEmpty() {
+        return !this.selectedOption && !this.enteredText;
+    }
+    /**
+     * We only show the clear button when the `clearable` property is set
+     * and the combo box is neither empty nor disabled.
+     */
+    get shouldShowClearButton() {
+        return this.clearable && !this.disabled && !this.isEmpty;
+    }
     /**
      * Sets the size and position of the options menu to match the size and position of
      * the combo box widget. Prefers to position below the main widget, but will flip
@@ -789,11 +852,11 @@ let IAComboBox = class IAComboBox extends LitElement {
         const usableHeightAbove = mainWidgetRect.top;
         const usableHeightBelow = innerHeight - mainWidgetRect.bottom;
         // We still want to respect any CSS var specified by the consumer
-        const maxHeightVar = 'var(--comboBoxListMaxHeight, 250px)';
+        const maxHeightVar = 'var(--combo-box-list-max-height, 250px)';
         const optionsListStyles = {
             top: `${mainWidgetRect.bottom + scrollY}px`,
             left: `${mainWidgetRect.left + scrollX}px`,
-            width: `var(--comboBoxListWidth, ${mainWidgetRect.width}px)`,
+            width: `var(--combo-box-list-width, ${mainWidgetRect.width}px)`,
             maxHeight: `min(${usableHeightBelow}px, ${maxHeightVar})`,
         };
         Object.assign(optionsList.style, optionsListStyles);
@@ -816,21 +879,11 @@ let IAComboBox = class IAComboBox extends LitElement {
     get caseTransform() {
         return this.caseSensitive ? STRING_IDENTITY_FN : STRING_LOWER_CASE_FN;
     }
-    /**
-     * Sets the current filter text based on the provided string. The resulting filter
-     * text might not exactly match the provided value, depending on the current case
-     * sensitivity.
-     */
-    setFilterText(baseFilterText) {
-        const { caseTransform } = this;
-        this.filterText = caseTransform(baseFilterText);
-    }
     /**
      * Returns the combo box option having the given ID, or null if none exists.
      */
     getOptionFor(id) {
-        var _a;
-        return (_a = this.optionsByID.get(id)) !== null && _a !== void 0 ? _a : null;
+        return this.optionsByID.get(id) ?? null;
     }
     /**
      * Clears any previously-cached mapping of IDs to options, and rebuilds the
@@ -881,7 +934,7 @@ let IAComboBox = class IAComboBox extends LitElement {
             ? FILTER_PRESETS[resolvedFilterOption]
             : resolvedFilterOption;
         const filtered = this.optionsRespectingSortFlag
-            .filter((opt) => {
+            .filter(opt => {
             const optionFilteringValue = this.optionFilteringValues.get(opt);
             if (!optionFilteringValue)
                 return false;
@@ -894,15 +947,13 @@ let IAComboBox = class IAComboBox extends LitElement {
      * The first option appearing in the filtered list, or null if there are none.
      */
     get firstFilteredOption() {
-        var _a;
-        return (_a = this.filteredOptions[0]) !== null && _a !== void 0 ? _a : null;
+        return this.filteredOptions[0] ?? null;
     }
     /**
      * The last option appearing in the filtered list, or null if there are none.
      */
     get lastFilteredOption() {
-        var _a;
-        return (_a = this.filteredOptions[this.lastFilteredIndex]) !== null && _a !== void 0 ? _a : null;
+        return this.filteredOptions[this.lastFilteredIndex] ?? null;
     }
     /**
      * The index of the last filtered option, or -1 if no options match the filter.
@@ -937,111 +988,151 @@ let IAComboBox = class IAComboBox extends LitElement {
         return this.shadowRoot.getElementById(this.highlightedOption.id);
     }
     static get styles() {
-        return css `
-      #label {
-        display: block;
-        width: fit-content;
-      }
-
-      #main-widget-row {
-        display: inline-flex;
-        align-items: stretch;
-        flex-wrap: nowrap;
-        background: white;
-        border: 1px solid black;
-      }
-
-      .focused #main-widget-row {
-        outline: black auto 1px;
-        outline-offset: 3px;
-      }
-
-      #text-input {
-        appearance: none;
-        background: transparent;
-        border: none;
-        padding: var(--comboBoxPadding, 5px);
-        width: 100%;
-        font-size: inherit;
-        outline: none;
-      }
-
-      #text-input:not(.editable) {
-        cursor: pointer;
-      }
-
-      #caret-button {
-        display: inline-flex;
-        align-items: center;
-        appearance: none;
-        background: transparent;
-        border: none;
-        padding: var(--comboBoxPadding, 5px);
-        outline: none;
-        cursor: pointer;
-      }
-
-      #options-list {
-        position: absolute;
-        list-style-type: none;
-        margin: 1px 0 0;
-        border: none;
-        padding: 0;
-        background: white;
-        max-height: 400px;
-        box-shadow: 0 0 1px 1px #ddd;
-        opacity: 0;
-        transition: opacity 0.125s ease;
-      }
-
-      #options-list.visible {
-        opacity: 1;
-      }
-
-      #empty-options {
-        padding: 5px;
-        color: #606060;
-        font-style: italic;
-        text-align: center;
-      }
-
-      .caret {
-        width: 14px;
-        height: 14px;
-      }
-
-      .option {
-        padding: 5px;
-        cursor: pointer;
-      }
-
-      .highlight {
-        background-color: #dbe0ff;
-      }
-
-      .disabled,
-      .disabled * {
-        cursor: not-allowed !important;
-      }
-
-      .sr-only {
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        margin: -1px !important;
-        padding: 0 !important;
-        border: 0 !important;
-        overflow: hidden !important;
-        white-space: nowrap !important;
-        clip: rect(1px, 1px, 1px, 1px) !important;
-        -webkit-clip-path: inset(50%) !important;
-        clip-path: inset(50%) !important;
-        user-select: none !important;
-      }
+        return css `
+      #container {
+        display: inline-block;
+        width: var(--combo-box-width, auto);
+      }
+
+      #label {
+        display: block;
+        width: fit-content;
+      }
+
+      #main-widget-row {
+        display: inline-flex;
+        align-items: stretch;
+        flex-wrap: nowrap;
+        background: white;
+        border: 1px solid black;
+        width: 100%;
+      }
+
+      #main-widget-row:not(.focused):hover,
+      #main-widget-row:not(.focused):active {
+        background: #fafafa;
+      }
+
+      #main-widget-row.focused {
+        outline: black auto 1px;
+        outline-offset: 3px;
+      }
+
+      #text-input {
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: var(--combo-box-padding, 5px);
+        padding-right: 0;
+        width: 100%;
+        font-size: inherit;
+        color: inherit;
+        outline: none;
+        text-overflow: ellipsis;
+      }
+
+      #text-input.clear-padding {
+        padding-right: 30px;
+      }
+
+      #text-input:read-only {
+        cursor: pointer;
+      }
+
+      #clear-button,
+      #caret-button {
+        display: inline-flex;
+        align-items: center;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: var(--combo-box-padding, 5px) 5px;
+        outline: none;
+        cursor: pointer;
+      }
+
+      #clear-button {
+        flex: 0 0 30px;
+      }
+
+      #clear-button[hidden] {
+        display: none;
+      }
+
+      #caret-button {
+        padding-right: var(--combo-box-padding, 5px);
+      }
+
+      #options-list {
+        position: absolute;
+        list-style-type: none;
+        margin: 1px 0 0;
+        border: none;
+        padding: 0;
+        background: white;
+        max-height: 400px;
+        box-shadow: 0 0 1px 1px #ddd;
+        opacity: 0;
+        transition: opacity 0.125s ease;
+      }
+
+      #options-list.visible {
+        opacity: 1;
+      }
+
+      #empty-options {
+        padding: 5px;
+        color: #606060;
+        font-style: italic;
+        text-align: center;
+      }
+
+      #caret-button svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      #clear-button svg {
+        width: var(--combo-box-clear-icon-size, 16px);
+        height: var(--combo-box-clear-icon-size, 16px);
+      }
+
+      .option {
+        padding: 7px 5px;
+        width: 100%;
+        box-sizing: border-box;
+        line-height: 1.1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      .highlight {
+        background-color: #dbe0ff;
+      }
+
+      .disabled,
+      .disabled * {
+        cursor: not-allowed !important;
+      }
+
+      .sr-only {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        padding: 0 !important;
+        border: 0 !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
+        user-select: none !important;
+      }
     `;
     }
 };
-IAComboBox.formAssociated = true;
 __decorate([
     property({ type: Array })
 ], IAComboBox.prototype, "options", void 0);
@@ -1069,6 +1160,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'stay-open' })
 ], IAComboBox.prototype, "stayOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IAComboBox.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IAComboBox.prototype, "open", void 0);
@@ -1099,9 +1193,6 @@ __decorate([
 __decorate([
     query('#text-input')
 ], IAComboBox.prototype, "textInput", void 0);
-__decorate([
-    query('#caret-button')
-], IAComboBox.prototype, "caretButton", void 0);
 __decorate([
     query('#options-list')
 ], IAComboBox.prototype, "optionsList", void 0);