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

package/dist/collection/components/six-menu/six-menu.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { getTextContent } from '../../utils/slot';
 import { EventListeners } from '../../utils/event-listeners';
 import { debounce } from '../../utils/execution-control';
@@ -22,37 +22,18 @@ export class SixMenu {
   constructor() {
     this.eventListeners = new EventListeners();
     this.typeToSelectString = '';
-    /** Set to true to remove the box-shadow */
+    this.handleScrolling = () => {
+      // for performance improvements we only update the DOM if the scrollRatio change "enough"
+      this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
+    };
     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);
@@ -228,179 +209,190 @@ export class SixMenu {
         menu: true,
         'menu--noshadow': this.removeBoxShadow,
         'menu__wrapper--scrollable': this.getItemsShown() > 0,
-      } },
-      h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() },
-        h("slot", null),
-        this.renderItems()),
-      this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
+      } }, h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", null), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
   }
   static get is() { return "six-menu"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-menu.css"]
-  }; }
-  static get properties() { return {
-    "removeBoxShadow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to remove the box-shadow"
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "removeBoxShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to remove the box-shadow"
+        },
+        "attribute": "remove-box-shadow",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "remove-box-shadow",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "SixMenuItemData[] | null",
-        "resolved": "SixMenuItemData[]",
-        "references": {
-          "SixMenuItemData": {
-            "location": "local"
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SixMenuItemData[] | null",
+          "resolved": "SixMenuItemData[]",
+          "references": {
+            "SixMenuItemData": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the options to be shown in the dropdown"
-      },
-      "defaultValue": "null"
-    },
-    "itemsShown": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown"
-      },
-      "attribute": "items-shown",
-      "reflect": false,
-      "defaultValue": "ITEMS_SHOWN_NOT_SET"
-    },
-    "virtualScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-      },
-      "attribute": "virtual-scroll",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "itemSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the options to be shown in the dropdown"
+        },
+        "defaultValue": "null"
       },
-      "attribute": "item-size",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "scrollingDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "itemsShown": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown"
+        },
+        "attribute": "items-shown",
+        "reflect": false,
+        "defaultValue": "ITEMS_SHOWN_NOT_SET"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
+      "virtualScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+        },
+        "attribute": "virtual-scroll",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "scrolling-debounce",
-      "reflect": false,
-      "defaultValue": "15"
-    }
-  }; }
-  static get states() { return {
-    "scrollingIndex": {},
-    "sixMenuItemHeight": {}
-  }; }
-  static get events() { return [{
-      "method": "sixMenuItemSelected",
-      "name": "six-menu-item-selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a menu item is selected."
+      "itemSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
+        },
+        "attribute": "item-size",
+        "reflect": false,
+        "defaultValue": "10"
       },
-      "complexType": {
-        "original": "SixMenuItemSelectedPayload",
-        "resolved": "SixMenuItemSelectedPayload",
-        "references": {
-          "SixMenuItemSelectedPayload": {
-            "location": "local"
+      "scrollingDebounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
+        },
+        "attribute": "scrolling-debounce",
+        "reflect": false,
+        "defaultValue": "15"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "scrollingIndex": {},
+      "sixMenuItemHeight": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixMenuItemSelected",
+        "name": "six-menu-item-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a menu item is selected."
+        },
+        "complexType": {
+          "original": "SixMenuItemSelectedPayload",
+          "resolved": "SixMenuItemSelectedPayload",
+          "references": {
+            "SixMenuItemSelectedPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "typeToSelect": {
-      "complexType": {
-        "signature": "(key: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "typeToSelect": {
+        "complexType": {
+          "signature": "(key: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLSlotElement": {
+              "location": "global"
+            }
           },
-          "HTMLSlotElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
-        "tags": []
+        "docs": {
+          "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=six-menu.js.map

package/dist/collection/components/six-menu/six-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu.js","sourceRoot":"","sources":["../../../src/components/six-menu/six-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }) => <six-menu-item value={value}>{label}</six-menu-item>;\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\nconst ITEMS_SHOWN_NOT_SET = undefined;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  menu: HTMLElement;\n  menuWrapper: HTMLElement;\n  typeToSelectString = '';\n  typeToSelectTimeout: NodeJS.Timeout;\n\n  @Element() host: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow: boolean = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */\n  @Prop() itemsShown?: number = ITEMS_SHOWN_NOT_SET;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll: boolean = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize: number = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce: number = 15;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex: number = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper hight after the first render\n  @State()\n  sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown() {\n    const defaultItemsShown = this.virtualScroll\n      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING\n      : ITEMS_SHOWN_NOT_SET;\n\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll) {\n      return;\n    }\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  getItems() {\n    if (this.items !== null && this.items !== undefined) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    const itemIndex = items.indexOf(selectedItem);\n\n    if (itemIndex > -1) {\n      return itemIndex;\n    }\n\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  getActiveItem() {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n\n    if (activeElement) {\n      return activeElement;\n    }\n\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host?.shadowRoot?.querySelectorAll('six-menu-item'));\n  }\n\n  setActiveItem(item: HTMLSixMenuItemElement) {\n    item.setFocus();\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll && this.items !== null) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(mapToMenuItem);\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'menu--noshadow': this.removeBoxShadow,\n          'menu__wrapper--scrollable': this.getItemsShown() > 0,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-divider/six-menu-divider.js

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @since 1.0
  * @status stable
@@ -13,10 +13,15 @@ export class SixMenuDivider {
   }
   static get is() { return "six-menu-divider"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-menu-divider.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-menu-divider.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-menu-divider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-menu-divider.css"]
+    };
+  }
 }
+//# sourceMappingURL=six-menu-divider.js.map

package/dist/collection/components/six-menu-divider/six-menu-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu-divider.js","sourceRoot":"","sources":["../../../src/components/six-menu-divider/six-menu-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;GAOG;AAOH,MAAM,OAAO,cAAc;EACzB,MAAM;IACJ,OAAO,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,GAAG,CAAC;EACtF,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-divider',\n  styleUrl: 'six-menu-divider.scss',\n  shadow: true,\n})\nexport class SixMenuDivider {\n  render() {\n    return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n  }\n}\n"]}