@smileid/web-components 2.0.0 → 2.0.2

package/src/components/combobox/src/Combobox.js

@@ -1,589 +1,589 @@
-function generateId(prefix) {
-  const id = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');
-  return `${prefix}-${id}`;
-}
-
-// check if element is visible in browser view port
-function isElementInView(element) {
-  const bounding = element.getBoundingClientRect();
-
-  return (
-    bounding.top >= 0 &&
-    bounding.left >= 0 &&
-    bounding.bottom <=
-      (window.innerHeight || document.documentElement.clientHeight) &&
-    bounding.right <=
-      (window.innerWidth || document.documentElement.clientWidth)
-  );
-}
-
-// check if an element is currently scrollable
-function isScrollable(element) {
-  return element && element.clientHeight < element.scrollHeight;
-}
-
-// ensure a given child element is within the parent's visible scroll area
-// if the child is not visible, scroll the parent
-function maintainScrollVisibility(activeElement, scrollParent) {
-  const { offsetHeight, offsetTop } = activeElement;
-  const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-
-  const isAbove = offsetTop < scrollTop;
-  const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
-  if (isAbove) {
-    scrollParent.scrollTo(0, offsetTop);
-  } else if (isBelow) {
-    scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
-  }
-}
-
-class ComboboxRoot extends HTMLElement {
-  constructor() {
-    super();
-
-    this.handleRoaming = this.handleRoaming.bind(this);
-  }
-
-  connectedCallback() {
-    this.trigger = this.querySelector('smileid-combobox-trigger');
-
-    document.addEventListener('click', this.handleRoaming);
-    this.addEventListener('focusout', this.handleRoaming);
-    this.addEventListener('blur', this.handleRoaming);
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('click', this.handleRoaming);
-    this.removeEventListener('focusout', this.handleRoaming);
-    this.removeEventListener('blur', this.handleRoaming);
-  }
-
-  handleRoaming(event) {
-    const target = event.relatedTarget || event.target;
-    if (this.contains(target)) {
-      return;
-    }
-
-    if (this.trigger.getAttribute('expanded') === 'true') {
-      this.trigger.setAttribute('expanded', 'false');
-    }
-  }
-}
-
-class ComboboxTrigger extends HTMLElement {
-  constructor() {
-    super();
-
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleSelection = this.handleSelection.bind(this);
-
-    this.toggleExpansionState = this.toggleExpansionState.bind(this);
-  }
-
-  get type() {
-    return this.getAttribute('type') || 'text';
-  }
-
-  get label() {
-    return this.getAttribute('label') || '';
-  }
-
-  get value() {
-    return this.getAttribute('value') || '';
-  }
-
-  get disabled() {
-    return this.hasAttribute('disabled');
-  }
-
-  connectedCallback() {
-    if (!this.label) {
-      throw new Error('<combobox-trigger>: a label attribute is required');
-    }
-
-    this.innerHTML = `${
-      this.type === 'text'
-        ? `
-        <div>
-          <input ${this.value ? `value="${this.value}" ` : ''}${
-            this.disabled ? ' disabled ' : ''
-          }type="text" placeholder="${this.label}" />
-          <button ${this.disabled ? 'disabled ' : ''}tabindex='-1' type='button'>
-            <span class="visually-hidden">Toggle</span>
-          </button>
-        </div>
-      `
-        : `<button ${this.disabled ? 'disabled ' : ''}type="button">${
-            this.value || this.label
-          }</button>`
-    }`;
-
-    this.setAttribute('expanded', false);
-
-    this.inputTrigger = this.querySelector('input');
-    this.buttonTrigger = this.querySelector('button');
-
-    this.buttonTrigger.setAttribute('aria-expanded', false);
-    this.buttonTrigger.setAttribute('role', 'combobox');
-
-    this.buttonTrigger.addEventListener('keydown', this.handleKeyDown);
-    this.buttonTrigger.addEventListener('click', this.toggleExpansionState);
-
-    if (this.inputTrigger) {
-      this.inputTrigger.setAttribute('aria-expanded', false);
-      this.inputTrigger.setAttribute('role', 'combobox');
-
-      this.inputTrigger.addEventListener('keydown', this.handleKeyDown);
-      this.inputTrigger.addEventListener('keyup', this.handleKeyUp);
-      this.inputTrigger.addEventListener('change', (e) => e.stopPropagation());
-    }
-
-    this.listbox = this.parentElement.querySelector('smileid-combobox-listbox');
-
-    this.options = Array.from(
-      this.parentElement.querySelectorAll('smileid-combobox-option'),
-    );
-    this.options.forEach((node) => {
-      node.addEventListener('combobox.option.select', this.handleSelection);
-    });
-  }
-
-  disconnectedCallback() {
-    this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown);
-    this.buttonTrigger.removeEventListener('click', this.toggleExpansionState);
-
-    if (this.inputTrigger) {
-      this.inputTrigger.removeEventListener('keydown', this.handleKeyDown);
-      this.inputTrigger.removeEventListener('keyup', this.handleKeyUp);
-      this.inputTrigger.removeEventListener('change', (e) =>
-        e.stopPropagation(),
-      );
-    }
-
-    if (this.options) {
-      this.options.forEach((node) => {
-        node.removeEventListener(
-          'combobox.option.select',
-          this.handleSelection,
-        );
-      });
-    }
-  }
-
-  handleKeyDown(event) {
-    if (event.ctrlKey || event.shiftKey) {
-      return;
-    }
-
-    const { key } = event;
-
-    switch (key) {
-      case 'Enter':
-      case 'Space':
-      case ' ':
-        if (this.getAttribute('expanded') === 'true') {
-          if (this.inputTrigger && (key === 'Space' || key === ' ')) {
-            this.resetListbox();
-          } else {
-            event.preventDefault();
-            const selectedOption = this.buttonTrigger.getAttribute(
-              'aria-activedescendant',
-            );
-            if (selectedOption) {
-              document.getElementById(selectedOption).click();
-            }
-          }
-        } else {
-          event.preventDefault();
-          this.toggleExpansionState();
-        }
-        break;
-      case 'Esc':
-      case 'Escape':
-        event.preventDefault();
-        if (this.getAttribute('expanded') === 'true') {
-          this.toggleExpansionState();
-        }
-        break;
-      case 'Down':
-      case 'ArrowDown':
-        event.preventDefault();
-        if (this.getAttribute('expanded') !== 'true') {
-          this.toggleExpansionState();
-          this.focusListbox('First');
-        } else {
-          this.focusListbox('Down');
-        }
-        break;
-      case 'Up':
-      case 'ArrowUp':
-        event.preventDefault();
-        if (this.getAttribute('expanded') !== 'true') {
-          this.toggleExpansionState();
-          this.focusListbox('Last');
-        } else {
-          this.focusListbox('Up');
-        }
-        break;
-      case 'Left':
-      case 'ArrowLeft':
-      case 'Right':
-      case 'ArrowRight':
-      case 'Home':
-      case 'End':
-        this.resetListbox();
-        break;
-      case 'Tab':
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleKeyUp(event) {
-    const { key } = event;
-
-    const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S| /);
-
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      event.preventDefault();
-      if (this.getAttribute('expanded') === 'true') {
-        this.toggleExpansionState();
-      } else if (this.inputTrigger) {
-        this.inputTrigger.value = '';
-
-        this.listbox.dispatchEvent(
-          new CustomEvent('combobox.listbox.filter', { detail: '' }),
-        );
-      }
-    }
-
-    if (isPrintableCharacter(key) || key === 'Backspace') {
-      this.resetListbox();
-      this.filterListbox(event.target.value);
-    }
-  }
-
-  toggleExpansionState() {
-    const listboxIsExpanded = this.getAttribute('expanded') === 'true';
-    this.setAttribute('expanded', !listboxIsExpanded);
-    this.buttonTrigger.setAttribute('aria-expanded', !listboxIsExpanded);
-    if (this.inputTrigger) {
-      this.inputTrigger.setAttribute('aria-expanded', !listboxIsExpanded);
-    }
-  }
-
-  handleSelection(event) {
-    if (this.inputTrigger) {
-      this.inputTrigger.value = event.detail.label;
-    } else {
-      this.buttonTrigger.textContent = event.detail.label;
-    }
-
-    this.toggleExpansionState();
-    this.parentElement.dispatchEvent(
-      new CustomEvent('combobox.change', {
-        detail: {
-          value: event.detail.value,
-        },
-      }),
-    );
-  }
-
-  filterListbox(value) {
-    if (this.getAttribute('expanded') !== 'true') {
-      this.toggleExpansionState();
-    }
-
-    this.listbox.dispatchEvent(
-      new CustomEvent('combobox.listbox.filter', { detail: value }),
-    );
-  }
-
-  focusListbox(direction) {
-    this.resetListbox();
-    this.listbox.dispatchEvent(
-      new CustomEvent('combobox.listbox.focus', {
-        detail: {
-          direction,
-        },
-      }),
-    );
-  }
-
-  resetListbox() {
-    this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));
-  }
-}
-
-class ComboboxListbox extends HTMLElement {
-  constructor() {
-    super();
-
-    this.handleFilter = this.handleFilter.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-
-    this.handleOptionSelection = this.handleOptionSelection.bind(this);
-  }
-
-  get emptyLabel() {
-    return this.getAttribute('empty-label');
-  }
-
-  get emptyState() {
-    return `
-      <p id='empty-state' style="text-align: center;">
-        ${this.emptyLabel || 'No items'}
-      </p>
-    `;
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('id', generateId('listbox'));
-
-    this.addEventListener('combobox.listbox.filter', this.handleFilter);
-    this.addEventListener('combobox.listbox.focus', this.handleFocus);
-    this.addEventListener('combobox.listbox.reset', this.handleReset);
-
-    this.triggers = Array.from(
-      this.parentElement.querySelectorAll(
-        'smileid-combobox-trigger input, smileid-combobox-trigger button',
-      ),
-    );
-    this.triggers.forEach((node) =>
-      node.setAttribute('aria-controls', this.getAttribute('id')),
-    );
-
-    this.optionNodes = Array.from(
-      this.querySelectorAll('smileid-combobox-option'),
-    );
-    this.selectedNode =
-      this.optionNodes.find(
-        (node) =>
-          !node.hasAttribute('hidden') && node.hasAttribute('aria-selected'),
-      ) || this.optionNodes.filter((node) => !node.hasAttribute('hidden'))[0];
-    this.selectedNode.setAttribute('tabindex', '0');
-
-    this.optionNodes.forEach((node) => {
-      node.addEventListener(
-        'combobox.option.select',
-        this.handleOptionSelection,
-      );
-    });
-
-    if (this.optionNodes.length === 0) {
-      this.innerHTML = this.emptyState;
-    }
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('combobox.listbox.filter', this.handleFilter);
-    this.removeEventListener('combobox.listbox.focus', this.handleFocus);
-    this.removeEventListener('combobox.listbox.reset', this.handleReset);
-    this.optionNodes.forEach((node) => {
-      node.removeEventListener(
-        'combobox.option.select',
-        this.handleOptionSelection,
-      );
-    });
-  }
-
-  static get observedAttributes() {
-    return ['search-term'];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case 'search-term':
-        if (oldValue && !newValue) {
-          this.optionNodes.forEach((node) => {
-            node.removeAttribute('hidden');
-          });
-        } else if (newValue) {
-          this.filterNodes(newValue);
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  filterNodes(searchTerm) {
-    this.optionNodes.forEach((node) => {
-      const value = node.getAttribute('value').toLowerCase();
-      const label = node.getAttribute('label').toLowerCase();
-
-      const containsSearchTerm =
-        value.includes(searchTerm.toLowerCase()) ||
-        label.includes(searchTerm.toLowerCase());
-
-      if (containsSearchTerm) {
-        node.removeAttribute('hidden');
-      } else {
-        node.setAttribute('hidden', true);
-      }
-    });
-
-    const optionsVisible = this.optionNodes.find(
-      (node) => !node.hasAttribute('hidden'),
-    );
-    const emptyState = this.querySelector('#empty-state');
-
-    if (!optionsVisible && !emptyState) {
-      this.insertAdjacentHTML('afterbegin', this.emptyState);
-    } else if (optionsVisible && emptyState) {
-      this.removeChild(emptyState);
-    }
-  }
-
-  handleFilter(event) {
-    const searchTerm = event.detail;
-    this.setAttribute('search-term', searchTerm);
-  }
-
-  handleFocus(event) {
-    this.setSelected(event.detail.direction);
-  }
-
-  handleReset() {
-    this.optionNodes.forEach((node) => node.setAttribute('tabindex', '-1'));
-  }
-
-  handleOptionSelection(event) {
-    const inputTrigger = this.triggers.filter(
-      (node) => node.tagName === 'INPUT',
-    )[0];
-
-    if (inputTrigger) {
-      this.setAttribute('search-term', event.detail.label);
-    }
-  }
-
-  setSelected(direction) {
-    const visibleOptions = this.optionNodes.filter(
-      (node) => !node.hasAttribute('hidden'),
-    );
-    this.selectedNode.setAttribute('tabindex', '0');
-    const currentIndex = visibleOptions.findIndex(
-      (node) => node === this.selectedNode,
-    );
-    const lastIndex = visibleOptions.length - 1;
-
-    let nextIndex;
-    switch (direction) {
-      case 'First':
-        nextIndex = 0;
-        break;
-      case 'Last':
-        nextIndex = lastIndex;
-        break;
-      case 'Up':
-        if (currentIndex === 0) {
-          nextIndex = lastIndex;
-        } else {
-          nextIndex = currentIndex - 1;
-        }
-        break;
-      default:
-        if (currentIndex === lastIndex) {
-          nextIndex = 0;
-        } else {
-          nextIndex = currentIndex + 1;
-        }
-        break;
-    }
-
-    if (currentIndex !== nextIndex) {
-      this.swapSelected(this.selectedNode, visibleOptions[nextIndex]);
-    }
-  }
-
-  swapSelected(currentNode, newNode) {
-    currentNode.setAttribute('tabindex', '-1');
-    newNode.setAttribute('tabindex', '0');
-
-    this.selectedNode = newNode;
-
-    // ACTION: ensure the new option is in view
-    if (isScrollable(this)) {
-      maintainScrollVisibility(this.selectedNode, this);
-    }
-
-    // ACTION: scroll into view if node is not visible
-    if (!isElementInView(newNode)) {
-      newNode.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-
-    this.triggers.forEach((node) =>
-      node.setAttribute('aria-activedescendant', newNode.id),
-    );
-  }
-}
-
-class ComboboxOption extends HTMLElement {
-  connectedCallback() {
-    this.setAttribute('role', 'option');
-    this.setAttribute('tabindex', '-1');
-    this.setAttribute('id', generateId('option'));
-
-    this.options = Array.from(
-      this.parentElement.querySelectorAll('smileid-combobox-option'),
-    );
-    this.addEventListener('click', this.select);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('click', this.select);
-  }
-
-  get value() {
-    return this.getAttribute('value');
-  }
-
-  get label() {
-    return this.getAttribute('label');
-  }
-
-  select() {
-    const selectedOption = this.options.find((node) =>
-      node.getAttribute('aria-selected'),
-    );
-
-    if (selectedOption) {
-      selectedOption.removeAttribute('aria-selected');
-    }
-
-    this.setAttribute('aria-selected', true);
-
-    this.dispatchEvent(
-      new CustomEvent('combobox.option.select', {
-        detail: {
-          id: this.getAttribute('id'),
-          label: this.label,
-          value: this.value,
-        },
-      }),
-    );
-  }
-}
-
-const Root = ComboboxRoot;
-const Trigger = ComboboxTrigger;
-const List = ComboboxListbox;
-const Option = ComboboxOption;
-
-if (
-  'customElements' in window &&
-  !window.customElements.get('smileid-combobox')
-) {
-  window.customElements.define('smileid-combobox', Root);
-  window.customElements.define('smileid-combobox-trigger', Trigger);
-  window.customElements.define('smileid-combobox-listbox', List);
-  window.customElements.define('smileid-combobox-option', Option);
-}
-
-export { Root, Trigger, List, Option };
+function generateId(prefix) {
+  const id = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');
+  return `${prefix}-${id}`;
+}
+
+// check if element is visible in browser view port
+function isElementInView(element) {
+  const bounding = element.getBoundingClientRect();
+
+  return (
+    bounding.top >= 0 &&
+    bounding.left >= 0 &&
+    bounding.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    bounding.right <=
+      (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+// check if an element is currently scrollable
+function isScrollable(element) {
+  return element && element.clientHeight < element.scrollHeight;
+}
+
+// ensure a given child element is within the parent's visible scroll area
+// if the child is not visible, scroll the parent
+function maintainScrollVisibility(activeElement, scrollParent) {
+  const { offsetHeight, offsetTop } = activeElement;
+  const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
+
+  const isAbove = offsetTop < scrollTop;
+  const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+
+  if (isAbove) {
+    scrollParent.scrollTo(0, offsetTop);
+  } else if (isBelow) {
+    scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
+  }
+}
+
+class ComboboxRoot extends HTMLElement {
+  constructor() {
+    super();
+
+    this.handleRoaming = this.handleRoaming.bind(this);
+  }
+
+  connectedCallback() {
+    this.trigger = this.querySelector('smileid-combobox-trigger');
+
+    document.addEventListener('click', this.handleRoaming);
+    this.addEventListener('focusout', this.handleRoaming);
+    this.addEventListener('blur', this.handleRoaming);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleRoaming);
+    this.removeEventListener('focusout', this.handleRoaming);
+    this.removeEventListener('blur', this.handleRoaming);
+  }
+
+  handleRoaming(event) {
+    const target = event.relatedTarget || event.target;
+    if (this.contains(target)) {
+      return;
+    }
+
+    if (this.trigger.getAttribute('expanded') === 'true') {
+      this.trigger.setAttribute('expanded', 'false');
+    }
+  }
+}
+
+class ComboboxTrigger extends HTMLElement {
+  constructor() {
+    super();
+
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleSelection = this.handleSelection.bind(this);
+
+    this.toggleExpansionState = this.toggleExpansionState.bind(this);
+  }
+
+  get type() {
+    return this.getAttribute('type') || 'text';
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  connectedCallback() {
+    if (!this.label) {
+      throw new Error('<combobox-trigger>: a label attribute is required');
+    }
+
+    this.innerHTML = `${
+      this.type === 'text'
+        ? `
+        <div>
+          <input ${this.value ? `value="${this.value}" ` : ''}${
+            this.disabled ? ' disabled ' : ''
+          }type="text" placeholder="${this.label}" />
+          <button ${this.disabled ? 'disabled ' : ''}tabindex='-1' type='button'>
+            <span class="visually-hidden">Toggle</span>
+          </button>
+        </div>
+      `
+        : `<button ${this.disabled ? 'disabled ' : ''}type="button">${
+            this.value || this.label
+          }</button>`
+    }`;
+
+    this.setAttribute('expanded', false);
+
+    this.inputTrigger = this.querySelector('input');
+    this.buttonTrigger = this.querySelector('button');
+
+    this.buttonTrigger.setAttribute('aria-expanded', false);
+    this.buttonTrigger.setAttribute('role', 'combobox');
+
+    this.buttonTrigger.addEventListener('keydown', this.handleKeyDown);
+    this.buttonTrigger.addEventListener('click', this.toggleExpansionState);
+
+    if (this.inputTrigger) {
+      this.inputTrigger.setAttribute('aria-expanded', false);
+      this.inputTrigger.setAttribute('role', 'combobox');
+
+      this.inputTrigger.addEventListener('keydown', this.handleKeyDown);
+      this.inputTrigger.addEventListener('keyup', this.handleKeyUp);
+      this.inputTrigger.addEventListener('change', (e) => e.stopPropagation());
+    }
+
+    this.listbox = this.parentElement.querySelector('smileid-combobox-listbox');
+
+    this.options = Array.from(
+      this.parentElement.querySelectorAll('smileid-combobox-option'),
+    );
+    this.options.forEach((node) => {
+      node.addEventListener('combobox.option.select', this.handleSelection);
+    });
+  }
+
+  disconnectedCallback() {
+    this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown);
+    this.buttonTrigger.removeEventListener('click', this.toggleExpansionState);
+
+    if (this.inputTrigger) {
+      this.inputTrigger.removeEventListener('keydown', this.handleKeyDown);
+      this.inputTrigger.removeEventListener('keyup', this.handleKeyUp);
+      this.inputTrigger.removeEventListener('change', (e) =>
+        e.stopPropagation(),
+      );
+    }
+
+    if (this.options) {
+      this.options.forEach((node) => {
+        node.removeEventListener(
+          'combobox.option.select',
+          this.handleSelection,
+        );
+      });
+    }
+  }
+
+  handleKeyDown(event) {
+    if (event.ctrlKey || event.shiftKey) {
+      return;
+    }
+
+    const { key } = event;
+
+    switch (key) {
+      case 'Enter':
+      case 'Space':
+      case ' ':
+        if (this.getAttribute('expanded') === 'true') {
+          if (this.inputTrigger && (key === 'Space' || key === ' ')) {
+            this.resetListbox();
+          } else {
+            event.preventDefault();
+            const selectedOption = this.buttonTrigger.getAttribute(
+              'aria-activedescendant',
+            );
+            if (selectedOption) {
+              document.getElementById(selectedOption).click();
+            }
+          }
+        } else {
+          event.preventDefault();
+          this.toggleExpansionState();
+        }
+        break;
+      case 'Esc':
+      case 'Escape':
+        event.preventDefault();
+        if (this.getAttribute('expanded') === 'true') {
+          this.toggleExpansionState();
+        }
+        break;
+      case 'Down':
+      case 'ArrowDown':
+        event.preventDefault();
+        if (this.getAttribute('expanded') !== 'true') {
+          this.toggleExpansionState();
+          this.focusListbox('First');
+        } else {
+          this.focusListbox('Down');
+        }
+        break;
+      case 'Up':
+      case 'ArrowUp':
+        event.preventDefault();
+        if (this.getAttribute('expanded') !== 'true') {
+          this.toggleExpansionState();
+          this.focusListbox('Last');
+        } else {
+          this.focusListbox('Up');
+        }
+        break;
+      case 'Left':
+      case 'ArrowLeft':
+      case 'Right':
+      case 'ArrowRight':
+      case 'Home':
+      case 'End':
+        this.resetListbox();
+        break;
+      case 'Tab':
+        break;
+      default:
+        break;
+    }
+  }
+
+  handleKeyUp(event) {
+    const { key } = event;
+
+    const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S| /);
+
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.preventDefault();
+      if (this.getAttribute('expanded') === 'true') {
+        this.toggleExpansionState();
+      } else if (this.inputTrigger) {
+        this.inputTrigger.value = '';
+
+        this.listbox.dispatchEvent(
+          new CustomEvent('combobox.listbox.filter', { detail: '' }),
+        );
+      }
+    }
+
+    if (isPrintableCharacter(key) || key === 'Backspace') {
+      this.resetListbox();
+      this.filterListbox(event.target.value);
+    }
+  }
+
+  toggleExpansionState() {
+    const listboxIsExpanded = this.getAttribute('expanded') === 'true';
+    this.setAttribute('expanded', !listboxIsExpanded);
+    this.buttonTrigger.setAttribute('aria-expanded', !listboxIsExpanded);
+    if (this.inputTrigger) {
+      this.inputTrigger.setAttribute('aria-expanded', !listboxIsExpanded);
+    }
+  }
+
+  handleSelection(event) {
+    if (this.inputTrigger) {
+      this.inputTrigger.value = event.detail.label;
+    } else {
+      this.buttonTrigger.textContent = event.detail.label;
+    }
+
+    this.toggleExpansionState();
+    this.parentElement.dispatchEvent(
+      new CustomEvent('combobox.change', {
+        detail: {
+          value: event.detail.value,
+        },
+      }),
+    );
+  }
+
+  filterListbox(value) {
+    if (this.getAttribute('expanded') !== 'true') {
+      this.toggleExpansionState();
+    }
+
+    this.listbox.dispatchEvent(
+      new CustomEvent('combobox.listbox.filter', { detail: value }),
+    );
+  }
+
+  focusListbox(direction) {
+    this.resetListbox();
+    this.listbox.dispatchEvent(
+      new CustomEvent('combobox.listbox.focus', {
+        detail: {
+          direction,
+        },
+      }),
+    );
+  }
+
+  resetListbox() {
+    this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));
+  }
+}
+
+class ComboboxListbox extends HTMLElement {
+  constructor() {
+    super();
+
+    this.handleFilter = this.handleFilter.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+
+    this.handleOptionSelection = this.handleOptionSelection.bind(this);
+  }
+
+  get emptyLabel() {
+    return this.getAttribute('empty-label');
+  }
+
+  get emptyState() {
+    return `
+      <p id='empty-state' style="text-align: center;">
+        ${this.emptyLabel || 'No items'}
+      </p>
+    `;
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'listbox');
+    this.setAttribute('id', generateId('listbox'));
+
+    this.addEventListener('combobox.listbox.filter', this.handleFilter);
+    this.addEventListener('combobox.listbox.focus', this.handleFocus);
+    this.addEventListener('combobox.listbox.reset', this.handleReset);
+
+    this.triggers = Array.from(
+      this.parentElement.querySelectorAll(
+        'smileid-combobox-trigger input, smileid-combobox-trigger button',
+      ),
+    );
+    this.triggers.forEach((node) =>
+      node.setAttribute('aria-controls', this.getAttribute('id')),
+    );
+
+    this.optionNodes = Array.from(
+      this.querySelectorAll('smileid-combobox-option'),
+    );
+    this.selectedNode =
+      this.optionNodes.find(
+        (node) =>
+          !node.hasAttribute('hidden') && node.hasAttribute('aria-selected'),
+      ) || this.optionNodes.filter((node) => !node.hasAttribute('hidden'))[0];
+    this.selectedNode.setAttribute('tabindex', '0');
+
+    this.optionNodes.forEach((node) => {
+      node.addEventListener(
+        'combobox.option.select',
+        this.handleOptionSelection,
+      );
+    });
+
+    if (this.optionNodes.length === 0) {
+      this.innerHTML = this.emptyState;
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('combobox.listbox.filter', this.handleFilter);
+    this.removeEventListener('combobox.listbox.focus', this.handleFocus);
+    this.removeEventListener('combobox.listbox.reset', this.handleReset);
+    this.optionNodes.forEach((node) => {
+      node.removeEventListener(
+        'combobox.option.select',
+        this.handleOptionSelection,
+      );
+    });
+  }
+
+  static get observedAttributes() {
+    return ['search-term'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'search-term':
+        if (oldValue && !newValue) {
+          this.optionNodes.forEach((node) => {
+            node.removeAttribute('hidden');
+          });
+        } else if (newValue) {
+          this.filterNodes(newValue);
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  filterNodes(searchTerm) {
+    this.optionNodes.forEach((node) => {
+      const value = node.getAttribute('value').toLowerCase();
+      const label = node.getAttribute('label').toLowerCase();
+
+      const containsSearchTerm =
+        value.includes(searchTerm.toLowerCase()) ||
+        label.includes(searchTerm.toLowerCase());
+
+      if (containsSearchTerm) {
+        node.removeAttribute('hidden');
+      } else {
+        node.setAttribute('hidden', true);
+      }
+    });
+
+    const optionsVisible = this.optionNodes.find(
+      (node) => !node.hasAttribute('hidden'),
+    );
+    const emptyState = this.querySelector('#empty-state');
+
+    if (!optionsVisible && !emptyState) {
+      this.insertAdjacentHTML('afterbegin', this.emptyState);
+    } else if (optionsVisible && emptyState) {
+      this.removeChild(emptyState);
+    }
+  }
+
+  handleFilter(event) {
+    const searchTerm = event.detail;
+    this.setAttribute('search-term', searchTerm);
+  }
+
+  handleFocus(event) {
+    this.setSelected(event.detail.direction);
+  }
+
+  handleReset() {
+    this.optionNodes.forEach((node) => node.setAttribute('tabindex', '-1'));
+  }
+
+  handleOptionSelection(event) {
+    const inputTrigger = this.triggers.filter(
+      (node) => node.tagName === 'INPUT',
+    )[0];
+
+    if (inputTrigger) {
+      this.setAttribute('search-term', event.detail.label);
+    }
+  }
+
+  setSelected(direction) {
+    const visibleOptions = this.optionNodes.filter(
+      (node) => !node.hasAttribute('hidden'),
+    );
+    this.selectedNode.setAttribute('tabindex', '0');
+    const currentIndex = visibleOptions.findIndex(
+      (node) => node === this.selectedNode,
+    );
+    const lastIndex = visibleOptions.length - 1;
+
+    let nextIndex;
+    switch (direction) {
+      case 'First':
+        nextIndex = 0;
+        break;
+      case 'Last':
+        nextIndex = lastIndex;
+        break;
+      case 'Up':
+        if (currentIndex === 0) {
+          nextIndex = lastIndex;
+        } else {
+          nextIndex = currentIndex - 1;
+        }
+        break;
+      default:
+        if (currentIndex === lastIndex) {
+          nextIndex = 0;
+        } else {
+          nextIndex = currentIndex + 1;
+        }
+        break;
+    }
+
+    if (currentIndex !== nextIndex) {
+      this.swapSelected(this.selectedNode, visibleOptions[nextIndex]);
+    }
+  }
+
+  swapSelected(currentNode, newNode) {
+    currentNode.setAttribute('tabindex', '-1');
+    newNode.setAttribute('tabindex', '0');
+
+    this.selectedNode = newNode;
+
+    // ACTION: ensure the new option is in view
+    if (isScrollable(this)) {
+      maintainScrollVisibility(this.selectedNode, this);
+    }
+
+    // ACTION: scroll into view if node is not visible
+    if (!isElementInView(newNode)) {
+      newNode.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    this.triggers.forEach((node) =>
+      node.setAttribute('aria-activedescendant', newNode.id),
+    );
+  }
+}
+
+class ComboboxOption extends HTMLElement {
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+    this.setAttribute('tabindex', '-1');
+    this.setAttribute('id', generateId('option'));
+
+    this.options = Array.from(
+      this.parentElement.querySelectorAll('smileid-combobox-option'),
+    );
+    this.addEventListener('click', this.select);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.select);
+  }
+
+  get value() {
+    return this.getAttribute('value');
+  }
+
+  get label() {
+    return this.getAttribute('label');
+  }
+
+  select() {
+    const selectedOption = this.options.find((node) =>
+      node.getAttribute('aria-selected'),
+    );
+
+    if (selectedOption) {
+      selectedOption.removeAttribute('aria-selected');
+    }
+
+    this.setAttribute('aria-selected', true);
+
+    this.dispatchEvent(
+      new CustomEvent('combobox.option.select', {
+        detail: {
+          id: this.getAttribute('id'),
+          label: this.label,
+          value: this.value,
+        },
+      }),
+    );
+  }
+}
+
+const Root = ComboboxRoot;
+const Trigger = ComboboxTrigger;
+const List = ComboboxListbox;
+const Option = ComboboxOption;
+
+if (
+  'customElements' in window &&
+  !window.customElements.get('smileid-combobox')
+) {
+  window.customElements.define('smileid-combobox', Root);
+  window.customElements.define('smileid-combobox-trigger', Trigger);
+  window.customElements.define('smileid-combobox-listbox', List);
+  window.customElements.define('smileid-combobox-option', Option);
+}
+
+export { Root, Trigger, List, Option };