@genexus/genexus-ide-ui 1.0.1 → 1.0.2

package/dist/collection/components/_helpers/ide-loader/ide-loader.js

@@ -1,60 +1,47 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _IdeLoader_timeoutReference, _IdeLoader_cancelProcess, _IdeLoader_renderCancelButton, _IdeLoader_renderDescription, _IdeLoader_renderTitle;
 import { Host, h } from "@stencil/core";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "utils/typography"
+];
 export class IdeLoader {
     constructor() {
-        // 6.COMPONENT LIFECYCLE EVENTS //
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.renderTitle = () => {
-            return this.loaderTitle ? (h("gxg-title", { class: "loader__title", type: "title-04", alignment: "center" }, this.loaderTitle)) : null;
-        };
-        this.renderDescription = () => {
-            return this.description ? (h("gxg-text", { class: "loader__description", type: "text-regular", textAlign: "center" }, this.description)) : null;
-        };
-        this.renderCancelButton = () => {
-            return this.cancelLabel ? (h("gxg-button", { class: {
-                    [`loader__cancel-button`]: true
-                }, type: "secondary-text-icon", onClick: this.cancelProcess }, this.cancelLabel)) : null;
-        };
-        this.cancelProcess = () => {
+        _IdeLoader_timeoutReference.set(this, void 0);
+        _IdeLoader_cancelProcess.set(this, () => {
             if (this.cancelCallback) {
                 this.cancelCallback();
             }
-            clearTimeout(this.timeoutReference);
+            clearTimeout(__classPrivateFieldGet(this, _IdeLoader_timeoutReference, "f"));
             this.show = false;
-        };
-        this.showWindow = false;
-        this.showWrapper = false;
-        this.loaderTitle = undefined;
-        this.description = undefined;
-        this.cancelLabel = undefined;
+        });
+        _IdeLoader_renderCancelButton.set(this, () => this.cancelLabel && (h("div", null, h("button", { class: "button-secondary", type: "button", onClick: __classPrivateFieldGet(this, _IdeLoader_cancelProcess, "f") }, this.cancelLabel))));
+        _IdeLoader_renderDescription.set(this, () => this.description && h("p", { class: "text-body-italic-s" }, this.description));
+        _IdeLoader_renderTitle.set(this, () => this.loaderTitle && h("p", { class: "text-body-regular-m" }, this.loaderTitle));
+        this.showWrapper = true;
+        this.abortTime = 5 * 60 * 1000;
         this.cancelCallback = undefined;
-        this.show = false;
-        this.abortTime = 300000;
+        this.cancelLabel = undefined;
+        this.description = undefined;
         this.displayBorder = false;
-        this.borderRadius = "0";
-        this.container = undefined;
-    }
-    showHandler(show) {
-        if (show) {
-            this.showWindow = true;
-            this.showWrapper = true;
-        }
-        else {
-            this.showWindow = false;
-            this.showWrapper = false;
-            this.loaderFinished.emit();
-        }
+        this.loaderTitle = undefined;
+        this.show = false;
     }
-    //  10.RENDER() FUNCTION //
     render() {
-        return (h(Host, null, h("ch-window", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false }, h("div", { class: {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), this.show && (h("div", { class: {
                 [`loader__wrapper`]: true,
                 "loader__wrapper--visible": this.showWrapper
-            }, style: { borderRadius: this.borderRadius }, part: "loader-wrapper" }, h("div", { class: "loader__spinner" }), h("div", { class: {
+            }, part: "loader-wrapper", popover: "" }, h("div", { class: "loader__spinner" }), h("div", { class: {
                 "loader__content-wrapper": true,
                 "loader__content-wrapper--hidden": !this.description && !this.loaderTitle && !this.cancelLabel
-            } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));
+            } }, __classPrivateFieldGet(this, _IdeLoader_renderTitle, "f").call(this), __classPrivateFieldGet(this, _IdeLoader_renderDescription, "f").call(this), __classPrivateFieldGet(this, _IdeLoader_renderCancelButton, "f").call(this))))));
     }
     static get is() { return "gx-ide-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -70,56 +57,23 @@ export class IdeLoader {
     }
     static get properties() {
         return {
-            "loaderTitle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The loader title (optional)"
-                },
-                "attribute": "loader-title",
-                "reflect": false
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The loader description (optional)"
-                },
-                "attribute": "description",
-                "reflect": false
-            },
-            "cancelLabel": {
-                "type": "string",
+            "abortTime": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The cancel button label (optional)"
+                    "text": "The time the loader will await before abort."
                 },
-                "attribute": "cancel-label",
-                "reflect": false
+                "attribute": "abort-time",
+                "reflect": false,
+                "defaultValue": "5 * 60 * 1000"
             },
             "cancelCallback": {
                 "type": "unknown",
@@ -142,41 +96,39 @@ export class IdeLoader {
                     "text": "The cancel callback"
                 }
             },
-            "show": {
-                "type": "boolean",
-                "mutable": true,
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It shows the loader"
+                    "text": "The cancel button label (optional)"
                 },
-                "attribute": "show",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "cancel-label",
+                "reflect": false
             },
-            "abortTime": {
-                "type": "number",
+            "description": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The time the loader will await before abort."
+                    "text": "The loader description (optional)"
                 },
-                "attribute": "abort-time",
-                "reflect": false,
-                "defaultValue": "300000"
+                "attribute": "description",
+                "reflect": false
             },
             "displayBorder": {
                 "type": "boolean",
@@ -196,7 +148,7 @@ export class IdeLoader {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "borderRadius": {
+            "loaderTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -208,37 +160,33 @@ export class IdeLoader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The border radius value that applies on the .loader__wrapper"
+                    "text": "The loader title (optional)"
                 },
-                "attribute": "border-radius",
-                "reflect": true,
-                "defaultValue": "\"0\""
+                "attribute": "loader-title",
+                "reflect": false
             },
-            "container": {
-                "type": "unknown",
-                "mutable": false,
+            "show": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The container element for the loader."
-                }
+                    "text": "It shows the loader"
+                },
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "showWindow": {},
             "showWrapper": {}
         };
     }
@@ -260,11 +208,6 @@ export class IdeLoader {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "show",
-                "methodName": "showHandler"
-            }];
-    }
 }
+_IdeLoader_timeoutReference = new WeakMap(), _IdeLoader_cancelProcess = new WeakMap(), _IdeLoader_renderCancelButton = new WeakMap(), _IdeLoader_renderDescription = new WeakMap(), _IdeLoader_renderTitle = new WeakMap();
 //# sourceMappingURL=ide-loader.js.map

package/dist/collection/components/_helpers/ide-loader/ide-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ide-loader.js","sourceRoot":"","sources":["../../../../src/components/_helpers/ide-loader/ide-loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-loader\",\n  styleUrl: \"ide-loader.scss\",\n  shadow: true\n})\nexport class IdeLoader {\n  // 1.OWN PROPERTIES //\n\n  private timeoutReference: ReturnType<typeof setTimeout>;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * shows the ch-window\n   */\n  @State() showWindow = false;\n\n  /**\n   * shows the '.loader-wrapper'\n   */\n  @State() showWrapper = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The loader title (optional)\n   */\n  @Prop() readonly loaderTitle: string;\n\n  /**\n   * The loader description (optional)\n   */\n  @Prop() readonly description: string;\n\n  /**\n   * The cancel button label (optional)\n   */\n  @Prop() readonly cancelLabel: string;\n\n  /**\n   * The cancel callback\n   */\n  @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n  /**\n   * It shows the loader\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * The time the loader will await before abort.\n   */\n  @Prop() readonly abortTime: number = 300000; // 5 minutes\n\n  /**\n   * Displays a border all around\n   */\n  @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n  /**\n   * The border radius value that applies on the .loader__wrapper\n   */\n  @Prop({ reflect: true }) readonly borderRadius: string = \"0\";\n\n  @Watch(\"show\")\n  showHandler(show: boolean): void {\n    if (show) {\n      this.showWindow = true;\n      this.showWrapper = true;\n    } else {\n      this.showWindow = false;\n      this.showWrapper = false;\n      this.loaderFinished.emit();\n    }\n  }\n\n  /**\n   * The container element for the loader.\n   */\n  @Prop() readonly container: HTMLElement;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted when \"show\" is false.\n   */\n  @Event() loaderFinished: EventEmitter<void>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private renderTitle = (): HTMLGxgTitleElement | null => {\n    return this.loaderTitle ? (\n      <gxg-title class=\"loader__title\" type=\"title-04\" alignment=\"center\">\n        {this.loaderTitle}\n      </gxg-title>\n    ) : null;\n  };\n\n  private renderDescription = (): HTMLGxgTextElement | null => {\n    return this.description ? (\n      <gxg-text\n        class=\"loader__description\"\n        type=\"text-regular\"\n        textAlign=\"center\"\n      >\n        {this.description}\n      </gxg-text>\n    ) : null;\n  };\n\n  private renderCancelButton = (): HTMLGxgButtonElement | null => {\n    return this.cancelLabel ? (\n      <gxg-button\n        class={{\n          [`loader__cancel-button`]: true\n        }}\n        type=\"secondary-text-icon\"\n        onClick={this.cancelProcess}\n      >\n        {this.cancelLabel}\n      </gxg-button>\n    ) : null;\n  };\n\n  private cancelProcess = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n    clearTimeout(this.timeoutReference);\n    this.show = false;\n  };\n\n  //  10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <ch-window\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          container={this.container}\n          hidden={!this.showWindow}\n          modal={false}\n          showFooter={false}\n          showHeader={false}\n        >\n          <div\n            class={{\n              [`loader__wrapper`]: true,\n              \"loader__wrapper--visible\": this.showWrapper\n            }}\n            style={{ borderRadius: this.borderRadius }}\n            part=\"loader-wrapper\"\n          >\n            <div class=\"loader__spinner\"></div>\n            <div\n              class={{\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\":\n                  !this.description && !this.loaderTitle && !this.cancelLabel\n              }}\n            >\n              {this.renderTitle()}\n              {this.renderDescription()}\n              {this.renderCancelButton()}\n            </div>\n          </div>\n        </ch-window>\n      </Host>\n    );\n  }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"]}
+{"version":3,"file":"ide-loader.js","sourceRoot":"","sources":["../../../../src/components/_helpers/ide-loader/ide-loader.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,EAEN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,mBAAmB;IACnB,kBAAkB;CACnB,CAAC;AAMF,MAAM,OAAO,SAAS;;QACpB,8CAAiD;QA+CjD,mCAAiB,GAAS,EAAE;YAC1B,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;YACD,YAAY,CAAC,uBAAA,IAAI,mCAAkB,CAAC,CAAC;YACrC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,EAAC;QAEF,wCAAsB,GAA6B,EAAE,CACnD,IAAI,CAAC,WAAW,IAAI,CAClB;YACE,cACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,uBAAA,IAAI,gCAAe,IAE3B,IAAI,CAAC,WAAW,CACV,CACL,CACP,EAAC;QAEJ,uCAAqB,GAAgC,EAAE,CACrD,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAK,EAAC;QAE3E,iCAAe,GAAgC,EAAE,CAC/C,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,WAAW,CAAK,EAAC;2BAnErD,IAAI;yBAKU,CAAC,GAAG,EAAE,GAAG,IAAI;;;;6BAoBS,KAAK;;oBAUhC,KAAK;;IAkCrC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,KAAK,EAAE,WAAW,GAAa;YACxC,IAAI,CAAC,IAAI,IAAI,CACZ,WACE,KAAK,EAAE;oBACL,CAAC,iBAAiB,CAAC,EAAE,IAAI;oBACzB,0BAA0B,EAAE,IAAI,CAAC,WAAW;iBAC7C,EACD,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAC,EAAE;gBAEV,WAAK,KAAK,EAAC,iBAAiB,GAAO;gBACnC,WACE,KAAK,EAAE;wBACL,yBAAyB,EAAE,IAAI;wBAC/B,iCAAiC,EAC/B,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW;qBAC9D;oBAEA,uBAAA,IAAI,8BAAa,MAAjB,IAAI,CAAe;oBACnB,uBAAA,IAAI,oCAAmB,MAAvB,IAAI,CAAqB;oBACzB,uBAAA,IAAI,qCAAoB,MAAxB,IAAI,CAAsB,CACvB,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"utils/typography\"\n];\n@Component({\n  tag: \"gx-ide-loader\",\n  styleUrl: \"ide-loader.scss\",\n  shadow: true\n})\nexport class IdeLoader {\n  #timeoutReference: ReturnType<typeof setTimeout>;\n\n  /**\n   * shows the '.loader-wrapper'\n   */\n  @State() showWrapper = true;\n\n  /**\n   * The time the loader will await before abort.\n   */\n  @Prop() readonly abortTime: number = 5 * 60 * 1000; // 5 minutes\n\n  /**\n   * The cancel callback\n   */\n  @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n  /**\n   * The cancel button label (optional)\n   */\n  @Prop() readonly cancelLabel: string;\n\n  /**\n   * The loader description (optional)\n   */\n  @Prop() readonly description: string;\n\n  /**\n   * Displays a border all around\n   */\n  @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n  /**\n   * The loader title (optional)\n   */\n  @Prop() readonly loaderTitle: string;\n\n  /**\n   * It shows the loader\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * This event is emitted when \"show\" is false.\n   */\n  @Event() loaderFinished: EventEmitter<void>;\n\n  #cancelProcess = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n    clearTimeout(this.#timeoutReference);\n    this.show = false;\n  };\n\n  #renderCancelButton = (): HTMLButtonElement | null =>\n    this.cancelLabel && (\n      <div>\n        <button\n          class=\"button-secondary\"\n          type=\"button\"\n          onClick={this.#cancelProcess}\n        >\n          {this.cancelLabel}\n        </button>\n      </div>\n    );\n\n  #renderDescription = (): HTMLParagraphElement | null =>\n    this.description && <p class=\"text-body-italic-s\">{this.description}</p>;\n\n  #renderTitle = (): HTMLParagraphElement | null =>\n    this.loaderTitle && <p class=\"text-body-regular-m\">{this.loaderTitle}</p>;\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.show && (\n          <div\n            class={{\n              [`loader__wrapper`]: true,\n              \"loader__wrapper--visible\": this.showWrapper\n            }}\n            part=\"loader-wrapper\"\n            popover=\"\"\n          >\n            <div class=\"loader__spinner\"></div>\n            <div\n              class={{\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\":\n                  !this.description && !this.loaderTitle && !this.cancelLabel\n              }}\n            >\n              {this.#renderTitle()}\n              {this.#renderDescription()}\n              {this.#renderCancelButton()}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"]}

package/dist/collection/components/_helpers/list-selector/list-selector.css

@@ -323,6 +323,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -514,6 +614,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 *,
 ::after,
 ::before {

package/dist/collection/components/_starting-template/template.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles