@genexus/genexus-ide-ui 0.0.9

package/dist/components/tab.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+
+const tabCss = ":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{height:100%;display:block}:host .container{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;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}:host(.large) .container{font-size:var(--font-size-lg)}";
+
+const GxgTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The presence of this attribute removes the tab .container padding
+     */
+    this.noPadding = false;
+    /**
+     * The selected tab
+     */
+    this.isSelected = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        open: this.isSelected,
+        "not-selected": !this.isSelected,
+        "no-padding": this.noPadding,
+        large: state.large,
+      } }, h("div", { class: "container" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return tabCss; }
+}, [1, "gxg-tab", {
+    "tab": [1],
+    "noPadding": [4, "no-padding"],
+    "isSelected": [516, "is-selected"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTab);
+      }
+      break;
+  } });
+}
+
+export { GxgTab as G, defineCustomElement as d };

package/dist/components/tabs.js

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tabsCss = ":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;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between}.tabs-container{height:calc(100% - 32px);overflow-y:auto}.tabs-container::-webkit-scrollbar{width:6px;height:6px}.tabs-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.tabs-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.tabs-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.tabs-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host([position=left]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left]) .tabs-container{height:100%;width:calc(100% - 32px);margin-left:32px}:host([position=right]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10;left:calc(100% - 32px)}:host([position=right]) .tabs-container{height:100%;width:calc(100% - 32px)}";
+
+const GxgTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.position = "top";
+    this.height = "100%";
+    this.maxHeight = "100%";
+    this.minWidth = "200px";
+    /**
+     * The presence of this attribute removes each tab .container padding
+     */
+    this.noPadding = false;
+    this.activeTab = "";
+  }
+  tabActivatedHandler(event) {
+    this.updateActiveChildren(event.target.tab, "gxg-tab-button");
+    this.updateActiveChildren(event.target.tab, "gxg-tab");
+  }
+  componentWillLoad() {
+    this.configureTabs();
+  }
+  updateActiveChildren(activeTab, tagName) {
+    const children = Array.from(this.el.querySelectorAll(tagName));
+    for (const child of children) {
+      child.isSelected = activeTab === child.tab;
+    }
+  }
+  configureTabs() {
+    const tabs = this.el.querySelectorAll("gxg-tab");
+    if (this.noPadding) {
+      tabs.forEach((tab) => {
+        tab.noPadding = true;
+      });
+    }
+  }
+  render() {
+    return (h(Host, { style: {
+        height: this.height,
+        maxHeight: this.maxHeight,
+        minWidth: this.minWidth,
+      } }, h("div", { class: "main-container" }, this.position === "bottom"
+      ? [
+        h("div", { class: "tabs-container" }, h("slot", null)),
+        h("div", { class: "tab-bar-container" }, h("slot", { name: "tab-bar-container" })),
+      ]
+      : [
+        h("div", { class: "tab-bar-container" }, h("slot", { name: "tab-bar-container" })),
+        h("div", { class: "tabs-container" }, h("slot", null)),
+      ])));
+  }
+  get el() { return this; }
+  static get style() { return tabsCss; }
+}, [1, "gxg-tabs", {
+    "position": [1],
+    "height": [513],
+    "maxHeight": [1, "max-height"],
+    "minWidth": [1, "min-width"],
+    "noPadding": [4, "no-padding"],
+    "activeTab": [32]
+  }, [[0, "tabActivated", "tabActivatedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTabs);
+      }
+      break;
+  } });
+}
+
+export { GxgTabs as G, defineCustomElement as d };

package/dist/components/title.js

@@ -0,0 +1,60 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+
+const titleCss = "/*! 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 h1,:host h2,:host h3,:host h4,:host h5{margin:0}:host(.large) .gxg-title-01{font-size:var(--font-size-xl)}:host(.large) .gxg-title-02{font-size:var(--font-size-lg)}:host(.large) .gxg-title-03{font-size:var(--font-size-lg)}:host(.large) .gxg-title-04{font-size:var(--font-size-xl)}:host(.large) .gxg-title-05{font-size:var(--font-size-lg)}";
+
+const GxgTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Title type
+     */
+    this.type = "title-01";
+  }
+  titleType() {
+    let title;
+    switch (this.type) {
+      case "title-01":
+        title = h("h1", { class: "gxg-title-01" }, h("slot", null));
+        break;
+      case "title-02":
+        title = h("h2", { class: "gxg-title-02" }, h("slot", null));
+        break;
+      case "title-03":
+        title = h("h3", { class: "gxg-title-03" }, h("slot", null));
+        break;
+      case "title-04":
+        title = h("h4", { class: "gxg-title-04" }, h("slot", null));
+        break;
+      case "title-05":
+        title = h("h5", { class: "gxg-title-05" }, h("slot", null));
+        break;
+      default:
+        title = h("h1", { class: "gxg-title-01" }, h("slot", null));
+    }
+    return title;
+  }
+  render() {
+    return h(Host, { class: { large: state.large } }, this.titleType(), " ");
+  }
+  static get style() { return titleCss; }
+}, [1, "gxg-title", {
+    "type": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTitle);
+      }
+      break;
+  } });
+}
+
+export { GxgTitle as G, defineCustomElement as d };

package/dist/components/tooltip.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tooltipCss = "/*! 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 .tooltip{cursor:pointer;position:relative;display:inline-block;border-bottom:1px dotted black;text-decoration:none}:host .tooltip .tooltiptext{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-size:var(--font-size-xs);visibility:hidden;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;position:absolute;z-index:1;width:250px;text-align:center}:host .tooltip .tooltiptext__content{width:fit-content;background-color:var(--gray-07);padding:var(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-width-md);color:var(--color-on-primary);display:inline-block;text-align:left}:host .tooltip .tooltiptext:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute}:host .tooltip:hover .tooltiptext{visibility:visible;opacity:1}:host([position=top]) .tooltip .tooltiptext{bottom:20px;left:50%;transform:translateX(-50%)}:host([position=top]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%) rotate(180deg);bottom:-4px}:host([position=right]) .tooltip .tooltiptext{top:0;left:111%;text-align:left}:host([position=right]) .tooltip .tooltiptext:after{left:-7px;transform:rotate(-90deg);top:8px}:host([position=bottom]) .tooltip .tooltiptext{top:25px;left:50%;transform:translateX(-50%)}:host([position=bottom]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%);top:-4px}:host([position=left]) .tooltip .tooltiptext{text-align:right;top:0;right:105%}:host([position=left]) .tooltip .tooltiptext:after{right:-7px;transform:rotate(90deg);top:8px}:host([width-auto]) .tooltip .tooltiptext{width:auto;white-space:nowrap}:host([no-border]) .tooltip{border-bottom:none}";
+
+const GxgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     the tooltip position
+     */
+    this.position = "top";
+    /**
+     * This presence of this property removes the border under the text
+     */
+    this.noBorder = false;
+  }
+  render() {
+    return (h(Host, { role: "tooltip" }, h("span", { class: "tooltip" }, h("slot", null), h("div", { class: "tooltiptext" }, h("span", { class: "tooltiptext__content" }, this.label)))));
+  }
+  static get style() { return tooltipCss; }
+}, [1, "gxg-tooltip", {
+    "position": [513],
+    "label": [1],
+    "noBorder": [516, "no-border"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTooltip);
+      }
+      break;
+  } });
+}
+
+export { GxgTooltip as G, defineCustomElement as d };

package/dist/esm/_commonjsHelpers-e9b9b14e.js

@@ -0,0 +1,19 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/esm/ch-accordion.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4f0a5746.js';
+
+const accordionCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--chevron:url('data:image/svg+xml,<svg width=\"14\" height=\"8\" viewBox=\"0 0 14 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.645 0.5L7 4.83019L12.355 0.5L14 1.83962L7 7.5L0 1.83962L1.645 0.5Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-rows:min-content min-content;width:100%;height:100%;text-align:start}.header{display:grid;grid-template-columns:1fr min-content;grid-template-rows:1fr;text-align:start;cursor:pointer}.chevron{align-self:center;width:14px;height:8px;-webkit-mask:var(--chevron);background-color:#000;transition:transform 250ms}.chevron--expanded{transform:rotate(180deg)}.expandable{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 250ms}.expanded{visibility:visible;grid-template-rows:1fr}.expandable ::slotted(*){height:100%;overflow:hidden}";
+
+const EXPANDABLE = "expandable";
+const Accordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expandedChange = createEvent(this, "expandedChange", 7);
+    /**
+     * The description of the entity.
+     */
+    this.accessibleDescription = "";
+    /**
+     * The name of the entity.
+     */
+    this.accessibleName = "";
+    /**
+     * `true` if the accordion is expanded.
+     */
+    this.expanded = false;
+    this.toggleExpanded = () => {
+      const newExpandedValue = !this.expanded;
+      this.expanded = newExpandedValue;
+      this.expandedChange.emit(newExpandedValue);
+    };
+  }
+  render() {
+    return (h(Host, null, h("button", { "aria-controls": EXPANDABLE, "aria-expanded": this.expanded.toString(), "aria-label": this.accessibleName, "aria-description": this.accessibleDescription || undefined, class: "header", part: "accordion__header", type: "button", onClick: this.toggleExpanded }, h("slot", { name: "header" }), h("div", { "aria-hidden": "true", class: { chevron: true, "chevron--expanded": this.expanded }, part: "accordion__chevron" })), h("div", { id: EXPANDABLE, class: { expandable: true, expanded: this.expanded }, part: "accordion__expandable" }, h("slot", { name: "content" }))));
+  }
+};
+Accordion.style = accordionCss;
+
+export { Accordion as ch_accordion };

package/dist/esm/ch-drag-bar.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const dragBarCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}.container{display:flex;width:100%;height:100%}.bar{position:relative;width:4px;background-color:#323942;cursor:col-resize}.bar-item{position:absolute;inset-block-start:calc(50% - 35px);inset-inline-start:calc(2px - 10px);display:flex;align-items:center;justify-content:center;background-color:#2d333a;border-radius:10px;width:20px;height:70px;padding:7px 4px;touch-action:manipulation;user-select:none}.bar-item-src{display:block;width:100%;height:100%;pointer-events:none}.bar-item-src--rtl{transform:rotateY(180deg)}.start-component{display:flex;width:var(--ch-drag-bar__start-component-width);max-width:calc(100% - 10px - 2px)}.end-component{display:flex;flex:1}";
+
+const START_COMPONENT_MIN_WIDTH = 0; // 0%
+const START_COMPONENT_MAX_WIDTH = 100; // 100%
+const START_COMPONENT_WIDTH = "--ch-drag-bar__start-component-width";
+const DragBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.lastBarRelativePositionX = 0;
+    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
+    /**
+     * Determine the language direction.
+     */
+    this.isRTLDirection = false;
+    /**
+     * This attribute lets you specify the label for the drag bar.
+     * Important for accessibility.
+     */
+    this.barLabel = "";
+    /**
+     * Specifies the bar item src.
+     * If defined, it will set an image to replace the default bar item.
+     */
+    this.barItemSrc = "";
+    /**
+     * If `true` an item at the middle of the bar will be displayed to give more
+     * context about the resize action
+     */
+    this.showBarItem = true;
+    /**
+     * Specifies the initial width of the start component
+     */
+    this.startComponentInitialWidth = "50%";
+    this.keepValueInBetween = (value) => Math.max(START_COMPONENT_MIN_WIDTH, Math.min(value, START_COMPONENT_MAX_WIDTH));
+    this.handleBarDrag = (event) => {
+      event.preventDefault();
+      this.lastBarRelativePositionX = event.clientX;
+      if (!this.needForRAF) {
+        return;
+      }
+      this.needForRAF = false; // No need to call RAF up until next frame
+      requestAnimationFrame(() => {
+        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
+        this.lastBarRelativePositionX -=
+          this.mainContainerRef.getBoundingClientRect().left;
+        const containerWidth = this.mainContainerRef.scrollWidth;
+        let startComponentWidth = containerWidth !== 0
+          ? (this.lastBarRelativePositionX / containerWidth) * 100
+          : 0;
+        if (this.isRTLDirection) {
+          startComponentWidth = 100 - startComponentWidth;
+        }
+        this.startComponentRef.style.setProperty(START_COMPONENT_WIDTH, `${this.keepValueInBetween(startComponentWidth)}%`);
+      });
+    };
+  }
+  connectedCallback() {
+    this.rtlWatcher = new MutationObserver(mutations => {
+      this.isRTLDirection = mutations[0].target.dir === "rtl";
+    });
+    // Watch changes in the dir attribute of the html tag
+    this.rtlWatcher.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"],
+      childList: false,
+      subtree: false
+    });
+    // Initialize the value, since the observer won't do it
+    this.isRTLDirection = document.documentElement.dir === "rtl";
+  }
+  componentDidLoad() {
+    const removeMouseMoveHandler = () => {
+      this.mainContainerRef.removeEventListener("mousemove", this.handleBarDrag, {
+        capture: true
+      });
+    };
+    // Add event on mousedown
+    this.barRef.addEventListener("mousedown", (event) => {
+      // Necessary to prevent selecting the inner image of the bar item when
+      // the mouse is down
+      event.preventDefault();
+      this.mainContainerRef.addEventListener("mousemove", this.handleBarDrag, {
+        capture: true
+      });
+      // Remove mousemove and mouseup handlers when mouseup
+      this.mainContainerRef.addEventListener("mouseup", () => {
+        removeMouseMoveHandler();
+        this.mainContainerRef.removeEventListener("mouseup", removeMouseMoveHandler);
+      }, {
+        capture: true
+      });
+      this.mainContainerRef.addEventListener("mouseleave", () => {
+        removeMouseMoveHandler();
+        this.mainContainerRef.removeEventListener("mouseleave", removeMouseMoveHandler);
+      });
+    }, { capture: true });
+  }
+  disconnectedCallback() {
+    if (this.rtlWatcher) {
+      this.rtlWatcher.disconnect();
+      this.rtlWatcher = null;
+    }
+  }
+  render() {
+    return (h(Host, { class: this.cssClass || undefined, style: { [START_COMPONENT_WIDTH]: this.startComponentInitialWidth } }, h("div", { class: "container", ref: el => (this.mainContainerRef = el) }, h("div", { class: "start-component", part: "start-component", ref: el => (this.startComponentRef = el) }, h("slot", { name: "start-component" })), h("div", { "aria-label": this.barLabel, title: this.barLabel, class: "bar", part: "bar", ref: el => (this.barRef = el) }, this.showBarItem && (h("div", { class: "bar-item", part: "bar-item" }, this.barItemSrc ? (h("img", { "aria-hidden": "true", class: "bar-item-src", part: "bar-item-src", alt: "", src: this.barItemSrc })) : (h("svg", { "aria-hidden": "true", class: {
+        "bar-item-src": true,
+        "bar-item-src--rtl": this.isRTLDirection
+      }, part: "bar-item-src", viewBox: "0 0 12 57", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10.1899 4.59531H3.82598L6.3645 2.0568L4.95028 0.642585L0.000535564 5.59233L4.95028 10.5421L6.3645 9.12787L3.82598 6.58935H10.1899V4.59531Z", fill: "#969BA0" }), h("path", { d: "M0 37.1855V34.6141H2V37.1855H0ZM4 37.1855V34.6141H6V37.1855H4ZM8 37.1855V34.6141H10V37.1855H8ZM0 32.0427V29.4713H2V32.0427H0ZM4 32.0427V29.4713H6V32.0427H4ZM8 32.0427V29.4713H10V32.0427H8ZM0 26.8998V24.3284H2V26.8998H0ZM4 26.8998V24.3284H6V26.8998H4ZM8 26.8998V24.3284H10V26.8998H8ZM0 21.757V19.1855H2V21.757H0ZM4 21.757V19.1855H6V21.757H4ZM8 21.757V19.1855H10V21.757H8Z", transform: "translate(1)", fill: "#6E7277" }), h("path", { d: "M4.823 47.2443L6.23722 45.8301L11.187 50.7798L6.23722 55.7296L4.823 54.3154L7.36152 51.7769H0.997556V49.7828L7.36152 49.7828L4.823 47.2443Z", fill: "#969BA0" })))))), h("div", { class: "end-component", part: "end-component" }, h("slot", { name: "end-component" })))));
+  }
+  get element() { return getElement(this); }
+};
+DragBar.style = dragBarCss;
+
+export { DragBar as ch_drag_bar };

package/dist/esm/ch-dropdown-item-separator.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+const dropdownItemSeparatorCss = ":host{display:flex;height:1px;background-color:#99999980;margin-block:2px}";
+
+const ChDropDownItemSeparator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, { role: "separator" });
+  }
+};
+ChDropDownItemSeparator.style = dropdownItemSeparatorCss;
+
+export { ChDropDownItemSeparator as ch_dropdown_item_separator };

package/dist/esm/ch-dropdown-item.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}@media (prefers-color-scheme: light){.action:focus,.action:hover{background-color:#ccc}.action:active{background-color:#e9e9e9}}@media (prefers-color-scheme: dark){.action:focus,.action:hover{background-color:#3e3e40}.action:active{background-color:#575965}}:host{display:flex;width:100%;height:100%}.action{display:flex;align-items:center;column-gap:8px;width:100%;height:100%;cursor:pointer;padding-block:8px;padding-inline:16px;font-size:0.875em;text-align:start;transition-property:background-color, border-color, box-shadow, color, filter, opacity;transition-duration:250ms}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
+
+const ChDropDownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.actionClick = createEvent(this, "actionClick", 7);
+    this.focusChange = createEvent(this, "focusChange", 7);
+    this.dropDownItemContent = () => [
+      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "dropdown-item__left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
+      h("span", { class: "content", part: "dropdown-item__content" }, h("slot", null)),
+      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "dropdown-item__right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
+    ];
+    this.handleActionClick = () => {
+      this.actionClick.emit(this.element.id);
+    };
+    this.handleFocus = () => {
+      this.focusChange.emit();
+    };
+  }
+  /**
+   * Focuses the control's anchor or button.
+   */
+  async handleFocusElement() {
+    this.mainElement.focus();
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, this.href ? (h("a", { class: "action", part: "dropdown-item__target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent())) : (h("button", { class: "action", part: "dropdown-item__button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent()))));
+  }
+  get element() { return getElement(this); }
+};
+ChDropDownItem.style = dropdownItemCss;
+
+export { ChDropDownItem as ch_dropdown_item };