@genexus/genexus-ide-ui 0.0.42 → 0.0.44

package/dist/components/gxg-menu-slim-list.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './title.js';
+
+const listCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block}.title-wrapper{display:block;padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box}ul{padding-left:0;list-style-type:none;display:block;box-sizing:border-box;margin:0;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}";
+
+const GxgMenuSlimList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  // 2. REFERENCE TO ELEMENTS //
+  // 3.STATE() VARIABLES //
+  // 4.PUBLIC PROPERTY API | WATCH'S //
+  // 5.EVENTS (EMIT) //
+  // 6.METHODS //
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("div", { class: "wrapper", part: "wrapper" }, this.listTitle ? (h("span", { class: "title-wrapper", part: "title-wrapper" }, h("gxg-title", { type: "title-05", part: "title" }, this.listTitle))) : null, h("ul", { part: "list" }, h("slot", null)))));
+  }
+  static get style() { return listCss; }
+}, [1, "gxg-menu-slim-list", {
+    "listTitle": [1, "list-title"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-menu-slim-list", "gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-menu-slim-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgMenuSlimList$1);
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgMenuSlimList = GxgMenuSlimList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgMenuSlimList, defineCustomElement };

package/dist/components/gxg-menu-slim.js

@@ -0,0 +1,271 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { K as KeyboardKeys } from './types.js';
+
+const detectClickOutside = (event, element) => {
+    const x = event.x;
+    const y = event.y;
+    //Contextual menu coordinates
+    const elementBoundingClientRect = element.getBoundingClientRect();
+    if ((x > elementBoundingClientRect.left &&
+        x < elementBoundingClientRect.right &&
+        y > elementBoundingClientRect.top &&
+        y < elementBoundingClientRect.bottom) ||
+        (event.screenX === 0 &&
+            event.screenY === 0 &&
+            event.clientX === 0 &&
+            event.clientY === 0)) {
+        //Click happened inside the element
+        return false;
+    }
+    else {
+        //Click happened outside the element
+        return true;
+    }
+};
+
+const menuCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-block;position:absolute}.outer-wrapper{color:var(--color-on-background);font-family:var(--font-family-primary);overflow:hidden;box-shadow:var(--box-shadow-01);background:var(--color-background);transition-property:height}.inner-wrapper{border-radius:var(--border-width-md);box-sizing:border-box}.menu__header{border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-03)}.menu__header__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-top:0;margin-bottom:0;padding:var(--spacing-comp-01) var(--spacing-comp-03)}:host([full-width]){width:100% !important}:host([tabs]) .menu-list{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}:host([tabs]) .menu-list ::slotted(gxg-menu-item){text-transform:uppercase}:host ::slotted(gxg-menu-list){border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-03)}:host ::slotted(gxg-menu-list){border-bottom:none}";
+
+const GxgMenuSlim$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE EVENTS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    this._menuHeight = "0px";
+    /**
+     * The delay in milliseconds that the menu will remain visible after mouseout event fires.
+     */
+    this._mouseOutDelay = 1000;
+    /**
+     * The menu height transition timing.
+     */
+    this._transitionDuration = 200;
+    /**
+     * The enabled (not disabled) menu items
+     */
+    this._enabledItems = [];
+    /**
+     * Hides or show the menu with an animation
+     */
+    this.hidden = true;
+    /**
+     * Hides the menu when an item is selected.
+     */
+    this.hideOnSelect = true;
+    /**
+     * Prevents the menu-item's text from wrapping into more than one line, adding an ellipsis at the end.
+     */
+    this.ellipsis = true;
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.setFocusFirstItem = () => {
+      const firstItem = this.el.querySelector("gxg-menu-slim-item");
+      firstItem.focus();
+    };
+    this.assignEllipsis = () => {
+      if (this.ellipsis) {
+        const items = this.el.querySelectorAll("gxg-menu-slim-item");
+        items &&
+          items.forEach((item) => {
+            item.ellipsis = true;
+          });
+      }
+    };
+    /*Mouse out handlers*/
+    this.attachMouseOut = () => {
+      this.el.addEventListener("mouseout", this.detectMouseOut);
+    };
+    this.removeMouseOut = () => {
+      this.el.removeEventListener("mouseout", this.detectMouseOut);
+    };
+    this.detectMouseOut = (e) => {
+      const nodeName = e.relatedTarget.nodeName;
+      if (nodeName !== "GXG-MENU" &&
+        nodeName !== "GXG-MENU-LIST" &&
+        nodeName !== "GXG-MENU-slim-ITEM") {
+        //Mouse out
+        this.startMouseOutTimeout();
+      }
+    };
+    /*Mouse enter handlers*/
+    this.attachMouseEnter = () => {
+      this.el.addEventListener("mouseenter", this.detectMouseEnter);
+    };
+    this.removeMouseEnter = () => {
+      this.el.removeEventListener("mouseenter", this.detectMouseEnter);
+    };
+    this.detectMouseEnter = () => {
+      //Mouse enter
+      this.clearMouseOutTimeout();
+    };
+    /*Detect click outside*/
+    this.attachDetectClickOutside = () => {
+      document.addEventListener("click", this.detectClickOutside);
+    };
+    this.removeDetectClickOutside = () => {
+      document.removeEventListener("click", this.detectClickOutside);
+    };
+    /*Detect click outside*/
+    this.detectClickOutside = (e) => {
+      const clickedOutside = detectClickOutside(e, this.el);
+      if (clickedOutside) {
+        this.hidden = true;
+      }
+      else {
+        this.hidden = false;
+      }
+    };
+    this.getEnabledItems = () => {
+      const enabledItems = this.el.querySelectorAll("gxg-menu-slim-item");
+      enabledItems.forEach((menuItem) => {
+        if (!menuItem.disabled) {
+          this._enabledItems.push(menuItem);
+        }
+      });
+    };
+  }
+  hiddenHandler(hidden) {
+    if (hidden) {
+      this._menuHeight = "0px";
+      this.el.setAttribute("tabindex", "-1");
+      this.removeDetectClickOutside();
+      this.removeMouseOut();
+      this.removeMouseEnter();
+    }
+    else {
+      this._menuHeight = this.innerWrapper.offsetHeight + "px";
+      this.el.removeAttribute("tabindex");
+      setTimeout(() => {
+        this.setFocusFirstItem();
+        this.attachDetectClickOutside();
+        this.attachMouseOut();
+        this.attachMouseEnter();
+      }, this._transitionDuration);
+    }
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  componentWillLoad() {
+    this.assignEllipsis();
+    /*Prevent this.mouseOutTimeout firing on page load*/
+    clearTimeout(this.mouseOutTimeout);
+    this.getEnabledItems();
+  }
+  componentDidUnload() {
+    this.removeDetectClickOutside();
+    this.removeMouseOut();
+    this.removeMouseEnter();
+  }
+  // 7.LISTENERS //
+  itemSelectedHandler(itemSelected) {
+    /*Remove 'active' from every item, except from the clicked one*/
+    const menuItems = Array.from(this.el.querySelectorAll("gxg-menu-slim-item"));
+    menuItems.forEach((menuItem) => {
+      if (itemSelected.detail.ref !== menuItem) {
+        menuItem.active = false;
+      }
+    });
+    /*Hide menu*/
+    if (this.hideOnSelect) {
+      this.hidden = true;
+    }
+  }
+  keyboardNavigationHandler(triggeredItem) {
+    const triggeringItem = triggeredItem.detail.ref;
+    const triggeringItemIndex = this._enabledItems.findIndex((item) => {
+      return item === triggeringItem;
+    });
+    let newFocusedItem;
+    if (triggeringItemIndex !== -1 &&
+      triggeredItem.detail.key === KeyboardKeys.ARROW_UP) {
+      const prevItem = this._enabledItems[triggeringItemIndex - 1];
+      if ((prevItem === null || prevItem === void 0 ? void 0 : prevItem.active) && prevItem.previousElementSibling) {
+        newFocusedItem = prevItem.previousElementSibling;
+      }
+      else if (prevItem) {
+        newFocusedItem = prevItem;
+      }
+    }
+    else if (triggeringItemIndex !== -1 &&
+      triggeredItem.detail.key === KeyboardKeys.ARROW_DOWN) {
+      const nextItem = this._enabledItems[triggeringItemIndex + 1];
+      if ((nextItem === null || nextItem === void 0 ? void 0 : nextItem.active) && nextItem.nextElementSibling) {
+        newFocusedItem = nextItem.nextElementSibling;
+      }
+      else if (nextItem) {
+        newFocusedItem = nextItem;
+      }
+    }
+    if (newFocusedItem) {
+      newFocusedItem.focus();
+    }
+  }
+  /**
+   * @description
+   */
+  startMouseOutTimeout() {
+    this.mouseOutTimeout = setTimeout(() => {
+      this.hidden = true;
+    }, this._mouseOutDelay);
+  }
+  clearMouseOutTimeout() {
+    clearTimeout(this.mouseOutTimeout);
+  }
+  /**
+   * @description It renders the menu title, which is optional.
+   */
+  renderTitle() {
+    return this.menuTitle ? (h("header", { class: "menu__header", part: "header" }, h("h1", { class: "menu__header__title", part: "title" }, this.menuTitle))) : null;
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { tabindex: "-1" }, h("div", { class: {
+        "outer-wrapper": true,
+      }, style: {
+        height: this._menuHeight,
+        transitionDuration: `${this._transitionDuration}ms`,
+      }, part: "outer-wrapper" }, h("div", { class: "inner-wrapper", ref: (el) => (this.innerWrapper = el), part: "inner-wrapper" }, this.renderTitle(), h("div", { class: "lists-wrapper", part: "lists-wrapper" }, h("slot", null))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "hidden": ["hiddenHandler"]
+  }; }
+  static get style() { return menuCss; }
+}, [1, "gxg-menu-slim", {
+    "menuTitle": [1, "menu-title"],
+    "tabs": [516],
+    "hidden": [4],
+    "hideOnSelect": [4, "hide-on-select"],
+    "ellipsis": [4]
+  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "keyboardNavigation", "keyboardNavigationHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-menu-slim"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-menu-slim":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgMenuSlim$1);
+      }
+      break;
+  } });
+}
+
+const GxgMenuSlim = GxgMenuSlim$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgMenuSlim, defineCustomElement };

package/dist/components/gxg-menu.js

@@ -1,256 +1,37 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { K as KeyboardKeys } from './types.js';
 
-const detectClickOutside = (event, element) => {
-    const x = event.x;
-    const y = event.y;
-    //Contextual menu coordinates
-    const elementBoundingClientRect = element.getBoundingClientRect();
-    if ((x > elementBoundingClientRect.left &&
-        x < elementBoundingClientRect.right &&
-        y > elementBoundingClientRect.top &&
-        y < elementBoundingClientRect.bottom) ||
-        (event.screenX === 0 &&
-            event.screenY === 0 &&
-            event.clientX === 0 &&
-            event.clientY === 0)) {
-        //Click happened inside the element
-        return false;
-    }
-    else {
-        //Click happened outside the element
-        return true;
-    }
-};
-
-const menuCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-block;position:absolute}.outer-wrapper{color:var(--color-on-background);font-family:var(--font-family-primary);overflow:hidden;box-shadow:var(--box-shadow-01);background:var(--color-background);transition-property:height}.inner-wrapper{border-radius:var(--border-width-md);box-sizing:border-box}.menu__header{border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-03)}.menu__header__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-top:0;margin-bottom:0;padding:var(--spacing-comp-01) var(--spacing-comp-03)}:host([full-width]){width:100% !important}:host([tabs]) .menu-list{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}:host([tabs]) .menu-list ::slotted(gxg-menu-item){text-transform:uppercase}:host ::slotted(gxg-menu-list){border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-03)}:host ::slotted(gxg-menu-list){border-bottom:none}";
+const menuCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-block;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01)}:host .menu__header{border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-04)}:host .menu__header__title{color:var(--color-on-background);font-family:var(--font-family-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-top:0;margin-bottom:0;padding:var(--spacing-comp-03) var(--spacing-comp-05) var(--spacing-comp-03) var(--spacing-comp-05)}:host .menuList{list-style-type:none;display:block;padding-left:0;margin:0;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}:host([full-width]){width:100% !important}:host([tabs]) .menuList{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}:host([tabs]) .menuList ::slotted(gxg-menu-item){text-transform:uppercase}";
 
 const GxgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /*
-  INDEX:
-  1.OWN PROPERTIES
-  2.REFERENCE TO ELEMENTS
-  3.STATE() VARIABLES
-  4.PUBLIC PROPERTY API | WATCH'S
-  5.EVENTS (EMIT)
-  6.COMPONENT LIFECYCLE EVENTS
-  7.LISTENERS
-  8.PUBLIC METHODS API
-  9.LOCAL METHODS
-  10.RENDER() FUNCTION
-  */
-    // 1.OWN PROPERTIES //
-    this._menuHeight = "0px";
-    /**
-     * The delay in milliseconds that the menu will remain visible after mouseout event fires.
-     */
-    this._mouseOutDelay = 1000;
-    /**
-     * The menu height transition timing.
-     */
-    this._transitionDuration = 200;
-    /**
-     * The enabled (not disabled) menu items
-     */
-    this._enabledItems = [];
-    /**
-     * Hides or show the menu with an animation
-     */
-    this.hidden = true;
-    /**
-     * Hides the menu when an item is selected.
-     */
-    this.hideOnSelect = true;
-    /**
-     * Prevents the menu-item's text from wrapping into more than one line, adding an ellipsis at the end.
-     */
-    this.ellipsis = true;
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.setFocusFirstItem = () => {
-      const firstItem = this.el.querySelector("gxg-menu-item");
-      firstItem.focus();
-    };
-    this.assignEllipsis = () => {
-      if (this.ellipsis) {
-        const items = this.el.querySelectorAll("gxg-menu-item");
-        items &&
-          items.forEach((item) => {
-            item.ellipsis = true;
-          });
-      }
-    };
-    /*Mouse out handlers*/
-    this.attachMouseOut = () => {
-      this.el.addEventListener("mouseout", this.detectMouseOut);
-    };
-    this.removeMouseOut = () => {
-      this.el.removeEventListener("mouseout", this.detectMouseOut);
-    };
-    this.detectMouseOut = (e) => {
-      const nodeName = e.relatedTarget.nodeName;
-      if (nodeName !== "GXG-MENU" &&
-        nodeName !== "GXG-MENU-LIST" &&
-        nodeName !== "GXG-MENU-ITEM") {
-        //Mouse out
-        this.startMouseOutTimeout();
-      }
-    };
-    /*Mouse enter handlers*/
-    this.attachMouseEnter = () => {
-      this.el.addEventListener("mouseenter", this.detectMouseEnter);
-    };
-    this.removeMouseEnter = () => {
-      this.el.removeEventListener("mouseenter", this.detectMouseEnter);
-    };
-    this.detectMouseEnter = () => {
-      //Mouse enter
-      this.clearMouseOutTimeout();
-    };
-    /*Detect click outside*/
-    this.attachDetectClickOutside = () => {
-      document.addEventListener("click", this.detectClickOutside);
-    };
-    this.removeDetectClickOutside = () => {
-      document.removeEventListener("click", this.detectClickOutside);
-    };
-    /*Detect click outside*/
-    this.detectClickOutside = (e) => {
-      const clickedOutside = detectClickOutside(e, this.el);
-      if (clickedOutside) {
-        this.hidden = true;
-      }
-      else {
-        this.hidden = false;
-      }
-    };
-    this.getEnabledItems = () => {
-      const enabledItems = this.el.querySelectorAll("gxg-menu-item");
-      enabledItems.forEach((menuItem) => {
-        if (!menuItem.disabled) {
-          this._enabledItems.push(menuItem);
-        }
-      });
-    };
-  }
-  hiddenHandler(hidden) {
-    if (hidden) {
-      this._menuHeight = "0px";
-      this.el.setAttribute("tabindex", "-1");
-      this.removeDetectClickOutside();
-      this.removeMouseOut();
-      this.removeMouseEnter();
-    }
-    else {
-      this._menuHeight = this.innerWrapper.offsetHeight + "px";
-      this.el.removeAttribute("tabindex");
-      setTimeout(() => {
-        this.setFocusFirstItem();
-        this.attachDetectClickOutside();
-        this.attachMouseOut();
-        this.attachMouseEnter();
-      }, this._transitionDuration);
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.assignEllipsis();
-    /*Prevent this.mouseOutTimeout firing on page load*/
-    clearTimeout(this.mouseOutTimeout);
-    this.getEnabledItems();
-  }
-  componentDidUnload() {
-    this.removeDetectClickOutside();
-    this.removeMouseOut();
-    this.removeMouseEnter();
   }
-  // 7.LISTENERS //
-  itemSelectedHandler(itemSelected) {
-    /*Remove 'active' from every item, except from the clicked one*/
-    const menuItems = Array.from(this.el.querySelectorAll("gxg-menu-item"));
-    menuItems.forEach((menuItem) => {
-      if (itemSelected.detail.ref !== menuItem) {
-        menuItem.active = false;
+  menuItemActiveHandler(event) {
+    const children = Array.from(this.el.querySelectorAll("gxg-menu-item"));
+    children.forEach((element) => {
+      element.removeAttribute("active");
+      if (event.detail === element.getAttribute("label")) {
+        element.setAttribute("active", "active");
       }
     });
-    /*Hide menu*/
-    if (this.hideOnSelect) {
-      this.hidden = true;
-    }
   }
-  keyboardNavigationHandler(triggeredItem) {
-    const triggeringItem = triggeredItem.detail.ref;
-    const triggeringItemIndex = this._enabledItems.findIndex((item) => {
-      return item === triggeringItem;
-    });
-    let newFocusedItem;
-    if (triggeringItemIndex !== -1 &&
-      triggeredItem.detail.key === KeyboardKeys.ARROW_UP) {
-      const prevItem = this._enabledItems[triggeringItemIndex - 1];
-      if ((prevItem === null || prevItem === void 0 ? void 0 : prevItem.active) && prevItem.previousElementSibling) {
-        newFocusedItem = prevItem.previousElementSibling;
-      }
-      else if (prevItem) {
-        newFocusedItem = prevItem;
-      }
+  printTitle() {
+    if (this.menuTitle !== "undefined" &&
+      this.menuTitle.replace(/\s/g, "") !== "") {
+      return (h("header", { class: "menu__header" }, h("h1", { class: "menu__header__title" }, this.menuTitle)));
     }
-    else if (triggeringItemIndex !== -1 &&
-      triggeredItem.detail.key === KeyboardKeys.ARROW_DOWN) {
-      const nextItem = this._enabledItems[triggeringItemIndex + 1];
-      if ((nextItem === null || nextItem === void 0 ? void 0 : nextItem.active) && nextItem.nextElementSibling) {
-        newFocusedItem = nextItem.nextElementSibling;
-      }
-      else if (nextItem) {
-        newFocusedItem = nextItem;
-      }
-    }
-    if (newFocusedItem) {
-      newFocusedItem.focus();
-    }
-  }
-  /**
-   * @description
-   */
-  startMouseOutTimeout() {
-    this.mouseOutTimeout = setTimeout(() => {
-      this.hidden = true;
-    }, this._mouseOutDelay);
-  }
-  clearMouseOutTimeout() {
-    clearTimeout(this.mouseOutTimeout);
-  }
-  /**
-   * @description It renders the menu title, which is optional.
-   */
-  renderTitle() {
-    return this.menuTitle ? (h("header", { class: "menu__header", part: "header" }, h("h1", { class: "menu__header__title", part: "title" }, this.menuTitle))) : null;
   }
-  // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { tabindex: "-1" }, h("div", { class: {
-        "outer-wrapper": true,
-      }, style: {
-        height: this._menuHeight,
-        transitionDuration: `${this._transitionDuration}ms`,
-      }, part: "outer-wrapper" }, h("div", { class: "inner-wrapper", ref: (el) => (this.innerWrapper = el), part: "inner-wrapper" }, this.renderTitle(), h("div", { class: "lists-wrapper", part: "lists-wrapper" }, h("slot", null))))));
+    return (h(Host, null, this.printTitle(), h("ul", { class: "menuList" }, h("slot", null))));
   }
   get el() { return this; }
-  static get watchers() { return {
-    "hidden": ["hiddenHandler"]
-  }; }
   static get style() { return menuCss; }
 }, [1, "gxg-menu", {
     "menuTitle": [1, "menu-title"],
-    "tabs": [516],
-    "hidden": [4],
-    "hideOnSelect": [4, "hide-on-select"],
-    "ellipsis": [4]
-  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "keyboardNavigation", "keyboardNavigationHandler"]]]);
+    "tabs": [516]
+  }, [[0, "menuItemActive", "menuItemActiveHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;