@genexus/genexus-ide-ui 0.0.9

package/dist/components/gxg-option.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const optionCss = "/*! 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}:host{--size:3}:host{display:flex;flex-direction:column}:host([full-width]){display:block;width:100% !important}:host([full-width]) .outer-wrapper{width:100%}:host .outer-wrapper{position:relative;width:100%}:host label{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;display:flex;align-items:center;cursor:default}:host textarea{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{}:host .custom-select{position:relative;font-family:var(--font-family-primary)}:host .custom-select select{display:none;}:host .select-selected{background-color:var(--color-on-primary);border-width:var(--border-width-sm);border-color:var(--gray-04);border-style:var(--border-style-regular)}:host .select-selected:focus{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host .select-selected[disabled]{pointer-events:none;background-color:var(--gray-01);color:var(--color-on-disabled)}:host .select-selected:after,:host .select-selected:before{position:absolute;content:\"\";right:6px;width:0;height:0;border:4px solid transparent;border-color:var(--gray-05) transparent transparent transparent}:host .select-selected:after{top:15px}:host .select-selected:before{top:3px;transform:rotate(180deg)}:host .select-selected:hover:after,:host .select-selected:hover:before{border-color:var(--gray-04) transparent transparent transparent}:host .select-items div,:host .select-selected{color:var(--color-on-background);padding:var(--spacing-comp-01);cursor:pointer;font-size:var(--font-size-md);line-height:1.4em}:host .select-items div{border-color:transparent transparent rgba(0, 0, 0, 0.1) transparent;border:1px solid transparent}:host .select-items{color:var(--color-on-background);position:absolute;background-color:var(--color-on-primary);top:100%;left:0;right:0;z-index:99;border-width:var(--border-width-sm);border-color:var(--gray-04);border-style:var(--border-style-regular);border-top:0;overflow-y:scroll;border-bottom-right-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);max-height:calc( var(--size) * 25px )}:host .select-hide{display:none}:host .select-items div:hover{background-color:var(--color-secondary-hover);color:var(--color-on-primary)}:host .select-items div.same-as-selected{background-color:var(--color-secondary-active);color:var(--color-on-primary)}:host{}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}";
+
+const GxgFormOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.optionIsSelected = createEvent(this, "optionIsSelected", 7);
+    /**
+     * The icon name (optional)
+     */
+    this.iconName = undefined;
+  }
+  watchHandler(newValue) {
+    if (newValue === true) {
+      this.optionIsSelected.emit(this.value);
+    }
+  }
+  render() {
+    return h(Host, { value: this.value, role: "option" });
+  }
+  static get watchers() { return {
+    "selected": ["watchHandler"]
+  }; }
+  static get style() { return optionCss; }
+}, [1, "gxg-option", {
+    "value": [1],
+    "selected": [4],
+    "iconName": [1, "icon-name"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgFormOption);
+      }
+      break;
+  } });
+}
+
+const GxgOption = GxgFormOption;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgOption, defineCustomElement };

package/dist/components/gxg-options-item.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const gxgOptionsItemCss = ":host{display:flex;padding:var(--spacing-comp-01);height:var(--optionHeight);box-sizing:border-box;background-color:var(--color-background);cursor:pointer;border:2px solid var(--color-background);align-items:center}:host(:focus){border:2px solid var(--color-primary-active);background-color:var(--gray-01);outline:none}:host(:hover){background-color:var(--gray-01)}:host(.options-item--disabled){color:var(--gray-03);pointer-events:none;background-color:var(--color-background)}:host .options-item__wrapper{min-width:0;width:100%}:host .options-item__p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0;height:100%}";
+
+const GxgOptionsItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.keyDown = createEvent(this, "keyDown", 7);
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    this.disabled = false;
+  }
+  keyDownHandler(e) {
+    const enter = e.code === "Enter";
+    if (enter) {
+      //simulate click
+      this.el.click();
+    }
+    else {
+      const escape = e.code === "Escape";
+      const dataId = e.target.getAttribute("data-id");
+      const code = e.code;
+      this.keyDown.emit({ direction: code, dataId: dataId, escape: escape });
+    }
+  }
+  clickHandler(e) {
+    e.stopPropagation();
+    const dataId = e.target.getAttribute("data-id");
+    const id = e.target.getAttribute("id");
+    if (!this.disabled) {
+      this.optionSelected.emit({ dataId: dataId, id: id });
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        "options-item": true,
+        "options-item--disabled": this.disabled,
+      }, tabindex: "0", onKeyDown: this.keyDownHandler.bind(this), onClick: this.clickHandler.bind(this) }, h("div", { class: "options-item__wrapper" }, h("p", { class: "options-item__p" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return gxgOptionsItemCss; }
+}, [1, "gxg-options-item", {
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-options-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-options-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgOptionsItem$1);
+      }
+      break;
+  } });
+}
+
+const GxgOptionsItem = GxgOptionsItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgOptionsItem, defineCustomElement };

package/dist/components/gxg-options.js

@@ -0,0 +1,193 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './icon2.js';
+
+const gxgOptionsCss = ":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}:host{display:block;font-family:var(--font-family-primary);color:var(--color-on-background);position:relative;line-height:0;}:host::-webkit-scrollbar{width:6px;height:6px}:host::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host .options__container{font-size:0}:host .options__items-container{display:none;flex-direction:column;width:100%;border:1px solid var(--gray-04);border-radius:var(--border-radius-sm);position:absolute;text-align:left;overflow:hidden;overflow-y:auto;font-size:var(--font-size-sm);line-height:14px;margin-top:var(--spacing-comp-01);}:host .options__items-container::-webkit-scrollbar{width:6px;height:6px}:host .options__items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .options__items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .options__items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .options__items-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host(.options--visible) .options__items-container{display:flex}:host(.options--right) .options__container{text-align:right}:host(.options--right) .options__items-container{right:0}:host(.large) .options__items-container{font-size:var(--font-size-lg);line-height:16px}";
+
+const GxgOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.maxWidth = "100%";
+    this.width = "100%";
+    this.zIndex = "10";
+    this.position = "left";
+    this.iconDirection = "vertical";
+    this.maxVisibleOptions = 6;
+    this.optionsVisible = false;
+    this.clickedOutsideContainer = this.clickedOutsideContainerFunc.bind(this);
+  }
+  componentWillLoad() {
+    this.assignDataIds();
+    if (state.large) {
+      this.el.style.setProperty("--optionHeight", "24px");
+    }
+    else {
+      this.el.style.setProperty("--optionHeight", "20px");
+    }
+  }
+  componentDidLoad() {
+    this.optionsItemsContainer.style.setProperty("max-height", `calc(var(--optionHeight) * ${this.maxVisibleOptions})`);
+  }
+  clickedOutsideContainerFunc(event) {
+    const x = event.x;
+    const y = event.y;
+    //Contextual menu coordinates
+    const optionsContainerArea = this.optionsItemsContainer.getBoundingClientRect();
+    if ((x > optionsContainerArea.left &&
+      x < optionsContainerArea.right &&
+      y > optionsContainerArea.top &&
+      y < optionsContainerArea.bottom) ||
+      (event.screenX === 0 &&
+        event.screenY === 0 &&
+        event.clientX === 0 &&
+        event.clientY === 0)) ;
+    else {
+      this.optionsVisible = false;
+      //Click happened outside the combo
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.clickedOutsideContainer, true);
+  }
+  showItemsHandler(optionsVisible) {
+    if (optionsVisible) {
+      document.addEventListener("click", this.clickedOutsideContainer, true);
+    }
+    else {
+      document.removeEventListener("click", this.clickedOutsideContainer, true);
+    }
+  }
+  assignDataIds() {
+    //this is for internal use
+    const options = this.el.querySelectorAll("*");
+    options.forEach((option, i) => {
+      option.setAttribute("data-id", i.toString());
+    });
+  }
+  toggleOptions(e) {
+    e.stopPropagation();
+    this.optionsVisible = !this.optionsVisible;
+  }
+  prevOption(dataId) {
+    const currentItem = this.el.querySelector("gxg-options-item[data-id='" + dataId + "']");
+    const prevOption = currentItem.previousElementSibling;
+    if (prevOption) {
+      prevOption.focus();
+    }
+    else {
+      this.optionsVisible = false;
+      this.optionsButton.focus();
+    }
+  }
+  nextOption(dataId) {
+    const currentItem = this.el.querySelector("gxg-options-item[data-id='" + dataId + "']");
+    const nextOption = currentItem.nextElementSibling;
+    if (nextOption) {
+      nextOption.focus();
+    }
+  }
+  keyDownHandler(event) {
+    const escape = event.detail["escape"];
+    const direction = event.detail["direction"];
+    const dataId = event.detail["dataId"];
+    if (escape) {
+      this.optionsVisible = false;
+      this.optionsButton.focus();
+    }
+    else if (direction === "ArrowUp") {
+      this.prevOption(dataId);
+    }
+    else if (direction === "ArrowDown") {
+      this.nextOption(dataId);
+    }
+  }
+  optionSelectedHandler() {
+    //An option was selected. Close options.
+    this.optionsVisible = false;
+  }
+  optionsButtonKeyDownHandler(e) {
+    const code = e.code;
+    if (code === "Escape") {
+      this.optionsVisible = false;
+    }
+    if (code === "ArrowDown") {
+      if (this.optionsVisible) {
+        const firstOption = this.el.querySelector("gxg-options-item");
+        if (firstOption) {
+          firstOption.focus();
+        }
+      }
+      else {
+        this.optionsVisible = true;
+      }
+    }
+  }
+  icon() {
+    return this.iconDirection === "horizontal"
+      ? "gemini-tools/show-more-horizontal"
+      : "gemini-tools/show-more-vertical";
+  }
+  render() {
+    return (h(Host, { class: {
+        options: true,
+        "options--visible": this.optionsVisible,
+        "options--left": this.position === "left",
+        "options--right": this.position === "right",
+        large: state.large,
+      } }, h("div", { class: "options__container" }, h("gxg-button", { icon: this.icon(), type: "tertiary", onClick: this.toggleOptions.bind(this), onKeyDown: this.optionsButtonKeyDownHandler.bind(this), ref: (el) => (this.optionsButton = el) }), h("div", { class: "options__items-container", style: {
+        width: this.width,
+        maxWidth: this.maxWidth,
+        zIndex: this.zIndex,
+      }, ref: (el) => (this.optionsItemsContainer = el) }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "optionsVisible": ["showItemsHandler"]
+  }; }
+  static get style() { return gxgOptionsCss; }
+}, [1, "gxg-options", {
+    "maxWidth": [1, "max-width"],
+    "width": [1],
+    "zIndex": [1, "z-index"],
+    "position": [1],
+    "iconDirection": [1, "icon-direction"],
+    "maxVisibleOptions": [2, "max-visible-options"],
+    "optionsVisible": [32]
+  }, [[0, "keyDown", "keyDownHandler"], [0, "optionSelected", "optionSelectedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-options", "ch-icon", "gxg-button", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-options":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgOptions$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgOptions = GxgOptions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgOptions, defineCustomElement };

package/dist/components/gxg-paginator.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+
+const gxgPaginatorCss = "gxg-paginator{display:flex;flex-direction:column;padding-top:var(--spacing-comp-01);padding-bottom:var(--spacing-comp-01);}gxg-paginator[alignment=start]{align-items:flex-start}gxg-paginator[alignment=center]{align-items:center}gxg-paginator[alignment=end]{align-items:flex-end}gxg-paginator[alignment=end]{align-items:flex-end}ch-paginator{display:inline-block;background-color:var(--color-background);gap:var(--spacing-comp-01);justify-content:center}ch-paginator-navigate,ch-paginator-pages::part(button){width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:transparent}ch-paginator-navigate:hover,ch-paginator-pages::part(button):hover{color:var(--color-primary-hover)}ch-paginator-pages::part(button){color:var(--gray-04)}ch-paginator-pages::part(active){color:var(--color-primary-hover);font-weight:var(--font-weight-semibold)}ch-paginator-navigate{display:inline-block;background-repeat:no-repeat;background-position:center center;background-size:cover}ch-paginator-navigate[type=first]:before,ch-paginator-navigate[type=previous]:before,ch-paginator-navigate[type=next]:before,ch-paginator-navigate[type=last]:before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;width:100%;height:100%;background-color:var(--gray-04)}ch-paginator-navigate[type=first]:hover:before,ch-paginator-navigate[type=previous]:hover:before,ch-paginator-navigate[type=next]:hover:before,ch-paginator-navigate[type=last]:hover:before{background-color:var(--color-primary-hover)}ch-paginator-navigate[type=first]:before{-webkit-mask-image:var(--navigateFirstUrl)}ch-paginator-navigate[type=previous]:before{-webkit-mask-image:var(--navigatePrevUrl)}ch-paginator-navigate[type=next]:before{-webkit-mask-image:var(--navigateNextUrl)}ch-paginator-navigate[type=last]:before{-webkit-mask-image:var(--navigateLastUrl)}ch-paginator-pages::part(pages){display:flex;gap:var(--spacing-comp-01)}ch-paginator-pages::part(button){border:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-primary)}ch-paginator-pages::part(button):focus-visible,ch-paginator-navigate:focus-visible{outline:2px solid var(--color-primary-active)}";
+
+const GxgPaginator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * The paginator alignment:
+     */
+    this.alignment = "center";
+  }
+  componentWillLoad() {
+    const iconsUrl = getAssetPath("./icon-assets/");
+    this.el.style.setProperty("--navigateFirstUrl", `url("${iconsUrl}navigation/arrow-left.svg")`);
+    this.el.style.setProperty("--navigatePrevUrl", `url("${iconsUrl}navigation/chevron-left.svg")`);
+    this.el.style.setProperty("--navigateLastUrl", `url("${iconsUrl}navigation/arrow-right.svg")`);
+    this.el.style.setProperty("--navigateNextUrl", `url("${iconsUrl}navigation/chevron-right.svg")`);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return gxgPaginatorCss; }
+}, [4, "gxg-paginator", {
+    "alignment": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-paginator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-paginator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgPaginator$1);
+      }
+      break;
+  } });
+}
+
+const GxgPaginator = GxgPaginator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgPaginator, defineCustomElement };

package/dist/components/gxg-pill.js

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon2.js';
+
+const pillCss = "/*! 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}:host{display:inline-flex;align-items:center;border-color:var(--gray-02);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:11px;padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03);opacity:1;height:var(--spacing-comp-04);box-sizing:border-box;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .title{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 .clear-button{margin-inline-start:10px;cursor:pointer;opacity:0.7}:host .clear-button:hover{opacity:1}:host gxg-icon{transform:scale(0.84)}:host gxg-icon.clear-button{transform:scale(0.65)}:host(.no-icon) gxg-icon.custom{width:0}:host(.has-icon){padding-inline-start:0}:host([type=static]),:host([type=static-with-action]){background-color:var(--gray-01);border-color:var(--gray-01);font-style:italic}:host([type=static-with-action]),:host([type=button-with-action]){padding-inline-end:0}:host([type=button]){padding-inline-end:var(--spacing-comp-02)}:host([type=button]:hover),:host([type=button-with-action]:hover){border-color:var(--gray-07);cursor:pointer}:host([type=button]:focus),:host([type=button-with-action]:focus){border-color:var(--gray-07)}:host([type=button]:active),:host([type=button-with-action]:active){border-color:var(--gray-07)}:host([type=button-with-action]){padding-inline-end:2px}:host([type=button-with-action]) .clear-button{cursor:pointer;opacity:0.5;margin-inline-start:8px}:host([type=button-with-action]) .clear-button:hover{opacity:0.75}:host(.hide){opacity:0}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .title{color:var(--gray-03)}:host([disabled]) gxg-icon{opacity:0.3}:host([disabled][type=button]),:host([disabled][type=button-with-action]){border-color:var(--gray-03)}:host([disabled]:focus){box-shadow:none}:host([height-auto]){height:auto}:host(.large){height:20px}:host(.large) .title{font-size:var(--font-size-lg)}:host(.large) gxg-icon.clear-button{transform:scale(0.85)}";
+
+const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pillRemoved = createEvent(this, "pillRemoved", 7);
+    this.parts = {
+      removeButton: "remove-button",
+    };
+    /**
+     * The presence of this attribute disables the pillgit a
+     */
+    this.disabled = false;
+    /**
+     * The icon
+     */
+    this.icon = undefined;
+    /**
+     * The presence of this attribute sets auto-height. Usefull when the text overflows.
+     */
+    this.heightAuto = false;
+    /**
+     * The type of pill
+     */
+    this.type = "static";
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+  }
+  componentWillLoad() {
+    this.attachExportParts();
+  }
+  removeButtonFunc() {
+    this.pillRemoved.emit(this.id);
+    this.el.classList.add("hide");
+    setTimeout(() => {
+      this.el.remove();
+    }, 250);
+  }
+  iconType() {
+    if (this.icon !== undefined) {
+      return this.icon;
+    }
+    else {
+      return "gemini-tools/empty";
+    }
+  }
+  iconColor() {
+    if (this.disabled) {
+      return "disabled";
+    }
+    else {
+      return "success";
+    }
+  }
+  render() {
+    return (h(Host, { tabindex: "0", class: {
+        "no-icon": this.icon === undefined,
+        "has-icon": this.icon !== undefined,
+        large: state.large,
+      }, exportParts: this.exportparts ? this.exportparts : null }, h("gxg-icon", { class: "custom", type: this.iconType(), size: "regular", color: this.iconColor() }), h("span", { class: "title" }, h("slot", null)), this.type === "button-with-action" ||
+      this.type === "static-with-action" ? (h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: "small", color: "onbackground", onClick: this.removeButtonFunc.bind(this), part: this.parts.removeButton })) : null));
+  }
+  get el() { return this; }
+  static get style() { return pillCss; }
+}, [1, "gxg-pill", {
+    "disabled": [4],
+    "icon": [1],
+    "heightAuto": [4, "height-auto"],
+    "id": [1],
+    "type": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-pill", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-pill":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgPill$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgPill = GxgPill$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgPill, defineCustomElement };

package/dist/components/gxg-progress-bar.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './gxg-label2.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const progressBarCss = "/*! 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}:host{width:100%;outline:none}:host .outer-wrapper{display:flex;flex-direction:column}:host .label{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;display:flex;align-items:center;cursor:default}:host .outer-bar{display:inline-flex;height:var(--spacing-comp-01);background-color:var(--color-secondary);border-radius:2px;overflow:hidden}:host .inner-bar{transition-property:width;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;background-color:var(--color-primary-active)}:host([full-width]){display:block;width:100%}:host([full-width]) .outer-bar{width:100%}";
+
+const GxgProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The state of the progress-bar, whether it is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * The progress-bar label
+     */
+    this.label = "Label";
+    /**
+     * The progress value (percentage)
+     */
+    this.value = 0;
+    /**
+     * The max. width
+     */
+    this.maxWidth = "100%";
+    /**
+     * The presence of this attribute removes the sound that plays when the progress-bar finishes
+     */
+    this.silent = false;
+  }
+  watchValue() {
+    if (this.value === 100 && !this.silent) {
+      const audio = new Audio(getAssetPath("./progress-bar-assets/done.mp3"));
+      setTimeout(function () {
+        audio.play();
+      }, 500);
+    }
+  }
+  render() {
+    return (h(Host, { style: { maxWidth: this.maxWidth }, role: "progressbar", "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { class: "outer-wrapper" }, h("gxg-label", { class: "label" }, this.label), h("span", { class: "outer-bar" }, h("span", { class: "inner-bar", style: { width: this.value + "%" } })))));
+  }
+  static get assetsDirs() { return ["progress-bar-assets"]; }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+  static get style() { return progressBarCss; }
+}, [1, "gxg-progress-bar", {
+    "disabled": [516],
+    "label": [1],
+    "value": [514],
+    "maxWidth": [1, "max-width"],
+    "silent": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-progress-bar", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgProgressBar$1);
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgProgressBar = GxgProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgProgressBar, defineCustomElement };