genesys-spark-components 4.81.2 → 4.82.0

package/dist/collection/components/beta/{gux-avatar-focusable → gux-avatar/gux-avatar-focusable}/tests/gux-avatar-focusable.spec.js

@@ -1,10 +1,10 @@
-jest.mock('../../../../utils/error/log-error', () => ({
+jest.mock('../../../../../utils/error/log-error', () => ({
     __esModule: true,
     logWarn: jest.fn()
 }));
-import { newSpecPage } from "../../../../test/specTestUtils";
+import { newSpecPage } from "../../../../../test/specTestUtils";
 import { GuxAvatarFocusable } from "../gux-avatar-focusable";
-import { logWarn } from "../../../../utils/error/log-error";
+import { logWarn } from "../../../../../utils/error/log-error";
 describe('gux-avatar-focusable', () => {
     describe('#render', () => {
         [

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

@@ -118,6 +118,14 @@ export class GuxAvatar {
             return (h("div", { class: "gux-avatar-integration-badge" }, this.renderUcIntegrationsIcon(this.ucIntegration), h("gux-screen-reader-beta", null, this.getUcIntegrationText(this.ucIntegration))));
         }
     }
+    renderTooltip() {
+        if (['A', 'BUTTON'].includes(this.parentElement.tagName)) {
+            return (h("gux-tooltip-beta", { placement: "top", ref: el => (this.tooltip = el) }, h("div", { slot: "content" }, this.getDescriptionText())));
+        }
+        else {
+            return null;
+        }
+    }
     getDescriptionText() {
         if (this.notifications) {
             return `${this.name} (${this.i18n('notifications')})`;
@@ -127,7 +135,20 @@ export class GuxAvatar {
         }
         return `${this.name}`;
     }
+    /*
+     * Show tooltip
+     */
+    async showTooltip() {
+        return await this.tooltip.showTooltip();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.tooltip.hideTooltip();
+    }
     async componentWillLoad() {
+        this.parentElement = this.root.parentElement;
         trackComponent(this.root, { variant: this.size });
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
@@ -136,13 +157,13 @@ export class GuxAvatar {
     }
     render() {
         return [
-            h("div", { key: 'bd679be542a7a195708a3ec5fc2b6295d86fa60d', class: {
+            h("div", { key: '3f7f5e21ef7cf752f64bbce6e4fa70928199f939', class: {
                     'gux-avatar': true,
                     [`gux-${this.presence}`]: this.ring || this.badge,
                     [`gux-${this.size}`]: true,
                     'gux-ring': this.ring,
                     [`gux-accent-${this.getAccent()}`]: true
-                } }, h("div", { key: 'accb7c6bff6cbca9fdd7dcc1019b9777341e1e9e', class: "gux-content" }, h("slot", { key: '6cae7ac1a87342b2287def093cc98c8d74e9e47e', name: "image" }, h("abbr", { key: '74e34625648351b3a9cb39bb445d162259c62003', "aria-label": this.getDescriptionText() }, this.generateInitials())))),
+                } }, h("div", { key: '2c6b7c75217737c83145c6de617d0b1a2fdd3381', class: "gux-content" }, h("slot", { key: '92a83ba3fd372de3a64df25d5534ad1d5e70313d', name: "image" }, h("abbr", { key: '37a74481a46b97927c7ce18a005597f2889b1c28', "aria-label": this.getDescriptionText() }, this.generateInitials()))), this.renderTooltip()),
             this.renderBadge(),
             this.renderUcIntegrationBadge()
         ];
@@ -347,5 +368,43 @@ export class GuxAvatar {
             }
         };
     }
+    static get methods() {
+        return {
+            "showTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "root"; }
 }

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.js

@@ -190,7 +190,7 @@ export class GuxCalendar {
             } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
     }
     render() {
-        return (h("div", { key: 'e2f9a107ee91621f919e080a6c10341ded7389be', class: "gux-calendar-beta" }, h("slot", { key: 'f773c2600908c44ff26b2e89e61e1d9afedf4337' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: '06cea2ee177e04b06cbeb787c5e4d9ca146a120d', class: "gux-calendar-beta" }, h("slot", { key: 'bee83ea56f4f17c14376528fabe878e287e66d4b' }), this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-cta-group/gux-cta-group.js

@@ -62,7 +62,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: '8173069370a108be86e6ece1bb2d9883ff5aa881', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '864f1941fa2a66ff658cdd56d5e0c5082709333b', name: "primary" }), h("slot", { key: '74d7d31bb9f327577ce1f639231a79ce84b759ce', name: "secondary" }), h("slot", { key: '3d97c644a3911d97cdb23469347ac898ac141a08', name: "dismiss" })));
+        return (h("div", { key: 'ea48cb42883a8e129c88d39bc26430bb998f7e6d', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'b3a420b15d08d01b9f640891228c443f93197497', name: "primary" }), h("slot", { key: 'bb98fe2475fb716dda62cfb887a63c3042a10be3', name: "secondary" }), h("slot", { key: '6bf8a3c8152cda870f7d3036c837918f83dee8e1', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class GuxDate {
         }
     }
     render() {
-        return (h(Host, { key: '79f6d22c05b5530f617b7db412af44f0e2a374b7' }, this.renderDate()));
+        return (h(Host, { key: '9385c8d0c79a8839c2eb3624d17dbb7aa66f0949' }, this.renderDate()));
     }
     static get is() { return "gux-date-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -39,7 +39,7 @@ export class GuxDateTime {
         }
     }
     render() {
-        return (h(Host, { key: 'f2ebb999dcafa729f19f28c28c45f33c98f21085' }, this.renderDateTime()));
+        return (h(Host, { key: '26d5041890230bf99ff1d98916e54d3838e007e7' }, this.renderDateTime()));
     }
     static get is() { return "gux-date-time-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-flag-icon/gux-flag-icon.js

@@ -11,7 +11,7 @@ export class GuxFlagIconBeta {
     }
     render() {
         var _a;
-        return (h("span", { key: '4ca12c762b2d54ea82364c372a8e4b91ab2494e5', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
+        return (h("span", { key: '4dfa8e7f981b91025eae981d669566ffa1253b1a', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
     }
     static get is() { return "gux-flag-icon-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-description/gux-form-description.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormDescription {
     render() {
-        return (h("slot", { key: '62b83205f3f0b7f6cef701829b4fd1f37e1eed5c' }));
+        return (h("slot", { key: '94a9998b9411fbf8b09ecaf98f73c1b9a2e53050' }));
     }
     static get is() { return "gux-form-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-fieldset-heading/gux-form-fieldset-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormFieldsetHeading {
     render() {
-        return (h("slot", { key: '38b0e65dd7605949ccd46f801898d5435ba0097c' }));
+        return (h("slot", { key: '955753bff72c465f0e72956388a5b358fff36a18' }));
     }
     static get is() { return "gux-form-fieldset-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.js

@@ -11,9 +11,9 @@ export class GuxFormFooter {
         trackComponent(this.root, { variant: this.placement });
     }
     render() {
-        return (h(Host, { key: '94325f71c5d4f4efeb629095c05c0c7b75a16ac9', class: {
+        return (h(Host, { key: 'e029fc31ed5de0869aa0705225162559c53e0705', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: 'e52a9d6a79c907afc065983759d96f79e5f40a69' })));
+            } }, h("slot", { key: '3acdbefafd30f736eeee6ef36f64f6e1ad273211' })));
     }
     static get is() { return "gux-form-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormHeading {
     render() {
-        return (h("slot", { key: '29312b9a7103b147c7755b9ed366cecb4a4c7b7c' }));
+        return (h("slot", { key: '3c916a8b2173ae6b53b8046c3f925e13d2cf6d34' }));
     }
     static get is() { return "gux-form-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxForm {
     render() {
-        return (h("slot", { key: '7cf122ef2820dda8c5e854f0aab3863716ea218b' }));
+        return (h("slot", { key: '5ae86892c61c1db5065ac21ebd14f4e81cfd316a' }));
     }
     static get is() { return "gux-form-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-icon-tooltip/gux-icon-tooltip.js

@@ -25,7 +25,7 @@ export class GuxIconTooltip {
         return await this.tooltip.hideTooltip();
     }
     render() {
-        return (h("div", { key: '3f75501370f8559bb18fc29ca3d9e37aa0a45255', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: '20a8c51282437c0ef07e3016786e8f7c4fa8e6b0' }, h("slot", { key: 'da380d60ce08aa86220dbec37865f08d267b5ced', name: "content" })), h("gux-icon", { key: '3761341ef5966ef321e8eb8a251e87d76d6fd480', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '66cd0158ffe6bc4bb47ff089c68a6bbfd85c06a4', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: 'bec88a9f896f9756ded8219a92924c35c94d9fab', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: '3b20ccaf0e499e8429c53e8c1fb7797f9670a847', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: '856479e539bc5fa9d31bbecdb515bb3cb12e3480' }, h("slot", { key: 'b2ba5630a1e21a86cdf1a1c88a288be655caecee', name: "content" })), h("gux-icon", { key: '34df8f3f0d589512db100f7dbffae33f1f0c9886', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '13f395f1bc88341ba85d8f4b7ac6e170d42d339c', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '903935e57e9c178e07cdb04b798dd5bf473f89b3', slot: "content" }, getSlotTextContent(this.root, 'content')))));
     }
     static get is() { return "gux-icon-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-label-info/gux-label-info.js

@@ -30,7 +30,7 @@ export class GuxLabelInfo {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (h("div", { key: 'f56fdc67d5b30e7c016c639866ae6d5f40ec471d', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: 'ded370a046fb9d44e8f52b33ba01fcc6d4d87eda' }, h("slot", { key: '2c6f1f2169b4c2ef33d44775f528bad18b0ee56f', name: "content" })), h("gux-icon", { key: 'c9a6804917af87db6b31e176bb959f4069c3cc8b', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '02ad7525239d5b8d3f8586e51e09ff1fcc9c4afd', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("div", { key: 'e05d2217932b1f9bb1472a19225808a0cabe0b5b', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: 'eb66887ffe2972faee641cccfb3f935f92bfc854', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '230b736eb28544139150b2fa3a29fad3ff4d224d' }, h("slot", { key: '23bb9fabdaca0e99f780f96ecd140b112b295340', name: "content" })), h("gux-icon", { key: '46914c27de93ccc63db4b3305c75311444aec20f', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '727cabe31dc2691201e159dc6a6877a7eb8246a6', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("div", { key: 'e0cf603e0d7c4aa87957a3de9ff7bd10af774acd', slot: "content" }, getSlotTextContent(this.root, 'content')))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -166,7 +166,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '0bbfbdb60b695dc23ece405737e8b30d01a602c9', class: {
+        return (h("div", { key: '677921c9dde412710726338267e591ad25860551', class: {
                 'gux-hidden': !this.expanded,
                 'gux-month-calendar': true
             } }, this.renderHeader(), this.renderMonths()));

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -22,7 +22,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '399c371cbf542f3bfb2e07c62fd3365bfdd918ae', role: "listitem", value: this.value }, h("div", { key: 'c8ba9f281cb4b7ece5ac84865d6b86747ed11733', class: "gux-container" }, h("button", { key: '9ad2ae86f46193a1a719dfaaf57ef407cd5b7080', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '3776855e08f42d947d1dad9c5c43ad666534560b' })))));
+        return (h(Host, { key: '81219ec153e7c466b7a2b9ebe614d691c576595c', role: "listitem", value: this.value }, h("div", { key: 'eccb4ec0999c329e1c70561930e629f362c1a064', class: "gux-container" }, h("button", { key: 'cf8e11ed5f104a44796877a19964969d5e74bbd5', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '06ac363b8ecc1d20445af10bae4fc176a48e0aa7' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: 'f583b2aa07f86a63396a76a4b21e77a22a1fbc9d', role: "list" }, h("slot", { key: '2d5f9e86f85332b8e1f6107f2fe29dc02e765840' })));
+        return (h(Host, { key: 'a547b8cb470a7954273b8bb225c1fbbc0d6068fe', role: "list" }, h("slot", { key: '184656f93c75eb43590a0db3086960e2a020d9b5' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -200,7 +200,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '5302613a82060ef4d3018cdf3756fcced9be0ee4', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'dbb99af69d5607c7b3110919c0da6ca433dd6abf', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -364,7 +364,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: '8eace892c0af670b3b4db40d92f5c15c90082f94', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '5a177a66e42577611204b82e567eaa57c71fbb9a', 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-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: '22e14d7bc908e91d683586319c21935d1062d4a0', class: "gux-sr-only" }, h("slot", { key: 'd287096bf0d0c6b686ca7f4a3aff8d183668cd73' })));
+        return (h("span", { key: '5833c3dc9a14981e711c8ad8049d9494ae334e08', class: "gux-sr-only" }, h("slot", { key: 'd2a0fa01359aff542daca760147e60821c33dfe0' })));
     }
     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

@@ -45,18 +45,18 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '203dd1bba9f383c4081176a17cf2b0b42dc9bad7', class: {
+        return (h("div", { key: 'bcae6b6301a82b51deb9a99955dc575fe2897153', class: {
                 'gux-container': true,
                 'gux-start': this.isInStartPosition(this.root),
                 'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: '2836a544324a0606be01a36e19bfb67c3939bb52', class: {
+            } }, h("button", { key: 'a3b65a43182e16b702f6541a5adfb4045751554c', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '90abc8d1be2947227a565a243f903423d694f906', class: {
+            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '5c0c4ae19ef344634f25ba6fd225042557e5187a', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '3419f2a12c570f02412473e8cf8a8000fbb5acec', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: '097d01545d5ffced13fea50f67b0c05a0c8075a6', 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

@@ -30,7 +30,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: 'bdd4c0d659f1008fa65ee9d2988a9c542b647987', role: "group" }, h("slot", { key: 'b4a966abae830574f615e90366b8357e2dbaab06', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'f9fd1a4321544d2a8dd2d8d6e34aa643761a2e1d', role: "group" }, h("slot", { key: 'a7a9f5ffa0b08b233f7910da21cc85785876cafb', 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

@@ -50,11 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: 'e24087cf3c1d74723fd7da40863a7aef6c420bd3', class: {
+        return (h("div", { key: '0312157f030ed755f64f09bb588ec4b7ec1a609b', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'd310eb4d0c6e1a91f9d97825d415cf800dd939c9', class: "gux-content" }, h("div", { key: '74d98f56d4fdcf49e65208991381f394e828b2db', class: "gux-icon" }, h("slot", { key: '91fec9fb8d2bf4a76460240a0d027d161016b6f3', name: "icon" })), h("div", { key: '1a0ae7a73d73e58f0156535f7fcd7a3e8a47517b', class: "gux-label-container" }, h("slot", { key: '15538fb4ddc20ecbeab320f3fb062c623bfe0ea2', name: "label" })), h("slot", { key: 'b20a20def42c5a651701a30f8a70ad4bf0a44192', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: '2cf731a95a45d717bcb170aa6bad40476f350294', class: "gux-content" }, h("div", { key: '14972665433efb7b7fb8f8739a94d29575d6fd1a', class: "gux-icon" }, h("slot", { key: '4e140f732601a8dbb62eaeac618d11259cb8d8b3', name: "icon" })), h("div", { key: '18dfe2fb6f116971a87c595164125865a3fcdf92', class: "gux-label-container" }, h("slot", { key: '2def29e1ff5b96ab4e53bbc7ebb07b323f3edf09', name: "label" })), h("slot", { key: '5b57eaec254d128289af716ac47f2e35014c6b57', 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: '207e4b59ecc9b56c2ecd9ab3edba4689872462d2', class: "gux-selector-cards" }, h("slot", { key: '7d3fcd1c660f78538376fbb0ef92c799b204df50' })));
+        return (h("div", { key: 'f12fd2d6bcbad89337689aab3c563406555714cc', class: "gux-selector-cards" }, h("slot", { key: '9efbb5ddc208e089cee905451965fe6f8b21f25c' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: '1ce453ad0ae38e360844f859c7c12363e6d4cc11' }, this.renderTime()));
+        return (h(Host, { key: 'b7e466d7e29d424c0e6832442fef6869277a666e' }, this.renderTime()));
     }
     static get is() { return "gux-time-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-time-zone/gux-time-zone.js

@@ -31,7 +31,7 @@ export class GuxTimeZoneBeta {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '6ccc0cce8b25630b3a1264a2d6ed37b5bd413ae5' }, this.renderZoneDisplay()));
+        return (h(Host, { key: 'bfa2803d2d49528524c0b57520349a9b233de3c8' }, this.renderZoneDisplay()));
     }
     static get is() { return "gux-time-zone-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-time-zone-picker/gux-time-zone-picker.js

@@ -149,11 +149,11 @@ export class GuxTimeZonePickerBeta {
         return (h("gux-option-group-beta", { label: this.i18n('all') }, this.timeZoneOptionElements));
     }
     render() {
-        return (h("gux-dropdown", { key: 'e7269ca7f2756dc8554b5898c2ef9a0d10def291', class: {
+        return (h("gux-dropdown", { key: '3f252d6f5deaf0500a222d1da276d5b790e0fa60', class: {
                 'has-defaults': !!this.workspaceDefault ||
                     !!this.localDefault ||
                     !!this.customDefault
-            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: 'e67ad005d7ad2979ce77604bcbe9a37af551cf3a', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.renderAllTimeZoneOptionsList())));
+            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: '015400262b25cedbb94e7af9488203edad772c7a', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.renderAllTimeZoneOptionsList())));
     }
     static get is() { return "gux-time-zone-picker-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -113,10 +113,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '5d604f035ff09b11a9988fb2cd07f64295bb5f2e', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: 'eda79ee14789a5f853a24fe5d78d79e1c603bf96', class: {
+        return (h(Host, { key: '4ab2d8a50269e0fedf663a3bc0cea69806b4a652', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '61467459d3a5c4cec41c88196476e130e23c276e', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '288d540686ffdc316efc1cfc8888a5c8c4857569', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '731059ba036aef672fad3569e36bd042d051f352', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,6 +9,7 @@ export class GuxTooltip {
     constructor() {
         this.id = randomHTMLId('gux-tooltip');
         this.forElement = undefined;
+        this.role = undefined;
         this.for = undefined;
         this.placement = 'bottom-start';
         this.accent = 'light';
@@ -31,9 +32,27 @@ export class GuxTooltip {
     componentWillLoad() {
         trackComponent(this.root, { variant: this.placement });
     }
+    componentDidLoad() {
+        if (this.baseTooltip) {
+            this.tooltipObserver = new MutationObserver(() => {
+                var _a;
+                this.role = (_a = this.baseTooltip) === null || _a === void 0 ? void 0 : _a.role;
+            });
+            this.tooltipObserver.observe(this.baseTooltip, {
+                childList: true,
+                attributes: true,
+                attributeFilter: ['role']
+            });
+        }
+    }
     connectedCallback() {
         this.updateForElement();
     }
+    disconnectedCallback() {
+        if (this.tooltipObserver) {
+            this.tooltipObserver.disconnect();
+        }
+    }
     getForElement() {
         if (this.for) {
             const forElement = findElementById(this.root, this.for);
@@ -52,7 +71,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'b5178ebf17e5693ab8db31a7f28b4fbe52bd22b9', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: 'b02dc1fdf2963b08dc9c62367dc9256527c0b93d', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: '11dbf20035dc599ab12b7ee8b511077c254f244d', slot: "content" }, h("slot", { key: '3d97868478eae5d2f8737df2f7eac3ce4e509c22', name: "content" }, h("slot", { key: 'c56094a3a632234f557e6fb571e6082e1faeb550' }))))));
+        return (h(Host, { key: 'd67714689706254bde15a07e63b63ae9fa4c50bc', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '180b9a944c2fd996a5180ae796a0e790b96e44d1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'e8fe6d5c1566e6cd3795c80dd9dc346dd22d6e8a', slot: "content" }, h("slot", { key: 'a2cd637d7324ebd756f831b73c5b8110ef3f88b1', name: "content" }, h("slot", { key: '16746b53ca338be94ead51baaab40ffccc742dbe' }))))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +146,8 @@ export class GuxTooltip {
     }
     static get states() {
         return {
-            "forElement": {}
+            "forElement": {},
+            "role": {}
         };
     }
     static get methods() {

package/dist/collection/components/beta/gux-tooltip-beta/tests/gux-tooltip.e2e.js

@@ -25,6 +25,8 @@ describe('gux-tooltip-beta', () => {
                 const tooltip = await page.find('gux-tooltip-beta');
                 const baseTooltip = await page.find('gux-tooltip-beta >>> gux-tooltip-base-beta');
                 expect(baseTooltip.className.split(' ')).not.toContain('gux-show');
+                // verify accessibility issues are not present before tooltip is active
+                await a11yCheck(page);
                 await element.hover();
                 await page.waitForChanges();
                 await a11yCheck(page);

package/dist/collection/components/beta/gux-tooltip-beta/tests/gux-tooltip.spec.js

@@ -1,6 +1,7 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxTooltip } from "../gux-tooltip";
-const components = [GuxTooltip];
+import { GuxTooltipBase } from "../../gux-tooltip-base/gux-tooltip-base";
+const components = [GuxTooltip, GuxTooltipBase];
 const language = 'en';
 describe('gux-tooltip-beta', () => {
     it('should build', async () => {

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.js

@@ -12,7 +12,7 @@ export class GuxActionToast {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: 'af136a9885999cccdbdc8690c7c02b797ca5dcd4' }, h("div", { key: '9c7299137339a879a0554755c8dc6d6b68bb221d', class: "gux-header" }, h("div", { key: '9b5b6bb50e40351bc501c9c51cc3b85f3e3d9710', class: "gux-icon" }, h("slot", { key: 'efe924bd541c04b47229797f4a2ae473dcb9309e', name: "icon" })), h("div", { key: 'b61a8cf1bf34249e2923dbd0f76526fc65cbdd45', class: "gux-title" }, h("slot", { key: 'd06a69056f2ef93fc5fae29f6029b671334db287', name: "title" }))), h("div", { key: '2e3a6ffc37a21eafe2f1b2c1bdc07150a5f88404', class: "gux-message" }, h("slot", { key: '2ccdc460690d19b5f6cba599e263cb492beab9a4', name: "message" })), h("div", { key: 'f0c9f0279cb97b0e275e055dc519396cf0d8f4e3', class: "gux-action-buttons" }, h("div", { key: '7c0c0fe61ce1326b504e51e53ef2adb117bb2bd3', class: "gux-positive-button" }, h("slot", { key: '854221d761125bb2ec95ab790da675c82901b99f', name: "positive-button" })), h("div", { key: 'a26a8e9733ebc110ce8474247deae91c9f8e855b', class: "gux-negative-button" }, h("slot", { key: '74198f3fa2448029ee7da523c3ae247a731cbe4d', name: "negative-button" })))));
+        return (h(Host, { key: '3e4c48046469469c7eab7a2a1617d1db743fe6de' }, h("div", { key: 'de7346d4d1700b527f3afce568e82da04a59614b', class: "gux-header" }, h("div", { key: '5de7650e10a7d4cb28f3c3c34314a1b47b0bc737', class: "gux-icon" }, h("slot", { key: '55a12ec1e43a23a7ecbe85aff77a5c46a1c1640c', name: "icon" })), h("div", { key: '31d523dbfa8fb7667d4cbf3eadc5ad2f1296cba0', class: "gux-title" }, h("slot", { key: '2c6b710731012fc79779fb79923fcd6bae1c8117', name: "title" }))), h("div", { key: '9e0a27452b684a0fad9a0d7213df6300b1f8ee51', class: "gux-message" }, h("slot", { key: '0a5d049ba5d380c920899a942e1637f9f8d1f1c9', name: "message" })), h("div", { key: '35b4025c43299b591a5b7a3ccf775e42962cb79b', class: "gux-action-buttons" }, h("div", { key: 'c0ead3e54a3b7eefe5c375581db5a41bcc3680c3', class: "gux-positive-button" }, h("slot", { key: '8966339c25c0e06df8516af35f73fe962242ba7d', name: "positive-button" })), h("div", { key: '2e5e0104a38357a75b654499f1b332ef92c00ae5', class: "gux-negative-button" }, h("slot", { key: '25fb1018f495019e954b013ad0e8cd22643526d6', name: "negative-button" })))));
     }
     static get is() { return "gux-action-toast-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -58,7 +58,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: '08a4fc54561065af5a7771536dd940997acf4724', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '87dfbdeba1562f79013d022fee44c22ccf92d079', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js

@@ -70,9 +70,9 @@ export class GuxAdvancedDropdownLegacy {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'b1ed0d948a717023a174fce66eb8e7ab956fda9e', expanded: this.opened, disabled: this.disabled }, h("div", { key: '7713343b259cb9055a7d01c5221ba19de782f62d', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '7451633bff5436adf1b96603e499ac92c5457176', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'b28b98cf45eb39d24d89ff7453924bb74874e87f', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'e37cd0b8b8abb85c2a3be120895c60dcb00cea82', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'c7dbe1e09bcf01c93aba4d9e050cf434e18424c0', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '6d92efdd680103ebf1be0d4518add7e826f06d91', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '4ec46eff060a1bf1f32d3679c7cd48ba95de12ae', "label-position": "screenreader" }, h("label", { key: '21d53aa47bc183e2c0858e6f983eb6dbec8fdbd5', slot: "label" }, this.i18n('searchAria')), h("input", { key: '86d847f7ef985cdc2b0a3beddad4a956c9eb16c5', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: 'ee5c16f4c77893a49fdcfee110f55f87d0d2aa10', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'd73c0142821e13a834f43ac5d554a21207e81f12', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '244aa0d713714afa58a3154516eaef22dfe06be2', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '3b958f37d8aaa0ba10c10a6ab8f7bc8b5f7270c1', class: "gux-icon-wrapper" }, h("gux-icon", { key: '22118096f927427a4bcec513a99f64b41db6e27b', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '0ee259c181476fa1d025bb1b7b806fab01e63aee', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '296623604068b59f4e3d4fdd254980a393938500', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'f43cee08b92052631e282ded496b04944c11d6b8', "label-position": "screenreader" }, h("label", { key: 'ec6d17e7015a1c6ff4accdc0fb056bfd05c90daa', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'f56f7a3f51e1250e33f209dab8ff56d9eae1857d', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: 'fe2a51e57e14bb2273ce26ab2d6b219b79382a52', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'f861237c880630e2db9539a2e6a42453571875d4' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: 'a36196b823ce3ae0d9f047c4d0fbfd3caa7b2485', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '1aa13fb4de321eb9db0a6275b8cb7736ef55d34c' }))))));
     }
     updateSelectionState() {
         this.selectionOptions = this.getSelectionOptions();

package/dist/collection/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.js

@@ -38,10 +38,10 @@ export class GuxDisclosureButtonLegacy {
         this.updateIcon();
     }
     render() {
-        return (h("div", { key: 'ffc8f32169a0a4c4728950839c51d7a2561d934d', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '94f3e64b73b606200397245a5b17702f4347ba47', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel') }, h("gux-icon", { key: '5aa898ae60e866e699ab7ac10114c46feefe179c', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '149f1d381c3cef6a2be96c120144c259b6612256', id: this.panelId, class: {
+        return (h("div", { key: 'd4cf78dc26eef57625918a02c753d8bc1f39388d', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '5de783d08ecd3d2b5a514dc527d31bfa20e89b9b', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel') }, h("gux-icon", { key: '7fe6bb8c48b76ac51a3fc2a99b8df8e0e5073538', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '272f9d2e98f365cf34e64e6e8ec370dd69ae74d3', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: 'e6f5aa81b7b9cf488aba2a4caf6e191a39b353d6', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '1969b3b2e089f04a00f85d372edc506eb225b045', name: "panel-content" }))));
     }
     static get is() { return "gux-disclosure-button-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-modal-legacy/gux-modal-legacy.js

@@ -42,10 +42,10 @@ export class GuxModalLegacy {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHTMLId();
-        return (h("div", { key: '9a16807e6e0c105a71d9a6beae23f0b6cf8562ab', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '9bffe5f595358ea8b8d2ba6da3d395b79bffb540', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { key: 'e3c64ff9a89bd4d4aa0bb9fb23f829c2ef4acb62', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '8b087f57d3d764b90e51cded53d9b664e5cdf144', class: {
+        return (h("div", { key: '8715204fccf960ca1fb74d27fe003e87f8af4ce3', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'b43fd1c8c63da830dbbf189a826bcabb3afd4356', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { key: '3ffdbf03ab11c6cb9ac7521edc26284079d1e30a', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'e1aab231363e27889e0f78f77894ae99ada050f9', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'adbb48bc1fad4234f0e537cd5ef56d13ee003081' }, h("slot", { key: 'e38a4dc040385ad162ce8a79e04c8b69dd98968a', name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: '6325a62add1685bd8ff5c0463c509f3b5630a82a' }, h("slot", { key: '7eb7a6c260f8f33a4ec63d1d5f12be16e2e35d15', name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
     }
     // When trap-focus is enabled, focusing this element
     // will immediately redirect focus back to the dismiss button at the top of the modal.

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.js

@@ -13,7 +13,7 @@ export class GuxNotificationToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '978b1d23bcd30f574551b2e58b63cccfffc097d3' }, h("div", { key: '7f5dfd3ee78527cb320bcdde8fec800f0127a5fa', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '8a0f5e9e1551804fe77405705f5c4f88d9b2c58a', name: "icon" })), h("div", { key: '97ca93fc9cdc7381c86f43b92b3628e353158886', class: "gux-content" }, h("gux-truncate", { key: 'abd6c01f9bf95b85b0f7dc21bcbd4511cbc8a85c', class: "gux-title", "max-lines": 1 }, h("slot", { key: '139d028b7826aba19a05df7894234879ef8469de', name: "title" })), h("gux-truncate", { key: '47a96015b193db99af78974cc072d21c38b86eac', class: "gux-message", "max-lines": 2 }, h("slot", { key: '7368f74d15255824fcd7cb8ea547d08a8ac808c4', name: "message" }))), h("gux-dismiss-button", { key: '21088f5d0d3bcfd8510ae85b268c2b46ad749f7a', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '42fea12c624cff99eb32eb97d0d8988af0710b7c' }, h("div", { key: '079a2d0b0520749cf037d821de2df7aa472fdb99', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'd20bffc4c8f4b0c327357ce1593c32e6f14b9745', name: "icon" })), h("div", { key: 'd673d8c93885462bae7fc8dd27d5331e587ec475', class: "gux-content" }, h("gux-truncate", { key: '4fe6dae7089867487080a991a77b45aa92217ab3', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'eff754d04bfd86d23f38a8a5b189609ef620a0d3', name: "title" })), h("gux-truncate", { key: 'ba0de748f9cd7d4db724559e8a36d4b2814315b7', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'b9e086c92cab5e12e3b41e5d3ea00af628115517', name: "message" }))), h("gux-dismiss-button", { key: '4fc79b884d9262f2965b97e8410e3cb24e234ef1', onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();