@genexus/genexus-ide-ui 0.0.12 → 0.0.14

package/dist/components/combo-box.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as formMessageLogic } from './form.js';
-import { K as KeyboardKeys, r as repositionScroll } from './repositionScroll.js';
+import { r as repositionScroll } from './reposition-scroll.js';
+import { K as KeyboardKeys } from './types.js';
 import { e as exportParts } from './export-parts.js';
 import { s as state } from './store.js';
 import { d as defineCustomElement$6 } from './icon.js';
@@ -10,6 +11,23 @@ import { d as defineCustomElement$3 } from './icon2.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
+function mutationObserverRemoved(target, ref) {
+    const observer = new MutationObserver((mutationsList, observer) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "childList") {
+                const removedNodesArray = Array.from(mutation.removedNodes);
+                for (const removedNode of removedNodesArray) {
+                    if (removedNode.nodeType === Node.ELEMENT_NODE) {
+                        ref.removedItem = removedNode;
+                    }
+                }
+            }
+        }
+    });
+    observer.observe(target, { childList: true });
+    return observer; // Return the observer instance if needed
+}
+
 const comboBoxCss = "/*! 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{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
 
 const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -89,6 +107,10 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      *
      */
     this.validationStatus = "indeterminate";
+    /**
+     * If true, it will position the cursor at the end when the input is focused.
+     */
+    this.cursorEnd = false;
     this.userTyped = false;
     this.formMessageLogic = formMessageLogic;
     this.inputTextValue = "";
@@ -107,6 +129,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const exportPartsResult = exportParts(part, this.parts);
       exportPartsResult.length && (this.exportparts = exportPartsResult);
     };
+    this.mutationRemoveObserver = () => {
+      this._mo = mutationObserverRemoved(this.el, this);
+    };
     /*********************************
     HANDLERS
     *********************************/
@@ -194,10 +219,10 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.myObserver.unobserve(document.body);
       document.removeEventListener("click", this.detectClickOutsideCombo, true);
       document.removeEventListener("scroll", this.detectMouseScroll, true);
+      this._mo.disconnect();
     };
     this.setup = () => {
       this.setIndexes();
-      this.onValueChanged(this.value);
       this.setInitialValue();
     };
     this.setIndexes = () => {
@@ -293,10 +318,30 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return value;
     };
     this.setInitialValue = () => {
-      if (this.strict && this.disableFilter && !this.value) {
-        const enabledItems = this.getEnabledItems();
-        if (enabledItems.length) {
-          this.value = enabledItems[0].value;
+      const firstItem = this.getEnabledItems()[0];
+      if (!this.value || this.removedItem !== undefined) {
+        if (firstItem) {
+          this.value = firstItem.value;
+          this.text = firstItem.innerText;
+        }
+        else {
+          if (this.strict) {
+            this.value = undefined;
+          }
+        }
+      }
+      else {
+        const item = this.getItemByValue(this.value);
+        if (item) {
+          this.text = item.innerText;
+        }
+        else {
+          if (this.strict) {
+            this.value = undefined;
+          }
+          else {
+            this.text = this.value.toString();
+          }
         }
       }
     };
@@ -360,6 +405,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   componentWillLoad() {
     this.setup();
     this.attachExportParts();
+    this.mutationRemoveObserver();
   }
   componentDidLoad() {
     this.resizeObserver();
@@ -390,6 +436,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return false;
   }
+  async selectInputText() {
+    this.inputText.selectInputText();
+  }
   /*********************************
   LISTEN
   *********************************/
@@ -397,8 +446,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = event.detail.value;
     this.inputText.focus();
   }
-  itemDidLoadHandler() {
-    this.setup();
+  itemDidLoadHandler(itemLoaded) {
+    this.setIndexes();
+    this.setInitialValue();
   }
   keyDownComboItemHandler(event) {
     event.stopPropagation();
@@ -465,6 +515,13 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   selectedItemHandler(newItem) {
     newItem && (newItem.selected = true);
   }
+  removedItemHandler(removedItem) {
+    const value = removedItem.value;
+    if (value === this.value) {
+      /*The removed item was the one selected on the combo. Re-evaluation of new value is needed*/
+      this.setup();
+    }
+  }
   setIcon(icon) {
     if (icon) {
       this.inputTextIcon = icon;
@@ -542,7 +599,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
@@ -556,7 +613,8 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disabled": ["disabledHandler"],
     "value": ["onValueChanged"],
     "listIsOpen": ["listIsOpenHandler"],
-    "selectedItem": ["selectedItemHandler"]
+    "selectedItem": ["selectedItemHandler"],
+    "removedItem": ["removedItemHandler"]
   }; }
   static get style() { return comboBoxCss; }
 }, [17, "gxg-combo-box", {
@@ -578,6 +636,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "required": [516],
     "validationStatus": [1025, "validation-status"],
     "validationMessage": [1, "validation-message"],
+    "cursorEnd": [4, "cursor-end"],
     "informationMessage": [1, "information-message"],
     "text": [32],
     "inputTextValue": [32],
@@ -591,10 +650,12 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "lastSetValueByUser": [32],
     "myObserver": [32],
     "selectedItem": [32],
+    "removedItem": [32],
     "open": [64],
     "close": [64],
     "getValueByIndex": [64],
-    "setValueByIndex": [64]
+    "setValueByIndex": [64],
+    "selectInputText": [64]
   }, [[0, "itemSelected", "itemSelectedHandler"], [0, "itemDidLoad", "itemDidLoadHandler"], [0, "keyDownComboItem", "keyDownComboItemHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/container.js

@@ -1,175 +1,99 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './title.js';
 
-const containerCss = ":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{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}:host(.gxg-container--padding-s){--gxg-container--padding:var(--spacing-comp-02)}:host(.gxg-container--padding-m){--gxg-container--padding:var(--spacing-comp-03)}:host(.gxg-container--padding-l){--gxg-container--padding:var(--spacing-comp-04)}:host(.gxg-container--display-border){border:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-top){border-top:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-end){border-inline-end:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-bottom){border-bottom:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-start){border-inline-start:1px solid var(--gxg-border-color--regular)}.heading{display:flex;width:100%;box-sizing:border-box;border-bottom:1px solid var(--gxg-border-color--regular)}.heading--justify-start{justify-content:start}.heading--justify-center{justify-content:center}.heading--justify-end{justify-content:end}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing)}.content--no-padding{padding:0}.content--no-gap{gap:0}.footer{display:flex;border-top:1px solid var(--gxg-border-color--regular);gap:var(--gxg-container-elements-spacing)}.footer--justify-start{justify-content:start}.footer--justify-center{justify-content:center}.footer--justify-end{justify-content:end}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
+const containerCss = ":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{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}:host([full-height]){height:100%}:host([full-height]) .container{height:100%;display:flex;flex-direction:column}:host([full-height]) .content{flex-grow:1}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing);overflow-x:auto;}.content::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.content .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}.content--no-padding{padding:0}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
 
-const GxgContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /*
-  INDEX:
-  1.OWN PROPERTIES
-  2.REFERENCE TO ELEMENTS
-  3.STATE() VARIABLES
-  4.PUBLIC PROPERTY API
-  5.EVENTS (EMMIT)
-  6.COMPONENT LIFECYCLE EVENTS
-  7.LISTENERS
-  8.PUBLIC METHODS API
-  9.LOCAL METHODS
-  10.RENDER() FUNCTION
-  
-  Code organization suggested by StencilJs:
-  https://stenciljs.com/docs/style-guide#code-organization
-  */
-    /** ******************************
-     *  1.OWN PROPERTIES
-     ********************************/
-    /*GENERAL*/
-    /**
-     * Makes this component content act as a fieldset
-     */
+    this.headingClasses = () => {
+      return {
+        "heading": true,
+        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
+        [`heading--justify-${this.headingJustify}`]: true,
+        ["heading--no-padding"]: this.noHeadingPadding
+      };
+    };
+    this.contentClasses = () => {
+      return {
+        "content": true,
+        "content--no-padding": this.noContentPadding,
+        "content--no-gap": this.noContentGap,
+        [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
+        [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
+      };
+    };
+    this.footer = () => {
+      return this.hasFooterSlot ? (h("footer", { class: {
+          "footer": true,
+          "footer--no-border": this.hasOnlyFooter || !this.hasSlottedContent,
+          [`footer--justify-${this.footerJustify}`]: true,
+          [`footer--justify-${this.footerJustify}`]: true,
+          ["footer--no-padding"]: this.noFooterPadding
+        } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
+    };
     this.fieldset = false;
-    /**
-     * Dsiplays a border all around the container
-     */
+    this.containerTitle = undefined;
     this.displayBorder = false;
-    /**
-     * Removes the component border on the top
-     */
     this.displayBorderTop = false;
-    /**
-     * Removes the component border on the end
-     */
     this.displayBorderEnd = false;
-    /**
-     * Removes the component border on the bottom
-     */
     this.displayBorderBottom = false;
-    /**
-     * Removes the component border on the start
-     */
     this.displayBorderStart = false;
-    /**
-     * The container general padding (applies to .heading, .content, and .footer)
-     */
     this.sectionsPadding = "m";
-    /*HEADING*/
-    /**
-     * Removes the border bottom from the heading
-     */
+    this.fullHeight = false;
+    this.titleAlignment = "center";
     this.noHeadingBorder = false;
-    /**
-     * Removes the padding from the heading
-     */
     this.noHeadingPadding = false;
-    /**
-     * The heading justification
-     */
     this.headingJustify = "center";
-    /*CONTENT*/
-    /**
-     * Removes the padding from the content
-     */
     this.noContentPadding = false;
-    /**
-     * Removes the gap from the content
-     */
     this.noContentGap = false;
-    /*FOOTER*/
-    /**
-     * Removes the padding from the footer
-     */
+    this.alignItems = undefined;
+    this.justifyContent = undefined;
     this.noFooterPadding = false;
-    /**
-     * The footer justification
-     */
     this.footerJustify = "end";
-    /**
-     * Removes the border top from the footer
-     */
     this.noBorderFooter = false;
-    /** *****************************
-     *  3.STATE() VARIABLES
-     ********************************/
-    /**
-     * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)
-     */
+    this.hasHeaderSlot = false;
     this.hasSlottedContent = false;
-    /**
-     * A boolean variable indicating if the component has or not any content for the 'footer' slot
-     */
     this.hasFooterSlot = false;
-    /**
-     * A boolean variable indicating that the container only has the heading section
-     */
     this.hasOnlyHeading = false;
-    /**
-     * A boolean variable indicating that the container only has the footer section
-     */
     this.hasOnlyFooter = false;
-    this.headingClasses = () => {
-      return {
-        heading: true,
-        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
-        [`heading--justify-${this.headingJustify}`]: true,
-        ["heading--no-padding"]: this.noHeadingPadding,
-      };
-    };
-    this.contentClasses = () => {
-      return {
-        content: true,
-        "content--no-padding": this.noContentPadding,
-        "content--no-gap": this.noContentGap,
-      };
-    };
-    this.footer = () => {
-      return this.hasFooterSlot ? (h("footer", { class: {
-          footer: true,
-          "footer--no-border": this.noHeadingBorder ||
-            this.hasOnlyFooter ||
-            !this.hasSlottedContent,
-          [`footer--justify-${this.footerJustify}`]: true,
-          [`footer--justify-${this.footerJustify}`]: true,
-          ["footer--no-padding"]: this.noFooterPadding,
-        } }, h("slot", { name: "footer" }))) : null;
-    };
   }
-  /** *****************************
-   4.PUBLIC PROPERTY API
-   ********************************/
-  /** *****************************
-   *  5.EVENTS (EMMIT)
-   ********************************/
-  /** *****************************
-   *  6.COMPONENT LIFECYCLE EVENTS
-   ********************************/
+  // 4.PUBLIC PROPERTY API /
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE EVENTS //
   componentWillLoad() {
     this.evaluateSlots();
+    this.evaluateFullHeight();
   }
-  /** *****************************
-   *  7.LISTENERS
-   ********************************/
-  /** *****************************
-   *  8.PUBLIC METHODS API
-   ********************************/
-  /** *****************************
-   *  9.LOCAL METHODS
-   ********************************/
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   evaluateSlots() {
-    //content
-    const slottedContent = this.el.querySelectorAll(":not([slot])");
+    // header
+    const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
+    if (headerSlot.length) {
+      this.hasHeaderSlot = true;
+    }
+    // content
+    const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
     if (slottedContent.length) {
       this.hasSlottedContent = true;
     }
-    //footer
-    const footerSlot = this.el.querySelectorAll('[slot="footer"]');
-    if (footerSlot.length) {
+    // footer
+    const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
+    const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
+    if (footerStartSlot.length || footerEndSlot.length) {
       this.hasFooterSlot = true;
     }
   }
+  evaluateFullHeight() {
+    if (this.fullHeight && this.fieldset) {
+      /* If full-height, fieldset has to be false*/
+      this.fieldset = false;
+    }
+  }
   evaluateSections() {
     if (!this.hasSlottedContent && !this.hasFooterSlot) {
       this.hasOnlyHeading = true;
@@ -178,39 +102,37 @@ const GxgContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.hasOnlyFooter = true;
     }
   }
-  /** *****************************
-   *  10.RENDER() FUNCTION
-   ********************************/
+  // 10.RENDER() FUNCTION //
   render() {
     this.evaluateSections();
     let result;
     if (this.fieldset) {
       result = [
-        h("fieldset", null, this.containerTitle ? (h("legend", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
-        this.footer(),
+        h("fieldset", null, this.containerTitle || this.hasHeaderSlot ? (h("legend", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
+        this.footer()
       ];
     }
     else {
       result = [
-        this.containerTitle ? (h("header", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null,
+        this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
         this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
-        this.footer(),
+        this.footer()
       ];
     }
-    return (h(Host, { class: {
-        "gxg-container": true,
-        [`gxg-container--padding-${this.sectionsPadding}`]: true,
-        "gxg-container--display-border": this.displayBorder,
-        "gxg-container--display-border-top": this.displayBorderTop,
-        "gxg-container--display-border-end": this.displayBorderEnd,
-        "gxg-container--display-border-bottom": this.displayBorderBottom,
-        "gxg-container--display-border-start": this.displayBorderStart,
-      } }, result));
+    return (h(Host, null, h("div", { class: {
+        "container": true,
+        [`container--padding-${this.sectionsPadding}`]: true,
+        "container--display-border": this.displayBorder,
+        "container--display-border-top": this.displayBorderTop,
+        "container--display-border-end": this.displayBorderEnd,
+        "container--display-border-bottom": this.displayBorderBottom,
+        "container--display-border-start": this.displayBorderStart
+      } }, result)));
   }
   get el() { return this; }
   static get style() { return containerCss; }
-}, [1, "gxg-container", {
-    "fieldset": [4],
+}, [1, "gx-ide-container", {
+    "fieldset": [1028],
     "containerTitle": [1, "container-title"],
     "displayBorder": [4, "display-border"],
     "displayBorderTop": [4, "display-border-top"],
@@ -218,14 +140,19 @@ const GxgContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "displayBorderBottom": [4, "display-border-bottom"],
     "displayBorderStart": [4, "display-border-start"],
     "sectionsPadding": [1, "sections-padding"],
+    "fullHeight": [516, "full-height"],
+    "titleAlignment": [1, "title-alignment"],
     "noHeadingBorder": [4, "no-heading-border"],
     "noHeadingPadding": [4, "no-heading-padding"],
     "headingJustify": [1, "heading-justify"],
     "noContentPadding": [4, "no-content-padding"],
     "noContentGap": [4, "no-content-gap"],
+    "alignItems": [1, "align-items"],
+    "justifyContent": [1, "justify-content"],
     "noFooterPadding": [4, "no-footer-padding"],
     "footerJustify": [1, "footer-justify"],
     "noBorderFooter": [4, "no-border-footer"],
+    "hasHeaderSlot": [32],
     "hasSlottedContent": [32],
     "hasFooterSlot": [32],
     "hasOnlyHeading": [32],
@@ -235,11 +162,11 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gxg-container", "gxg-title"];
+  const components = ["gx-ide-container", "gxg-title"];
   components.forEach(tagName => { switch (tagName) {
-    case "gxg-container":
+    case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, GxgContainer);
+        customElements.define(tagName, GxIdeContainer);
       }
       break;
     case "gxg-title":
@@ -250,4 +177,4 @@ function defineCustomElement() {
   } });
 }
 
-export { GxgContainer as G, defineCustomElement as d };
+export { GxIdeContainer as G, defineCustomElement as d };