@limetech/lime-elements 36.4.0-next.3 → 36.4.0-next.4

package/dist/types/components/action-bar/action-bar.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ActionBarItem } from './action-bar.types';
+import { OpenDirection } from '../menu/menu.types';
+import { ListSeparator } from '../list/list-item.types';
+/**
+ * An action bar is a user interface element commonly found in software applications and websites.
+ * It typically appears at the top of the screen or within a specific section
+ * and serves as a centralized hub for accessing various actions and commands
+ * relevant to the current context or page.
+ *
+ * The action bar often contains a set of clickable icons or buttons (icons + labels)
+ * that represent specific actions, such as saving, deleting, editing, sharing,
+ * or bulk operations for selected items.
+ *
+ * The purpose of an action bar is to provide quick and convenient access to
+ * frequently used functionalities, enabling users to perform common tasks efficiently.
+ * It enhances usability by organizing important actions in a visually prominent and easily accessible location.
+ *
+ * The action bar's design and layout can vary based on the platform or application,
+ * but its primary goal remains consistent—to
+ * empower users to interact with the software and perform desired actions effortlessly.
+ * @exampleComponent limel-example-action-bar
+ * @exampleComponent limel-example-action-bar-overflow-menu
+ * @exampleComponent limel-example-action-bar-colors
+ * @exampleComponent limel-example-action-bar-floating
+ * @exampleComponent limel-example-action-bar-styling
+ * @exampleComponent limel-example-action-bar-as-primary-component
+ * @private
+ */
+export declare class ActionBar {
+  /**
+   * Items that are placed in the action bar.
+   * These represent primary actions.
+   */
+  actions: Array<ActionBarItem | ListSeparator>;
+  /**
+   * A label used to describe the purpose of the element to users
+   * of assistive technologies, like screen readers.
+   * Example value: "toolbar"
+   */
+  accessibleLabel?: string;
+  /**
+   * - When set to `fullWidth`, the component will take the
+   * entire width of its container.
+   * - When set to `floating`, the component will get basic stylings
+   * to visualize the floating state.
+   * :::note
+   * You should still properly position the component
+   * according to the structure of your user interface.
+   * For example, use an `absolute` or `fixed` position.
+   * :::
+   */
+  layout?: 'fullWidth' | 'floating';
+  /**
+   * Defines the location that the content of the overflow menu
+   * appears, in relation to its trigger.
+   */
+  openDirection: OpenDirection;
+  /**
+   * Fired when a action bar item has been clicked.
+   */
+  itemSelected: EventEmitter<ActionBarItem>;
+  private host;
+  private overflowCutoff;
+  private intersectionObserver;
+  private firstRender;
+  private actionBarItems;
+  render(): any;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  private renderActionBarItem;
+  private renderOverflowMenu;
+  private isVisible;
+  private handleSelect;
+  private handleIntersection;
+  private createIntersectionObserver;
+  private observe;
+  private haveItemsChanged;
+}

package/dist/types/components/action-bar/action-bar.types.d.ts

@@ -0,0 +1,8 @@
+import { MenuItem } from '../menu/menu.types';
+export interface ActionBarItem extends MenuItem {
+  /**
+   * Renders the button in the action bar without their labels.
+   * Does not affect the items that are overflown into the overflow menu.
+   */
+  iconOnly?: boolean;
+}

package/dist/types/components/action-bar/isItem.d.ts

@@ -0,0 +1,3 @@
+import { ListSeparator } from '../list/list-item.types';
+import { ActionBarItem } from './action-bar.types';
+export declare function isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem;

package/dist/types/components.d.ts

@@ -5,9 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ActionBarItem } from "./components/action-bar/action-bar.types";
+import { ListSeparator } from "./components/list/list-item.types";
+import { OpenDirection } from "./components/menu/menu.types";
+import { ListSeparator as ListSeparator1 } from "src/interface";
+import { Action as Action1, ActionBarItem as ActionBarItem1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator as ListSeparator2, ListType, MenuItem, MenuListType, OpenDirection as OpenDirection1, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
-import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
@@ -17,12 +21,49 @@ import { IconSize } from "./components/icon/icon.types";
 import { InfoTileProgress } from "./components/info-tile/info-tile.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
-import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
 export namespace Components {
+    interface LimelActionBar {
+        /**
+          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Items that are placed in the action bar. These represent primary actions.
+         */
+        "actions": Array<ActionBarItem | ListSeparator>;
+        /**
+          * - When set to `fullWidth`, the component will take the entire width of its container. - When set to `floating`, the component will get basic stylings to visualize the floating state. :::note You should still properly position the component according to the structure of your user interface. For example, use an `absolute` or `fixed` position. :::
+         */
+        "layout"?: 'fullWidth' | 'floating';
+        /**
+          * Defines the location that the content of the overflow menu appears, in relation to its trigger.
+         */
+        "openDirection": OpenDirection;
+    }
+    interface LimelActionBarItem {
+        /**
+          * When the item is displayed in the available width, this will be `false`.
+         */
+        "isVisible": boolean;
+        /**
+          * Item that is placed in the action bar.
+         */
+        "item": ActionBarItem | ListSeparator1;
+    }
+    interface LimelActionBarOverflowMenu {
+        /**
+          * List of the items that should be rendered in the overflow menu.
+         */
+        "items": Array<MenuItem | ListSeparator2>;
+        /**
+          * Defines the location that the content of the overflow menu appears, in relation to its trigger. It defaults to `bottom-end`, since in normal scenarios (for example when the action bar is not floating at the bottom of the screen) this menu is the right-most item in the user interface of the component.
+         */
+        "openDirection": OpenDirection1;
+    }
     interface LimelBadge {
         /**
           * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters.
@@ -773,7 +814,7 @@ export namespace Components {
         /**
           * List of items to display
          */
-        "items": Array<ListItem | ListSeparator>;
+        "items": Array<ListItem | ListSeparator2>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -799,7 +840,7 @@ export namespace Components {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items": Array<MenuItem | ListSeparator>;
+        "items": Array<MenuItem | ListSeparator2>;
         /**
           * Sets the open state of the menu.
          */
@@ -807,7 +848,7 @@ export namespace Components {
         /**
           * Decides the menu's location in relation to its trigger
          */
-        "openDirection": OpenDirection;
+        "openDirection": OpenDirection1;
     }
     interface LimelMenuList {
         /**
@@ -821,7 +862,7 @@ export namespace Components {
         /**
           * List of items to display
          */
-        "items": Array<MenuItem | ListSeparator>;
+        "items": Array<MenuItem | ListSeparator2>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -915,7 +956,7 @@ export namespace Components {
         /**
           * Decides the popover's location in relation to its trigger
          */
-        "openDirection": OpenDirection1;
+        "openDirection": OpenDirection;
     }
     interface LimelPopoverSurface {
         /**
@@ -939,7 +980,7 @@ export namespace Components {
         /**
           * Decides which direction the portal content should open.
          */
-        "openDirection": OpenDirection1;
+        "openDirection": OpenDirection;
         /**
           * Parent element to move the content to.
          */
@@ -1135,7 +1176,7 @@ export namespace Components {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items": Array<MenuItem | ListSeparator>;
+        "items": Array<MenuItem | ListSeparator2>;
         /**
           * The text to show on the default action part of the button.
          */
@@ -1270,6 +1311,18 @@ export namespace Components {
         "maxlength"?: number;
     }
 }
+export interface LimelActionBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelActionBarElement;
+}
+export interface LimelActionBarItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelActionBarItemElement;
+}
+export interface LimelActionBarOverflowMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelActionBarOverflowMenuElement;
+}
 export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelButtonGroupElement;
@@ -1395,6 +1448,24 @@ export interface LimelTableCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLimelTableElement;
 }
 declare global {
+    interface HTMLLimelActionBarElement extends Components.LimelActionBar, HTMLStencilElement {
+    }
+    var HTMLLimelActionBarElement: {
+        prototype: HTMLLimelActionBarElement;
+        new (): HTMLLimelActionBarElement;
+    };
+    interface HTMLLimelActionBarItemElement extends Components.LimelActionBarItem, HTMLStencilElement {
+    }
+    var HTMLLimelActionBarItemElement: {
+        prototype: HTMLLimelActionBarItemElement;
+        new (): HTMLLimelActionBarItemElement;
+    };
+    interface HTMLLimelActionBarOverflowMenuElement extends Components.LimelActionBarOverflowMenu, HTMLStencilElement {
+    }
+    var HTMLLimelActionBarOverflowMenuElement: {
+        prototype: HTMLLimelActionBarOverflowMenuElement;
+        new (): HTMLLimelActionBarOverflowMenuElement;
+    };
     interface HTMLLimelBadgeElement extends Components.LimelBadge, HTMLStencilElement {
     }
     var HTMLLimelBadgeElement: {
@@ -1702,6 +1773,9 @@ declare global {
         new (): HTMLLimelTooltipContentElement;
     };
     interface HTMLElementTagNameMap {
+        "limel-action-bar": HTMLLimelActionBarElement;
+        "limel-action-bar-item": HTMLLimelActionBarItemElement;
+        "limel-action-bar-overflow-menu": HTMLLimelActionBarOverflowMenuElement;
         "limel-badge": HTMLLimelBadgeElement;
         "limel-banner": HTMLLimelBannerElement;
         "limel-button": HTMLLimelButtonElement;
@@ -1756,6 +1830,53 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface LimelActionBar {
+        /**
+          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Items that are placed in the action bar. These represent primary actions.
+         */
+        "actions"?: Array<ActionBarItem | ListSeparator>;
+        /**
+          * - When set to `fullWidth`, the component will take the entire width of its container. - When set to `floating`, the component will get basic stylings to visualize the floating state. :::note You should still properly position the component according to the structure of your user interface. For example, use an `absolute` or `fixed` position. :::
+         */
+        "layout"?: 'fullWidth' | 'floating';
+        /**
+          * Fired when a action bar item has been clicked.
+         */
+        "onItemSelected"?: (event: LimelActionBarCustomEvent<ActionBarItem>) => void;
+        /**
+          * Defines the location that the content of the overflow menu appears, in relation to its trigger.
+         */
+        "openDirection"?: OpenDirection;
+    }
+    interface LimelActionBarItem {
+        /**
+          * When the item is displayed in the available width, this will be `false`.
+         */
+        "isVisible"?: boolean;
+        /**
+          * Item that is placed in the action bar.
+         */
+        "item": ActionBarItem | ListSeparator1;
+        /**
+          * Fired when a action bar item has been clicked.
+         */
+        "onSelect"?: (event: LimelActionBarItemCustomEvent<ActionBarItem | ListSeparator1>) => void;
+    }
+    interface LimelActionBarOverflowMenu {
+        /**
+          * List of the items that should be rendered in the overflow menu.
+         */
+        "items"?: Array<MenuItem | ListSeparator2>;
+        "onSelect"?: (event: LimelActionBarOverflowMenuCustomEvent<ActionBarItem1>) => void;
+        /**
+          * Defines the location that the content of the overflow menu appears, in relation to its trigger. It defaults to `bottom-end`, since in normal scenarios (for example when the action bar is not floating at the bottom of the screen) this menu is the right-most item in the user interface of the component.
+         */
+        "openDirection"?: OpenDirection1;
+    }
     interface LimelBadge {
         /**
           * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters.
@@ -2602,7 +2723,7 @@ declare namespace LocalJSX {
         /**
           * List of items to display
          */
-        "items"?: Array<ListItem | ListSeparator>;
+        "items"?: Array<ListItem | ListSeparator2>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -2636,7 +2757,7 @@ declare namespace LocalJSX {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items"?: Array<MenuItem | ListSeparator>;
+        "items"?: Array<MenuItem | ListSeparator2>;
         /**
           * Is emitted when the menu is cancelled.
          */
@@ -2652,7 +2773,7 @@ declare namespace LocalJSX {
         /**
           * Decides the menu's location in relation to its trigger
          */
-        "openDirection"?: OpenDirection;
+        "openDirection"?: OpenDirection1;
     }
     interface LimelMenuList {
         /**
@@ -2666,7 +2787,7 @@ declare namespace LocalJSX {
         /**
           * List of items to display
          */
-        "items"?: Array<MenuItem | ListSeparator>;
+        "items"?: Array<MenuItem | ListSeparator2>;
         /**
           * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
          */
@@ -2784,7 +2905,7 @@ declare namespace LocalJSX {
         /**
           * Decides the popover's location in relation to its trigger
          */
-        "openDirection"?: OpenDirection1;
+        "openDirection"?: OpenDirection;
     }
     interface LimelPopoverSurface {
         /**
@@ -2808,7 +2929,7 @@ declare namespace LocalJSX {
         /**
           * Decides which direction the portal content should open.
          */
-        "openDirection"?: OpenDirection1;
+        "openDirection"?: OpenDirection;
         /**
           * Parent element to move the content to.
          */
@@ -3024,7 +3145,7 @@ declare namespace LocalJSX {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items"?: Array<MenuItem | ListSeparator>;
+        "items"?: Array<MenuItem | ListSeparator2>;
         /**
           * The text to show on the default action part of the button.
          */
@@ -3203,6 +3324,9 @@ declare namespace LocalJSX {
         "maxlength"?: number;
     }
     interface IntrinsicElements {
+        "limel-action-bar": LimelActionBar;
+        "limel-action-bar-item": LimelActionBarItem;
+        "limel-action-bar-overflow-menu": LimelActionBarOverflowMenu;
         "limel-badge": LimelBadge;
         "limel-banner": LimelBanner;
         "limel-button": LimelButton;
@@ -3260,6 +3384,9 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "limel-action-bar": LocalJSX.LimelActionBar & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
+            "limel-action-bar-item": LocalJSX.LimelActionBarItem & JSXBase.HTMLAttributes<HTMLLimelActionBarItemElement>;
+            "limel-action-bar-overflow-menu": LocalJSX.LimelActionBarOverflowMenu & JSXBase.HTMLAttributes<HTMLLimelActionBarOverflowMenuElement>;
             "limel-badge": LocalJSX.LimelBadge & JSXBase.HTMLAttributes<HTMLLimelBadgeElement>;
             "limel-banner": LocalJSX.LimelBanner & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
             "limel-button": LocalJSX.LimelButton & JSXBase.HTMLAttributes<HTMLLimelButtonElement>;

package/dist/types/interface.d.ts

@@ -22,5 +22,6 @@ export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './components/dock/dock.types';
+export * from './components/action-bar/action-bar.types';
 export * from './components/info-tile/info-tile.types';
 export * from './components/callout/callout.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.4.0-next.3",
+  "version": "36.4.0-next.4",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -49,37 +49,36 @@
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.7",
-    "@types/puppeteer": "^7.0.4",
-    "@types/react": "^18.2.8",
+    "@types/react": "^18.2.11",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.8",
-    "eslint": "^8.41.0",
+    "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^46.2.0",
+    "eslint-plugin-jsdoc": "^46.2.6",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-sonarjs": "^0.19.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
-    "jest": "^26.6.3",
-    "jest-cli": "^27.4.5",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "jsonlint-mod": "^1.7.6",
-    "jsx-dom": "^8.0.6",
+    "jsx-dom": "^8.0.7",
     "kompendium": "^0.12.3",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
     "moment": "^2.29.4",
     "number-abbreviate": "^2.0.0",
     "prettier": "^2.8.8",
-    "puppeteer": "^20.5.0",
+    "puppeteer": "^19.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-shadow-dom-retarget-events": "^1.1.0",

package/dist/cjs/limel-menu.cjs.entry.js

@@ -1,127 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-287e25e0.js');
-const randomString = require('./random-string-4c3b7f1c.js');
-const zipObject = require('./zipObject-93a471fa.js');
-require('./_assignValue-7c18d8d6.js');
-require('./_defineProperty-8f56146d.js');
-require('./_getNative-60328036.js');
-require('./eq-9a943b00.js');
-require('./isObject-e28b7997.js');
-
-const menuCss = ":host(limel-menu){isolation:isolate;position:relative;display:inline-block;--badge-background-color:var(\n      --notification-badge-background-color,\n      rgb(var(--color-red-default))\n  );--badge-text-color:var(\n      --notification-badge-text-color,\n      rgb(var(--color-white))\n  )}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}";
-
-const Menu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cancel = index.createEvent(this, "cancel", 7);
-    this.select = index.createEvent(this, "select", 7);
-    this.setTriggerAttributes = (element) => {
-      const attributes = {
-        'aria-haspopup': true,
-        'aria-expanded': this.open,
-        disabled: this.disabled,
-        role: 'button',
-      };
-      for (const [key, value] of Object.entries(attributes)) {
-        if (!value) {
-          element.removeAttribute(key);
-        }
-        else {
-          element.setAttribute(key, String(value));
-        }
-      }
-    };
-    this.onClose = () => {
-      this.cancel.emit();
-      this.open = false;
-    };
-    this.onTriggerClick = (event) => {
-      event.stopPropagation();
-      if (this.disabled) {
-        return;
-      }
-      this.open = !this.open;
-    };
-    this.handleSelect = (event) => {
-      event.stopPropagation();
-      this.select.emit(event.detail);
-      this.open = false;
-    };
-    this.setListElement = (element) => {
-      this.list = element;
-    };
-    this.focusMenuItem = () => {
-      var _a;
-      const activeElement = this.list.shadowRoot.activeElement;
-      activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
-      const MenuItems = this.items.filter(this.isMenuItem);
-      const selectedIndex = Math.max(MenuItems.findIndex((item) => item.selected), 0);
-      const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
-      (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.renderNotificationBadge = () => {
-      if (this.items.some(this.hasNotificationBadge)) {
-        return index.h("limel-badge", null);
-      }
-    };
-    this.hasNotificationBadge = (item) => this.isMenuItem(item) && item.badge !== undefined;
-    this.items = [];
-    this.disabled = false;
-    this.openDirection = 'bottom-start';
-    this.open = false;
-    this.badgeIcons = false;
-    this.gridLayout = false;
-    this.portalId = randomString.createRandomString();
-  }
-  openWatcher() {
-    if (!this.open) {
-      return;
-    }
-    const observer = new IntersectionObserver(() => {
-      observer.unobserve(this.list);
-      this.focusMenuItem();
-    });
-    observer.observe(this.list);
-  }
-  render() {
-    const cssProperties = this.getCssProperties();
-    const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (index.h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { name: "trigger" }), this.renderNotificationBadge(), index.h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
-        'has-grid-layout': this.gridLayout,
-      } }, index.h("limel-menu-list", { class: {
-        'has-grid-layout has-interactive-items': this.gridLayout,
-      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
-  }
-  componentDidRender() {
-    const slotElement = this.host.shadowRoot.querySelector('slot');
-    slotElement.assignedElements().forEach(this.setTriggerAttributes);
-  }
-  getCssProperties() {
-    const propertyNames = [
-      '--menu-surface-width',
-      '--list-grid-item-max-width',
-      '--list-grid-item-min-width',
-      '--list-grid-gap',
-      '--notification-badge-background-color',
-      '--notification-badge-text-color',
-    ];
-    const style = getComputedStyle(this.host);
-    const values = propertyNames.map((property) => {
-      return style.getPropertyValue(property);
-    });
-    return zipObject.zipObject(propertyNames, values);
-  }
-  isMenuItem(item) {
-    return !('separator' in item);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"]
-  }; }
-};
-Menu.style = menuCss;
-
-exports.limel_menu = Menu;