genesys-spark-components 4.127.0 → 4.128.0

package/dist/cjs/gux-toast.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const usage = require('./usage-1fadcfd1.js');
+const usage = require('./usage-c453d95e.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const logError = require('./log-error-7b9d4b57.js');
 
@@ -59,9 +59,9 @@ const GuxToast = class {
         return (index.h("gux-cta-group", { class: "gux-buttons-bar", align: "end" }, this.hasSecondaryButton && (index.h("gux-button-slot", { slot: "secondary" }, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot", { slot: "primary" }, index.h("slot", { name: "primary-button" }))));
     }
     render() {
-        return (index.h("div", { key: 'b80419a3c2d3a07248523d438b51ff8c28d1e7a0', class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { key: '62b2c3304a79a78d7c1813130a98e39cb4fcb90e', class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { key: '750e02522556888e8d2b661688b9554e470d823b', class: "gux-content" }, index.h("div", { key: '1fed074ed08765cca519608a3471ece4cb462cd8', class: "gux-message" }, index.h("gux-truncate", { key: 'addeb90005620ff7cc0119ad7423d283081ccbe7', class: "gux-message-title", "max-lines": 1 }, index.h("slot", { key: 'afc27423a6e48c2ba93bbee00579d3f6087b48df', name: "title" })), index.h("gux-truncate", { key: '34c9864c8b146c02d2073cf672fcd171abc535fe', class: "gux-message-body", "max-lines": 2 }, index.h("slot", { key: 'cc5550c66afba027852879344eba51ae2a93c4a9', name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&
+        return (index.h("div", { key: 'ce0bcc99ac3578cb3e3699cd09f41fb5749cba47', class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { key: '68204dff3bbef05163347f17a738072fb3aa7297', class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { key: '046d719d4f620e59a4de75e6be15045b59acd3dd', class: "gux-content" }, index.h("div", { key: '748c8736d3ba84d90b2aea7b67cd7ce174c64729', class: "gux-message" }, index.h("gux-truncate", { key: 'e92fe7024f0f7e265aff213c4e7313d40c1a084b', class: "gux-message-title", "max-lines": 1 }, index.h("slot", { key: '2933d8e8b3ccb95d95fc84969e20e57a86afe92a', name: "title" })), index.h("gux-truncate", { key: '6ca1eb9c458e97c20b5d8a607358c39440f1a975', class: "gux-message-body", "max-lines": 2 }, index.h("slot", { key: 'b2c5ab195271e1122144b750dcc8eeec939d2365', name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&
             this.hasPrimaryButton &&
-            this.renderActions()), index.h("gux-dismiss-button", { key: '9706f3476e02627998bc7598f80de3312ae9a831', position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+            this.renderActions()), index.h("gux-dismiss-button", { key: '1819f59f0930eb56ec8adf56684def7009ab514e', position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/cjs/gux-toggle-slider.cjs.entry.js

@@ -25,12 +25,12 @@ const GuxToggleSlider = class {
     }
     render() {
         const isError = this.errorId.length > 0;
-        return (index.h("div", { key: 'fcc4b03b5e37b793199cd0bab791f982066b1373', class: {
+        return (index.h("div", { key: '29eb50e507f58716177aa0480bfefc223b8fccf3', class: {
                 'gux-toggle-slider': true,
                 'gux-checked': this.checked,
                 'gux-disabled': this.disabled,
                 'gux-error': isError
-            }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { key: 'af82c11450a7e7189734ade81ae59154e0edd934', class: "gux-slider" }, index.h("div", { key: 'aae336d5b5fa0f8d99a93406f5963a2e2138388c', class: "gux-switch" }, !isError && (index.h("gux-icon", { key: 'eb84bc4c502bdc5a5b131637a491508b35ccbda9', "icon-name": "fa/check-solid", decorative: true }))))));
+            }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { key: '998b61b413e8d48a676889c65015802ccfb92c26', class: "gux-slider" }, index.h("div", { key: 'c5a297033b89a05773bdf98b8aa013e33a268f73', class: "gux-switch" }, !isError && (index.h("gux-icon", { key: 'ce43db109a924fb4d8697e25bb690626fbfc62de', "icon-name": "fa/check-solid", decorative: true }))))));
     }
 };
 GuxToggleSlider.style = GuxToggleSliderStyle0;

package/dist/cjs/gux-toggle.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1337610f.js');
-const usage = require('./usage-1fadcfd1.js');
+const usage = require('./usage-c453d95e.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const index$1 = require('./index-c7d87150.js');
 require('./get-closest-element-9e41d6b9.js');
@@ -91,11 +91,11 @@ const GuxToggle = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '59c1cbb11301b4a828513313a56e37f6b313a053', class: { 'gux-display-inline': this.displayInline } }, index.h("div", { key: '8eb338cc9c1891e14de3dbf69d0281ad493b3bd4', class: {
+        return (index.h(index.Host, { key: 'e21033d9ec5a32820df5f9367de62ae62cf0448d', class: { 'gux-display-inline': this.displayInline } }, index.h("div", { key: '42aa3396e58e25af3d4453d302f4824d1ee52683', class: {
                 'gux-toggle-container': true,
                 'gux-toggle-label-left': this.labelPosition === 'left',
                 'gux-disabled': this.disabled || this.loading
-            } }, index.h("div", { key: '06b06201601dc294b8caba8066946c87ec311eee', class: "gux-toggle-input", onClick: this.toggle.bind(this) }, index.h("gux-toggle-slider", { key: 'b55c3165cb0c75654ba095a055d6ee95b489ae17', checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', onKeyDown: this.onKeydown.bind(this), errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), index.h("gux-announce-beta", { key: 'f1026f9abb417dc04ef031c2c25ce80ff91fe9be', ref: el => (this.announceElement = el) })));
+            } }, index.h("div", { key: '50d57ab2410db95e2835a459bf1da7521a034899', class: "gux-toggle-input", onClick: this.toggle.bind(this) }, index.h("gux-toggle-slider", { key: '15288d9bdae9f5c17c46d03d745316ddc18ab324', checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', onKeyDown: this.onKeydown.bind(this), errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), index.h("gux-announce-beta", { key: 'a18f26a0152a7abfc46892e225870b965aa9b222', ref: el => (this.announceElement = el) })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-tooltip-base-beta_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1337610f.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-1fadcfd1.js');
+const usage = require('./usage-c453d95e.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const overflowDetection = require('./overflow-detection-cb449687.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
@@ -139,10 +139,10 @@ const GuxTooltipBase = class {
         this.disconnectForElement();
     }
     render() {
-        return (index.h(index.Host, { key: '61c4c339a02246e8a604c37d5bb5ccf59187508d', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, index.h("div", { key: '3a059ec92add601e4bb3365c468609fb58b3f649', class: {
+        return (index.h(index.Host, { key: '95b90bf66bb77f9cbd9a462484e22ef9f7a2cdb7', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, index.h("div", { key: 'cbc7feb51247b018568779e05997ebea04cf83a7', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, index.h("slot", { key: '54646e5957736cb35af2f04bbb8cbc96261f6f91', name: "content" }))));
+            }, "data-placement": this.placement }, index.h("slot", { key: 'ea6c7be9038bce011e726991186aecc8b836ea89', name: "content" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {
@@ -221,7 +221,7 @@ const GuxTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '05160c3272ef3dae358c673c1813ca5d9542fbd3', id: this.id, role: this.role }, index.h("gux-tooltip-base-beta", { key: 'f41a41784644909ec5f34ff85b5352fd9cb8a692', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, index.h("span", { key: '24a1051e75cab234935c3dfb2ee9efdda48d8a1d', slot: "content" }, index.h("slot", { key: 'f3fc6fcd014435e9c7908bb2706b170398ea54da', name: "content" }, index.h("slot", { key: 'c8a7eb5c586e81e1b1c13dd62b76356e0c579009' }))))));
+        return (index.h(index.Host, { key: '3494b9bec9083c7193b329f6adda9ff29621d563', id: this.id, role: this.role }, index.h("gux-tooltip-base-beta", { key: '88db2c80af5f51c06e7db2909e2ec0bf7c134be1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, index.h("span", { key: '5ee244741dd181396c5badede863fab95dbe0fa8', slot: "content" }, index.h("slot", { key: '12826faaa1d80ec616642de64bde8fc7a88200c8', name: "content" }, index.h("slot", { key: 'b5b557552622e8b0488fd8195b2ad7ec46636650' }))))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-tooltip-title.cjs.entry.js

@@ -129,10 +129,10 @@ const GuxTooltipTitle = class {
     }
     render() {
         return [
-            index.h("span", { key: '91dc324f5f793aa2ac1ef618c8d0ec0dc7b6aa72', class: {
+            index.h("span", { key: 'f72e446c8bc77626f953b624ba18514e72b020da', class: {
                     'gux-title-container': true,
                     'gux-icon-only': this.iconOnly
-                } }, index.h("slot", { key: '780978cc951ace4e9ff8ea80906f00013e40f953' })),
+                } }, index.h("slot", { key: '0dc85daa2c00d591085838dc9889a7aed927511b' })),
             this.renderTooltip()
         ];
     }

package/dist/cjs/gux-tooltip_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1337610f.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-1fadcfd1.js');
+const usage = require('./usage-c453d95e.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const overflowDetection = require('./overflow-detection-cb449687.js');
@@ -151,10 +151,10 @@ const GuxTooltip = class {
         this.disconnectForElement();
     }
     render() {
-        return (index.h(index.Host, { key: 'a6427e7be7b769afe4924745bfe06e7c59518a72', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { key: 'bc2e234754c28b4856470a3b752f7492aa741b7b', class: {
+        return (index.h(index.Host, { key: '04a3d0e77731166a8af670fb883866719d375c3b', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { key: 'da7d047292ad63a023014be99c58ca6082b73bc1', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, index.h("slot", { key: '927a8c25ac7c299f92cec7d5c8bbca3575746fc5', name: "content" }, index.h("slot", { key: '8785e8b670146ae383de40326a928d2524858b3f' })))));
+            }, "data-placement": this.placement }, index.h("slot", { key: 'fa7d1794cde83d266851e8342eec4d2186813cef', name: "content" }, index.h("slot", { key: '4f3ada5741f7e946db1d247e02d71b2e122469e5' })))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {
@@ -224,12 +224,12 @@ const GuxTruncate = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '9c362e7a4a93bddfef009e847312109b3e4692a9', class: {
+        return (index.h("div", { key: '0dca2c40ddc3d395335974a04999ac0a675a5834', class: {
                 'gux-truncate-multi-line': Boolean(this.maxLines)
-            } }, index.h("span", { key: '72b9752ed440f83583c97863f9211a7b231b862b', class: {
+            } }, index.h("span", { key: '04381fb28f65143eb98fde91c5b2f06e646e791e', class: {
                 'gux-overflow-hidden': this.needsTruncation(),
                 'gux-truncate-slot-container': true
-            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, index.h("slot", { key: '0b6c71d887af2396928c609c0627369a8056c089' })), this.renderTooltip()));
+            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, index.h("slot", { key: '077f91482bfa44c515fee450317723d70f5d5f16' })), this.renderTooltip()));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/{usage-1fadcfd1.js → usage-c453d95e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.127.0";
+const version = "4.128.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

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

@@ -20,6 +20,7 @@ import { findElementById } from "../../../utils/dom/find-element-by-";
  */
 export class GuxPopover {
     constructor() {
+        this.disconnect = undefined;
         this.for = undefined;
         this.position = 'bottom';
         this.displayDismissButton = undefined;
@@ -29,11 +30,12 @@ export class GuxPopover {
     }
     updateForElement() {
         this.forElement = this.getForElement();
+        this.forElement.setAttribute('aria-haspopup', 'true');
     }
     onKeyDown(event) {
         switch (event.key) {
             case 'Escape':
-                this.dismiss();
+                this.forElement.focus();
                 break;
         }
     }
@@ -55,11 +57,6 @@ export class GuxPopover {
             !clickedForElement) {
             this.dismiss();
         }
-        if (clickedForElement) {
-            this.popupElement.togglePopover();
-            this.isOpen = !this.isOpen;
-            this.runUpdatePosition();
-        }
     }
     get titleSlot() {
         return getSlot(this.root, 'title');
@@ -76,6 +73,15 @@ export class GuxPopover {
             this.logForAttributeError();
         }
     }
+    focusPopup() {
+        const autofocusElement = this.root.querySelector('[autoFocus]');
+        if (autofocusElement) {
+            autofocusElement === null || autofocusElement === void 0 ? void 0 : autofocusElement.focus();
+        }
+        else {
+            this.popupElement.focus();
+        }
+    }
     runUpdatePosition() {
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
@@ -164,9 +170,33 @@ export class GuxPopover {
             console.error(`gux-popover: invalid element supplied to 'for': "${this.for}"`);
         }
     }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.popupElement.togglePopover();
+                this.isOpen = !this.isOpen;
+                this.runUpdatePosition();
+                this.focusPopup();
+                break;
+        }
+    }
+    onMouseup() {
+        this.popupElement.togglePopover();
+        this.isOpen = !this.isOpen;
+        this.runUpdatePosition();
+    }
     connectedCallback() {
         this.updateForElement();
         trackComponent(this.root, { variant: this.position });
+        const keydownHandler = this.onKeydown.bind(this);
+        this.forElement.addEventListener('keydown', keydownHandler);
+        const mouseupHandler = this.onMouseup.bind(this);
+        this.forElement.addEventListener('mouseup', mouseupHandler);
+        this.disconnect = () => {
+            this.forElement.removeEventListener('keydown', keydownHandler);
+            this.forElement.removeEventListener('mouseup', mouseupHandler);
+        };
     }
     componentDidLoad() {
         if (!this.forElement) {
@@ -190,6 +220,7 @@ export class GuxPopover {
         if (this.cleanupUpdatePosition) {
             this.cleanupUpdatePosition();
         }
+        this.disconnect();
     }
     renderDismissButton() {
         if (this.displayDismissButton) {
@@ -197,10 +228,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: '5c0a4e04803ba62ac2fe04225f748681b56ceb2e', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'b749dcb6d627f45f152ba09cac9811f6da5b13b7', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '23f086b8e6475fdfc0d5d2539d86002d0ed5e974', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '79d7ff0a5504d1bb3008f09184b518fdfc9366d4', class: "gux-arrow-caret" })), h("div", { key: 'b0fcdbffca433d2b97018901361749c3e2c4092d', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'e11d988a199d469e941d8d17a7bb497b2e2d6fd9', name: "title" }), this.renderDismissButton()), h("div", { key: 'feaba80659bf542b2414ad7f0ac79ee76086bd07', class: "gux-popover-content" }, h("slot", { key: 'd8db74249d39796cfc760aff0a2eae9b56421632' }))));
+            }, "data-placement": true, popover: "manual", tabindex: "-1" }, h("div", { key: '247d7093a0ef96d6375aa855fcb267a5647bd35b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e3f41577d6b5569b6e6f1552ba5527186334c676', class: "gux-arrow-caret" })), h("div", { key: '9a1c885eb3add0e1141179261f9bcfd6ba16fdd9', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '8a040e914d618796d8d900d2d93435d74a7e8e4f', name: "title" }), this.renderDismissButton()), h("div", { key: '4e3343245a4f82a758696c9c647a03131b4d6b54', class: "gux-popover-content" }, h("slot", { key: 'e432bfb3cbd60905dde350c00f2e884ebf017324' }))));
     }
     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

@@ -19,6 +19,7 @@ import { findElementById } from "../../../utils/dom/find-element-by-";
  */
 export class GuxPopoverList {
     constructor() {
+        this.disconnect = undefined;
         this.for = undefined;
         this.position = 'bottom';
         this.displayDismissButton = undefined;
@@ -28,8 +29,11 @@ export class GuxPopoverList {
     onKeyDown(event) {
         switch (event.key) {
             case 'Tab':
+                this.dismiss();
+                break;
             case 'Escape':
                 this.dismiss();
+                this.forElement.focus();
                 break;
         }
     }
@@ -121,23 +125,35 @@ export class GuxPopoverList {
             void this.listElement.guxFocusFirstItem();
         });
     }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.popupElement.togglePopover();
+                this.isOpen = !this.isOpen;
+                this.runUpdatePosition();
+                this.focusFirstItemInPopupList();
+                break;
+        }
+    }
+    onMouseup() {
+        this.popupElement.togglePopover();
+        this.isOpen = !this.isOpen;
+        this.runUpdatePosition();
+    }
     connectedCallback() {
         trackComponent(this.root, { variant: this.position });
         this.listElement = this.root.querySelector('gux-list');
-        const forElement = findElementById(this.root, this.for);
-        forElement.addEventListener('keydown', (event) => {
-            this.popupElement.togglePopover();
-            this.isOpen = !this.isOpen;
-            this.runUpdatePosition();
-            if ((this.isOpen && event.key == 'Enter') || event.key == ' ') {
-                this.focusFirstItemInPopupList();
-            }
-        });
-        forElement.addEventListener('mouseup', () => {
-            this.popupElement.togglePopover();
-            this.isOpen = !this.isOpen;
-            this.runUpdatePosition();
-        });
+        this.forElement = findElementById(this.root, this.for);
+        this.forElement.setAttribute('aria-haspopup', 'true');
+        const keydownHandler = this.onKeydown.bind(this);
+        this.forElement.addEventListener('keydown', keydownHandler);
+        const mouseupHandler = this.onMouseup.bind(this);
+        this.forElement.addEventListener('mouseup', mouseupHandler);
+        this.disconnect = () => {
+            this.forElement.removeEventListener('keydown', keydownHandler);
+            this.forElement.removeEventListener('mouseup', mouseupHandler);
+        };
     }
     componentDidLoad() {
         if (this.isOpen) {
@@ -157,12 +173,13 @@ export class GuxPopoverList {
         if (this.cleanupUpdatePosition) {
             this.cleanupUpdatePosition();
         }
+        this.disconnect();
     }
     render() {
-        return (h("div", { key: '652a19f549d3996c22056d3e1a02f50db25d68f6', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'cdea9ebee6b85deab6bbcfc44ca8a9626e8ef8f2', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '7530607de76b8b9c235d499906835b40ae799b41', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '796531bcc220e95d31e6da4ce1ba8125f1a6fed4', onClick: this.dismiss.bind(this) })), h("div", { key: '7b6ad026fb1f8386ed5d63c62ab3fd50f4074f10', class: "gux-popover-content" }, h("slot", { key: 'f8e1bf1e1e35314831a64754172a5a8d770a67fc' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '6e59da2b8f942a46f41b6d57b7ea2b393d881571', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '6ded178ca872ba0fab15967d4eb2583191e2632b', onClick: this.dismiss.bind(this) })), h("div", { key: 'cb33cdb1975874d5d4cfd069357ec2129965ee06', class: "gux-popover-content" }, h("slot", { key: '3398bff040d97a76c937f259872652f869e76469' }))));
     }
     static get is() { return "gux-popover-list-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: 'f7f148eaa392a2fa5c95c504bb85991acde4bcc3', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: 'dcbaa862ef852ef5b1bb82c126ec067be260c7d2', size: this.size }, h("div", { key: '630391bbd477a213ebaf62f416178149d1fee575', slot: "heading", id: titleID }, h("slot", { key: 'f29c51c421438782479bde4c8dbfdfec067eface', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'b024408fe324c5c5af4b573ccee097ce788810ec', slot: "description" }, h("slot", { key: '7cb8d56f83dd3ccb0cbc0ddf46950d5b352d9bc1', name: "description" }))), h("div", { key: '4a54564ee2f305f92cbdcc420b5db98862da2b40', slot: "content" }, h("slot", { key: '3f8f5a4413894c27cc55fd49765c3bdeb0fbedb6', name: "content" })), h("div", { key: '9418adad5b143ff7f2d30930232e7143cb67ace6', slot: "footer" }, h("slot", { key: 'b6f6df7616348b5f4890ab41c42407bc4b105780', name: "footer" })))));
+        return (h("dialog", { key: 'f45e9ae2854719317f5ee1b2bf2181eb0d536aa8', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: 'b7b51115681e96dc4aaaafbaa6206eb66c8a5d9d', size: this.size }, h("div", { key: '6aaa9e57760ed8b2446710e57a53aa36b0f8a3ba', slot: "heading", id: titleID }, h("slot", { key: 'a3236a2bfed6ce71c3c5839887d0abdc683c2ced', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '2cb648b805ddb79e9f72a97bd79dfd060969518a', slot: "description" }, h("slot", { key: '71fd30aea182c381536a1e0815a248bacd543b9f', name: "description" }))), h("div", { key: '9b1354608b3932ac85d6915c06b1c2f34ff99a28', slot: "content" }, h("slot", { key: '8b8a329cde4dc721cc1bfecaf3e5b4398bfb96d7', name: "content" })), h("div", { key: 'cd89211e9d0b42877bb2da8adceb0817702e8df5', slot: "footer" }, h("slot", { key: '82fb9d9945c5534e93884b1048a94e29a2265476', 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: 'ce6bbaff86615d00a48661bb23b1783b5e019ddc' }, this.iconName && (h("gux-icon", { key: 'f7af9e1575bc822344ac094bef1d5a10fd0ddfa7', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: 'fa067c9326ec149f51592673e14688a78d91d0d1' }, h("slot", { key: 'b44e3a118822173be502213d82b6a95365917b41' }))));
+        return (h(this.headingTag, { key: '422419513d4d2c42940745e4dbe2658564e55410' }, this.iconName && (h("gux-icon", { key: '685cbbcb366c996672ac4c7857d302ecdedb7dae', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: '60e2822ed0a52be80884e28d5970bcde35342df2' }, h("slot", { key: '8dcb1487fe19013ae929adbe88c906aa8e58fb0d' }))));
     }
     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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { hasSlot } from "../../../utils/dom/has-slot";
 /**
@@ -24,10 +24,10 @@ export class GuxSidePanel {
         return null;
     }
     render() {
-        return (h("div", { key: '52804e75ca5299186e8278f361610f82ea72e8bf', class: {
+        return (h(Host, { key: 'c78af402e53107a0e47cb67edb69af4017a4e2ea', role: "complementary" }, h("div", { key: '1005a6ef0b1f127a877365d9396c8ad8683b23f3', class: {
                 'gux-side-panel': true,
                 [`gux-side-panel-${this.size}`]: true
-            } }, h("header", { key: 'dd6a952982e14db1c0aba338c5505cf6f2e83029' }, h("gux-dismiss-button", { key: '80a9bb2fa1328180520795125e06c660ece1d7f3', position: "inherit", onClick: this.onDismissHandler.bind(this) }), h("slot", { key: '0baa8c088c4d90c63e17f66b3edc60bf4a5720ad', name: "heading" })), this.renderDescription(), h("div", { key: '88035024dca52ab7029c0cabcc1588651d7bf41e', class: "gux-side-panel-content" }, h("slot", { key: 'de29b892996f9baca6e9dd96f5b429741da49928', name: "content" })), h("footer", { key: '180727058265a6e8828a3be73a63385f42a9e962' }, h("slot", { key: 'b95b44cbb3d4a49669c3d6a3090461f21806aac1', name: "footer" }))));
+            } }, h("header", { key: '36dc5da3534c0cbccab76d34ea8e384c98709ce0' }, h("gux-dismiss-button", { key: '6d2892fcf0e5d49a317f61da19494007cd649321', position: "inherit", onClick: this.onDismissHandler.bind(this) }), h("slot", { key: 'ab1a58418087a6bbbe688330c38da8ccc74f1675', name: "heading" })), this.renderDescription(), h("div", { key: '521fa908fd0bb1cd025ab668c3f3abc08296575c', class: "gux-side-panel-content" }, h("slot", { key: 'dab174b319e12b5d5936ab23064a040ba6b329e6', name: "content" })), h("footer", { key: '6606da19098d8ef8606dc1ea95a4caf8bbcca7c0' }, h("slot", { key: '290ad7e0dac93c0b0f863cdb92ae070193854644', name: "footer" })))));
     }
     static get is() { return "gux-side-panel-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: 'e3b90e8322cf23ee1f714ca7e3d3e96965ae1f29' }, this.renderTime()));
+        return (h(Host, { key: 'f53b01c97adc884a999d6eefa7be544b46ffc8e1' }, 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: '4fb58f6c44898a3e8559abfb7fe1ca6d8fe98d29' }, this.renderZoneDisplay()));
+        return (h(Host, { key: '9dc646c5696a865175c64e2185e12b14021d8596' }, 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

@@ -151,11 +151,11 @@ export class GuxTimeZonePickerBeta {
         return (h("gux-option-group-beta", { label: this.i18n('all') }, this.timeZoneOptionElements));
     }
     render() {
-        return (h("gux-dropdown", { key: 'cb14436dd2958bb6d9c1942103cfb8f80ffffd4d', class: {
+        return (h("gux-dropdown", { key: 'c9fb76e2d1caa7fba5ac2032e363f82ce37df58e', 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: 'c3d35afbd7043cd196ea1f11915e4f9510db2148', "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: '8ca88ed2b64854a4b3de007efcf4326b3e3e4e54', "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

@@ -132,10 +132,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '61c4c339a02246e8a604c37d5bb5ccf59187508d', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '3a059ec92add601e4bb3365c468609fb58b3f649', class: {
+        return (h(Host, { key: '95b90bf66bb77f9cbd9a462484e22ef9f7a2cdb7', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'cbc7feb51247b018568779e05997ebea04cf83a7', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '54646e5957736cb35af2f04bbb8cbc96261f6f91', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'ea6c7be9038bce011e726991186aecc8b836ea89', 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

@@ -72,7 +72,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '05160c3272ef3dae358c673c1813ca5d9542fbd3', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'f41a41784644909ec5f34ff85b5352fd9cb8a692', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '24a1051e75cab234935c3dfb2ee9efdda48d8a1d', slot: "content" }, h("slot", { key: 'f3fc6fcd014435e9c7908bb2706b170398ea54da', name: "content" }, h("slot", { key: 'c8a7eb5c586e81e1b1c13dd62b76356e0c579009' }))))));
+        return (h(Host, { key: '3494b9bec9083c7193b329f6adda9ff29621d563', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '88db2c80af5f51c06e7db2909e2ec0bf7c134be1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '5ee244741dd181396c5badede863fab95dbe0fa8', slot: "content" }, h("slot", { key: '12826faaa1d80ec616642de64bde8fc7a88200c8', name: "content" }, h("slot", { key: 'b5b557552622e8b0488fd8195b2ad7ec46636650' }))))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

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: '0180bddfa19067e03e2a87857a27aea31a9f6a8f' }, h("div", { key: '5c046bfa75b940290c65098dfb444131c0da52bc', class: "gux-header" }, h("div", { key: '6b6a42028760fe6c1733c7f0cf0348e30ba9d5bb', class: "gux-icon" }, h("slot", { key: 'a77bf654121756eeb2a1e559aa4d41f52e9033a3', name: "icon" })), h("div", { key: 'fabf04859072cd94d2e0b565f7f5623d5eb87276', class: "gux-title" }, h("slot", { key: 'ad10f9dc0dcb496deb47514b762347666b18538a', name: "title" }))), h("div", { key: '4d8fea88890be08e1bfda92f7d834c0f3a6c526b', class: "gux-message" }, h("slot", { key: 'e0d295d4dc1f66846023eb4f3137d092d7ee4670', name: "message" })), h("div", { key: '8a0fb0dcf21eaa53f17dd11af9448f7c5cb3de6d', class: "gux-action-buttons" }, h("div", { key: 'd3cf23b4c81306f7892b136fe7a278995863f91e', class: "gux-positive-button" }, h("slot", { key: '969087a593fb570a633b655577a8f533f7309d73', name: "positive-button" })), h("div", { key: '7b42d4b73f1d95e580143138886429af41ebf3af', class: "gux-negative-button" }, h("slot", { key: 'b9daa348ac3111b03d4a5247e036e6fdf7b6949a', name: "negative-button" })))));
+        return (h(Host, { key: '1f9a024e9fc7311a9d17fbc3051f9bf2ab08957f' }, h("div", { key: '12d1d8ab1554c18fb61a931ddb32f0273623474f', class: "gux-header" }, h("div", { key: 'e3941013e1fda705b9162f63ea0fa67d5117cada', class: "gux-icon" }, h("slot", { key: 'f762f1093279049d338e159c6ea51e08c1e1bf26', name: "icon" })), h("div", { key: '74240e60cc41fc5549a049bfab1973ee46b1278b', class: "gux-title" }, h("slot", { key: '1962c619bd581b82d00b8ba2f3c6fa1c690737db', name: "title" }))), h("div", { key: 'e306de45dcde9134177a891164164f6fc2447901', class: "gux-message" }, h("slot", { key: 'bfb3755509c0b3132c011a90ea6c96f18690e3b6', name: "message" })), h("div", { key: 'cf20ae80e0d9f4299ef4f39b8be946fb44029860', class: "gux-action-buttons" }, h("div", { key: '46c0363d0c4214696966cc2196c2f121c6052aa7', class: "gux-positive-button" }, h("slot", { key: 'd78dad51eba1a86386fd9f21bf3957a03f941c37', name: "positive-button" })), h("div", { key: '0e573f2ce2510d8c1d2b05d1944066b22207725f', class: "gux-negative-button" }, h("slot", { key: '37acf4eef3aec626ede337826179adb629523b00', 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: '515fbc99de357a5cd58f76fa41b0a2e347e99c0c', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '6a8caea2d867b14044e93879ec2789a6d38e38ff', 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: 'c944093eb307f6a3355f865b815b12d3de080378', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'c94b4d9436e4621bea33e06824aa6d930f13d907', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'a492105382407607813648edce5c9b6edc06b257', 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", { key: '71c0e91daf846d825fea3be742bfd0ff9042a231', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '3e1e5a223fbcc5247cceebb6c8e9cec548a04659', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '52fc09c51f9401418bf5de14f14760f2af1cd343', class: "gux-icon-wrapper" }, h("gux-icon", { key: '183dd97e8f1adaa46a6309b3e0016c4f5bef58dc', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'b111b6d8a3ea31dac3da91fd7c75e342c67f87c9', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'c15b4d84749a404b0ecb37f3a1dfc725a85cf3dd', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '4d01119df28a603467c9768b2c7925b328a5a448', "label-position": "screenreader" }, h("label", { key: '22e23e3c02f46badd679e2587face6070b031d57', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'b6952561bc2b3c3195c390cef80b8d99ffa8ae9e', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: '17c509e61c5c222d4e3c6c3a2577940de0aba65e', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'b31a7a0c8312b952dce0c996589fe0b122207a8e', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'e189f7e54d6da9f24c08ac21e2f01a4d3a574389', 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", { key: 'af2bb84da475bb26792fee81f6a1d711108800f1', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '0a84724b33ad1b42b2df4f37e33fa9b38cb3ea1e', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '9ffa6eb13e9938b5a87b36650ba3ab04d9ea0037', class: "gux-icon-wrapper" }, h("gux-icon", { key: '521ba8e4d54e97a372c9451b945d8fd4e282a2c3', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '345bc04f5e4192a11b50d053b02d7bf35528dc8c', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'feea25638719d836804ef86fe3258768f9477a27', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'e7a7fd48537b7f584cb77a3fa8baa218bba28688', "label-position": "screenreader" }, h("label", { key: '01845b3784034260a12bb389601de48dade23c5a', slot: "label" }, this.i18n('searchAria')), h("input", { key: '50a0945ca83c5e3f875ca2d6298bddbf7ff0c326', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: 'db0ad6dc0d97e4aac0c72fe39a3c004a1df56cc5', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '33129990bdb0f547cd1b3ace89189e51b5c4b66c' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '84db02a501ab6b991221c455e7d9f10284d41a46', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '9b92e1595a91dfb0527bf67680aa18c0bb1dc121' }))))));
     }
     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: '4be9b356b96e450e9ccb141ca50a93570f5e170c', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'd075920e2fab1235e2e5583acf798f148ba217cc', 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: 'b5237741f4291a2624debf00b41ceaf0ff0ed332', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'eee918f444b222b1d93af3fd1bfc18c91e2353be', id: this.panelId, class: {
+        return (h("div", { key: '0724050983915337bef8243c9c064ab8319d492e', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '5a19b488e67dcae1476ed708f21fc13614b0dba9', 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: '94643b603d8d2557a5ff17f7b06fe5de1aea5b63', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '48336c3e7fee813a1c2dfdac8a0051d0146bafa6', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '0abd8a6a557d84f372b55b3ee1f9abe81198b8db', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: 'f045c9bdf38195510c720c52592e190cddac0242', 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: '90d19ea1edfa47d33e03d5e6ebe9739e278e08ab', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '456e55fb853359662828a7250c52d6bc3c3a1a5f', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: 'dd013211811f36d7e7e0d9594f32e5bac43b0c7a', class: "gux-modal-header", id: titleID }, h("slot", { key: 'b3f9f07f7ced3177111b6756a354d4c71c75dcaa', name: "title" }))), h("gux-dismiss-button", { key: '25d6efb5adb3609d3944d701f86b2a3d771ef28e', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'c8d4c6db275b26056799ecb1356f92ee1aa8930a', class: {
+        return (h("div", { key: 'cbb7033a32fc4731d29fd53c5fbdda9841eb62bd', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'a04bb4a942a82d5510d80e19c0f0bbcbda3a2e4a', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '7187978e04360410ce75cb03992344e8608078c5', class: "gux-modal-header", id: titleID }, h("slot", { key: '62807294a0c5e6a87921768b6e8ba37c1e745902', name: "title" }))), h("gux-dismiss-button", { key: '4f9ef794e1eab16baf2ed2d24e83c2b24dbb7e7f', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'd533e1e8919ce49002e241e6c412061e8a0e9816', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '9967ae16f68f751b0b94cdbb5adf141586b34258' }, h("slot", { key: 'b87861dbd80eae5135c3c1f0d667d84058e0442e', name: "content" }))), hasFooterButtons && (h("div", { key: '830a6bd41cfc38110987e99d28703e30d7f115e3', class: "gux-button-footer" }, h("div", { key: '25629d5d9981f9171f38a2f203c483b8ab4b31b4', class: "gux-left-align-buttons" }, h("slot", { key: 'cde5e44461fdca4edd0c8e8dbfa1b148c1ecb9c8', name: "left-align-buttons" })), h("div", { key: '4c5af8e9f5db1b49927f59ea29be8cfdaa670d00', class: "gux-right-align-buttons" }, h("slot", { key: 'd9c01a24b770c7b556c73f4436a74d7e6d499f72', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: 'aba93cee1b1827c8931efa8fcef277343ee943b9' }, h("slot", { key: '74f8e6920f16eba66ffd2d7030893207410e02b0', name: "content" }))), hasFooterButtons && (h("div", { key: '8afe0581fa777708dd8daa1576797c4bc79db659', class: "gux-button-footer" }, h("div", { key: '3997fa6457bce071b70e2a3869c5dd1d2f616afd', class: "gux-left-align-buttons" }, h("slot", { key: 'c2796e0fe34c961aec79139c315f08733ccd7c79', name: "left-align-buttons" })), h("div", { key: '0d4f0e75cfe8c06f6bc81d077902de7b7d78b3c1', class: "gux-right-align-buttons" }, h("slot", { key: '82f39a85ce86c9b60931429e056b09940e11a998', 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: '31e9d1b812aea4314b9dfaa4c2a3e252e324a8c0' }, h("div", { key: 'f0fe4675274088eb834b1c946aed3527bfb77780', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'c94d0824c69f4ea5164be7a7c362af1d51d5a98a', name: "icon" })), h("div", { key: 'a93e779e920540296d3de38fbdfd904d7a7f10a1', class: "gux-content" }, h("gux-truncate", { key: 'edbaa098abd38aaa50b154b6f178b45a7371e893', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'e3c7ff5f9c3d8826d1ccaf251cb7d2e2b9283482', name: "title" })), h("gux-truncate", { key: '15dfcece149016c5d9e0b78db79cb40ac9f5240e', class: "gux-message", "max-lines": 2 }, h("slot", { key: '7a1626df4daa2ec965b0d8e9e467d07f51b20678', name: "message" }))), h("gux-dismiss-button", { key: '5be640091276fa92d671182f87c0d899e4e08221', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '5e188ce217e4cada21aa6a0cebd4b27494d6182b' }, h("div", { key: '1dcb0d42c4cf65a30549376a58a6d8ec88575107', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '7d733f62e76c33612676f95644c53b2ff582f495', name: "icon" })), h("div", { key: '6b5fd4ed61a8e91259e0455391e6def0706ffbd3', class: "gux-content" }, h("gux-truncate", { key: '81c65e9d2f5017e9b8d6c3eb74411bc7087888e0', class: "gux-title", "max-lines": 1 }, h("slot", { key: '17f3ded65b42e9d6282646fef0ef2ecc9d2f8227', name: "title" })), h("gux-truncate", { key: 'f20c82791a07925b35fcca03e754ca79d70c7c40', class: "gux-message", "max-lines": 2 }, h("slot", { key: '78f92bf23d08e089dd87071814b452e629c7052e', name: "message" }))), h("gux-dismiss-button", { key: 'b12da6be4e1aa16e322d24fba9320bbe12febd2c', onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js

@@ -71,7 +71,7 @@ export class GuxPaginationButtonsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: '35c275d1a2608b85a7141ef1dc510ab8e594743f', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '2d4c1520162d6f9bc72580d1f5ba6c7b4a5240a1', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'f0f3767a986cb7f6ce60664db50320e4a1e20b8b', accent: "ghost" }, h("button", { key: '490294626a841f56b522dcd39215805bb77a6bc4', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '96fe0d712051d6677bbd18ee7b93dd58073be3fb', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '38b5ad9d621040245e3ea1c9ce07081deb300128', accent: "ghost" }, h("button", { key: 'cc587c7c3985f18e6fb62f826f1e41a873caf4bf', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'd6f1d435bd95634171b3692bc6e1c82ad5bf995b', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: 'e09200135440513915c0961e585d800e97d48d77', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '7db272bd5f4a2ffa3c640887d828d0b682991868', accent: "ghost" }, h("button", { key: 'c73a8c9fe0fa79a3529a4d957df7a204d6e9eb60', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '09f913cf5962fc38ba10b6c12d62b351efbe8a43', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '857857ea037260e024bd5b66ce4b5fd2f9b2a497', accent: "ghost" }, h("button", { key: 'd626cca53cc515c79a1b10b4eae8e97c2703bb77', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'b7afbfb871db77f39b1a136124cf23b85dac98be', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: 'abd4479dc85d6e29c69392f016d183a1641881a7', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '3c670832d6e9950ecd939d3c04cefd13ffb8e5be', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '49d432be3eb2e5c60ed43f481444794b1a5a75ab', accent: "ghost" }, h("button", { key: '465d8406072d3ed4caa9ec8777221dd8e0fde717', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '06ea7f1d28920bc0218db53152c0a3883bab206d', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '332fd069ee566220828d19f0816099a0e467f365', accent: "ghost" }, h("button", { key: 'fcd5a8ac4b5d19a5de428129a511172df49fedfe', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'd7dc6b58158f72bf139d42c9e9652d209853575a', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '7c53ae7710942814a9d937f2efe8951a82951c88', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'd4d1240015d221191e88a9528c02fdca704bd95d', accent: "ghost" }, h("button", { key: '78c0a8c9a4518ddc0c9ad74202e7a3eeb2b4ba3d', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '0180aa302d8a7573d41c114ab27d70636ca8ff7a', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'e1b68c2ba127f9ae273b0344d4c3fbdc00d03084', accent: "ghost" }, h("button", { key: '9818369377240ea3ab1bee9ccaa045cd48afdc0d', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'e6deb4767bb3ae4b21d129a023c77abf4e6d6cba', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     static get is() { return "gux-pagination-buttons-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js

@@ -23,10 +23,10 @@ export class GuxPaginationItemCountsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: '2fcfb5a0eed431432f1fc6ba906375ad86d10658', class: "gux-pagination-item-counts-container" }, h("span", { key: '82248452c368ee1031eddabfd0edea44fa58022a', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'bdb856142d130ef4f66c11222fc2d7c20955ad24', class: "gux-pagination-item-counts-container" }, h("span", { key: '8b2fb35cd6b4dba518efa45efce46a1eebb795f1', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '38f6da2da9a4f6caeaafebbe323eed7b4e00105c' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: '26096d8772396d8fd2c30652869b0026a228a4ce' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
     }
     static get is() { return "gux-pagination-item-counts-legacy"; }
     static get originalStyleUrls() {