@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.7c990f3

package/dist/components/six-dropdown2.js

@@ -1,497 +1,522 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as scrollIntoView } from './scroll.js';
 import { P as Popover } from './popover.js';
 import { E as EventListeners } from './event-listeners.js';
 import { b as getSlotChildren } from './slot.js';
 import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control.js';
+import { d as defineCustomElement$5 } from './six-error2.js';
 import { d as defineCustomElement$4 } from './six-icon2.js';
 import { d as defineCustomElement$3 } from './six-input2.js';
 import { d as defineCustomElement$2 } from './six-menu2.js';
 import { d as defineCustomElement$1 } from './six-menu-item2.js';
 
 function isTabbable(el) {
-  const tabIndex = el.tabIndex;
-  return tabIndex > -1;
+    const tabIndex = el.tabIndex;
+    return tabIndex > -1;
 }
 function getNearestTabbableElement(el) {
-  // Check the element
-  if (isTabbable(el)) {
-    return el;
-  }
-  // Check the element's shadow root
-  if (el.shadowRoot) {
-    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable);
-    if (tabbableShadowChild) {
-      return tabbableShadowChild;
+    // Check the element
+    if (isTabbable(el)) {
+        return el;
     }
-  }
-  // Check the element's children
-  if (el.children) {
-    return [...el.children].map(getNearestTabbableElement)[0];
-  }
-  return null;
+    // Check the element's shadow root
+    if (el.shadowRoot != null) {
+        const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e));
+        if (tabbableShadowChild != null) {
+            return tabbableShadowChild;
+        }
+    }
+    // Check the element's children
+    if (el.children != null) {
+        return [...el.children].map((e) => getNearestTabbableElement(e)).at(0);
+    }
+    return undefined;
 }
 
-const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";
+const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";
 
 const isTagName = (name) => (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === name.toLowerCase();
 const isSixMenu = isTagName('six-menu');
 const isSixMenuItem = isTagName('six-menu-item');
 let id = 0;
 const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixShow = createEvent(this, "six-dropdown-show", 7);
-    this.sixAfterShow = createEvent(this, "six-dropdown-after-show", 7);
-    this.sixHide = createEvent(this, "six-dropdown-hide", 7);
-    this.sixAfterHide = createEvent(this, "six-dropdown-after-hide", 7);
-    this.sixAutoFilterFired = createEvent(this, "six-dropdown-auto-filter-fired", 7);
-    this.sixAsyncFilterFired = createEvent(this, "six-async-filter-fired", 7);
-    this.sixScroll = createEvent(this, "six-dropdown-scroll", 7);
-    this.componentId = `dropdown-${++id}`;
-    this.isVisible = false;
-    this.hasBeenInitialized = false;
-    this.eventListeners = new EventListeners();
-    this.getMenuItems = () => {
-      if (this._options !== null) {
-        return this._options.map((option) => h("six-menu-item", { value: option.value }, option.label));
-      }
-      const [panel] = getSlotChildren(this.panel);
-      // the menu-items can be in a slot e.g. in six-select or direct children of the panel
-      return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
-    };
-    this.handleFilterInputChange = () => {
-      var _a, _b;
-      const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-      if (this._options) {
-        this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
-      }
-      else {
-        this.handleFilteringForSlotItems(lowerCaseFilterTerm);
-      }
-      this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });
-    };
-    this.open = false;
-    this.placement = 'bottom-start';
-    this.closeOnSelect = true;
-    this.distance = 0;
-    this.skidding = 0;
-    this.hoist = false;
-    this.containingElement = undefined;
-    this.filter = false;
-    this.asyncFilter = false;
-    this.filterPlaceholder = 'Filter...';
-    this.autofocusFilter = true;
-    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
-    this.disableHideOnEnterAndSpace = false;
-    this.options = null;
-    this.virtualScroll = false;
-    this._options = null;
-  }
-  get hasFilterEnabled() {
-    return this.filter || this.asyncFilter;
-  }
-  get container() {
-    return this.containingElement || this.host;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-    this.updateAccessibleTrigger();
-  }
-  handlePopoverOptionsChange() {
-    this.popover.setOptions({
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-    });
-  }
-  handleOptionsChange() {
-    this._options = [...this.options];
-  }
-  connectedCallback() {
-    if (this.virtualScroll && this.options === null) {
-      console.error('Options must be defined when using virtual scrolling');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-dropdown-show", 7);
+        this.sixAfterShow = createEvent(this, "six-dropdown-after-show", 7);
+        this.sixHide = createEvent(this, "six-dropdown-hide", 7);
+        this.sixAfterHide = createEvent(this, "six-dropdown-after-hide", 7);
+        this.sixAutoFilter = createEvent(this, "six-dropdown-auto-filter-fired", 7);
+        this.sixAsyncFilterFired = createEvent(this, "six-async-filter-fired", 7);
+        this.sixScroll = createEvent(this, "six-dropdown-scroll", 7);
+        this.componentId = `dropdown-${++id}`;
+        this.isVisible = false;
+        this.hasBeenInitialized = false;
+        this.eventListeners = new EventListeners();
+        this.getMenuItems = () => {
+            if (this.filteredOptions.length > 0) {
+                return this.filteredOptions.map((option) => h("six-menu-item", { value: option.value }, option.label));
+            }
+            if (this.panel == null)
+                return [];
+            const [panel] = getSlotChildren(this.panel);
+            // the menu-items can be in a slot e.g. in six-select or direct children of the panel
+            return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
+        };
+        this.handleFilterInputChange = () => {
+            var _a, _b;
+            if (this.filterInputElement == null)
+                return;
+            const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            if (this.filteredOptions.length > 0) {
+                this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
+            }
+            else {
+                this.handleFilteringForSlotItems(lowerCaseFilterTerm);
+            }
+            this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
+        };
+        this.handleDocumentKeyDown = (event) => {
+            var _a;
+            const keyboardEvent = event;
+            // Close when escape is pressed
+            if (keyboardEvent.key === 'Escape') {
+                void this.hide();
+                this.focusOnTrigger();
+                return;
+            }
+            if (this.filterInputElement === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+                if (keyboardEvent.key === 'ArrowDown') {
+                    const item = this.getMenuItems().find((item) => item.style.display !== 'none');
+                    if (item != null) {
+                        item.setFocus();
+                    }
+                }
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                // Tabbing within an open menu should close the dropdown and refocus the trigger
+                if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {
+                    keyboardEvent.preventDefault();
+                    void this.hide();
+                    this.focusOnTrigger();
+                    return;
+                }
+                // Tabbing outside the containing element closes the panel
+                //
+                // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+                // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+                setTimeout(() => {
+                    var _a, _b;
+                    const activeElement = this.container.getRootNode() instanceof ShadowRoot
+                        ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
+                        : document.activeElement;
+                    if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
+                        void this.hide();
+                        return;
+                    }
+                });
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.container)) {
+                void this.hide();
+                return;
+            }
+        };
+        this.handlePanelSelect = (event) => {
+            const target = event.target;
+            // Hide the dropdown when a menu item is selected
+            if (this.closeOnSelect && isSixMenu(target)) {
+                void this.hide();
+                this.focusOnTrigger();
+            }
+        };
+        this.handleTriggerClick = () => {
+            this.open ? this.hide() : this.show();
+        };
+        this.handleTriggerKeyDown = (event) => {
+            // Close when escape or tab is pressed
+            if (event.key === 'Escape') {
+                this.focusOnTrigger();
+                void this.hide();
+                return;
+            }
+            // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+            // key again to hide the menu in case they don't want to make a selection.
+            if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
+                event.preventDefault();
+                this.open ? void this.hide() : void this.show();
+                return;
+            }
+            const menu = this.getMenu();
+            // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+            // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+            // faster navigation.
+            if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+                // Show the menu if it's not already open
+                if (!this.open) {
+                    void this.show();
+                }
+                if (menu == null) {
+                    return;
+                }
+                const menuItems = [...menu.querySelectorAll('six-menu-item')];
+                const firstMenuItem = menuItems.at(0);
+                const lastMenuItem = menuItems.at(menuItems.length - 1);
+                // Focus on a menu item
+                if (event.key === 'ArrowDown' && firstMenuItem != null) {
+                    firstMenuItem.setFocus();
+                    return;
+                }
+                if (event.key === 'ArrowUp' && lastMenuItem != null) {
+                    lastMenuItem.setFocus();
+                    return;
+                }
+            }
+            // Other keys bring focus to the menu and initiate type-to-select behavior
+            const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
+            if (this.open && menu != null && !ignoredKeys.includes(event.key)) {
+                void menu.typeToSelect(event.key);
+                return;
+            }
+        };
+        this.handleTriggerKeyUp = (event) => {
+            // Prevent space from triggering a click event in Firefox
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
+        this.handleTriggerSlotChange = () => {
+            this.updateAccessibleTrigger();
+        };
+        this.handleDropdownScroll = () => {
+            if (this.panel == null)
+                return;
+            this.sixScroll.emit({
+                scrollHeight: this.panel.scrollHeight,
+                scrollTop: this.panel.scrollTop,
+                scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
+                scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
+            });
+        };
+        this.open = false;
+        this.placement = 'bottom-start';
+        this.closeOnSelect = true;
+        this.distance = 0;
+        this.skidding = 0;
+        this.hoist = false;
+        this.containingElement = undefined;
+        this.filter = false;
+        this.asyncFilter = false;
+        this.filterPlaceholder = 'Filter...';
+        this.autofocusFilter = true;
+        this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
+        this.disableHideOnEnterAndSpace = false;
+        this.options = [];
+        this.virtualScroll = false;
+        this.filteredOptions = [];
     }
-    if (this.options !== null) {
-      this._options = [...this.options];
+    get hasFilterEnabled() {
+        return this.filter || this.asyncFilter;
     }
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleTriggerClick = this.handleTriggerClick.bind(this);
-    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
-    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);
-    this.handleTriggerSlotChange = this.handleTriggerSlotChange.bind(this);
-    this.handleDropdownScroll = this.handleDropdownScroll.bind(this);
-    if (this.hasBeenInitialized && !this.popover) {
-      // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter
-      // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had
-      // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,
-      // to re-initialize the popover in case the component has already been initialized but the popover is undefined.
-      this.initializePopover();
+    get container() {
+        return this.containingElement || this.host;
     }
-  }
-  componentDidLoad() {
-    this.hasBeenInitialized = true;
-    this.initializePopover();
-    // Show on init if open
-    if (this.open) {
-      void this.show();
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
+        this.updateAccessibleTrigger();
     }
-    if (this.filter) {
-      this.setupFiltering(this.handleFilterInputChange);
+    handlePopoverOptionsChange() {
+        if (this.popover == null)
+            return;
+        this.popover.setOptions({
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+        });
     }
-    else if (this.asyncFilter) {
-      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));
+    handleOptionsChange() {
+        if (Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+        }
     }
-  }
-  initializePopover() {
-    const onAfterHide = () => {
-      if (this.filter) {
-        this.filterInputElement.value = '';
-        if (this._options !== null) {
-          this._options = [...this.options];
+    connectedCallback() {
+        if (this.virtualScroll && this.options === null) {
+            console.error('Options must be defined when using virtual scrolling');
         }
-        else {
-          const menuItems = this.getMenuItems();
-          menuItems.forEach((item) => (item.style.display = 'unset'));
+        if (Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+        }
+        if (this.hasBeenInitialized && this.popover == null) {
+            // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter
+            // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had
+            // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,
+            // to re-initialize the popover in case the component has already been initialized but the popover is undefined.
+            this.initializePopover();
         }
-      }
-      this.sixAfterHide.emit();
-    };
-    const onAfterShow = async () => {
-      if (this.hasFilterEnabled && this.autofocusFilter) {
-        // if dropdown filter is enabled we should autofocus the search field
-        await this.filterInputElement.setFocus();
-      }
-      this.sixAfterShow.emit();
-    };
-    const onTransitionEnd = () => {
-      if (!this.open) {
-        this.panel.scrollTop = 0;
-      }
-    };
-    this.popover = new Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide,
-      onAfterShow,
-      onTransitionEnd,
-    });
-  }
-  setupFiltering(callback) {
-    this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
-  }
-  handleFilteringForAttributeItems(lowerCaseFilterTerm) {
-    if (lowerCaseFilterTerm === '') {
-      this._options = [...this.options];
-      return;
-    }
-    this._options = this.options.filter((option) => {
-      var _a, _b, _c, _d;
-      return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
-        (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
-    });
-  }
-  handleFilteringForSlotItems(lowerCaseFilterTerm) {
-    const menuItems = this.getMenuItems();
-    menuItems.forEach(async (menuItem) => {
-      var _a, _b, _c, _d;
-      // hide all elements which don't contain the entered substring
-      const elementContainsFilterTerm = ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm)) ||
-        ((_d = (_c = (await (menuItem === null || menuItem === void 0 ? void 0 : menuItem.getTextLabel()))) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm));
-      menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';
-    });
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-    void this.hide();
-    this.popover.destroy();
-    this.popover = null;
-  }
-  /** Shows the dropdown panel */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
-      return;
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    componentDidLoad() {
+        this.hasBeenInitialized = true;
+        this.initializePopover();
+        // Show on init if open
+        if (this.open) {
+            void this.show();
+        }
+        if (this.filter) {
+            this.setupFiltering(this.handleFilterInputChange);
+        }
+        else if (this.asyncFilter) {
+            this.setupFiltering(() => { var _a, _b; return this.sixAsyncFilterFired.emit({ filterValue: (_b = (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' }); });
+        }
     }
-    this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
-    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-    this.isVisible = true;
-    this.open = true;
-    this.popover.show();
-  }
-  /** Hides the dropdown panel */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
+    initializePopover() {
+        if (this.trigger == null || this.positioner == null)
+            return;
+        const onAfterHide = () => {
+            if (this.filter && this.filterInputElement != null) {
+                this.filterInputElement.value = '';
+                if (this.filteredOptions.length > 0) {
+                    this.filteredOptions = [...this.options];
+                }
+                else {
+                    const menuItems = this.getMenuItems();
+                    menuItems.forEach((item) => (item.style.display = 'unset'));
+                }
+            }
+            this.sixAfterHide.emit();
+        };
+        const onAfterShow = async () => {
+            var _a;
+            if (this.hasFilterEnabled && this.autofocusFilter) {
+                // if dropdown filter is enabled we should autofocus the search field
+                await ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            this.sixAfterShow.emit();
+        };
+        const onTransitionEnd = () => {
+            if (!this.open && this.panel != null) {
+                this.panel.scrollTop = 0;
+            }
+        };
+        this.popover = new Popover(this.trigger, this.positioner, {
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+            transitionElement: this.panel,
+            onAfterHide,
+            onAfterShow,
+            onTransitionEnd,
+        });
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    setupFiltering(callback) {
+        if (this.filterInputElement != null) {
+            this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
+        }
     }
-    this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
-    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
-    this.isVisible = false;
-    this.open = false;
-    this.popover.hide();
-  }
-  focusOnTrigger() {
-    const [trigger] = getSlotChildren(this.trigger);
-    if (trigger) {
-      if (typeof trigger.setFocus === 'function') {
-        trigger.setFocus();
-      }
-      else if (typeof trigger.focus === 'function') {
-        trigger.focus();
-      }
+    handleFilteringForAttributeItems(lowerCaseFilterTerm) {
+        if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        this.filteredOptions = this.options.filter((option) => {
+            var _a, _b, _c, _d;
+            return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
+                (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
+        });
     }
-  }
-  getMenu() {
-    const [menu] = getSlotChildren(this.panel).filter(isSixMenu);
-    return menu;
-  }
-  /**
-   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   */
-  async reposition() {
-    if (!this.open) {
-      return;
+    handleFilteringForSlotItems(lowerCaseFilterTerm) {
+        const menuItems = this.getMenuItems();
+        menuItems.forEach(async (menuItem) => {
+            var _a, _b, _c, _d;
+            // hide all elements which don't contain the entered substring
+            const elementContainsFilterTerm = ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm)) ||
+                ((_d = (_c = (await (menuItem === null || menuItem === void 0 ? void 0 : menuItem.getTextLabel()))) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm));
+            menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';
+        });
     }
-    this.popover.reposition();
-  }
-  handleDocumentKeyDown(event) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
-      void this.hide();
-      this.focusOnTrigger();
-      return;
+    disconnectedCallback() {
+        var _a;
+        this.eventListeners.removeAll();
+        void this.hide();
+        (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popover = undefined;
     }
-    if (this.filterInputElement === this.host.shadowRoot.activeElement) {
-      if (event.key === 'ArrowDown') {
-        const item = this.getMenuItems().find((item) => item.style.display !== 'none');
-        if (item) {
-          item.setFocus();
+    /** Shows the dropdown panel */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.popover == null || this.panel == null) {
+            return;
         }
-      }
-    }
-    // Handle tabbing
-    if (event.key === 'Tab') {
-      // Tabbing within an open menu should close the dropdown and refocus the trigger
-      if (this.open && isSixMenuItem(document.activeElement)) {
-        event.preventDefault();
-        void this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-      // Tabbing outside of the containing element closes the panel
-      //
-      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
-      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
-      setTimeout(() => {
-        var _a;
-        const activeElement = this.container.getRootNode() instanceof ShadowRoot
-          ? (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement
-          : document.activeElement;
-        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
-          void this.hide();
-          return;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    // Close when clicking outside of the containing element
-    const path = event.composedPath();
-    if (!path.includes(this.container)) {
-      void this.hide();
-      return;
+        this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
+        this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+        this.isVisible = true;
+        this.open = true;
+        this.popover.show();
     }
-  }
-  handleMenuItemActivate(event) {
-    const item = event.target;
-    scrollIntoView(item, this.panel);
-  }
-  handlePanelSelect(event) {
-    const target = event.target;
-    // Hide the dropdown when a menu item is selected
-    if (this.closeOnSelect && isSixMenu(target)) {
-      void this.hide();
-      this.focusOnTrigger();
-    }
-  }
-  handleTriggerClick() {
-    this.open ? this.hide() : this.show();
-  }
-  handleTriggerKeyDown(event) {
-    const menu = this.getMenu();
-    const menuItems = menu ? [...menu.querySelectorAll('six-menu-item')] : null;
-    const firstMenuItem = menuItems[0];
-    const lastMenuItem = menuItems[menuItems.length - 1];
-    // Close when escape or tab is pressed
-    if (event.key === 'Escape') {
-      this.focusOnTrigger();
-      void this.hide();
-      return;
+    /** Hides the dropdown panel */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.panel == null || this.popover == null) {
+            return;
+        }
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
+        this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+        this.isVisible = false;
+        this.open = false;
+        this.popover.hide();
     }
-    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
-    // key again to hide the menu in case they don't want to make a selection.
-    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      this.open ? void this.hide() : void this.show();
-      return;
+    focusOnTrigger() {
+        if (this.trigger == null)
+            return;
+        const [trigger] = getSlotChildren(this.trigger);
+        if (trigger != null) {
+            if (typeof trigger.setFocus === 'function') {
+                trigger.setFocus();
+            }
+            else if (typeof trigger.focus === 'function') {
+                trigger.focus();
+            }
+        }
     }
-    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
-    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
-    // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-      // Show the menu if it's not already open
-      if (!this.open) {
-        void this.show();
-      }
-      // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstMenuItem) {
-        firstMenuItem.setFocus();
-        return;
-      }
-      if (event.key === 'ArrowUp' && lastMenuItem) {
-        lastMenuItem.setFocus();
-        return;
-      }
+    getMenu() {
+        if (this.panel == null)
+            return;
+        return getSlotChildren(this.panel).filter(isSixMenu).at(0);
     }
-    // Other keys bring focus to the menu and initiate type-to-select behavior
-    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
-    if (this.open && menu && !ignoredKeys.includes(event.key)) {
-      void menu.typeToSelect(event.key);
-      return;
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    async reposition() {
+        if (!this.open || this.popover == null) {
+            return;
+        }
+        this.popover.reposition();
     }
-  }
-  handleTriggerKeyUp(event) {
-    // Prevent space from triggering a click event in Firefox
-    if (event.key === ' ') {
-      event.preventDefault();
+    //
+    // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+    // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+    // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+    // a child of the slotted element, or an element in the slotted element's shadow root.
+    //
+    // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
+    //
+    // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+    //
+    updateAccessibleTrigger() {
+        if (this.trigger == null)
+            return;
+        const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
+        if (accessibleTrigger != null) {
+            accessibleTrigger.setAttribute('aria-haspopup', 'true');
+            accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        }
     }
-  }
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-  handleDropdownScroll() {
-    this.sixScroll.emit({
-      scrollHeight: this.panel.scrollHeight,
-      scrollTop: this.panel.scrollTop,
-      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
-      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
-    });
-  }
-  //
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  // a child of the slotted element, or an element in the slotted element's shadow root.
-  //
-  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
-  //
-  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
-  //
-  updateAccessibleTrigger() {
-    const [accessibleTrigger] = getSlotChildren(this.trigger).map(getNearestTabbableElement);
-    if (accessibleTrigger) {
-      accessibleTrigger.setAttribute('aria-haspopup', 'true');
-      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    render() {
+        return (h("div", { part: "base", id: this.componentId, class: {
+                dropdown: true,
+                'dropdown--open': this.open,
+            } }, h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { ref: (el) => (this.positioner = el), class: {
+                dropdown__positioner: true,
+                dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
+            } }, this.hasFilterEnabled && (h("six-input", { class: {
+                'filter-hidden': !this.open,
+            }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, h("slot", null), this.filteredOptions.length > 0 && (h("six-menu", { part: "menu", items: this.filteredOptions, virtualScroll: this.virtualScroll }))))));
     }
-  }
-  render() {
-    return (h("div", { part: "base", id: this.componentId, class: {
-        dropdown: true,
-        'dropdown--open': this.open,
-      } }, h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { ref: (el) => (this.positioner = el), class: {
-        dropdown__positioner: true,
-        dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-      } }, this.hasFilterEnabled && (h("six-input", { class: {
-        'filter-hidden': !this.open,
-      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, h("slot", null), this._options && (h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "open": ["handleOpenChange"],
-    "distance": ["handlePopoverOptionsChange"],
-    "hoist": ["handlePopoverOptionsChange"],
-    "placement": ["handlePopoverOptionsChange"],
-    "skidding": ["handlePopoverOptionsChange"],
-    "options": ["handleOptionsChange"]
-  }; }
-  static get style() { return sixDropdownCss; }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "distance": ["handlePopoverOptionsChange"],
+        "hoist": ["handlePopoverOptionsChange"],
+        "placement": ["handlePopoverOptionsChange"],
+        "skidding": ["handlePopoverOptionsChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+    static get style() { return sixDropdownCss; }
 }, [1, "six-dropdown", {
-    "open": [1540],
-    "placement": [1],
-    "closeOnSelect": [4, "close-on-select"],
-    "distance": [2],
-    "skidding": [2],
-    "hoist": [4],
-    "containingElement": [16],
-    "filter": [4],
-    "asyncFilter": [4, "async-filter"],
-    "filterPlaceholder": [1, "filter-placeholder"],
-    "autofocusFilter": [4, "autofocus-filter"],
-    "filterDebounce": [2, "filter-debounce"],
-    "disableHideOnEnterAndSpace": [4, "disable-hide-on-enter-and-space"],
-    "options": [16],
-    "virtualScroll": [4, "virtual-scroll"],
-    "_options": [32],
-    "show": [64],
-    "hide": [64],
-    "reposition": [64]
-  }]);
+        "open": [1540],
+        "placement": [1],
+        "closeOnSelect": [4, "close-on-select"],
+        "distance": [2],
+        "skidding": [2],
+        "hoist": [4],
+        "containingElement": [16],
+        "filter": [4],
+        "asyncFilter": [4, "async-filter"],
+        "filterPlaceholder": [1, "filter-placeholder"],
+        "autofocusFilter": [4, "autofocus-filter"],
+        "filterDebounce": [2, "filter-debounce"],
+        "disableHideOnEnterAndSpace": [4, "disable-hide-on-enter-and-space"],
+        "options": [16],
+        "virtualScroll": [4, "virtual-scroll"],
+        "filteredOptions": [32],
+        "show": [64],
+        "hide": [64],
+        "reposition": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"],
+        "distance": ["handlePopoverOptionsChange"],
+        "hoist": ["handlePopoverOptionsChange"],
+        "placement": ["handlePopoverOptionsChange"],
+        "skidding": ["handlePopoverOptionsChange"],
+        "options": ["handleOptionsChange"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-dropdown", "six-icon", "six-input", "six-menu", "six-menu-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixDropdown);
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "six-menu-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-dropdown", "six-error", "six-icon", "six-input", "six-menu", "six-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixDropdown);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "six-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { SixDropdown as S, defineCustomElement as d };