genesys-spark-components 4.111.5 → 4.112.0

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow.service.js

@@ -0,0 +1,70 @@
+export function overflowNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+            event.stopPropagation();
+            event.preventDefault();
+            focusNextSiblingLoop(currentElement);
+            break;
+        case 'Home':
+            event.stopPropagation();
+            event.preventDefault();
+            focusFirstSibling(currentElement);
+            break;
+        case 'End':
+            event.stopPropagation();
+            event.preventDefault();
+            focusLastSibling(currentElement);
+            break;
+    }
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.focus();
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.focus();
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    if (previousFocusableElement) {
+        void previousFocusableElement.focus();
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    if (nextFocusableElement) {
+        void nextFocusableElement.focus();
+    }
+    else {
+        focusFirstSibling(currentElement);
+    }
+}
+function getFirstFocusableElement(currentElement) {
+    let firstFocusableElement = currentElement;
+    while (firstFocusableElement.previousElementSibling !== null) {
+        firstFocusableElement = firstFocusableElement.previousElementSibling;
+    }
+    return firstFocusableElement;
+}
+function getLastFocusableElement(currentElement) {
+    let lastFocusableElement = currentElement;
+    while (lastFocusableElement.nextElementSibling !== null) {
+        lastFocusableElement = lastFocusableElement.nextElementSibling;
+    }
+    return lastFocusableElement;
+}

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: 'e0bc6441c51d12d1c5d82409309c0a57b119873a', class: "gux-calendar-beta" }, h("slot", { key: '082c6a0fde9e2c37eeb08a8584bc7e195541ae00' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: 'f9dd6b158f82afd04c1279f96e48f8b23b5ac500', class: "gux-calendar-beta" }, h("slot", { key: '4d4fdb3c7e7dae6f21ae9c1c8d6d5c15a0f8abda' }), 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: '96b385023ac2c33b01b33349d38914cdb3e6c0f2', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '88ae8d58fcca55a91d335285e71260495a8e804a', name: "primary" }), h("slot", { key: 'bf1a700d4ec8f42216c78f335937853d6cd98e59', name: "secondary" }), h("slot", { key: 'f3894780710aeaa6541f8856b19d4062bc37dce4', name: "dismiss" })));
+        return (h("div", { key: '4dd3eefd10c0b9ec4700a79c133808dd9a12d657', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'ae76a7d3ded9990c91b0da787f2a6bc8fd06854c', name: "primary" }), h("slot", { key: '3059cb1e5f5e9d6b63543968f32beeb00e851531', name: "secondary" }), h("slot", { key: '2c4362717183c21600dfbb85965214ba26670c84', 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: '844c1c8ec9d4c871aecdf1668c5f421e48d4fd0c' }, this.renderDate()));
+        return (h(Host, { key: '34a577a4ae435b5debd5f2d50b8443364b669445' }, 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: '7dc17d0204f9fabcda004ad2cd414181ba3f6170' }, this.renderDateTime()));
+        return (h(Host, { key: '4774e2ef9e07408d3687e6021cf24eb25cb9ba5f' }, 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: '12854828d63a76492b1dab9a28c51c8a2801fc37', 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: '80dfde1a4fccf8bf90c3583b3a51d2885ef36014', 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: 'e4c4c2e660cac80462fb436b5a903d319335917b' }));
+        return (h("slot", { key: '36b2592cec2fd1ac72858ebd2b3f7126be9d2fde' }));
     }
     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: 'aa3dedf40c53c691c895e818925e1c55dda1808a' }));
+        return (h("slot", { key: '53b701049b6b3af92766ee428bb48e34ea97a7a8' }));
     }
     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: 'a10f053969f6e06355ce6201a4644c60b9f6d257', class: {
+        return (h(Host, { key: '1800b2ba3ff355461ca245554972bd430275bd21', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: 'a510ed08050f3ae9f4b3e6499f7199a9c10b1bc5' })));
+            } }, h("slot", { key: 'a51e6da5a63bf167e8fed7dfff493e21c9a7b947' })));
     }
     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: 'efd15e7076eee788198c8839a636a1eb8921f3b0' }));
+        return (h("slot", { key: 'ab8e68c9891db9e8ed2186c43228a344187ee889' }));
     }
     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: '972101b460b0688fd2c178532cee9f4b022d1551' }));
+        return (h("slot", { key: '0609f7683ca92e45a2e0d2002c28e0d96640b40c' }));
     }
     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: '9d7877974b1ec769bbabc36e4e6dcb617fe71f13', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'b775e0d3421511c6ab276cd591bb29775d266595' }, h("slot", { key: '0c0a2538bd60553070dd2935432d9bd844267051', name: "content" })), h("gux-icon", { key: '13303179e2856e5e0ef17a1321e08e58aaac3be1', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'addd341ed182ec261e5d600d1bd4dc8dab351a92', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '7439c6f444c757405a2386f6e18c2d36e807f2fc', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: '8529bf15b3bfad65a31f81607c173ffc7445cd0f', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'eb9f2480775f73406dac9225072090281a3a4e59' }, h("slot", { key: '3a2ce42fa965c28b49f1dc28e9c0551d4874be8c', name: "content" })), h("gux-icon", { key: '67f296138e09629d2395232aaca01369450e23ca', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '016693d7a1ed09527171d3f20119cb6cdc125b8a', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: 'f83ba3a86c38f8e4cc7cfaee5d7cff46458a626e', 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: '0a8df28e7c2e878e06faacf935173ae36e71a7e8', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '16b5a6757748bd53eb6f8c0515ff5219daedc38e' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'd26ebf1df33c1355e3532f9bc6c04bc9fc560f82', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '3d70e832bacb7c4a1863d197c719440bc191c9b2', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: '5a21e16c4064e7226bec0923f568540fbf113eb1', name: "content" }))));
+        return (h("div", { key: 'a5cfd50dddc948a84a89406180423e1f2baf3586', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '242deb6d19f64e64436c867d9ea5cba84c0e69e3' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: '33dcf9d4c85d875532483961f2639e0c6f5b0fdc', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '439645c57b526ee7f84d67ef8423a38c46dcd12f', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'ca4ee786cba6a3cc7278ef642ff3abb8fd79494a', name: "content" }))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class GuxLink {
         return !!getClosestElement('.gux-breadcrumb-generation', this.root);
     }
     render() {
-        return (h(Host, { key: 'ff833826e421c0388207abc54ae059a5d703303c', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: '1987d0a30c61e2061882070faf0ee92078f786d3' })));
+        return (h(Host, { key: '73b70b6b28b08bdc4fbec5d6eba37adf1485199f', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: 'd7df0d43acc82097e460659345ab845f6a4277e5' })));
     }
     static get is() { return "gux-link-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,5 @@
   opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-month-calendar .gux-year-header button gux-icon {
-  inline-size: var(--gse-ui-icon-small-size);
-  block-size: var(--gse-ui-icon-small-size);
   pointer-events: none;
 }

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

@@ -153,10 +153,10 @@ export class GuxMonthCalendar {
         return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "custom/chevron-left-small-regular", "screenreader-text": this.i18n('changeYear', {
                 currentYear: parseInt(this.year),
                 changeYear: parseInt(this.year) - 1
-            }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el), onBlur: this.nextYearElementOnBlur.bind(this) }, h("gux-icon", { "icon-name": "custom/chevron-right-small-regular", "screenreader-text": this.i18n('changeYear', {
+            }), size: "small" })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el), onBlur: this.nextYearElementOnBlur.bind(this) }, h("gux-icon", { "icon-name": "custom/chevron-right-small-regular", "screenreader-text": this.i18n('changeYear', {
                 currentYear: parseInt(this.year),
                 changeYear: parseInt(this.year) + 1
-            }) }))));
+            }), size: "small" }))));
     }
     renderMonths() {
         const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
@@ -166,7 +166,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '483d249a808cbd5d6e073ba12f0650cb5597f734', class: {
+        return (h("div", { key: '84a2981890cf379e96d4b2d43d9371ea939d5806', 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: '9926fc852f8d9d32a5870cce6531d79c65886f33', role: "listitem", value: this.value }, h("div", { key: '554da394b223e1940ec31c22cc2a0f1640c4b1dc', class: "gux-container" }, h("button", { key: '7b7147ed8676d54702728769eb83bcbaf6d766dc', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '59592a31eaef4f03df031cc655209d3c570021ca' })))));
+        return (h(Host, { key: 'ad0ecf6d8957eb96eb4ab0b7934e777dd15142a1', role: "listitem", value: this.value }, h("div", { key: '81ad4c6a4cf0993cb2aa7b321eda7bb7d2d1ced9', class: "gux-container" }, h("button", { key: 'c4db6ec6902fb0d0baa62ccd7097d0ff2b4cfd53', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'bf7f8e72ffc4a57669a3eb1ff713b5a37064073f' })))));
     }
     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: 'c134a4b9abc1d870e010a86857f9933012216737', role: "list" }, h("slot", { key: '343ffdf8fd2978166a9ef2a13748534fa5aaf1a9' })));
+        return (h(Host, { key: 'd9ab73cd1531fff0d46e179303b22ccceb8926d7', role: "list" }, h("slot", { key: '3748b9606d4e258d3e0f78211df88b8cde89bfd0' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,10 +59,6 @@
 .gux-target .gux-popup-toggle:disabled {
   color: var(--gse-ui-monthPicker-calendarStates-disabledColor);
 }
-.gux-target .gux-popup-toggle gux-icon {
-  inline-size: var(--gse-ui-icon-small-size);
-  block-size: var(--gse-ui-icon-small-size);
-}
 .gux-target .gux-popup-toggle.gux-expanded {
   color: var(--gse-ui-monthPicker-calendarStates-activeColor);
 }

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

@@ -191,7 +191,7 @@ export class GuxMonthPicker {
         return (h("button", { class: {
                 'gux-popup-toggle': true,
                 'gux-expanded': this.expanded
-            }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, h("gux-icon", { "icon-name": "fa/calendar-regular", "screenreader-text": this.i18n('toggleCalendar') })));
+            }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled }, h("gux-icon", { "icon-name": "fa/calendar-regular", "screenreader-text": this.i18n('toggleCalendar'), size: "small" })));
     }
     renderTarget() {
         return (h("div", { class: "gux-target", slot: "target" }, this.renderSpinnerButtons(), this.renderCalendarToggleButton()));
@@ -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: '974641d1f4e0867788a64f41fc72a76688260f37', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'd86acaf580192ffb933f1bddd919ceb60f6c8064', 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.css

@@ -100,8 +100,6 @@
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
-  inline-size: var(--gse-ui-phoneInput-dropdown-icon-width);
-  block-size: var(--gse-ui-phoneInput-dropdown-icon-height);
   color: var(--gse-ui-phoneInput-dropdown-foregroundColor);
 }
 
@@ -141,8 +139,6 @@
 .gux-option-content gux-icon {
   position: relative;
   inset-inline-start: 4px;
-  inline-size: var(--gse-ui-phoneInput-dropdown-icon-width);
-  block-size: var(--gse-ui-phoneInput-dropdown-icon-height);
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 

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

@@ -329,7 +329,7 @@ export class GuxPhoneInput {
     }
     renderExpandIcon() {
         if (!this.disabled) {
-            return (h("gux-icon", { class: "gux-expand-icon", iconName: "custom/chevron-down-small-regular", decorative: true }));
+            return (h("gux-icon", { class: "gux-expand-icon", size: "small", iconName: "custom/chevron-down-small-regular", decorative: true }));
         }
     }
     renderCountryButton() {
@@ -341,7 +341,7 @@ export class GuxPhoneInput {
     }
     renderButtonDisplay() {
         var _a, _b;
-        return (h("div", { class: "gux-selected-option" }, this.region ? (h("gux-flag-icon-beta", { flag: (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code, "screenreader-text": this.i18n((_b = this.region) === null || _b === void 0 ? void 0 : _b.alpha2Code) })) : (h("gux-icon", { "icon-name": "fa/earth-africa-regular", "screenreader-text": this.i18n('unknownRegion') }))));
+        return (h("div", { class: "gux-selected-option" }, this.region ? (h("gux-flag-icon-beta", { flag: (_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code, "screenreader-text": this.i18n((_b = this.region) === null || _b === void 0 ? void 0 : _b.alpha2Code) })) : (h("gux-icon", { size: "small", "icon-name": "fa/earth-africa-regular", "screenreader-text": this.i18n('unknownRegion') }))));
     }
     renderInput() {
         return (h("div", { class: "gux-input", onClick: () => focusInputElement(this.inputElement) }, h("input", { id: 'tel-input', class: {
@@ -357,14 +357,14 @@ export class GuxPhoneInput {
     }
     getRegionOptions() {
         return [
-            (h("gux-option", { value: "" }, h("span", { class: "gux-option-content" }, h("gux-icon", { "icon-name": "fa/earth-africa-regular", decorative: true }), h("span", null, this.i18n('unknownRegion'), ' ', h("span", { class: "gux-country-code" }, "(+)")))))
+            (h("gux-option", { value: "" }, h("span", { class: "gux-option-content" }, h("gux-icon", { "icon-name": "fa/earth-africa-regular", decorative: true, size: "small" }), h("span", null, this.i18n('unknownRegion'), ' ', h("span", { class: "gux-country-code" }, "(+)")))))
         ].concat(this.regionObjects.map(region => (h("gux-option", { value: region.alpha2Code }, h("span", { class: "gux-option-content" }, h("gux-flag-icon-beta", { flag: region.alpha2Code }), h("span", null, region.name, ' ', h("span", { class: "gux-country-code" }, "(", region.dialCode, ")")))))));
     }
     renderPopup() {
         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: '9486015223b4b9033b10c67fce3f2178c9041912', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '7a4cf36b39c5bdd966ce1e55dbbdd53e97b53c90', 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

@@ -197,10 +197,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: '5e481cf437fbeeb2b9a504cbab1bc379dbe7fba6', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '37097ff16c78960e146808147fc29da4b0381693', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '1ef55c5205040fabe293a146b07e5a1f56468657', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4527d7f23a405d8d937c5bb5150ae7b88286b946', class: "gux-arrow-caret" })), h("div", { key: '877961881a63783b4fa19387badb63cac0701540', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '8ab06c20228f35f0925abd7f125b237ddaa2cdac', name: "title" }), this.renderDismissButton()), h("div", { key: '71eec119b566ee0093dc0f0ac4b4406d2d17ba78', class: "gux-popover-content" }, h("slot", { key: '4794c27cb2eca72bf18132ff1daae35369576a71' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: 'd351ddc5005bc742d78a3d3421be9d17e5269671', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4269fca2eaa5072b4797fbc8f7f76e637d4f425c', class: "gux-arrow-caret" })), h("div", { key: '7997ad6bc0a9ce3e5e05f21c532bd309ca71c8bf', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'd7561c283fed7d1e1412e77b9123e2184c4645d7', name: "title" }), this.renderDismissButton()), h("div", { key: '35ff91d63e2364a3a00656814bb22eaf6da3f9a1', class: "gux-popover-content" }, h("slot", { key: '48623dcb0f8bec52b3c17bf1ceb2a587f32a818b' }))));
     }
     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

@@ -159,10 +159,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: 'bba93a975439a4a6ef2472803e25f2668471dce6', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '9294234dfdacafbca88968ce1b952c6f6124ade7', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '0e516e82a5a226ceffdd703e406c3ef11394346f', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '0299fcb96c6d0fcdafe7c35b98e01e15565cde7b', onClick: this.dismiss.bind(this) })), h("div", { key: 'c7b90ce318294711b5e4204859c9a3a2303d46f8', class: "gux-popover-content" }, h("slot", { key: 'cedca527d7b66e525193ceb4035ebb4665aef4f6' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: 'eb9daf084e2a447cc22f36284e2e7d9d9c930d2c', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'ed5f74d0e04152a8be18bfa72c187ce66e3066bb', onClick: this.dismiss.bind(this) })), h("div", { key: 'f4856c1a0890bb05f680c5a039f2fbb1294b0a8b', class: "gux-popover-content" }, h("slot", { key: 'a0dd537f9acddd6939ee254385d5739019eb30ec' }))));
     }
     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

@@ -73,7 +73,7 @@ export class GuxRichTextEditorActionLink {
         }
     }
     render() {
-        return (h(Host, { key: '166f87e1bb3c3565cb3dd4e05099a83cfa23f80a' }, h("gux-button-slot", { key: '15b8d3f16c91c7d601e3859cabc7fb71871f4533', accent: "ghost", "icon-only": true }, h("button", { key: '8349fa9d8d15f1f820035d1669ef60d10829022d', id: "popover-target", class: { 'gux-is-pressed': this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: 'c98e7654129a3160adbc03b9c08c4109122fff21', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: 'd9c70c9f4ad55ebb955751d349d9242b88a16ab1', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: '156f243b70d8cf32e237ea751dd274cb7b764176', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: '819c53504c6e99da78637c9a0cdebac0c19cccb2' }, h("input", { key: '7e11f6f5c0032c99cda31355b0b8b757dccbea47', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '3f66bb54612a3cac364a8f43025bcd7f095656f7', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: '842113a08dbcc053ac64726c87fb5a2d89b259de' }, h("input", { key: '836db888c19706a4b14dc7d35eb55e902fcd45a5', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: 'aaf0d14cccb4b44bf1a7c32bad1302975244fc5b', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '8e3a45cb60f5b7d99504518ccc88f0d6a57e4d53', align: "end" }, h("gux-button", { key: 'a8893b5a2265d48e07eeb154d19b4ccebc6e7147', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '34855e70fa26628fd9f64420acb6b654bdbaf9ab', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
+        return (h(Host, { key: '657301a7faf85aa25acae1b6a16692c7bde53417' }, h("gux-button-slot", { key: '83efbe923b7c3910a17b820c3a421c5974f32227', accent: "ghost", "icon-only": true }, h("button", { key: 'b153398c55047fd061c72b5cfb64ff9ceaed37be', id: "popover-target", class: { 'gux-is-pressed': this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: 'd8f8592e6baef13c13cfca7784c255ed761f7e1d', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: '97b0362a929e8218127ad7c42b968ab69829d80b', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: 'd61f714c6b084b1b7e13aba06c78221f1b79a973', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: 'b28fa73876de72d9dbc30f2fd975290ae555aacb' }, h("input", { key: '5c0ef8e8c58203bc5615e674f6a2f590203a9bc3', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '5015f51fc85a640376a9539012fb01df0fed83f7', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: '96dece32aa2071222089eab5bd8f197a565d398b' }, h("input", { key: 'cfe957fe482c800445f8b63e9353e50150172b50', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: 'd21ac7fbcf560f5010dea5f419444ad50842c5f9', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: 'fd5e05f0e7dc46a2b7368a15b8efbe4625f6e80e', align: "end" }, h("gux-button", { key: '93d26feeaf9c4838a6c2b9ebf8fecc1e7d46f95f', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: 'e9442173d5d905de013a9e904455d682963ff263', 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

@@ -163,7 +163,7 @@ export class GuxRichTextEditorActionRichStyle {
                 : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') }))));
     }
     render() {
-        return (h("gux-popup", { key: 'f08a0a259e66577c1d0efd652ef0ade412b54963', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '982817e6cf8a9db8b3dfce776ae369027bc6aa13', 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.css

@@ -9,8 +9,4 @@ gux-button-slot {
 gux-button-slot button.gux-is-pressed {
   color: var(--gse-ui-button-ghost-active-foregroundColor);
   background-color: var(--gse-ui-button-ghost-active-backgroundColor);
-}
-gux-button-slot gux-icon {
-  inline-size: var(--gse-ui-button-icon-size);
-  block-size: var(--gse-ui-button-icon-size);
 }

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

@@ -19,7 +19,7 @@ export class GuxRichTextEditorAction {
         }
     }
     renderActionButton() {
-        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive }, "aria-pressed": this.isActive.toString() }, h("gux-icon", { "icon-name": returnActionTypeIcon(this.action), "screenreader-text": this.i18n(this.action) })), this.renderTooltip()));
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive }, "aria-pressed": this.isActive.toString() }, h("gux-icon", { "icon-name": returnActionTypeIcon(this.action), "screenreader-text": this.i18n(this.action), size: "small" })), this.renderTooltip()));
     }
     render() {
         return this.renderActionButton();

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: 'ffe8dc89c851b4d23b95039a658ce5ac6d7c19f8' }, h("div", { key: 'bf21c1a4977b2635d7f04e30be05b110de52d1b6', class: "gux-action-group-container" }, h("slot", { key: '49e7caf93ceb05b11ddddf5a64696782e2d04577' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: '0854c1dbf047acb7ee764df705e94ea0934fd6cc' }, h("div", { key: '44565eea9cef0736eb93863208d25d3ab949d2d5', class: "gux-action-group-container" }, h("slot", { key: 'fefffb53d382c325e9f426d266bc9b391638e35b' })), 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

@@ -34,10 +34,10 @@ export class GuxRichTextEditor {
         return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (h("div", { key: '1df220d4192bc1e04cd74c7283ee90421f0ce2e0', class: {
+        return (h("div", { key: '3ec3c4adf65ef5a7f5ff4ea3ac18002b28fa1009', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '8cb67dbf9f8f8eba7f48a838ad88835681100d62', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), h("slot", { key: 'ef749f768106064cf77217139f0b191a3d07f35f', name: "editor" })));
+            } }, h("div", { key: '44dacd9cf2d5686e0f10242df4c95a93cbc463d2', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), h("slot", { key: 'f3393a71c2d917f89a9b2d98aae0cb22b1f054c2', 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-style-list-item/gux-rich-style-list-item.js

@@ -28,7 +28,7 @@ export class GuxRichStyleListItem {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '4bd7d026d50812a706946d470dbb4e1ef9a6f7b8', role: "listitem" }, h("button", { key: 'ef5f0873f68c1645897c3ba0e616c018042c8561', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'c0ec924cb8797c5d154e3337ce9ab3df7fcbdd16' }))));
+        return (h(Host, { key: 'af744c66eb3866b1cf836f50b80ed6e007aa34ab', role: "listitem" }, h("button", { key: '41f5dadc863d655861ff6518502b78ce05761ff2', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '97b2e06d8f911c647c343ee79cfff9dc01697468' }))));
     }
     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

@@ -61,7 +61,7 @@ export class GuxRichTextEditorList {
         return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
     }
     render() {
-        return (h(Host, { key: '7157211c43c642991e48acb643a307180692b689', role: "list" }, this.renderFocusTarget(), h("slot", { key: '86a09fcf4cd759973b4c256356890800ecea5945', onSlotchange: () => this.setListItems() })));
+        return (h(Host, { key: 'f60bbf326d56d09966e30e65c0214dc768d1eb92', role: "list" }, this.renderFocusTarget(), h("slot", { key: 'd051268767b1dd2699dd853ac73b66d473f03262', onSlotchange: () => this.setListItems() })));
     }
     static get is() { return "gux-rich-text-editor-list"; }
     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: '45a49c75e52bbc4c7bcaf8870118fdaf50b48f25', class: "gux-sr-only" }, h("slot", { key: 'c1cc69187d4562bfde469ce092fb11bab7869c59' })));
+        return (h("span", { key: 'd6e9ea3346748552b842eec3d7372e4858d57600', class: "gux-sr-only" }, h("slot", { key: 'b71530227353d207a91aeb97e04d4134b40dc678' })));
     }
     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

@@ -48,19 +48,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: 'c8996164a4408dc94091f51e370ae642ee176f1b', class: {
+        return (h("div", { key: '261316a7f87955a042558814115ae6d1cadc4e7e', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, h("button", { key: '732bb008028e2bd3eea43b72913aa449aab750ea', class: {
+            } }, h("button", { key: '494f73e902ddeb6a7b12667ee2694b60a259fb85', 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: 'c454e906a3c90f59adbfee0639b3493540021164', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '71ed098d70c082a741a3b329ddefe8fedfbe1563', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'be804d2c015dc75e438fecf5736e311678beee44', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'db9e2f956a947dc589b8f42e2a41dc9ba718265e', 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

@@ -36,7 +36,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: '2a8ead16000faec75121dfa0d27c6f0853098d8b', role: "group" }, h("slot", { key: '7395d3bdec9be3277357227825eb20bc20f0d648', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'e3b863ec63f3ed141054510a12abc9698276cbf8', role: "group" }, h("slot", { key: 'c1455dc8f4e7d4277cb4dd224c3ab4821f6a9507', 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: '15bb201be48f8b5e0ea8130b8f571a342ec6e768', class: {
+        return (h("div", { key: '7c112a83ce91acd72642236e8c5df9245093342d', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'ee44e33a9b94c112161a1e44ea5d252d269082b6', class: "gux-content" }, h("div", { key: 'fcd3bc9d28281a9a4fa12dd0b3d0c12fa5441fa8', class: "gux-icon" }, h("slot", { key: '542a0ec6a7c218e36edab8d73fe7f1d45fec5b57', name: "icon" })), h("div", { key: 'c242c933b45b05bcdbd94c24ebb2200d4f6c0743', class: "gux-label-container" }, h("slot", { key: '873201da7e0ddeefc56bd2ea6d23e240d08473d7', name: "label" })), h("slot", { key: '953ef926caa01e09dd695232df7c49271aac855e', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: '69319f5cfd116658933e3ee79588dcec424d9b80', class: "gux-content" }, h("div", { key: '06c02cbb0f7776b5a38c12908c8580b0247a367c', class: "gux-icon" }, h("slot", { key: '554753afc15103a7d0851212e857c98d02863e58', name: "icon" })), h("div", { key: '07ca6c7d3b3ed89bc46cb11e8d02ee4d2e910822', class: "gux-label-container" }, h("slot", { key: 'a1243a3ab078ad5f47de654b12c0ddbaae8fbe6c', name: "label" })), h("slot", { key: '9a0892f589441ea448cb638c1563660837704a0d', 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: '5fa8e13dd7c5a6c681cd098d652d3804e74148ed', class: "gux-selector-cards" }, h("slot", { key: '7e7822a514bc74deb4335a779592cb380d51d7c1' })));
+        return (h("div", { key: 'cb736ddeee5adc41842e4299cdd2191af9c6df70', class: "gux-selector-cards" }, h("slot", { key: '15a16a1506809169aba8e8ff22508923ed63e048' })));
     }
     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

@@ -46,7 +46,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: 'a042d52c8c52e8b20433cd50eb16eb9ad1ca903a', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '443af3aa0cf374dff1ab2473f68b2b250d400e49', size: this.size }, h("div", { key: '7760524151fc29f97378790c663739b622fb4202', slot: "heading", id: titleID }, h("slot", { key: 'f179879278ca143a8aeec5b67c0b0b7b4e2aa039', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'e7a557c185cfb02635b85ba6f180739d7d7f0aba', slot: "description" }, h("slot", { key: '0abc48e56d6fbad1ceb6e82fdc0fdbec349ef543', name: "description" }))), h("div", { key: '84ffb0d9772db212974c5e64291bd665a8320334', slot: "content" }, h("slot", { key: '3ab18e6239389e79f7af652e20402530b7c7595b', name: "content" })), h("div", { key: 'aa9df45e4d3cd5fc05ac3fd2890f4073bfd200ce', slot: "footer" }, h("slot", { key: 'dad47d95365f2c00451bc95c23fcf55f2bca563d', name: "footer" })))));
+        return (h("dialog", { key: '7bb27f52f79ed52a97baaf930a9a9467c9affb98', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '86d0ecc779852a37a0e69145b69f82177c40eefb', size: this.size }, h("div", { key: '5cd472996ae6e3069888ccd72a67743affd4e56f', slot: "heading", id: titleID }, h("slot", { key: 'a4e989caefa755daf0d0b217ecb274cf624a171b', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '4495ebc9f3a9a76990daeb405d06ba5da2d6fadd', slot: "description" }, h("slot", { key: 'a3fe0452f074dc9ad770feb37c7ef32148215b22', name: "description" }))), h("div", { key: 'ec0fff76d556258f4662687cea7c5cafdc09b10d', slot: "content" }, h("slot", { key: '57cd1fcdf11cfbdd9c5b819f64bb7b01ffefa022', name: "content" })), h("div", { key: '20e0af2e8adc17917c4db9d4278a51fa91f927ee', slot: "footer" }, h("slot", { key: 'b2d9eeaf2fc23b2d98dc00a2e596addebd87e51a', 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

@@ -13,7 +13,7 @@ export class GuxSidePanelHeading {
         this.headingTag = `h${this.level}`;
     }
     render() {
-        return (h(this.headingTag, { key: 'ff53c59d253918dfbcd0cce3753b685848219228' }, this.iconName && (h("gux-icon", { key: '8afa45c317bc351515410454d9df2521c0c4ed2d', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: 'a8fc9bcca8822d879120ba30ce5f10b3781293b8' }, h("slot", { key: '94b3a0995967f7cd135448f5d42ba53e4b9dd6a5' }))));
+        return (h(this.headingTag, { key: '11afaac2e2d86375ca5fd349e07254c6f707a324' }, this.iconName && (h("gux-icon", { key: 'e78843ec51b91f7d76e55c442cf5241f31b68a0e', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: '8a1b1c2d5c2681670049b3063fb3ced12aafaf6a' }, h("slot", { key: 'cba8f4d6944945444a5a8ac4633fde70d2ebdc99' }))));
     }
     static get is() { return "gux-side-panel-heading"; }
     static get encapsulation() { return "shadow"; }