@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

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

@@ -1,12 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5bfcf88b.js');
-const popover = require('./popover-1e7c09f1.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const executionControl = require('./execution-control-d728da70.js');
-const slot = require('./slot-1b1232a1.js');
+var index = require('./index-IrUwKluw.js');
+var popover = require('./popover-BUVXXnz7.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var executionControl = require('./execution-control-oU0MWBWI.js');
+var slot = require('./slot-DBK7c7jH.js');
 
 function isTabbable(el) {
     const tabIndex = el.tabIndex;
@@ -31,24 +29,78 @@ function getNearestTabbableElement(el) {
     return undefined;
 }
 
-const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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{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);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.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}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";
-const SixDropdownStyle0 = sixDropdownCss;
+const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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{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);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.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}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";
 
 let id = 0;
 const 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.sixAutoFilter = 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.sixShow = index.createEvent(this, "six-dropdown-show");
+        this.sixAfterShow = index.createEvent(this, "six-dropdown-after-show");
+        this.sixHide = index.createEvent(this, "six-dropdown-hide");
+        this.sixAfterHide = index.createEvent(this, "six-dropdown-after-hide");
+        this.sixAutoFilter = index.createEvent(this, "six-dropdown-auto-filter-fired");
+        this.sixAsyncFilterFired = index.createEvent(this, "six-async-filter-fired");
+        this.sixScroll = index.createEvent(this, "six-dropdown-scroll");
         this.componentId = `dropdown-${++id}`;
         this.isVisible = false;
         this.resizeObserver = new ResizeObserver(executionControl.debounce(() => this.updatePanelPosition(), 100));
+        /** Indicates whether 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 the viewport.
+         */
+        this.placement = 'bottom-start';
+        /** Determines whether the dropdown should hide when a menu item is selected. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.closeOnSelect = true;
+        /** The distance in pixels from which to offset the panel away from its trigger. */
+        this.distance = 4;
+        /** 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. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.autofocusFilter = true;
+        /** The debounce for the filter callbacks. */
+        this.filterDebounce = 0;
+        /** 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 = [];
+        /** 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;
+        /**
+         * Determines if the dropdown panel's width should match the width of the trigger element.
+         *
+         * If set to `true`, the panel will resize its width to align with the trigger's width.
+         * If `false` or omitted, the panel will maintain its default width.
+         */
+        this.matchTriggerWidth = false;
         this.eventListeners = new eventListeners.EventListeners();
+        // internal representation of options, so we don't have to make options mutable
+        this.renderedOptions = [];
         this.getMenuItems = () => {
             var _a, _b, _c, _d;
             if (this.options.length > 0) {
@@ -206,23 +258,6 @@ const SixDropdown = class {
                 scrollRatio: this.scrollPanel.scrollTop / (this.scrollPanel.scrollHeight - this.scrollPanel.clientHeight),
             });
         };
-        this.open = false;
-        this.placement = 'bottom-start';
-        this.closeOnSelect = true;
-        this.distance = 4;
-        this.skidding = 0;
-        this.hoist = false;
-        this.containingElement = undefined;
-        this.filter = false;
-        this.asyncFilter = false;
-        this.filterPlaceholder = 'Filter...';
-        this.autofocusFilter = true;
-        this.filterDebounce = 0;
-        this.disableHideOnEnterAndSpace = false;
-        this.options = [];
-        this.virtualScroll = false;
-        this.matchTriggerWidth = false;
-        this.renderedOptions = [];
     }
     get filterEnabled() {
         return this.filter || this.asyncFilter;
@@ -235,9 +270,9 @@ const SixDropdown = class {
         this.updateAccessibleTrigger();
     }
     handlePopoverOptionsChange() {
-        if (this.popover == null)
+        if (this.popoverHelper == null)
             return;
-        this.popover.setOptions({
+        this.popoverHelper.setOptions({
             strategy: this.hoist ? 'fixed' : 'absolute',
             placement: this.placement,
             distance: this.distance,
@@ -337,7 +372,7 @@ const SixDropdown = class {
     initPopover() {
         if (this.trigger == null || this.positioner == null)
             return;
-        this.popover = new popover.Popover(this.trigger, this.positioner, {
+        this.popoverHelper = new popover.Popover(this.trigger, this.positioner, {
             strategy: this.hoist ? 'fixed' : 'absolute',
             placement: this.placement,
             distance: this.distance,
@@ -364,13 +399,13 @@ const SixDropdown = class {
         this.resizeObserver.disconnect();
         this.eventListeners.removeAll();
         void this.hide();
-        (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.popover = undefined;
+        (_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popoverHelper = undefined;
     }
     /** 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) {
+        if (this.isVisible || this.popoverHelper == null || this.panel == null) {
             return;
         }
         const sixShow = this.sixShow.emit();
@@ -387,7 +422,7 @@ const SixDropdown = class {
             this.resizeObserver.observe(this.trigger);
         }
         this.updatePanelPosition();
-        this.popover.show();
+        this.popoverHelper.show();
         if (this.filterEnabled && this.autofocusFilter) {
             requestAnimationFrame(() => {
                 var _a;
@@ -406,15 +441,15 @@ const SixDropdown = class {
             const width = this.trigger.getBoundingClientRect().width;
             this.panel.style.minWidth = `${width}px`;
         }
-        if (this.popover != null) {
-            this.popover.reposition();
+        if (this.popoverHelper != null) {
+            this.popoverHelper.reposition();
         }
     }
     /** Hides the dropdown panel */
     async hide() {
         this.resizeObserver.disconnect();
         // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-        if (!this.isVisible || this.panel == null || this.popover == null) {
+        if (!this.isVisible || this.panel == null || this.popoverHelper == null) {
             return;
         }
         const sixHide = this.sixHide.emit();
@@ -427,7 +462,7 @@ const SixDropdown = class {
         this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
         this.isVisible = false;
         this.open = false;
-        this.popover.hide();
+        this.popoverHelper.hide();
     }
     focusOnTrigger() {
         var _a;
@@ -447,17 +482,6 @@ const SixDropdown = class {
         var _a;
         return (_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter(isSixMenu).at(0);
     }
-    /**
-     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-     * is activated.
-     *
-     * @deprecated: use the property `matchTriggerWidth` instead.
-     */
-    async reposition() {
-        if (this.open && this.popover != null) {
-            this.popover.reposition();
-        }
-    }
     //
     // 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
@@ -480,19 +504,19 @@ const SixDropdown = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6569a6e118fd68e19f14dcae0553e25f81987923', part: "base", id: this.componentId, class: {
+        return (index.h("div", { key: '04210ff1a4689e32c72f73ee76a94cbe9867b0de', part: "base", id: this.componentId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, index.h("span", { key: 'be04c5d687eafa3c58c9fed9cf43f72d43aa45ef', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { key: 'fba562d4fc45a0874e5cf8caad5e9710d6dd34e0', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: 'd37f1cb0246d47ca34004f35e3575e8433d998c8', ref: (el) => (this.positioner = el), class: {
+            } }, index.h("span", { key: '9eb3c0e703b08734e9458b25021c0844d255ec6e', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { key: '5cec1b43f07f830dfdebb3a71eb56f3233a539c4', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: '8761367cfff9b66fdd4a7733f1c59440a507178b', ref: (el) => (this.positioner = el), class: {
                 dropdown__positioner: true,
                 dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-            } }, index.h("div", { key: 'e6c08b51f39a12259b4d8911770e1e1754dc4b8e', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (index.h("six-input", { class: {
+            } }, index.h("div", { key: '2ab6c7166cea3892e429db21f3b56e7a81e94735', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (index.h("six-input", { key: 'f7425daad22c1a756dfda4ecefa6293ac5cdcca5', class: {
                 filter: true,
                 'filter-hidden': !this.open,
-            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, index.h("six-icon", { class: "filter__icon", slot: "suffix", size: "small" }, "search"))), index.h("div", { key: '174d0a5dd5965877e9278475112e2f14d959966d', class: {
+            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, index.h("six-icon", { key: '6416f4e28bc437c18b1cff0e0a9eaa54c9aba3d5', class: "filter__icon", slot: "suffix", size: "small" }, "search"))), index.h("div", { key: '479140f2107baad72960b415bd69d9ac80bb6f64', class: {
                 dropdown__panel__scroll: true,
                 'dropdown__panel__scroll--virtual': this.virtualScroll,
-            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, index.h("slot", { key: 'fa0fc63a45e693cc6655db03b0382f028aea9473', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (index.h("six-menu", { part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), index.h("slot", { key: 'f24f41a9a70f0624078d43eb60b41e841ee90bf7', name: "dropdown-footer" })))));
+            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, index.h("slot", { key: '539cda534eb5ef042526b66487bec3d22c89fdd7', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (index.h("six-menu", { key: '6294182636491e13514380d9516f904f8a9b2204', part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), index.h("slot", { key: '9029f9f9a69d2b6fd19b36755ab9771181a7d1c6', name: "dropdown-footer" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -519,37 +543,59 @@ async function containsFilterTerm(menuItem, lowerCaseFilterTerm) {
     return (menuItem.value.toLowerCase().includes(lowerCaseFilterTerm) ||
         (await menuItem.getTextLabel()).toLowerCase().includes(lowerCaseFilterTerm));
 }
-SixDropdown.style = SixDropdownStyle0;
+SixDropdown.style = sixDropdownCss;
 
-const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";
-const SixMenuStyle0 = sixMenuCss;
+const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";
 
 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", { key: value, value: value }, label));
 const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;
 const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
 const SixMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected", 7);
+        this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected");
         this.eventListeners = new eventListeners.EventListeners();
         this.typeToSelectString = '';
-        this.handleScrolling = () => {
-            if (this.menuWrapper == null)
-                return;
-            // for performance improvements we only update the DOM if the scrollRatio change "enough"
-            this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
-        };
+        /** Set to true to remove the box-shadow */
         this.removeBoxShadow = false;
+        /** Set the options to be shown in the dropdown */
         this.items = null;
-        this.itemsShown = undefined;
+        /** 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;
+        /**
+         * Internal: Disables handling of key presses.
+         */
         this.disableKeyboardHandling = false;
+        /**
+         * Used to calculate which items should be rendered in the DOM
+         */
         this.scrollingIndex = 0;
-        this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        // 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 height after the first render
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        this.handleScrolling = () => {
+            if (this.menuWrapper == null)
+                return;
+            // 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);
@@ -592,6 +638,9 @@ const SixMenu = class {
     getItemsShown() {
         var _a;
         const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;
+        if (this.items && this.items.length === 1) {
+            return 0;
+        }
         return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
     }
     setupForVirtualScrollingAfterRendering() {
@@ -701,6 +750,9 @@ const SixMenu = class {
             // calculate the proper height to show the correct number of items
             styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
         }
+        else if (this.items && this.items.length === 1) {
+            styles.height = 'auto';
+        }
         return Object.assign({}, styles);
     }
     getMenuContainerStyle() {
@@ -713,7 +765,7 @@ const SixMenu = class {
     }
     getScrollbarGhostStyle() {
         const styles = {};
-        if (this.virtualScroll && this.items !== null) {
+        if (this.virtualScroll && this.items !== null && this.items.length > 1) {
             styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
         }
         return Object.assign({}, styles);
@@ -730,16 +782,17 @@ const SixMenu = class {
             .map(({ value, label }) => (index.h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
     render() {
-        return (index.h("div", { key: 'a8806ec6aee657eb677931fc1ba1405caec3e96e', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        return (index.h("div", { key: 'a346d393b279517ec252289e173e1d2e1ac82147', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
                 menu: true,
                 '.no-shadow': this.removeBoxShadow,
-            } }, index.h("div", { key: '34b85eb38385f88e87f49a6689cf6ad082723a87', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", { key: 'a62dcc8bd5d97a8d479f4a4270aedcb77b729aea' }), this.renderItems()), this.virtualScroll && index.h("div", { style: this.getScrollbarGhostStyle() })));
+            } }, index.h("div", { key: 'eeca9d33ecede486adc958510b2bc7028517a79a', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", { key: 'c46d98b34ddaec7d041ee2ad4aa40a048a93cc80' }), this.renderItems()), this.virtualScroll && index.h("div", { key: '535cf4f968da60291f420da2722fc1692c0c064a', style: this.getScrollbarGhostStyle() })));
     }
     get host() { return index.getElement(this); }
 };
-SixMenu.style = SixMenuStyle0;
+SixMenu.style = sixMenuCss;
 
 exports.six_dropdown = SixDropdown;
 exports.six_menu = SixMenu;
+//# sourceMappingURL=six-dropdown.six-menu.entry.cjs.js.map
 
 //# sourceMappingURL=six-dropdown_2.cjs.entry.js.map