@genexus/genexus-ide-ui 0.0.62 → 0.0.64

package/dist/components/next-data-modeling-item.js

@@ -0,0 +1,466 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { K as KEY_CODES } from './reserverd-names.js';
+import { d as defineCustomElement$1 } from './accordion.js';
+
+const nextDataModelingItemCss = ":where(button){all:unset;display:inline-flex;cursor:pointer}*,::before,::after{box-sizing:border-box}.error-text,.name{color:inherit;font:inherit;margin:0;padding:0;outline:0}gx-edit:is(.gx-edit--auto-fill,.gx-edit--auto-fill:focus-within,.gx-edit--auto-fill:hover){background-color:var(--gx-edit-auto-fill-background-color)}:host{display:grid;--chevron-color:#ccc}:host(:hover) .button-primary,:host(:focus-within) .button-primary{display:grid}:host(:hover) .button-primary::before,:host(:focus-within) .button-primary::before{content:\"\"}:host(.gx-disabled){pointer-events:none}.add-new-field--level-0{display:grid;grid-template:\"name . . .\" min-content \"field-name type confirm cancel\" 1fr \"error-text . confirm cancel\" min-content \"sub-item sub-item confirm cancel\" min-content/1fr min-content 56px 32px;row-gap:8px}.add-new-field--level-0 ::slotted(ch-next-data-modeling){grid-area:sub-item}.add-new-field--level-1{display:grid;grid-template:\"name . . .\" min-content \"field-name type confirm cancel\" 1fr \"error-text . . .\" min-content/1fr min-content 56px 32px;row-gap:8px}.add-new-field--level-2{display:grid;grid-template:\"sub-field name . . .\" min-content \". field-name type confirm cancel\" 1fr \". error-text . . .\" min-content/min-content 1fr min-content 56px 32px;row-gap:4px}.add-new-field--no-actions{grid-template:\"sub-field name .\" min-content \". field-name type\" 1fr \". error-text .\" min-content/min-content 1fr min-content}.accordion:hover .edit-button,.accordion:hover .delete-button,.accordion:focus-within .edit-button,.accordion:focus-within .delete-button{display:grid}.sub-field{grid-area:sub-field}.field-name{grid-area:field-name;margin-inline-end:8px}.button-confirm{grid-area:confirm;margin-inline:16px 8px}.button-cancel{grid-area:cancel}.error-text{grid-area:error-text;display:flex;white-space:break-spaces}.header{display:grid;grid-template:\"sub-field name type edit delete\" 1fr/min-content max-content 1fr min-content max-content;align-items:center;width:100%;margin-inline-end:12px}.accordion::part(accordion__header){column-gap:24px}.edit-mode{grid-template:\"sub-field field-name type confirm cancel\" min-content \"sub-field error-text error-text confirm cancel\" min-content/min-content 1fr min-content 56px 32px}.name{grid-area:name}.name-entity{text-decoration:underline}.type{grid-area:type}.select-wrapper{--chevron:url('data:image/svg+xml,<svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.41 0L6 4.59L10.59 0L12 1.42L6 7.42L0 1.42L1.41 0Z\"/></svg>');grid-area:type;position:relative}.select-wrapper::after{content:\"\";display:flex;position:absolute;inset-inline-end:0;inset-block-start:calc(50% - 3.75px);width:12px;height:7.5px;margin-inline:8px 16px;-webkit-mask:var(--chevron) no-repeat;background-color:var(--chevron-color);pointer-events:none}.select{display:flex;height:100%;appearance:none;background-color:unset;cursor:pointer;outline:unset;transition-property:background-color, border-color, color;transition-duration:250ms}.button-new-entity{align-items:center;transition:color 250ms}.optimization{display:contents}.button-primary{display:none;align-self:center;height:20px;padding:2px}.button-primary::before{display:flex}.button-edit{grid-area:edit;width:21px}.button-edit::before{-webkit-mask:var(--edit-icon) no-repeat}.button-delete{grid-area:delete;width:18px;margin-inline-start:12px}.button-delete::before{-webkit-mask:var(--delete-icon) no-repeat}.delete-mode,.waiting-mode{grid-area:delete;display:grid;grid-template-columns:1fr 24px 24px;align-items:center;column-gap:8px;cursor:auto;animation:fade-in 250ms ease-in-out}.waiting-mode{grid-template-columns:24px 1fr}.waiting-mode__loading{order:-1;width:100%;fill:none;animation:rotate 1.5s linear 0.125s infinite}circle{stroke:currentColor;stroke-dasharray:1, 200;stroke-linecap:round;animation:indeterminate-loading 1.25s ease-in-out 0.125s infinite}@keyframes fade-in{0%{opacity:0}}@keyframes rotate{100%{transform:rotate(1turn)}}@keyframes indeterminate-loading{50%,60%{stroke-dasharray:20, 200;stroke-dashoffset:-8px}100%{stroke-dashoffset:-24px}}";
+
+const NAME = "name";
+const PART_PREFIX = "dm-item__";
+const CANCEL_CLASS = "button-cancel";
+const CONFIRM_CLASS = "button-confirm";
+const BUTTON_CONFIRM_PART = (disabledPart) => `${PART_PREFIX}button-action confirm${disabledPart}`;
+const BUTTON_CANCEL_PART = (disabledPart) => `${PART_PREFIX}button-action cancel${disabledPart}`;
+const SELECT_OPTION_PART = `${PART_PREFIX}select-option`;
+const NextDataModelingSubitem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.deleteField = createEvent(this, "deleteField", 7);
+    this.editField = createEvent(this, "editField", 7);
+    this.newEntity = createEvent(this, "newEntity", 7);
+    this.firstNewField = createEvent(this, "firstNewField", 7);
+    this.firstNewFieldErrors = createEvent(this, "firstNewFieldErrors", 7);
+    this.newField = createEvent(this, "newField", 7);
+    /**
+     * The metadata used for the different actions in the UI.
+     */
+    this.actions = (captions, disabledPart) => ({
+      add: [
+        {
+          // Confirm add
+          label: captions.confirm,
+          class: CONFIRM_CLASS,
+          part: BUTTON_CONFIRM_PART(disabledPart),
+          event: this.confirmAction("new")
+        },
+        {
+          // Cancel add
+          label: captions.cancel,
+          class: CANCEL_CLASS,
+          part: BUTTON_CANCEL_PART(disabledPart),
+          event: this.toggleShowNewField
+        }
+      ],
+      delete: [
+        {
+          // Confirm delete
+          label: captions.confirm,
+          class: undefined,
+          part: `${PART_PREFIX}button-delete-action confirm${disabledPart}`,
+          event: this.emitDelete
+        },
+        {
+          // Cancel delete
+          label: captions.cancel,
+          class: undefined,
+          part: `${PART_PREFIX}button-delete-action cancel${disabledPart}`,
+          event: this.toggleMode("delete")
+        }
+      ],
+      edit: [
+        {
+          // Confirm edit
+          label: captions.confirm,
+          class: CONFIRM_CLASS,
+          part: BUTTON_CONFIRM_PART(disabledPart),
+          event: this.confirmAction("edit")
+        },
+        {
+          // Cancel edit
+          label: captions.cancel,
+          class: CANCEL_CLASS,
+          part: BUTTON_CANCEL_PART(disabledPart),
+          event: this.toggleMode("edit")
+        }
+      ],
+      normal: [
+        {
+          // Edit action
+          label: captions.edit,
+          class: "button-primary button-edit",
+          part: `${PART_PREFIX}button-primary edit${disabledPart}`,
+          event: this.toggleMode("edit")
+        },
+        {
+          // Delete action
+          label: captions.delete,
+          class: "button-primary button-delete",
+          part: `${PART_PREFIX}button-primary delete${disabledPart}`,
+          event: this.toggleMode("delete")
+        }
+      ]
+    });
+    this.lastEditInfo = { name: "", type: "ATT" };
+    this.focusInputInNextRender = false;
+    this.expanded = false;
+    // Modes
+    this.errorType = "None";
+    this.waitingMode = "none";
+    /**
+     * This attribute lets you specify if the actions in the `mode === "add"` are
+     * visible.
+     */
+    this.actionsVisible = true;
+    /**
+     * The dataType of the field.
+     */
+    this.dataType = "";
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event.
+     */
+    this.disabled = false;
+    /**
+     * This property maps entities of the current dataModel with their
+     * corresponding ATTs.
+     */
+    this.entityNameToATTs = {};
+    /**
+     * This property specifies the defined field names of the entity parent.
+     */
+    this.fieldNames = [];
+    /**
+     * This property specifies at which collection level the field is located.
+     */
+    this.level = 1;
+    /**
+     * Determine the maximum amount of ATTs displayed per entity.
+     */
+    this.maxAtts = 3;
+    /**
+     * This attribute specifies the operating mode of the control
+     */
+    this.mode = "normal";
+    /**
+     * The name of the field.
+     */
+    this.name = "";
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    /**
+     * `true` to show the new field button when `mode === "add"`
+     */
+    this.showNewFieldBtn = true;
+    /**
+     * The type of the field.
+     */
+    this.type = "LEVEL";
+    /**
+     * Returns:
+     *   @example ```(Scorer, Goals)```
+     *   @example ```(Name, Age, Nationality (+3))```
+     */
+    this.makeAttsPrettier = (atts, maxAtts) => atts.length <= maxAtts
+      ? "(" + atts.join(", ") + ")"
+      : `(${atts.slice(0, maxAtts).join(", ")} (+${atts.length - maxAtts}))`;
+    this.emitDelete = (event) => {
+      // The subitem is the last one of the parent. Delete the parent instead
+      if (this.level !== 0 && this.fieldNames.length === 1) {
+        const parentItem = this.el.parentElement
+          .parentElement;
+        parentItem.delete(event);
+        this.mode = "normal";
+        return;
+      }
+      event.stopPropagation();
+      this.waitingMode = "deleting";
+      this.deleteField.emit();
+    };
+    this.toggleMode = (mode) => (event) => {
+      event.stopPropagation();
+      this.mode = this.mode === "normal" ? mode : "normal";
+      this.focusInputInNextRender = mode === "edit";
+    };
+    this.toggleShowNewField = (event) => {
+      event.stopPropagation();
+      this.errorType = "None";
+      const showNewFieldBtn = !this.showNewFieldBtn;
+      this.showNewFieldBtn = showNewFieldBtn;
+      this.focusInputInNextRender = !showNewFieldBtn;
+      if (!showNewFieldBtn && this.level === 0) {
+        const entityItem = this.el.firstElementChild
+          .firstElementChild;
+        entityItem.clearInput();
+      }
+    };
+    /**
+     * @todo TODO: Improve typing
+     * WA function to get the gx-edit's input value
+     * @param editElement An HTMLGxEditElement that is implemented in the web-controls-library
+     */
+    this.getGxEditInputValue = (editElement) => editElement.shadowRoot.firstElementChild.value;
+    this.handleKeyDown = (actionType) => (event) => {
+      if (event.code !== KEY_CODES.ENTER) {
+        return;
+      }
+      event.preventDefault();
+      this.confirmAction(actionType)(event);
+    };
+    this.checkChildErrors = (errors, event) => {
+      this.el.firstElementChild
+        .firstElementChild.checkErrors(errors, event);
+    };
+    this.validateErrorsWhenAddingEntity = (actionType, errors = "unknown", event) => {
+      // Validate child errors when adding a new entity
+      if (this.level === 0 && actionType === "new" && errors === "unknown") {
+        this.checkChildErrors(errors, event);
+      }
+      // Validate parent errors when adding a new field in the new entity
+      else if (!this.actionsVisible && errors === "unknown") {
+        this.firstNewFieldErrors.emit();
+      }
+    };
+    this.confirmAction = (actionType, errors = "unknown", itemInfo = null) => (event) => {
+      event.stopPropagation();
+      const trimmedInput = this.getGxEditInputValue(this.inputName).trim();
+      // Force re-render. Useful when the error type don't change but the
+      // displayed error text must change
+      this.errorType = "None";
+      if (trimmedInput === "") {
+        this.errorType = "Empty";
+        this.validateErrorsWhenAddingEntity(actionType, errors, event);
+        return;
+      }
+      // The field already exists
+      if (this.name !== trimmedInput &&
+        this.fieldNames.includes(trimmedInput)) {
+        this.errorType = "AlreadyDefined";
+        this.errorName = trimmedInput;
+        this.validateErrorsWhenAddingEntity(actionType, errors, event);
+        return;
+      }
+      // New field
+      if (actionType === "new") {
+        this.lastEditInfo = {
+          name: trimmedInput,
+          type: this.level === 0 ? "ATT" : this.inputType.value // Doesn't matter the type when level = 0
+        };
+        // Adding a entity
+        if (this.level === 0) {
+          // Must check child errors
+          if (errors === "unknown") {
+            this.checkChildErrors(errors, event);
+          }
+          // The child does not have errors, commit the new entity
+          else if (errors === "no") {
+            this.waitingMode = "adding";
+            this.expanded = true;
+            this.newEntity.emit({ name: trimmedInput, level: [itemInfo] });
+            this.toggleShowNewField(event);
+            this.el.firstElementChild
+              .firstElementChild.setAddingMode(); // TODO: Improve typing
+          }
+        }
+        // Normal case: Adding a field that is not the first field of the entity
+        else if (this.actionsVisible) {
+          this.waitingMode = "adding";
+          this.newField.emit(this.lastEditInfo);
+          this.toggleShowNewField(event);
+        }
+        // Adding a field that is the first field of the entity
+        else {
+          this.firstNewField.emit(this.lastEditInfo);
+        }
+        return;
+      }
+      // Edit field (level 0 fields don't have a type, because they are always entities)
+      if (this.name !== trimmedInput ||
+        (this.level !== 0 && this.type !== this.inputType.value)) {
+        this.waitingMode = "editing";
+        this.lastEditInfo = {
+          name: trimmedInput,
+          type: this.level === 0 ? "ATT" : this.inputType.value // Doesn't matter the type when level = 0
+        };
+        this.editField.emit(this.lastEditInfo);
+      }
+      this.toggleMode("edit")(event);
+    };
+    this.loading = () => (h("svg", { class: "waiting-mode__loading", height: "28", viewBox: "6 6 12 12" }, h("circle", { cx: "12", cy: "12", r: "4", "stroke-width": "1.125" })));
+    this.errorText = (errorTexts) => (h("p", { class: "error-text", part: `${PART_PREFIX}error-text` }, this.errorType === "Empty"
+      ? errorTexts.Empty
+      : [
+        this.level === 0
+          ? errorTexts.AlreadyDefinedEntity1
+          : errorTexts.AlreadyDefined1,
+        h("span", { part: `${PART_PREFIX}error-text-name` }, this.errorName),
+        errorTexts.AlreadyDefined2
+      ]));
+    this.readonlyContent = (captions, name, type) => [
+      // Readonly
+      h("h1", { id: NAME, class: {
+          name: true,
+          "name-entity": type === "ENTITY"
+        }, part: `${PART_PREFIX}name` }, name),
+      this.level !== 0 && type !== "ATT" && (h("span", { class: "type", part: type === "LEVEL" ? `${PART_PREFIX}collection` : `${PART_PREFIX}entity` }, type === "LEVEL"
+        ? captions.collection
+        : this.makeAttsPrettier(this.entityNameToATTs[this.dataType] || [], this.maxAtts)))
+    ];
+    this.editableContent = (actionType, captions, disabledPart, errorPart) => [
+      // Editable
+      h("gx-edit", { class: "field-name", part: `${PART_PREFIX}input${errorPart}${disabledPart}`, disabled: this.disabled, type: "text", value: this.name, ref: el => (this.inputName = el), onKeydown: this.handleKeyDown(actionType) }),
+      this.level !== 0 && (h("div", { class: "select-wrapper" }, h("select", { class: "select", part: `${PART_PREFIX}input${disabledPart} select`, disabled: this.disabled, ref: el => (this.inputType = el) }, h("option", { part: SELECT_OPTION_PART, value: "ATT", selected: this.type === "ATT" }, captions.ATT), h("option", { part: SELECT_OPTION_PART, value: "ENTITY", selected: this.type === "ENTITY" }, captions.ENTITY), h("option", { part: SELECT_OPTION_PART, value: "LEVEL", selected: this.type === "LEVEL" }, captions.LEVEL)))),
+      this.errorType !== "None" && this.errorText(this.errorTexts)
+    ];
+    this.newFieldMode = (captions, errorPart, disabledPart, actions) => this.showNewFieldBtn ? (h("button", { class: "button-new-entity", part: `${PART_PREFIX}button-new-entity${disabledPart}`, disabled: this.disabled, type: "button", onClick: this.toggleShowNewField }, this.level === 0 ? captions.addNewEntity : captions.addNewField)) : (h("div", { slot: this.level === 0 ? "header" : undefined, class: {
+        [`add-new-field--level-${this.level}`]: true,
+        "add-new-field--no-actions": !this.actionsVisible
+      }, part: `${PART_PREFIX}header-content`, tabindex: this.level !== 0 && this.actionsVisible ? "0" : undefined }, this.level === 2 && (h("div", { "aria-hidden": "true", class: "sub-field", part: `${PART_PREFIX}sub-field` })), h("h1", { class: "name", part: `${PART_PREFIX}name` }, this.level === 0 ? captions.newEntity : captions.newField), this.editableContent("new", captions, disabledPart, errorPart), this.level === 0 && h("slot", null), this.actionsVisible && [
+      h("button", { "aria-label": actions[0].label, class: actions[0].class, part: actions[0].part, disabled: this.disabled, type: "button", onClick: actions[0].event }),
+      h("button", { "aria-label": actions[1].label, class: actions[1].class, part: actions[1].part, disabled: this.disabled, type: "button", onClick: actions[1].event })
+    ]));
+    this.normalMode = (captions, errorPart, disabledPart, waitingModePart, actions, showWaitingModeTexts) => [
+      h("div", { slot: this.level === 0 ? "header" : undefined, class: {
+          header: true,
+          "edit-mode": this.mode === "edit"
+        }, part: `${PART_PREFIX}header-content`, tabindex: this.level !== 0 ? "0" : undefined }, this.level === 2 && (h("div", { "aria-hidden": "true", class: "sub-field", part: `${PART_PREFIX}sub-field` })), this.mode === "edit"
+        ? this.editableContent("edit", captions, disabledPart, errorPart)
+        : this.readonlyContent(captions, showWaitingModeTexts ? this.lastEditInfo.name : this.name, showWaitingModeTexts ? this.lastEditInfo.type : this.type), !this.readonly && this.actionsVisible && (h("div", { class: {
+          "delete-mode": this.mode === "delete",
+          optimization: this.mode !== "delete",
+          "waiting-mode": this.waitingMode !== "none"
+        }, part: `${PART_PREFIX}delete-mode${waitingModePart}` }, this.waitingMode === "none"
+        ? [
+          this.mode === "delete" && captions.deleteMode,
+          h("button", { "aria-label": actions[0].label, class: actions[0].class, part: actions[0].part, disabled: this.disabled, type: "button", onClick: actions[0].event }),
+          h("button", { "aria-label": actions[1].label, class: actions[1].class, part: actions[1].part, disabled: this.disabled, type: "button", onClick: actions[1].event })
+        ]
+        : [captions[this.waitingMode], this.loading()]))),
+      this.type === "LEVEL" &&
+        (this.level === 0 ? (h("div", { slot: "content", part: `${PART_PREFIX}content` }, h("slot", null))) : (h("slot", null)))
+    ];
+  }
+  handleExpandedChange(event) {
+    event.stopPropagation();
+  }
+  handleFirstNewField(event) {
+    if (this.level !== 0) {
+      return;
+    }
+    this.confirmAction("new", "no", event.detail)(event);
+  }
+  handleFirstNewFieldErrors(event) {
+    this.confirmAction("new", "yes")(event);
+  }
+  /**
+   * Set the adding mode for the first field of the entity.
+   */
+  async setAddingMode() {
+    this.clearInput();
+    this.waitingMode = "adding";
+  }
+  /**
+   * Remove the value of the input when mode === "add" | "edit"
+   */
+  async clearInput() {
+    if (this.inputName) {
+      const inputRef = this.inputName.shadowRoot
+        .firstElementChild; // TODO: Improve typing
+      inputRef.value = "";
+    }
+    this.errorType = "None";
+  }
+  /**
+   * Check errors in the item when `level !== 0`
+   */
+  async checkErrors(errors, event) {
+    this.confirmAction("new", errors)(event);
+  }
+  /**
+   * Deletes the field.
+   */
+  async delete(event) {
+    this.emitDelete(event);
+  }
+  /**
+   * Hides the waiting mode to continue editing the field.
+   */
+  async hideWaitingMode() {
+    if (this.mode === "add" && this.level === 0) {
+      const entityItem = this.el.firstElementChild
+        .firstElementChild;
+      entityItem.hideWaitingMode();
+    }
+    // The add mode should not be changed
+    else if (this.mode !== "add") {
+      this.mode = "normal";
+    }
+    this.waitingMode = "none";
+  }
+  componentDidUpdate() {
+    // Focus the edit input when the render method has finished
+    if (this.focusInputInNextRender && this.inputName) {
+      this.focusInputInNextRender = false;
+      // Wait until the gx-edit control has render
+      requestAnimationFrame(() => {
+        this.inputName.click(); // The click method focuses the inner input of the gx-edit
+      });
+    }
+  }
+  render() {
+    // Parts
+    const disabledPart = this.disabled ? " disabled" : "";
+    const waitingModePart = this.waitingMode === "none" ? "" : ` ${PART_PREFIX}waiting-mode`;
+    const errorPart = this.errorType !== "None" ? " error" : "";
+    const captions = this.captions;
+    const actions = this.actions(captions, disabledPart)[this.mode];
+    const showWaitingModeTexts = this.waitingMode === "editing" || this.waitingMode === "adding";
+    return (h(Host, { role: "listitem", "aria-labelledby": NAME, class: {
+        "gx-disabled": this.disabled
+      } }, 
+    // Add new field layout (last cell of the collection/entity)
+    this.mode === "add" && this.waitingMode !== "adding" ? (this.newFieldMode(captions, errorPart, disabledPart, actions)) : this.level === 0 ? ( // Normal mode. Level === 0
+    h("ch-accordion", { class: "accordion", part: `${PART_PREFIX}accordion`, accessibleName: this.name, expanded: this.expanded, exportparts: `accordion__chevron:${PART_PREFIX}chevron,accordion__expandable:${PART_PREFIX}expandable,accordion__header:${PART_PREFIX}header` }, this.normalMode(captions, errorPart, disabledPart, waitingModePart, actions, showWaitingModeTexts))) : (
+    // Normal mode. Level !== 0
+    this.normalMode(captions, errorPart, disabledPart, waitingModePart, actions, showWaitingModeTexts))));
+  }
+  get el() { return this; }
+  static get style() { return nextDataModelingItemCss; }
+}, [1, "ch-next-data-modeling-item", {
+    "actionsVisible": [4, "actions-visible"],
+    "captions": [16],
+    "dataType": [1, "data-type"],
+    "disabled": [4],
+    "entityNameToATTs": [16],
+    "errorTexts": [16],
+    "fieldNames": [16],
+    "level": [2],
+    "maxAtts": [2, "max-atts"],
+    "mode": [1025],
+    "name": [1],
+    "readonly": [4],
+    "showNewFieldBtn": [1028, "show-new-field-btn"],
+    "type": [1],
+    "expanded": [32],
+    "errorType": [32],
+    "waitingMode": [32],
+    "setAddingMode": [64],
+    "clearInput": [64],
+    "checkErrors": [64],
+    "delete": [64],
+    "hideWaitingMode": [64]
+  }, [[0, "expandedChange", "handleExpandedChange"], [0, "firstNewField", "handleFirstNewField"], [0, "firstNewFieldErrors", "handleFirstNewFieldErrors"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-next-data-modeling-item", "ch-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-next-data-modeling-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NextDataModelingSubitem);
+      }
+      break;
+    case "ch-accordion":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { NextDataModelingSubitem as N, defineCustomElement as d };

package/dist/{esm/ch-next-data-modeling.entry.js → components/next-data-modeling.js}

@@ -1,15 +1,29 @@
-import { r as registerInstance, h, H as Host } from './index-0da01575.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const nextDataModelingCss = "ch-next-data-modeling{--delete-icon:url('data:image/svg+xml,<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.87729 4.55154H12.1585V14.3936C12.1613 14.8186 11.9944 15.2273 11.6949 15.5288C11.3953 15.8304 10.9878 16 10.5627 16H3.47304C3.04797 16 2.64046 15.8304 2.34089 15.5288C2.04133 15.2273 1.87447 14.8186 1.87729 14.3936V4.55154ZM10.5734 1.42436V1.25301C10.5676 0.559264 10.0035 0 9.30972 0H4.72605C4.03228 0 3.46821 0.559264 3.46233 1.25301V1.42436H0.078125V3.03079H14.0005V1.42436H10.5734Z\" fill=\"%23000\"/></svg>');--edit-icon:url('data:image/svg+xml,<svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4291 5.4137L10.8838 1.73151L12.0517 0.50411C12.3715 0.168037 12.7644 0 13.2304 0C13.6964 0 14.089 0.168037 14.4082 0.50411L15.5761 1.73151C15.8958 2.06758 16.0627 2.47321 16.0766 2.94838C16.0905 3.42356 15.9376 3.82889 15.6178 4.16438L14.4291 5.4137ZM13.2195 6.70685L4.37728 16H0.832031V12.274L9.67429 2.98082L13.2195 6.70685Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;flex:1;height:100%}";
 
-const NextDataModeling = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const NextDataModeling = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
   }
   render() {
     return (h(Host, { role: "list" }, h("slot", null)));
   }
-};
-NextDataModeling.style = nextDataModelingCss;
+  static get style() { return nextDataModelingCss; }
+}, [4, "ch-next-data-modeling"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-next-data-modeling"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-next-data-modeling":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NextDataModeling);
+      }
+      break;
+  } });
+}
 
-export { NextDataModeling as ch_next_data_modeling };
+export { NextDataModeling as N, defineCustomElement as d };

package/dist/components/store.js

@@ -186,6 +186,7 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const { state } = createStore({
     large: document.documentElement.classList.contains("gxg-large"),
+    mercury: document.documentElement.classList.contains("mercury"),
     rtl: document.documentElement.getAttribute("dir") === "rtl",
 });
 

package/dist/components/tab-bar.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
 import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './button.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const tabBarCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%}:host .nav--border{border-bottom:1px solid var(--gxg-border-color--regular)}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0;font-family:var(--font-family-primary);background-color:var(--color-background)}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host([scrollable]) .nav{width:100%;overflow-y:auto;}:host([scrollable]) .nav::-webkit-scrollbar{height:var(--gxg-scrollbar-width)}:host([scrollable]) .nav::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background)}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
+const tabBarCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%}:host .nav--border{border-bottom:1px solid var(--gxg-border-color--regular)}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0;font-family:var(--font-family-primary);background-color:var(--color-background)}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host([scrollable]) .nav{width:100%;overflow-y:auto;}:host([scrollable]) .nav::-webkit-scrollbar{height:var(--gxg-scrollbar-width)}:host([scrollable]) .nav::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background)}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}:host(.mercury) .tab-bar{background:transparent}:host(.mercury) .nav--border{border-bottom-color:var(--gray-13)}";
 
 const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -236,6 +237,7 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         rtl: this.rtl,
         "gxg-tab-bar": true,
         "gxg-tab-bar--hidden": this.hidden,
+        mercury: state.mercury,
       }, exportParts: this.exportparts ? this.exportparts : null }, h("nav", { class: {
         nav: true,
         "nav--border": this.displayBorder,

package/dist/components/tab-button.js

@@ -4,7 +4,7 @@ import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const tabButtonCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;align-self:center !important;line-height:0}:host .tab-button{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);text-transform:uppercase;color:var(--color-on-background);letter-spacing:var(--letter-spacing-regular);padding-top:0;padding-right:var(--spacing-comp-05);padding-bottom:0;padding-left:var(--spacing-comp-05);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;border:0;width:100%;min-height:var(--spacing-comp-06);position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;transition:box-shadow 0.2s ease-in-out;background:transparent;transition-property:box-shadow;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host .tab-button:after{content:\"\";width:100%;height:var(--spacing-comp-01);left:0;bottom:0;position:absolute;background-color:transparent;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:hover{cursor:pointer}:host .tab-button:hover:focus{outline-color:var(--color-primary-hover)}:host .tab-button:hover:after{background-color:var(--color-primary-hover)}:host .tab-button:active:after{background-color:var(--color-primary-active)}:host .tab-button[disabled]{color:var(--color-primary-disabled);pointer-events:none}:host .tab-button[disabled]:after{background-color:var(--gxg-border-color--disabled)}:host .tab-button--selected:after{background-color:var(--color-primary-active)}:host .tab-button--text-icon gxg-icon{margin-right:var(--spacing-comp-02)}:host .tab-button--hidden{display:none}:host .tab-button__text{display:inline-block}:host([slot=tab-menu]) .tab-button{padding-left:0;padding-right:0}:host(.menu-button){width:100%;box-sizing:border-box;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.menu-button) .tab-button{padding:0 var(--spacing-comp-02);min-height:calc(var(--spacing-comp-06) * 0.85);justify-content:flex-start}:host(.menu-button) .tab-button:after{display:none}:host(.menu-button) .tab-button__text{font-size:var(--font-size-md)}:host(.menu-button) gxg-icon{transform:scale(0.85)}:host(.menu-button:hover){background:var(--color-secondary)}:host(.large) .tab-button{font-size:var(--font-size-lg)}";
+const tabButtonCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;align-self:center !important;line-height:0}:host .tab-button{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);text-transform:uppercase;color:var(--color-on-background);letter-spacing:var(--letter-spacing-regular);padding-top:0;padding-right:var(--spacing-comp-05);padding-bottom:0;padding-left:var(--spacing-comp-05);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;border:0;width:100%;min-height:var(--spacing-comp-06);position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;transition:box-shadow 0.2s ease-in-out;background:transparent;transition-property:box-shadow;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host .tab-button:after{content:\"\";width:100%;height:var(--spacing-comp-01);left:0;bottom:0;position:absolute;background-color:transparent;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:hover{cursor:pointer}:host .tab-button:hover:focus{outline-color:var(--color-primary-hover)}:host .tab-button:hover:after{background-color:var(--color-primary-hover)}:host .tab-button:active:after{background-color:var(--color-primary-active)}:host .tab-button[disabled]{color:var(--color-primary-disabled);pointer-events:none}:host .tab-button[disabled]:after{background-color:var(--gxg-border-color--disabled)}:host .tab-button--selected:after{background-color:var(--color-primary-active)}:host .tab-button--text-icon gxg-icon{margin-right:var(--spacing-comp-02)}:host .tab-button--hidden{display:none}:host .tab-button__text{display:inline-block}:host([slot=tab-menu]) .tab-button{padding-left:0;padding-right:0}:host(.menu-button){width:100%;box-sizing:border-box;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.menu-button) .tab-button{padding:0 var(--spacing-comp-02);min-height:calc(var(--spacing-comp-06) * 0.85);justify-content:flex-start}:host(.menu-button) .tab-button:after{display:none}:host(.menu-button) .tab-button__text{font-size:var(--font-size-md)}:host(.menu-button) gxg-icon{transform:scale(0.85)}:host(.menu-button:hover){background:var(--color-secondary)}:host(.large) .tab-button{font-size:var(--font-size-lg)}:host(.mercury) .tab-button{padding:var(--spacing-comp-01) var(--spacing-comp-03);height:30px;min-height:0;}:host(.mercury) .tab-button:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:0;outline-width:var(--border-width-sm)}:host(.mercury) .tab-button:hover:not(.tab-button--selected){--color-on-background:var(--gray-07)}:host(.mercury) .tab-button:hover:not(.tab-button--selected) .tab-button__text{color:var(--gray-07)}:host(.mercury) .tab-button:hover:not(.tab-button--selected):after{background-color:transparent}:host(.mercury) .tab-button--selected{pointer-events:none}:host(.mercury) .tab-button--selected:after{background-color:var(--color-primary-enabled)}:host(.mercury) .tab-button:after{height:var(--border-width-sm)}:host(.mercury) .tab-button__text{color:var(--gray-05);font-size:var(--mc-font-size-xs);font-weight:var(--font-weight-semibold);text-transform:capitalize}";
 
 const GxgTabButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -106,6 +106,7 @@ const GxgTabButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     return (h(Host, { class: {
         large: state.large,
+        mercury: state.mercury,
       }, exportParts: this.exportparts ? this.exportparts : null }, h("li", { class: "tab-item" }, h("button", { disabled: this.disabled, class: {
         "tab-button": true,
         "tab-button--hidden": this.hidden,