@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/cjs/six-dropdown_3.cjs.entry.js

@@ -3,747 +3,747 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const scroll = require('./scroll-5b8676ba.js');
-const popover = require('./popover-e3781f5a.js');
-const eventListeners = require('./event-listeners-4a8d66d5.js');
-const slot = require('./slot-8abe833c.js');
-const executionControl = require('./execution-control-3bc9c7c4.js');
+const scroll = require('./scroll-76e6f5d7.js');
+const popover = require('./popover-1d2a037c.js');
+const eventListeners = require('./event-listeners-74715e62.js');
+const slot = require('./slot-ad537f24.js');
+const executionControl = require('./execution-control-46f388e0.js');
 
-function isTabbable(el) {
-  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's children
-  if (el.children) {
-    return [...el.children].map(getNearestTabbableElement)[0];
-  }
-  return null;
+function isTabbable(el) {
+  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's children
+  if (el.children) {
+    return [...el.children].map(getNearestTabbableElement)[0];
+  }
+  return null;
 }
 
 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 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;
-let SixDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixShow = index.createEvent(this, "six-dropdown-show", 7);
-    this.sixAfterShow = index.createEvent(this, "six-dropdown-after-show", 7);
-    this.sixHide = index.createEvent(this, "six-dropdown-hide", 7);
-    this.sixAfterHide = index.createEvent(this, "six-dropdown-after-hide", 7);
-    this.sixAutoFilterFired = index.createEvent(this, "six-dropdown-auto-filter-fired", 7);
-    this.sixAsyncFilterFired = index.createEvent(this, "six-async-filter-fired", 7);
-    this.sixScroll = index.createEvent(this, "six-dropdown-scroll", 7);
-    this.componentId = `dropdown-${++id}`;
-    this.isVisible = false;
-    this.hasBeenInitialized = false;
-    /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /**
-     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-     * inside of the viewport.
-     */
-    this.placement = 'bottom-start';
-    /** Determines whether the dropdown should hide when a menu item is selected. */
-    this.closeOnSelect = true;
-    /** The distance in pixels from which to offset the panel away from its trigger. */
-    this.distance = 0;
-    /** The distance in pixels from which to offset the panel along its trigger. */
-    this.skidding = 0;
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
-    /**
-     * Set to true to allow auto filtering for entries in the dropdown.
-     * With this flag the dropdown will automatically filter itsel.
-     * If you need to coordinate the shown elements yourself,
-     * e.g. because you need to call an endpoint use asyncFilter instead
-     */
-    this.filter = false;
-    /**
-     * Set to true to allow async filtering.
-     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
-     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
-     */
-    this.asyncFilter = false;
-    /** The filter's placeholder text. */
-    this.filterPlaceholder = 'Filter...';
-    /** By default the search field will be focused when opening a dropdown with filtering enabled. */
-    this.autofocusFilter = true;
-    /** The debounce for the filter callbacks. */
-    this.filterDebounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-    /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
-    this.disableHideOnEnterAndSpace = false;
-    /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
-    this.options = null;
-    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-    this.virtualScroll = false;
-    this.eventListeners = new eventListeners.EventListeners();
-    // internal representation of options, so we don't have to make options mutable
-    this._options = null;
-    this.getMenuItems = () => {
-      if (this._options !== null) {
-        return this._options.map((option) => index.h("six-menu-item", { value: option.value }, option.label));
-      }
-      const [panel] = slot.getSlotChildren(this.panel);
-      // the menu-items can be in a slot e.g. in six-select or direct children of the panel
-      return slot.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 });
-    };
-  }
-  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');
-    }
-    if (this.options !== null) {
-      this._options = [...this.options];
-    }
-    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 was 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();
-    }
-  }
-  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(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));
-    }
-  }
-  initializePopover() {
-    const onAfterHide = () => {
-      if (this.filter) {
-        this.filterInputElement.value = '';
-        if (this._options !== null) {
-          this._options = [...this.options];
-        }
-        else {
-          const menuItems = this.getMenuItems();
-          menuItems.forEach((item) => (item.style.display = 'unset'));
-        }
-      }
-      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.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', executionControl.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((menuItem) => {
-      var _a, _b;
-      const lowerCaseMenuItemValue = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-      const lowerCaseMenuText = (_b = menuItem === null || menuItem === void 0 ? void 0 : menuItem.innerText) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-      // hide all elements which don't contain the entered substring
-      const elementContainsFilterTerm = (lowerCaseMenuItemValue === null || lowerCaseMenuItemValue === void 0 ? void 0 : lowerCaseMenuItemValue.includes(lowerCaseFilterTerm)) || (lowerCaseMenuText === null || lowerCaseMenuText === void 0 ? void 0 : lowerCaseMenuText.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;
-    }
-    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;
-    }
-    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();
-  }
-  focusOnTrigger() {
-    const [trigger] = slot.getSlotChildren(this.trigger);
-    if (trigger) {
-      if (typeof trigger.setFocus === 'function') {
-        trigger.setFocus();
-      }
-      else if (typeof trigger.focus === 'function') {
-        trigger.focus();
-      }
-    }
-  }
-  getMenu() {
-    const [menu] = slot.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;
-    }
-    this.popover.reposition();
-  }
-  handleDocumentKeyDown(event) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
-      void this.hide();
-      this.focusOnTrigger();
-      return;
-    }
-    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();
-        }
-      }
-    }
-    // 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;
-        }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    // Close when clicking outside of the containing element
-    const path = event.composedPath();
-    if (!path.includes(this.container)) {
-      void this.hide();
-      return;
-    }
-  }
-  handleMenuItemActivate(event) {
-    const item = event.target;
-    scroll.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;
-    }
-    // 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;
-    }
-    // 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;
-      }
-    }
-    // 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;
-    }
-  }
-  handleTriggerKeyUp(event) {
-    // Prevent space from triggering a click event in Firefox
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-  }
-  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] = slot.getSlotChildren(this.trigger).map(getNearestTabbableElement);
-    if (accessibleTrigger) {
-      accessibleTrigger.setAttribute('aria-haspopup', 'true');
-      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-    }
-  }
-  render() {
-    return (index.h("div", { part: "base", id: this.componentId, class: {
-        dropdown: true,
-        'dropdown--open': this.open,
-      } }, index.h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { ref: (el) => (this.positioner = el), class: {
-        dropdown__positioner: true,
-        dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-      } }, this.hasFilterEnabled && (index.h("six-input", { class: {
-        'filter-hidden': !this.open,
-      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), index.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 }, index.h("slot", null), this._options && (index.h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"],
-    "distance": ["handlePopoverOptionsChange"],
-    "hoist": ["handlePopoverOptionsChange"],
-    "placement": ["handlePopoverOptionsChange"],
-    "skidding": ["handlePopoverOptionsChange"],
-    "options": ["handleOptionsChange"]
-  }; }
-};
+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;
+let SixDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixShow = index.createEvent(this, "six-dropdown-show", 7);
+    this.sixAfterShow = index.createEvent(this, "six-dropdown-after-show", 7);
+    this.sixHide = index.createEvent(this, "six-dropdown-hide", 7);
+    this.sixAfterHide = index.createEvent(this, "six-dropdown-after-hide", 7);
+    this.sixAutoFilterFired = index.createEvent(this, "six-dropdown-auto-filter-fired", 7);
+    this.sixAsyncFilterFired = index.createEvent(this, "six-async-filter-fired", 7);
+    this.sixScroll = index.createEvent(this, "six-dropdown-scroll", 7);
+    this.componentId = `dropdown-${++id}`;
+    this.isVisible = false;
+    this.hasBeenInitialized = false;
+    /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /**
+     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+     * inside of the viewport.
+     */
+    this.placement = 'bottom-start';
+    /** Determines whether the dropdown should hide when a menu item is selected. */
+    this.closeOnSelect = true;
+    /** The distance in pixels from which to offset the panel away from its trigger. */
+    this.distance = 0;
+    /** The distance in pixels from which to offset the panel along its trigger. */
+    this.skidding = 0;
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    this.hoist = false;
+    /**
+     * Set to true to allow auto filtering for entries in the dropdown.
+     * With this flag the dropdown will automatically filter itsel.
+     * If you need to coordinate the shown elements yourself,
+     * e.g. because you need to call an endpoint use asyncFilter instead
+     */
+    this.filter = false;
+    /**
+     * Set to true to allow async filtering.
+     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+     */
+    this.asyncFilter = false;
+    /** The filter's placeholder text. */
+    this.filterPlaceholder = 'Filter...';
+    /** By default the search field will be focused when opening a dropdown with filtering enabled. */
+    this.autofocusFilter = true;
+    /** The debounce for the filter callbacks. */
+    this.filterDebounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+    /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
+    this.disableHideOnEnterAndSpace = false;
+    /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
+    this.options = null;
+    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+    this.virtualScroll = false;
+    this.eventListeners = new eventListeners.EventListeners();
+    // internal representation of options, so we don't have to make options mutable
+    this._options = null;
+    this.getMenuItems = () => {
+      if (this._options !== null) {
+        return this._options.map((option) => index.h("six-menu-item", { value: option.value }, option.label));
+      }
+      const [panel] = slot.getSlotChildren(this.panel);
+      // the menu-items can be in a slot e.g. in six-select or direct children of the panel
+      return slot.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 });
+    };
+  }
+  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');
+    }
+    if (this.options !== null) {
+      this._options = [...this.options];
+    }
+    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 was 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();
+    }
+  }
+  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(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));
+    }
+  }
+  initializePopover() {
+    const onAfterHide = () => {
+      if (this.filter) {
+        this.filterInputElement.value = '';
+        if (this._options !== null) {
+          this._options = [...this.options];
+        }
+        else {
+          const menuItems = this.getMenuItems();
+          menuItems.forEach((item) => (item.style.display = 'unset'));
+        }
+      }
+      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.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', executionControl.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((menuItem) => {
+      var _a, _b;
+      const lowerCaseMenuItemValue = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+      const lowerCaseMenuText = (_b = menuItem === null || menuItem === void 0 ? void 0 : menuItem.innerText) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+      // hide all elements which don't contain the entered substring
+      const elementContainsFilterTerm = (lowerCaseMenuItemValue === null || lowerCaseMenuItemValue === void 0 ? void 0 : lowerCaseMenuItemValue.includes(lowerCaseFilterTerm)) || (lowerCaseMenuText === null || lowerCaseMenuText === void 0 ? void 0 : lowerCaseMenuText.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;
+    }
+    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;
+    }
+    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();
+  }
+  focusOnTrigger() {
+    const [trigger] = slot.getSlotChildren(this.trigger);
+    if (trigger) {
+      if (typeof trigger.setFocus === 'function') {
+        trigger.setFocus();
+      }
+      else if (typeof trigger.focus === 'function') {
+        trigger.focus();
+      }
+    }
+  }
+  getMenu() {
+    const [menu] = slot.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;
+    }
+    this.popover.reposition();
+  }
+  handleDocumentKeyDown(event) {
+    // Close when escape is pressed
+    if (event.key === 'Escape') {
+      void this.hide();
+      this.focusOnTrigger();
+      return;
+    }
+    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();
+        }
+      }
+    }
+    // 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;
+        }
+      });
+    }
+  }
+  handleDocumentMouseDown(event) {
+    // Close when clicking outside of the containing element
+    const path = event.composedPath();
+    if (!path.includes(this.container)) {
+      void this.hide();
+      return;
+    }
+  }
+  handleMenuItemActivate(event) {
+    const item = event.target;
+    scroll.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;
+    }
+    // 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;
+    }
+    // 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;
+      }
+    }
+    // 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;
+    }
+  }
+  handleTriggerKeyUp(event) {
+    // Prevent space from triggering a click event in Firefox
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+  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] = slot.getSlotChildren(this.trigger).map(getNearestTabbableElement);
+    if (accessibleTrigger) {
+      accessibleTrigger.setAttribute('aria-haspopup', 'true');
+      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+  render() {
+    return (index.h("div", { part: "base", id: this.componentId, class: {
+        dropdown: true,
+        'dropdown--open': this.open,
+      } }, index.h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { ref: (el) => (this.positioner = el), class: {
+        dropdown__positioner: true,
+        dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
+      } }, this.hasFilterEnabled && (index.h("six-input", { class: {
+        'filter-hidden': !this.open,
+      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), index.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 }, index.h("slot", null), this._options && (index.h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"],
+    "distance": ["handlePopoverOptionsChange"],
+    "hoist": ["handlePopoverOptionsChange"],
+    "placement": ["handlePopoverOptionsChange"],
+    "skidding": ["handlePopoverOptionsChange"],
+    "options": ["handleOptionsChange"]
+  }; }
+};
 SixDropdown.style = sixDropdownCss;
 
 const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";
 
-const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-item')) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('menu-item--focused'); };
-const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
-const mapToMenuItem = ({ value, label }) => index.h("six-menu-item", { value: value }, label);
-const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
-const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
-const ITEMS_SHOWN_NOT_SET = undefined;
-let SixMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected", 7);
-    this.eventListeners = new eventListeners.EventListeners();
-    this.typeToSelectString = '';
-    /** Set to true to remove the box-shadow */
-    this.removeBoxShadow = false;
-    /** Set the options to be shown in the dropdown */
-    this.items = null;
-    /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */
-    this.itemsShown = ITEMS_SHOWN_NOT_SET;
-    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-    this.virtualScroll = false;
-    /**
-     * Used for virtual scrolling
-     * Define how many items should be rendered in the DOM when using virtual scrolling
-     */
-    this.itemSize = 10;
-    /**
-     * Used for virtual scrolling
-     * Define the debounce for listening on scrolling changes in milliseconds.
-     * The lower the number the more sensitive the component reacts to scrolling changes.
-     */
-    this.scrollingDebounce = 15;
-    /**
-     * Used to calculate which items should be rendered in the DOM
-     */
-    this.scrollingIndex = 0;
-    // set a default item height, this variable will be updated with the real value after the first render.
-    // However, it's necessary to have a default value because we can only fetch the proper hight after the first render
-    this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
-    this.handleScrolling = () => {
-      // for performance improvements we only update the DOM if the scrollRatio change "enough"
-      this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
-    };
-  }
-  connectedCallback() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-  componentWillLoad() {
-    if (this.items === null) {
-      return;
-    }
-  }
-  componentDidLoad() {
-    this.setupForVirtualScrollingAfterRendering();
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  /**
-   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
-   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
-   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
-   * enabling type-to-select when the menu doesn't have focus.
-   */
-  async typeToSelect(key) {
-    var _a;
-    clearTimeout(this.typeToSelectTimeout);
-    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
-    this.typeToSelectString += key.toLowerCase();
-    const items = this.getItems();
-    for (const item of items) {
-      const slot$1 = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
-      const label = slot.getTextContent(slot$1).toLowerCase().trim();
-      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
-        item.setFocus();
-        break;
-      }
-    }
-  }
-  getItemsShown() {
-    var _a;
-    const defaultItemsShown = this.virtualScroll
-      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING
-      : ITEMS_SHOWN_NOT_SET;
-    return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
-  }
-  setupForVirtualScrollingAfterRendering() {
-    var _a, _b;
-    if (!this.virtualScroll) {
-      return;
-    }
-    this.eventListeners.add(this.menuWrapper, 'scroll', executionControl.debounce(this.handleScrolling, this.scrollingDebounce));
-    // set menu height to proper height once the item is rendered.
-    const menuItemHeight = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector('six-menu-item')) === null || _b === void 0 ? void 0 : _b.clientHeight;
-    if (menuItemHeight && menuItemHeight > 0) {
-      this.sixMenuItemHeight = menuItemHeight;
-    }
-  }
-  getItems() {
-    if (this.items !== null && this.items !== undefined) {
-      return this.items.map(mapToMenuItem);
-    }
-    const slot = this.menu.querySelector('slot');
-    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
-  }
-  getActiveItemIndex() {
-    const items = this.getItems();
-    const selectedItem = this.getActiveItem();
-    const itemIndex = items.indexOf(selectedItem);
-    if (itemIndex > -1) {
-      return itemIndex;
-    }
-    const sixMenuItems = this.extractItemsFromDOM();
-    return sixMenuItems.findIndex(isFocusedMenuItem);
-  }
-  getActiveItem() {
-    var _a;
-    const activeElement = this.getItems().find((i) => i === document.activeElement);
-    if (activeElement) {
-      return activeElement;
-    }
-    return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
-  }
-  extractItemsFromDOM() {
-    var _a, _b;
-    return Array.from((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('six-menu-item'));
-  }
-  setActiveItem(item) {
-    item.setFocus();
-  }
-  handleClick(event) {
-    const target = event.target;
-    const clickedItem = target.closest('six-menu-item');
-    if (clickedItem && !clickedItem.disabled) {
-      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });
-    }
-  }
-  handleKeyDown(event) {
-    // Make a selection when pressing enter
-    if (event.key === 'Enter') {
-      const activeItem = this.getActiveItem();
-      event.preventDefault();
-      if (activeItem) {
-        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
-      }
-    }
-    // Prevent scrolling when space is pressed
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-    // Move the selection when pressing down or up
-    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
-      let indexOfActiveItem = this.getActiveItemIndex();
-      if (items.length) {
-        event.preventDefault();
-        if (event.key === 'ArrowDown') {
-          indexOfActiveItem++;
-        }
-        else if (event.key === 'ArrowUp') {
-          indexOfActiveItem--;
-        }
-        else if (event.key === 'Home') {
-          indexOfActiveItem = 0;
-        }
-        else if (event.key === 'End') {
-          indexOfActiveItem = items.length - 1;
-        }
-        if (indexOfActiveItem < 0)
-          indexOfActiveItem = 0;
-        if (indexOfActiveItem > items.length - 1)
-          indexOfActiveItem = items.length - 1;
-        this.setActiveItem(items[indexOfActiveItem]);
-        return;
-      }
-    }
-    void this.typeToSelect(event.key);
-  }
-  getMenuWrapperStyle() {
-    const styles = {};
-    if (this.getItemsShown() > 0) {
-      // calculate the proper height to show the correct number of items
-      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;
-    }
-    return Object.assign({}, styles);
-  }
-  getMenuContainerStyle() {
-    const styles = {};
-    if (this.virtualScroll) {
-      // calculate height of content are if all items would be rendered so the scrollbar has the proper size
-      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;
-    }
-    return Object.assign({}, styles);
-  }
-  getScrollbarGhostStyle() {
-    const styles = {};
-    if (this.virtualScroll && this.items !== null) {
-      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
-    }
-    return Object.assign({}, styles);
-  }
-  renderItems() {
-    if (this.items === undefined || this.items === null) {
-      return;
-    }
-    if (!this.virtualScroll) {
-      return this.items.map(mapToMenuItem);
-    }
-    return this.items
-      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
-      .map(mapToMenuItem);
-  }
-  render() {
-    return (index.h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
-        menu: true,
-        'menu--noshadow': this.removeBoxShadow,
-        'menu__wrapper--scrollable': this.getItemsShown() > 0,
-      } }, index.h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", null), this.renderItems()), this.virtualScroll && index.h("div", { style: this.getScrollbarGhostStyle() })));
-  }
-  get host() { return index.getElement(this); }
-};
+const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-item')) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('menu-item--focused'); };
+const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
+const mapToMenuItem = ({ value, label }) => index.h("six-menu-item", { value: value }, label);
+const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
+const ITEMS_SHOWN_NOT_SET = undefined;
+let SixMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected", 7);
+    this.eventListeners = new eventListeners.EventListeners();
+    this.typeToSelectString = '';
+    /** Set to true to remove the box-shadow */
+    this.removeBoxShadow = false;
+    /** Set the options to be shown in the dropdown */
+    this.items = null;
+    /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */
+    this.itemsShown = ITEMS_SHOWN_NOT_SET;
+    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+    this.virtualScroll = false;
+    /**
+     * Used for virtual scrolling
+     * Define how many items should be rendered in the DOM when using virtual scrolling
+     */
+    this.itemSize = 10;
+    /**
+     * Used for virtual scrolling
+     * Define the debounce for listening on scrolling changes in milliseconds.
+     * The lower the number the more sensitive the component reacts to scrolling changes.
+     */
+    this.scrollingDebounce = 15;
+    /**
+     * Used to calculate which items should be rendered in the DOM
+     */
+    this.scrollingIndex = 0;
+    // set a default item height, this variable will be updated with the real value after the first render.
+    // However, it's necessary to have a default value because we can only fetch the proper hight after the first render
+    this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+    this.handleScrolling = () => {
+      // for performance improvements we only update the DOM if the scrollRatio change "enough"
+      this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
+    };
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  componentWillLoad() {
+    if (this.items === null) {
+      return;
+    }
+  }
+  componentDidLoad() {
+    this.setupForVirtualScrollingAfterRendering();
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  /**
+   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
+   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
+   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
+   * enabling type-to-select when the menu doesn't have focus.
+   */
+  async typeToSelect(key) {
+    var _a;
+    clearTimeout(this.typeToSelectTimeout);
+    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
+    this.typeToSelectString += key.toLowerCase();
+    const items = this.getItems();
+    for (const item of items) {
+      const slot$1 = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+      const label = slot.getTextContent(slot$1).toLowerCase().trim();
+      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
+        item.setFocus();
+        break;
+      }
+    }
+  }
+  getItemsShown() {
+    var _a;
+    const defaultItemsShown = this.virtualScroll
+      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING
+      : ITEMS_SHOWN_NOT_SET;
+    return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
+  }
+  setupForVirtualScrollingAfterRendering() {
+    var _a, _b;
+    if (!this.virtualScroll) {
+      return;
+    }
+    this.eventListeners.add(this.menuWrapper, 'scroll', executionControl.debounce(this.handleScrolling, this.scrollingDebounce));
+    // set menu height to proper height once the item is rendered.
+    const menuItemHeight = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector('six-menu-item')) === null || _b === void 0 ? void 0 : _b.clientHeight;
+    if (menuItemHeight && menuItemHeight > 0) {
+      this.sixMenuItemHeight = menuItemHeight;
+    }
+  }
+  getItems() {
+    if (this.items !== null && this.items !== undefined) {
+      return this.items.map(mapToMenuItem);
+    }
+    const slot = this.menu.querySelector('slot');
+    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
+  }
+  getActiveItemIndex() {
+    const items = this.getItems();
+    const selectedItem = this.getActiveItem();
+    const itemIndex = items.indexOf(selectedItem);
+    if (itemIndex > -1) {
+      return itemIndex;
+    }
+    const sixMenuItems = this.extractItemsFromDOM();
+    return sixMenuItems.findIndex(isFocusedMenuItem);
+  }
+  getActiveItem() {
+    var _a;
+    const activeElement = this.getItems().find((i) => i === document.activeElement);
+    if (activeElement) {
+      return activeElement;
+    }
+    return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
+  }
+  extractItemsFromDOM() {
+    var _a, _b;
+    return Array.from((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('six-menu-item'));
+  }
+  setActiveItem(item) {
+    item.setFocus();
+  }
+  handleClick(event) {
+    const target = event.target;
+    const clickedItem = target.closest('six-menu-item');
+    if (clickedItem && !clickedItem.disabled) {
+      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });
+    }
+  }
+  handleKeyDown(event) {
+    // Make a selection when pressing enter
+    if (event.key === 'Enter') {
+      const activeItem = this.getActiveItem();
+      event.preventDefault();
+      if (activeItem) {
+        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
+      }
+    }
+    // Prevent scrolling when space is pressed
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+    // Move the selection when pressing down or up
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
+      let indexOfActiveItem = this.getActiveItemIndex();
+      if (items.length) {
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+          indexOfActiveItem++;
+        }
+        else if (event.key === 'ArrowUp') {
+          indexOfActiveItem--;
+        }
+        else if (event.key === 'Home') {
+          indexOfActiveItem = 0;
+        }
+        else if (event.key === 'End') {
+          indexOfActiveItem = items.length - 1;
+        }
+        if (indexOfActiveItem < 0)
+          indexOfActiveItem = 0;
+        if (indexOfActiveItem > items.length - 1)
+          indexOfActiveItem = items.length - 1;
+        this.setActiveItem(items[indexOfActiveItem]);
+        return;
+      }
+    }
+    void this.typeToSelect(event.key);
+  }
+  getMenuWrapperStyle() {
+    const styles = {};
+    if (this.getItemsShown() > 0) {
+      // calculate the proper height to show the correct number of items
+      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;
+    }
+    return Object.assign({}, styles);
+  }
+  getMenuContainerStyle() {
+    const styles = {};
+    if (this.virtualScroll) {
+      // calculate height of content are if all items would be rendered so the scrollbar has the proper size
+      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;
+    }
+    return Object.assign({}, styles);
+  }
+  getScrollbarGhostStyle() {
+    const styles = {};
+    if (this.virtualScroll && this.items !== null) {
+      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
+    }
+    return Object.assign({}, styles);
+  }
+  renderItems() {
+    if (this.items === undefined || this.items === null) {
+      return;
+    }
+    if (!this.virtualScroll) {
+      return this.items.map(mapToMenuItem);
+    }
+    return this.items
+      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
+      .map(mapToMenuItem);
+  }
+  render() {
+    return (index.h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        menu: true,
+        'menu--noshadow': this.removeBoxShadow,
+        'menu__wrapper--scrollable': this.getItemsShown() > 0,
+      } }, index.h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", null), this.renderItems()), this.virtualScroll && index.h("div", { style: this.getScrollbarGhostStyle() })));
+  }
+  get host() { return index.getElement(this); }
+};
 SixMenu.style = sixMenuCss;
 
 const sixMenuItemCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-medium) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}";
 
-let SixMenuItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hasFocus = false;
-    /** Set to true to draw the item in a checked state. */
-    this.checked = false;
-    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-    this.value = '';
-    /** Set to true to draw the menu item in a disabled state. */
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-  }
-  /** Sets focus on the button. */
-  async setFocus(options) {
-    this.menuItem.focus(options);
-  }
-  /** Removes focus from the button. */
-  async removeFocus() {
-    this.menuItem.blur();
-  }
-  handleBlur() {
-    this.hasFocus = false;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-  }
-  handleMouseEnter() {
-    this.setFocus();
-  }
-  handleMouseLeave() {
-    this.removeFocus();
-  }
-  render() {
-    return (index.h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
-        'menu-item': true,
-        'menu-item--checked': this.checked,
-        'menu-item--disabled': this.disabled,
-        'menu-item--focused': this.hasFocus,
-      }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : null, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("span", { part: "prefix", class: "menu-item__prefix" }, index.h("slot", { name: "prefix" })), index.h("span", { part: "label", class: "menu-item__label" }, index.h("slot", null)), index.h("span", { part: "suffix", class: "menu-item__suffix" }, index.h("slot", { name: "suffix" })), index.h("span", { part: "checked-icon", class: "menu-item__check" }, index.h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
-  }
-};
+let SixMenuItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasFocus = false;
+    /** Set to true to draw the item in a checked state. */
+    this.checked = false;
+    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+    this.value = '';
+    /** Set to true to draw the menu item in a disabled state. */
+    this.disabled = false;
+  }
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+  /** Sets focus on the button. */
+  async setFocus(options) {
+    this.menuItem.focus(options);
+  }
+  /** Removes focus from the button. */
+  async removeFocus() {
+    this.menuItem.blur();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+  }
+  handleMouseEnter() {
+    this.setFocus();
+  }
+  handleMouseLeave() {
+    this.removeFocus();
+  }
+  render() {
+    return (index.h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
+        'menu-item': true,
+        'menu-item--checked': this.checked,
+        'menu-item--disabled': this.disabled,
+        'menu-item--focused': this.hasFocus,
+      }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : null, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("span", { part: "prefix", class: "menu-item__prefix" }, index.h("slot", { name: "prefix" })), index.h("span", { part: "label", class: "menu-item__label" }, index.h("slot", null)), index.h("span", { part: "suffix", class: "menu-item__suffix" }, index.h("slot", { name: "suffix" })), index.h("span", { part: "checked-icon", class: "menu-item__check" }, index.h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
+  }
+};
 SixMenuItem.style = sixMenuItemCss;
 
 exports.six_dropdown = SixDropdown;