genesys-spark-components 4.138.5 → 4.140.0

package/dist/collection/components/beta/gux-option-status/gux-option-status.js

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { getClosestElement } from "../../../utils/dom/get-closest-element";
+/**
+ * @slot default - Slot for the status indicator text.
+ */
+export class GuxOptionStatus {
+    constructor() {
+        this.active = false;
+        this.selected = false;
+        this.disabled = false;
+        this.accent = 'info';
+    }
+    handleActive(active) {
+        var _a, _b;
+        if (active) {
+            void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+        }
+        else {
+            void ((_b = this.truncateElement) === null || _b === void 0 ? void 0 : _b.setHideTooltip());
+        }
+    }
+    componentWillLoad() {
+        this.root.id = this.root.id || randomHTMLId('gux-option-status');
+    }
+    getAriaSelected() {
+        if (this.disabled) {
+            return false;
+        }
+        return this.selected ? 'true' : 'false';
+    }
+    hasDisabledParent() {
+        const parentListbox = getClosestElement('gux-listbox', this.root);
+        return parentListbox === null || parentListbox === void 0 ? void 0 : parentListbox.disabled;
+    }
+    render() {
+        return (h(Host, { key: '63ae08c2ed117bef2f23b320fe71d20547137722', role: "option", class: {
+                'gux-active': this.active,
+                'gux-disabled': this.disabled || this.hasDisabledParent(),
+                'gux-selected': this.selected
+            }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("div", { key: 'be18420ee4530a1be4e0c03fa2562044c985468c', class: "gux-status-indicator" }, h("span", { key: 'b29a62bfc9b5d0d2738ee3bb22ec856b582fd924', class: `gux-status-icon gux-status-icon-${this.accent}` }), h("div", { key: '792923ae02a7142d628d489fbec528408a1d0507', class: "gux-status-indicator-text" }, h("gux-truncate", { key: '0f7c6a4d550740c3e43b5363e1e49837135a6dd1', ref: el => (this.truncateElement = el) }, h("slot", { key: '7f6f3ce673c28e939a407038e8d4fd0fc4cfce0d' }))))));
+    }
+    static get is() { return "gux-option-status-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-option-status.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-option-status.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxStatusIndicatorVariant",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "GuxStatusIndicatorVariant": {
+                            "location": "import",
+                            "path": "./gux-option-status.types",
+                            "id": "src/components/beta/gux-option-status/gux-option-status.types.ts::GuxStatusIndicatorVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'info'"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "handleActive"
+            }];
+    }
+}

package/dist/collection/components/beta/gux-option-status/gux-option-status.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -362,7 +362,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: '4f69a33950446f9ddaa6dd5df56a99b9d2c38329', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '48b85016cbad67170edb573edcdccafeb6e099fb', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-popover-beta/gux-popover.js

@@ -237,10 +237,10 @@ export class GuxPopover {
         this.disconnect();
     }
     render() {
-        return (h("div", { key: '3d295a2cd9cbbaca23458d0acbd0da77fce7cde7', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'b62c7bb78e66d894edf9fa43fb811a2bdcddf250', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual", tabindex: "-1" }, h("div", { key: 'f8d97e6964555fd9d69888f4842a9594aff0be5a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e3010c401e83c01626c8755aec7fd4834edec69b', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: '46047744a3f18b46ef0af1d8d4553831cbeb87f5', onClick: this.dismiss.bind(this) })), h("div", { key: 'c43b179d660b63c924b7136dcdd0861f9b66d7d1', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '03bc8460bf8d02fcf9e0da2bf7d8c50adc648988', name: "title" })), h("div", { key: 'adc2d299aa60c34042029314d2258d316f13c53e', class: "gux-popover-content" }, h("slot", { key: '87a1583dcb96c58d3beb81f40e0e5aa5001f7a34' }))));
+            }, "data-placement": true, popover: "manual", tabindex: "-1" }, h("div", { key: '1d244eb98a653097b583efb2ea02319f0692dc42', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'dfd569f3243bf230c496076ee58db8670a69ea17', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: 'cd5454707fac1dbf43b7683fc0ad30c1054eef47', onClick: this.dismiss.bind(this) })), h("div", { key: '30410be47ab010f1ee883843d6b6fdf101f609c0', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '542624837df7391d4da4b7fae458fb9d6f32ca2b', name: "title" })), h("div", { key: '12ecf5122660da87b15e8aaaaafce3a0d1b4f497', class: "gux-popover-content" }, h("slot", { key: 'aaff051f25493d29b08f8d071e85fd9c9d6ad71a' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-popover-list-beta/gux-popover-list.js

@@ -183,10 +183,10 @@ export class GuxPopoverList {
         this.disconnect();
     }
     render() {
-        return (h("div", { key: 'e637eb411cef322a9e0c94ca21896ff8018ca802', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'cd9b2fff6f3e1ef94c9264cc15e5e4a4bd4b9e5e', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '709fb045aa41fbc038d12d637700b8ff9f9aafb0', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'dacf558946523086ba3ad4060897d47be8e5ba03', onClick: this.dismiss.bind(this) })), h("div", { key: 'e9547a9915f690e1c604d107fe661beecd4bfed2', class: "gux-popover-content" }, h("slot", { key: '3604d873f66e5da9d0eaddf61efbc7879423129c' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: 'ce18a01f5a480ba20721f8b66fc23999f0e5bf5b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'ae8652aee94f000e8f3fd11873a58efa671fced2', onClick: this.dismiss.bind(this) })), h("div", { key: '92912743edf979dc23808a584310e1508ffa7393', class: "gux-popover-content" }, h("slot", { key: '66aac2d941ef4194a1e0b2c74baf985a48911f24' }))));
     }
     static get is() { return "gux-popover-list-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-link/gux-rich-text-editor-action-link.js

@@ -75,7 +75,7 @@ export class GuxRichTextEditorActionLink {
         }
     }
     render() {
-        return (h(Host, { key: 'ba285e8502fb19e278e0244c97a735c2cd56f6e2' }, h("gux-button-slot", { key: 'fe481a8963da29d77fe3d0035dc378c4e431680c', accent: "ghost", "icon-only": true }, h("button", { key: 'dcfb7fb05960506b720036f740d0a7fc009ac087', id: "popover-target", class: { 'gux-is-pressed': this.isActive || this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled || hasDisabledParent(this.root), "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { key: 'c298aa6766abee40c166d1a94825a0e1fb30d570', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: 'ca33b64e21a7aa3b3ec48203b313508c86855ee4', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: 'd794e72d5e609b5a7ee866426916d86378781f95', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: 'b71322b59dfa77450568c4ccb714fd4552f3e27f' }, h("input", { key: 'e959e1474f6d46958b1d6c13ed8a7ba3fd2ee0bb', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '084618e242a2bf9a5d6816444563c29fe5938507', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: '271eb2786b3fd6390559231f5881e344de1fe8b2' }, h("input", { key: '84c0785a99e247c3e1108d4d17844d82bad9d338', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: '8d6015bddfca4cc3efaa4f68868ba56ed12bf2b4', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '0cd30e550b40fc20a4c73a7d0bc7af18a134371a', align: "end" }, h("gux-button", { key: 'a9f38b3c3843a2d8999d65a0b775eb5d60bcae37', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '0dded209ac77adfe0c215fbe4024f087526be223', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
+        return (h(Host, { key: '7cf1282de26e3435355bd1e56082a6bf82c8ee41' }, h("gux-button-slot", { key: 'a3989e6cf8045e14a692bcd6794adeb495c8eb52', accent: "ghost", "icon-only": true }, h("button", { key: 'fa0f503c88a30d0a33ec290ac74496e14dca317f', id: "popover-target", class: { 'gux-is-pressed': this.isActive || this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled || hasDisabledParent(this.root), "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { key: '7e15018402b7837cb4a956cc0b93c1cca0464a61', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: 'ec30b2f47af90d979eed841792d38fc6e6a0e16f', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: 'f8a3175a12fb9cf43222b65427b5d61fa20340f9', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: 'ae81694b4b7eacd3149946dbd3ce689c1e09f62c' }, h("input", { key: '8d362954344ea9816221bb61b5dc9fb91375bf22', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '37df778fed4a89f12db534a36bed2aa9ab8ed0d0', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: '669a4e47dbe0bbc16fa81ddd612a9d4d3639e84e' }, h("input", { key: 'c17e684a83dfdd16213022f8caa8147d2d9885a5', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: '41be8853cddd956df0a0d9bf0654fe7de1c183ce', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '36ded973565793d7fb723bc59cdbe34e0b6c0de9', align: "end" }, h("gux-button", { key: '018ece746fc3629506b948efeb530a50595a25dc', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '9ec7fad709478eaeafeb86a65d3e64a859196607', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
     }
     static get is() { return "gux-rich-text-editor-action-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-rich-style/gux-rich-text-editor-action-rich-style.js

@@ -170,7 +170,7 @@ export class GuxRichTextEditorActionRichStyle {
         return (h("gux-button-slot", { accent: "ghost", slot: "target", "icon-only": true }, h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderMenu()), this.renderTooltip()));
     }
     render() {
-        return (h("gux-popup", { key: 'e00c339ca6af7ccc8e138f68d12befc48bf74e49', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'a3acff488d05a0c81e3e877015c8ccf90f901479', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-rich-text-editor-action-rich-style"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action-text-highlight/gux-rich-text-editor-action-text-highlight.js

@@ -107,7 +107,7 @@ export class GuxRichTextEditorActionTextHighlight {
         return (h("gux-button-slot", { accent: "ghost", "icon-only": true, slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), onClick: () => this.togglePopup(), disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive || this.expanded }, "aria-haspopup": "true", "aria-expanded": this.expanded.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { size: "small", "icon-name": "fa/highlighter-line-regular", "screenreader-text": this.i18n('textHighlight') })), this.renderTooltip()));
     }
     render() {
-        return (h("gux-popup", { key: '9c20dc1314e6899bd24c4295456cd490c0d90fcc', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '4c62359bc54074403adeebc73755df86b9d658f0', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-rich-text-editor-action-text-highlight"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action-group/gux-rich-text-editor-action-group.js

@@ -12,7 +12,7 @@ export class GuxRichTextEditorActionGroup {
         }
     }
     render() {
-        return (h(Host, { key: '420b5c62b533e19c2155ba8374aefc69f43a094a' }, h("div", { key: '7fb8c77125b67c7d4797c4dcd3e69dac06dad399', class: "gux-action-group-container" }, h("slot", { key: '3b092a72cbba3fcac5664e5d79eae5a6b0c4bd4b' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: 'ae6eedd0bacc0a7b8c07e48a0dcf24bfa65fae32' }, h("div", { key: '5c96762b070a13265e3635f68722854afa305341', class: "gux-action-group-container" }, h("slot", { key: '3a43e2691131b24f25ec64385b325e6fdf89731d' })), this.renderActionGroupDivider()));
     }
     static get is() { return "gux-rich-text-editor-action-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-beta.js

@@ -169,10 +169,10 @@ export class GuxRichTextEditor {
         return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (h("div", { key: 'abcf413d998c1a7704cb695fa68bd4ed8514b883', class: {
+        return (h("div", { key: 'cf12a601d70405ec54b5575684fa445e3e2e9aa8', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '295c11239b185053f051e31afb9c2e9f68e85dbc', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderTextEditorMenu(), this.renderGlobalAction()), h("slot", { key: 'bf62f78b347ce28d77253ed2e3edcbea0eb276f5', name: "editor" })));
+            } }, h("div", { key: '11ad6a45ff5b7f79201c9dd2f5a6225a0db8af9f', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderTextEditorMenu(), this.renderGlobalAction()), h("slot", { key: 'fcd5549ede9c8b1913cd5e76e40aedf3a30c3dfb', name: "editor" })));
     }
     static get is() { return "gux-rich-text-editor-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.js

@@ -33,10 +33,10 @@ export class GuxRichHighlightListItem {
         }
     }
     render() {
-        return (h("div", { key: '2ff3b65d407281bc979506a2be9ed98beaf9820e', class: {
+        return (h("div", { key: '50c3810ca3ad7f64567098681c701703eb4d7922', class: {
                 'gux-highlight': true,
                 [`gux-${this.highlight}`]: true
-            }, role: "listitem" }, h("button", { key: '1141905b0a7108a4490c0d029129b187c18f3edc', type: "button", "aria-label": this.i18n(`${this.highlight}`), tabIndex: -1, disabled: this.disabled }), this.renderTooltip()));
+            }, role: "listitem" }, h("button", { key: '5d2c996348c87453395739b2c28267cadc7a74c6', type: "button", "aria-label": this.i18n(`${this.highlight}`), tabIndex: -1, disabled: this.disabled }), this.renderTooltip()));
     }
     static get is() { return "gux-rich-highlight-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-style-list-item/gux-rich-style-list-item.js

@@ -27,7 +27,7 @@ export class GuxRichStyleListItem {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '536d07db7d920e96eb663b547fc2a5cbd492d7c0', role: "listitem" }, h("button", { key: '95ec2a5acfa5ac7355149d84d0bc76b50e889488', type: "button", tabIndex: -1, disabled: this.disabled }, h("gux-truncate", { key: '22c0dde38bbf6da6c5213b90613da1e410cf2e2b', "max-lines": 1 }, h("slot", { key: '2fa3c45b8fbc3065adf8432aeff93c90d32f61df' })))));
+        return (h(Host, { key: '41a3af25f4d4ca67bb03e36953d04622413b5cde', role: "listitem" }, h("button", { key: 'f3657ff8470ab0bc24bb72fcd21116a736612894', type: "button", tabIndex: -1, disabled: this.disabled }, h("gux-truncate", { key: '4b9627629b04d68cce683829149eaef973da78ae', "max-lines": 1 }, h("slot", { key: 'cd0b368cef0a503eddcb738b9386800fcf1e4686' })))));
     }
     static get is() { return "gux-rich-style-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-text-editor-list.js

@@ -77,7 +77,7 @@ export class GuxRichTextEditorList {
         last(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: 'b92e6b449110c5d0c2a25da495b738de4096f673', role: "list" }, h("slot", { key: '0bce1f3ffc67c65c336ab8a9848c627bf4737683', onSlotchange: () => this.setListItems() })));
+        return (h(Host, { key: 'dcaebbf922cf039c160624d3302df8072c263886', role: "list" }, h("slot", { key: '54d82523fe3ac04394f7d2a7718015acec745c4c', onSlotchange: () => this.setListItems() })));
     }
     static get is() { return "gux-rich-text-editor-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-text-editor-sub-list/gux-rich-text-editor-sub-list.js

@@ -122,13 +122,13 @@ export class GuxRichTextEditorSubList {
         }
     }
     render() {
-        return (h(Host, { key: 'dbf767a10781c144c9d9286c7bc094884db55e28' }, h("button", { key: '6c8cc9cd591efefd0e9b0b84afc41bb7fd7ac3e1', type: "button", class: {
+        return (h(Host, { key: '41f07a67b67160e7acb5eba1e44d3cf11c2f0ef5' }, h("button", { key: '2c3f37036a7771a887e80c9b1899109876281120', type: "button", class: {
                 'gux-sub-list-button': true,
                 'gux-sub-list-button-active': this.isShown
-            }, tabIndex: -1, role: "listitem", ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '680166d67a0ee6c6542f510fe633c28cfae96933', class: "gux-sub-list-button-text" }, this.label), h("gux-icon", { key: '11d2609ddfe0cfea078f23c751807dbeb470fdc1', size: "small", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: 'a839423b902cd53b1c891643cb7ca0250b3df44b', ref: el => (this.subListElement = el), class: {
+            }, tabIndex: -1, role: "listitem", ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'c746d5bad2bd6f06bdb1b9d2606575550a20f6f6', class: "gux-sub-list-button-text" }, this.label), h("gux-icon", { key: 'edfe4891d782c89740752a5e9ef00ca9e3dbce23', size: "small", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '78190e9338750363b6a604e21658b4859c11aa00', ref: el => (this.subListElement = el), class: {
                 'gux-sub-list-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '8d1c00282a63145322b8735aec86c1b7bf662464', role: "list", class: "gux-sub-list-content", ref: el => (this.subListContentElement = el) }, h("slot", { key: '7226adade6ffd30d8db3ae2195cde80347930d37' })))));
+            } }, h("div", { key: '4fc7b3580343a1dc334e38f8e33a000e1e4258eb', role: "list", class: "gux-sub-list-content", ref: el => (this.subListContentElement = el) }, h("slot", { key: 'b9eaacb52a10b22c5f2a5c5d6125367eb48d7378' })))));
     }
     static get is() { return "gux-rich-text-editor-sub-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-menu/gux-rich-text-editor-menu.js

@@ -100,7 +100,7 @@ export class GuxRichTextEditorMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'ad724950772b06068b4a0d19749a252888f75a84' }, h("gux-popup", { key: '44ce5ce1bbeb6692bafa3533f37cf3a2313f51e6', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: 'ee776432b53d4242ecd33b1fa0121bb36ed8f222', slot: "target" }, h("gux-button-slot", { key: '10aa610e9c12466d39dd4315fb49ee42aa83017f', accent: "ghost" }, h("button", { key: '808dc2548fc62d41cbf892be094bfc5b6e87f202', type: "button", onClick: () => this.onActionClick(), ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: hasDisabledParent(this.root) }, h("gux-icon", { key: 'a4fba57a8c1c03d6dd9f2402f43da0a1e2730efb', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.i18n('additionalActions'), size: "small" })), this.renderTooltip())), h("div", { key: '9659eb77e4be0a520d447a881e42a677f3fc01a7', slot: "popup", class: "gux-list-container" }, h("gux-rich-text-editor-list", { key: '84bbd56ef55ae9a27870859346f08497d0fa47e3', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'ba09ae16e46d91c740c9e65863117fdcf67c836f' }))))));
+        return (h(Host, { key: '87963618481ff58c090023c17beab8d53a9b073a' }, h("gux-popup", { key: 'bda2cc0cc677fdd9c879c89743e66f933bfaefa6', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: 'ecce9e9fce1bb889e36ef7f785b8d93cef132842', slot: "target" }, h("gux-button-slot", { key: '92f988d6ea66dc95a4e5f67a552ea2ff5c36cd6e', accent: "ghost" }, h("button", { key: '8cd5d5dff2e6041c76e5b6d8e71e99d670b68068', type: "button", onClick: () => this.onActionClick(), ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: hasDisabledParent(this.root) }, h("gux-icon", { key: 'd94ba218d4dc0987b00ac1f2f8f57fd651bf2c17', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.i18n('additionalActions'), size: "small" })), this.renderTooltip())), h("div", { key: '19d637e62a5213f2f368a56ed30b458403fc8d04', slot: "popup", class: "gux-list-container" }, h("gux-rich-text-editor-list", { key: '7bb3f2896b1a2d32c3953279662f6f4a2b2644d0', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '0c346a5c7d6fac4edc8ba7f6d02947e977488831' }))))));
     }
     static get is() { return "gux-rich-text-editor-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: '85e72103fe29b5cb646e04121a161aa79784da4e', class: "gux-sr-only" }, h("slot", { key: 'de8195a2963d17bca6f7b9470dda39356e36efe5' })));
+        return (h("span", { key: '415336aabbf842386fdaf43d88d019bc4c46e561', class: "gux-sr-only" }, h("slot", { key: '930fb469c19e12f408376bf0f6c96358e00b481d' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -47,19 +47,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '790472c828036ca65ab67a22e8bce0059efe1721', class: {
+        return (h("div", { key: 'b884363ecb15a9ed7fa2e0824791087ba339c6b2', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, h("button", { key: 'ab790218cc8f4d4b73e0904837ce54249bf8ae0b', class: {
+            } }, h("button", { key: 'f67cfadce16979a140c68fc9090b461ac5653ded', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '3090036421416f766b12c4a42715f62cb5e2131c', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '7e2b8d31b3aeb148e1bc913362aacdf73ea7cce3', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'd8ef9caef881c83ef824e60b7916d56f18faf19b', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: '208fcfeb6af91fd3e0a542b05d029c5800fd4a4a', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -35,7 +35,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: 'c59dbf99e8aa3a39eb0d97e4df30f4cd6bb05c31', role: "group" }, h("slot", { key: 'aca9f87a04b8b57c7c92d9386ab0ba127c5ed5ed', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'ef39fcb72114edc136fa4c617831ea4295204e9a', role: "group" }, h("slot", { key: '73e153633d0dcf2e10ecaf5fb8df2dca9d1c1aa2', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -49,11 +49,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: 'cc20e1b52d7ae10d9472cae33cf1e1eb966e8711', class: {
+        return (h("div", { key: '480a6392b2b758bd68ca3780587dc09d2a201bf3', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '97dab4e29380418707cfacf7d6bee48ce9b5081d', class: "gux-content" }, h("div", { key: '1ef93190cc63e468294845c0a93d8494ad2a9ba2', class: "gux-icon" }, h("slot", { key: '3f9489a87f044206a087af27c979430626c145b9', name: "icon" })), h("div", { key: '39f6e0c2d789271495c628bf3b61aaa01dc94cdb', class: "gux-label-container" }, h("slot", { key: 'e1beedc64492c9d4babc4183e688674f28bb0192', name: "label" })), h("slot", { key: 'b5bbfebbb47dcb72a9d1fbf13ad90280041985b9', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: '6e64fdb9638c58db92390433fd2e2f2dce0e2348', class: "gux-content" }, h("div", { key: 'ba8c606d7a5e3f9823a1330150d26a00cfebe98f', class: "gux-icon" }, h("slot", { key: '39d9ebf65578a6f09aa3ce3c2f0b89ad2fb86725', name: "icon" })), h("div", { key: '4696a831c08515181d924cf389d1b0d8bc65e813', class: "gux-label-container" }, h("slot", { key: '9c3864aa9fd8ba5fedc1c476219d5fc8151fc53f', name: "label" })), h("slot", { key: '56ecdde3798b9f921f18907df68aead6ac52f72b', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-cards.js

@@ -8,7 +8,7 @@ export class GuxSelectorCards {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: '0432cf59da3438a9c8e299083a93b01f47f64ad8', class: "gux-selector-cards" }, h("slot", { key: '5e40bc2d53b13708ca546e4fb5a7e4816601c3d1' })));
+        return (h("div", { key: '9f3a1e9f850720ba6f825c8ea4eb837b0fcf23e1', class: "gux-selector-cards" }, h("slot", { key: 'bd39cf942c05c4e255890eef3068fbb3695e82b9' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.js

@@ -52,7 +52,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: 'eea0c737e4c43a0d621fee32ff4dad60bd784151', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '11156f4073f0db092f01db1175fa3ca7c91d60a8', size: this.size }, h("div", { key: 'ea76626936c93f966c7593f3040a165f8a540359', slot: "heading", id: titleID }, h("slot", { key: '436910dde97d5b06676c8b16d2f727d371dbf9a5', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'f251f7fff64fbcc70d69d0e9a6ac107cc02b619b', slot: "description" }, h("slot", { key: 'f8bf46aa948c66e33a18b5b1cee6243f98085b0c', name: "description" }))), h("div", { key: '6951c9381dd820845cb677742ab4901bd43b9504', slot: "content" }, h("slot", { key: 'fce1aac4a2799c90cfa2a0d26116f48c13563117', name: "content" })), h("div", { key: 'b0497481f705825507f461acaaf8eefc8f8e7959', slot: "footer" }, h("slot", { key: 'd7c224fd5279bb3ecf749a0610f71313061a5be1', name: "footer" })))));
+        return (h("dialog", { key: '5942094702a7d5bae430507f6e09e9a630253996', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: 'cb9581b8714a4f91a478dbbfb3059230905ff641', size: this.size }, h("div", { key: 'a7febca3dcd0efdcb29cd7406171690dfcd0976b', slot: "heading", id: titleID }, h("slot", { key: 'a2a77354ae8689e446e9e5c314f5c9344e8c5bbc', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '4f5db854a6b9680ed2b75198785971a2d83491c6', slot: "description" }, h("slot", { key: '7df7f2873a7bb805d544efa75998559c30e24ce4', name: "description" }))), h("div", { key: 'b8034484bf051d7a701545655b51b599397833cd', slot: "content" }, h("slot", { key: 'b98853b74adac243248fbb13939b6270c3dafa62', name: "content" })), h("div", { key: '2a15fcdba494b6aacb3faf341ef8239a64bc37c5', slot: "footer" }, h("slot", { key: '18e176956b6c3c0df2ee425d21ed004dc91ab5f1', name: "footer" })))));
     }
     static get is() { return "gux-modal-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-side-panel-heading/gux-side-panel-heading.js

@@ -15,7 +15,7 @@ export class GuxSidePanelHeading {
         this.headingTag = `h${this.level}`;
     }
     render() {
-        return (h(this.headingTag, { key: 'd5cca717e84ba48bf3a9181467d153eed1a832ab' }, this.iconName && (h("gux-icon", { key: 'ce36d01427df3aa36b818ba37e826e206277c0a4', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: 'e48e0efbc11ad67f4000020a319a3326cf21e46d' }, h("slot", { key: '1c2423d144b81593b8a282233169be7d87271f5f' }))));
+        return (h(this.headingTag, { key: '102982a11dc324ec6c2b41c75427e1321b64418a' }, this.iconName && (h("gux-icon", { key: '2902d503a5097a95b0f7bf45a243a9f170d7dd3e', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: 'bdbe0e7213049066a3b949fa8b301404112df58c' }, h("slot", { key: '373dc1b994d6dccaa8bea6805a27956b670d1582' }))));
     }
     static get is() { return "gux-side-panel-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/gux-side-panel.js

@@ -24,10 +24,10 @@ export class GuxSidePanel {
         return null;
     }
     render() {
-        return (h(Host, { key: '3f0e1fa0e90174807e0791df751041891492f94a', role: "complementary" }, h("div", { key: 'dafc3bf2e247d8e889b856bca9a129919e12522a', class: {
+        return (h(Host, { key: '5fdbfbef55bc30be78471c516f8b33f8c9c34981', role: "complementary" }, h("div", { key: '4857f47450eeb2268041e55bf89588dd83267502', class: {
                 'gux-side-panel': true,
                 [`gux-side-panel-${this.size}`]: true
-            } }, h("header", { key: 'ed7ccb998473f605b62ecc2501ff6fa1c8625be7' }, h("slot", { key: '45ab40590bba6b14a87e4614504c290eb9a8b402', name: "heading" })), h("gux-dismiss-button", { key: '8c4b7eea245a6c33aa427baf4dea9a007c3ef734', onClick: this.onDismissHandler.bind(this) }), this.renderDescription(), h("div", { key: '95b676c28140e69354b513fe2c67590ae7c56b68', class: "gux-side-panel-content" }, h("slot", { key: 'da34f66a328bc2e4df354100ad72fcfecdc93ebd', name: "content" })), h("footer", { key: '94cbea3e682ba430bff23696426c749912b485c5' }, h("slot", { key: '2b3bbd2d812282606c71c77c169e63a8cbc1cd5a', name: "footer" })))));
+            } }, h("header", { key: 'bc72b54f2b0651ecb7301a864130f26dfaf1f1aa' }, h("slot", { key: '383b5861e4bd529d2b4d8e8bb3b463ad83d0d933', name: "heading" })), h("gux-dismiss-button", { key: 'fac90508c0adb703155b854d9c43b14c43871cb5', onClick: this.onDismissHandler.bind(this) }), this.renderDescription(), h("div", { key: '6763ab02f24111100758ff07153484fc23634962', class: "gux-side-panel-content" }, h("slot", { key: 'de0eb73cf762b2b9c5e16191ed98722caad9f389', name: "content" })), h("footer", { key: '43c1297f6408a3638b2f480ce2a22ea2e631accb' }, h("slot", { key: 'b91da0a3a97a669d24b18a492455b64bcb490014', name: "footer" })))));
     }
     static get is() { return "gux-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-status-indicator/gux-status-indicator.css

@@ -0,0 +1,57 @@
+.gux-status-indicator {
+  display: inline-flex;
+  gap: var(--gse-ui-dataTableItems-statusIndicator-gap);
+  align-items: center;
+  padding: var(--gse-ui-dataTableItems-statusIndicator-gap);
+  font-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  line-height: var(--gse-ui-dataTableItems-statusIndicator-label-lineHeight);
+  border-radius: var(--gse-ui-dataTableItems-statusIndicator-borderRadius);
+}
+.gux-status-indicator:hover {
+  cursor: default;
+  background-color: var(--gse-ui-dataTableItems-statusIndicator-hover);
+}
+
+.gux-status-indicator-text {
+  color: var(--gse-ui-dataTableItems-statusIndicator-text);
+}
+
+.gux-status-icon {
+  display: inline-flex;
+}
+
+.gux-status-icon::before {
+  content: "";
+}
+
+.gux-status-icon-info::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  background: var(--gse-ui-statusGlyph-information);
+}
+
+.gux-status-icon-warning::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-neutral);
+}
+
+.gux-status-icon-error::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-negative);
+}
+
+.gux-status-icon-success::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-positive);
+}

package/dist/collection/components/beta/gux-status-indicator/gux-status-indicator.js

@@ -0,0 +1,66 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { hasSlot } from "../../../utils/dom/has-slot";
+/**
+ * @slot default - Slot for the status indicator text.
+ * @slot tooltip-text - Slot for the optional tooltip text
+ */
+export class GuxStatusIndicator {
+    constructor() {
+        this.accent = 'info';
+    }
+    async componentWillLoad() {
+        trackComponent(this.root, { variant: this.accent });
+    }
+    renderTooltip() {
+        if (hasSlot(this.root, 'tooltip-text')) {
+            return (h("gux-tooltip", null, h("slot", { name: "tooltip-text" })));
+        }
+    }
+    render() {
+        return (h("div", { key: '3a77d18d0d284d6c82c9add2dedbd993100c9481', class: "gux-status-indicator" }, h("span", { key: 'cae7c8aac725640a8ed72005e76906401b8c18ba', class: `gux-status-icon gux-status-icon-${this.accent}` }), h("div", { key: '7330245f5c2fb8d9e9c23fba970201c5422e38f6', class: "gux-status-indicator-text" }, h("slot", { key: '8dc37515009f6e07f6c7b0e52ccba2ed7ce2a688' })), this.renderTooltip()));
+    }
+    static get is() { return "gux-status-indicator-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-status-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-status-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxStatusIndicatorVariant",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "GuxStatusIndicatorVariant": {
+                            "location": "import",
+                            "path": "./gux-status-indicator.types",
+                            "id": "src/components/beta/gux-status-indicator/gux-status-indicator.types.ts::GuxStatusIndicatorVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'info'"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-status-indicator/gux-status-indicator.types.js

@@ -0,0 +1 @@
+export {};