genesys-spark-components 4.137.2 → 4.138.0

package/dist/collection/collection-manifest.json

@@ -54,6 +54,7 @@
     "components/beta/gux-time-zone-picker/gux-time-zone-picker.js",
     "components/beta/gux-tooltip-base/gux-tooltip-base.js",
     "components/beta/gux-tooltip-beta/gux-tooltip.js",
+    "components/beta/gux-tooltip-pointer-beta/gux-tooltip-pointer.js",
     "components/legacy/gux-action-toast-legacy/gux-action-toast.js",
     "components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js",
     "components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js",

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

@@ -17,7 +17,8 @@ export class GuxTooltipBase {
             ['pointerenter', this.pointerenterHandler],
             ['pointerleave', this.pointerleaveHandler],
             ['focusin', this.focusinHandler],
-            ['focusout', this.focusoutHandler]
+            ['focusout', this.focusoutHandler],
+            ['mousemove', this.handlePointerMove.bind(this)]
         ]);
         this.id = randomHTMLId('gux-tooltip-base');
         /**
@@ -32,6 +33,7 @@ export class GuxTooltipBase {
          * Use for cases where the forElement component handles the accessibility.
          */
         this.visualOnly = false;
+        this.followMouse = false;
         /**
          * If tooltip is shown or not
          */
@@ -48,6 +50,13 @@ export class GuxTooltipBase {
     handlePointerleave() {
         this.hide();
     }
+    handlePointerMove(event) {
+        if (this.followMouse) {
+            event.preventDefault();
+            this.refElement = this.getRefElement(event.clientX, event.clientY);
+            this.runUpdatePosition();
+        }
+    }
     /*
      * Show tooltip
      */
@@ -63,14 +72,15 @@ export class GuxTooltipBase {
         this.hide();
     }
     runUpdatePosition() {
-        this.cleanupUpdatePosition = autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
+        const ref = this.followMouse && this.refElement ? this.refElement : this.forElement;
+        this.cleanupUpdatePosition = autoUpdate(ref, this.root, () => this.updatePosition(ref), {
             ancestorScroll: true,
             elementResize: true,
-            animationFrame: false,
+            animationFrame: this.followMouse,
             ancestorResize: true
         });
     }
-    updatePosition() {
+    updatePosition(ref) {
         const middleware = [
             offset(16),
             flip(),
@@ -78,7 +88,7 @@ export class GuxTooltipBase {
             hide(),
             overflowDetection()
         ];
-        void computePosition(this.forElement, this.root, {
+        void computePosition(ref, this.root, {
             placement: this.placement,
             strategy: 'fixed',
             middleware: middleware
@@ -86,7 +96,7 @@ export class GuxTooltipBase {
             var _a;
             Object.assign(this.root.style, {
                 left: `${x + this.offsetX}px`,
-                top: `${y - this.offsetY}px`,
+                top: `${y + this.offsetY}px`,
                 visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
             });
             //data-placement needed on the for e2e tests.
@@ -103,6 +113,7 @@ export class GuxTooltipBase {
     hide() {
         this.hideDelayTimeout = setTimeout(() => {
             this.isShown = false;
+            this.refElement = undefined;
             if (this.cleanupUpdatePosition) {
                 this.cleanupUpdatePosition();
             }
@@ -127,6 +138,22 @@ export class GuxTooltipBase {
         this.disconnectForElement();
         this.setForElement();
     }
+    getRefElement(cursorX, cursorY) {
+        return {
+            getBoundingClientRect() {
+                return {
+                    x: cursorX,
+                    y: cursorY,
+                    top: cursorY,
+                    left: cursorX,
+                    bottom: cursorY,
+                    right: cursorX,
+                    width: 10,
+                    height: 10
+                };
+            }
+        };
+    }
     connectedCallback() {
         this.setForElement();
     }
@@ -140,10 +167,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '64e1b8b7935a7fe487f7cfe19fbd6af4fe9eb54b', 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: 'b14355016dfeb6a3e8b6a1c32cd31188fd143d97', class: {
+        return (h(Host, { key: '4e7c0cf62fae55affefec3c26c6f09e1a7a31edd', 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: '5331c5c37ba1c7fff188e3aab855d8ed0abbd921', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '08fc4e527b11d357db025b64730f64a93d7dc599', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '70e9076b53ea55109e601bc5f6f9a8eca82ff3c8', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -311,12 +338,33 @@ export class GuxTooltipBase {
                 "attribute": "visual-only",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "followMouse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "follow-mouse",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isShown": {}
+            "isShown": {},
+            "refElement": {}
         };
     }
     static get methods() {
@@ -389,6 +437,12 @@ export class GuxTooltipBase {
                 "target": undefined,
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "mousemove",
+                "method": "handlePointerMove",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+/**
+ * @slot content - Slot for content
+ */
+export class GuxTooltipPointer {
+    constructor() {
+        this.id = randomHTMLId('gux-tooltip-pointer');
+        this.accent = 'light';
+        this.placement = 'bottom-start';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
+        this.visualOnly = false;
+    }
+    /*
+     * Show tooltip
+     */
+    async showTooltip() {
+        return await this.baseTooltip.showTooltip();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.baseTooltip.hideTooltip();
+    }
+    updateForElement() {
+        this.forElement = this.getForElement();
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.placement });
+    }
+    componentDidLoad() {
+        if (this.baseTooltip) {
+            this.tooltipObserver = new MutationObserver(() => {
+                var _a;
+                this.role = (_a = this.baseTooltip) === null || _a === void 0 ? void 0 : _a.role;
+            });
+            this.tooltipObserver.observe(this.baseTooltip, {
+                childList: true,
+                attributes: true,
+                attributeFilter: ['role']
+            });
+        }
+    }
+    connectedCallback() {
+        this.updateForElement();
+    }
+    disconnectedCallback() {
+        if (this.tooltipObserver) {
+            this.tooltipObserver.disconnect();
+        }
+    }
+    getForElement() {
+        if (this.for) {
+            const forElement = findElementById(this.root, this.for);
+            if (!forElement) {
+                this.logForAttributeError();
+            }
+            return forElement;
+        }
+        else {
+            return this.root.parentElement;
+        }
+    }
+    logForAttributeError() {
+        if (this.root.isConnected) {
+            console.error(`gux-tooltip-pointer: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'fb000951b9b468e71d44773cb2cf78f25fd1fb34', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'dfbeb8488b7e9c18c4a6a9d562bfc759bc7e7441', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el), followMouse: true }, h("span", { key: '1c339b9f6a987e8995b667e80ad1341a5b226f1d', slot: "content" }, h("slot", { key: '5cfe0123dce5e4ed2b9bacf0fc8f9f33539798e8', name: "content" }, h("slot", { key: '02e85502243c4d20b447ef4e192c1b581d8ed1e9' }))))));
+    }
+    static get is() { return "gux-tooltip-pointer-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of the element the popover should anchor to. (If not supplied the parent element is used)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "for",
+                "reflect": false
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxTooltipAccent",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "GuxTooltipAccent": {
+                            "location": "import",
+                            "path": "../gux-tooltip-beta/gux-tooltip-types",
+                            "id": "src/components/beta/gux-tooltip-beta/gux-tooltip-types.ts::GuxTooltipAccent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "visualOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "visual-only",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "forElement": {},
+            "role": {}
+        };
+    }
+    static get methods() {
+        return {
+            "showTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "updateForElement"
+            }];
+    }
+}

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: '337254312aec117cc66e2771ed28c737e2d7af25' }, h("div", { key: '24b1ab47344df468f0c6e050172e5c2f4aa57e24', class: "gux-header" }, h("div", { key: 'ce82ae50aaaf481ec954d35aeab9ad866f1e89c1', class: "gux-icon" }, h("slot", { key: 'a30a722b2c1f0ae0dc65fc465968ffa574ffdcdb', name: "icon" })), h("div", { key: '680c18deb7ebe847a0047547c50a3a67157e22f2', class: "gux-title" }, h("slot", { key: '0598882985150968d151ff83d51415a9d8ad6af7', name: "title" }))), h("div", { key: 'b450f899d266fab7bb3f6968f125c0efe36617c7', class: "gux-message" }, h("slot", { key: 'b14a9dfceab81882f66bf034c6218a3b5cf85d04', name: "message" })), h("div", { key: 'a0378081b84d7c37baf4cc67dc090bdfaddd2b98', class: "gux-action-buttons" }, h("div", { key: 'c4f8321cf28ce4f312a0c6b2e3ba3380bb0a3360', class: "gux-positive-button" }, h("slot", { key: '66f788f963628f37435e44a9dd6bae756ba28d5f', name: "positive-button" })), h("div", { key: '2243a8ff2440e59e38ef8224f7b7702db1c91e7d', class: "gux-negative-button" }, h("slot", { key: '97cf8e6bb76173b7e1d56b8fc31b5afb9759c18b', name: "negative-button" })))));
+        return (h(Host, { key: '1a8af93ebf97822103c278b6e1acf302d6fac828' }, h("div", { key: '690645f09dfbbf533a000b8e573a8eea7077eb0f', class: "gux-header" }, h("div", { key: '13d314e118929340e9f229fd4efbdd90342b7778', class: "gux-icon" }, h("slot", { key: 'dac24e0dcb852921e631e7e24ae8b283fb3dc348', name: "icon" })), h("div", { key: 'd0c423a9f94f4cc2c2a0d9e42f28c0350c6eaebe', class: "gux-title" }, h("slot", { key: '4dc1946758a1644e5a8f5f852e93205386f8dc5e', name: "title" }))), h("div", { key: '633d576934edbef111e81a4291c0586a831f8127', class: "gux-message" }, h("slot", { key: '78830fba4de476e503b0bf6774c9453d3b7f589d', name: "message" })), h("div", { key: 'ede5f36a0f0dfcfe3c57563813dcfb88754f9e1c', class: "gux-action-buttons" }, h("div", { key: '6d4c629edce80fe5bb17af72eb20569c92afb8d2', class: "gux-positive-button" }, h("slot", { key: '5d7ba5a7a8700b0258f38631f41a451f9229eea3', name: "positive-button" })), h("div", { key: 'f004a4f6eff0999ace5bd07b5613c7e848f4b0c7', class: "gux-negative-button" }, h("slot", { key: '45311073079442b62fa1580cb14cc4f0b4643cf4', 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

@@ -50,7 +50,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: '459b214df1450f1727871767af8cb12dfbcb6afa', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: 'ea20401230e49f6f334230b89aee8d99fa290784', 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

@@ -77,9 +77,9 @@ export class GuxAdvancedDropdownLegacy {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'f4059d5354d1e76054e93fb226b035e745ec51c3', expanded: this.opened, disabled: this.disabled }, h("div", { key: '3ed651aceb3c0eecaafe9553f1d7d24a6d39f63c', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '5b55314cd983ca7a3e65fc2af3e32e9b6d1e2a53', 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: '61389af1e95fbb40fab5f953c231f0ee64c0ca80', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '0d0390475d0c527778e3519dee6ded1f7a66f7b4', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '3f852d832791cc0670034cea02911b61a0451c4c', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'd31a3a64c79c232544a5fb403ad89e0cac3693b8', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '1b57b892c851a2e71d53f83f93b1f1e929d42404', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'ef8f51e0ad0d209aade37e0572b69de1858d0dbb', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'e0c9c8b17b418e7114f7fad6031815f898e6973f', "label-position": "screenreader" }, h("label", { key: 'd72d4c26b1c1d3c1bf96d05fdbda5bf5e8fd1ad8', slot: "label" }, this.i18n('searchAria')), h("input", { key: '3b59353498a7ed48f961377c4e7590206f06f973', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: '8a78df08f5d2a5b8386ba4e13b04d5d54fb26d1c', expanded: this.opened, disabled: this.disabled }, h("div", { key: '889b4d4fb3682d0182b5ba8994ee99d05506a4d3', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'e3904dd5074062c344d133a7c22fd800fd1b6ac4', 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: 'aac718eb8dad922366872cf0b8a1ef9244ec4ed8', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '335dbf1e7c953ff1bc547673ca9793c7306d92be', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'cbfd4fe3c305dbc37d1ca792a4e06d6509638c7f', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'eafeeb6ecd8240b95b70e5aa9873c6eeb89b7070', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'cdc3fbe6adfda50f3770a62becfcbbf56ef4e0fa', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '9931f00641ecb454c45782ec366534b492cab544', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '436fbd0b22817c283daeb50b2c0ee403e87972d8', "label-position": "screenreader" }, h("label", { key: '4ee75fc60f1dcb095aea3e45a8506669b0d23d5c', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'f6880d792b6003f236e4779a5329a22521d7b0af', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '287a0a31b612523947ea74efaa8314c21f58cbc1', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'a4465272f922458cc361798793c2980e22135a3c' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: 'b917071143ac6304e93a40e2182c488cd7a27cef', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '760d2632deee46edda74124407e2f0986f056169' }))))));
     }
     updateSelectionState() {
         this.selectionOptions = this.getSelectionOptions();

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

@@ -46,10 +46,10 @@ export class GuxDisclosureButtonLegacy {
         this.updateIcon();
     }
     render() {
-        return (h("div", { key: 'bef8cddef519a2cb8ec12c152afade245c76c714', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'e48597f1285fb2f53868912d0d1d04220688aff0', 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: '505d17fcb664df950b98817214455c8e0960c737', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '03fac25eea867bf43f87a06bb2098abee7f8c7ee', id: this.panelId, class: {
+        return (h("div", { key: 'dfd11315797588b49d1f799786a294842013d48d', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '164ea67f06014b3b78860e180b633bcb3f63d6d6', 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: 'a2fefab21c3de43de2c7199753a35bd68b62360e', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '362e1b3910ac360e5bc0e1a8900b82446f447f1f', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '7372dbc3ec23058ae0d27b46044a404053095906', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '453039d51dbb0e6299ade2aee243acfc0eaffab5', 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

@@ -44,10 +44,10 @@ export class GuxModalLegacy {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHTMLId();
-        return (h("div", { key: '03f3345c7976259d303e5a90cef1f90e9ed945f8', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '6d996bf71389945c20620588f63b97bae1adcf0f', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '087b55478498c89f537af3777c1beab4d903e063', class: "gux-modal-header", id: titleID }, h("slot", { key: '03421a7218bdba8a3daf898575cfda9a1e6793a7', name: "title" }))), h("gux-dismiss-button", { key: '5d9a4cf25bfca9a421782178292478f798362cc4', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '8d659e428a5f711e9a6b8c5874a37b82a492eac8', class: {
+        return (h("div", { key: '2d18a0bb73e802287f7276f624620318c58cf240', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'f9a6082c0d4472e6cbf484221ed41d287c119683', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '63ce16a375f2d5d374df0efaf65f026333f054f3', class: "gux-modal-header", id: titleID }, h("slot", { key: 'c8c78b89fd771fe39a7bbc513385ee11b7da474e', name: "title" }))), h("gux-dismiss-button", { key: '2b6e4165d02dca606879da5a6dd947dbeef8533c', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'b37f23a11378eb9ce1264bd81b79a0726d6eed10', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '162fc85dc6aa8c27136aa62c0e6b85e598c408f9' }, h("slot", { key: '3e0dd4c8dc4223b015e76e9ad242c4bfbcdc74ff', name: "content" }))), hasFooterButtons && (h("div", { key: 'd907a2c3dfe55c8433e23696b1b978f23f425b76', class: "gux-button-footer" }, h("div", { key: '46980f01b328f8bc6edc3efbbd3198ea8d086d04', class: "gux-left-align-buttons" }, h("slot", { key: '87643cd1528b294f25ec41a1e286149b094a7f9f', name: "left-align-buttons" })), h("div", { key: '293e4349fda8a877f9d084104f55a46dd7c44674', class: "gux-right-align-buttons" }, h("slot", { key: 'c7d087a32f336a97a8e8c8becdf27886f83c5739', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: '30f622b062ed43b6fef5e7e2bbf68ac56bf98730' }, h("slot", { key: 'dc09cef7c9d6ec04ea7a3f896e0e7ddf3ed5cac0', name: "content" }))), hasFooterButtons && (h("div", { key: '6f67c283914532196a52369fb1b84cd4e948f462', class: "gux-button-footer" }, h("div", { key: '3299634c7f06b9e41ee607d383df3bb1b2e7c93b', class: "gux-left-align-buttons" }, h("slot", { key: '3890a90f49ab497b9713f5e20086e5adfdb0cc9c', name: "left-align-buttons" })), h("div", { key: '101d214018e9f8da983b074d5aeaa2c81d096912', class: "gux-right-align-buttons" }, h("slot", { key: '9e353e0aad1df37cfeee2bc944285308294a44c2', 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

@@ -16,7 +16,7 @@ export class GuxNotificationToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '47a33ed4de5228de0e187987869c27b07e0d5787' }, h("div", { key: '361fb8c114bfbe51c8d16a8de214bdd723c0a6f7', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'bd3a78f5a5f05a0cf5098266766789ef8cc0a8f3', name: "icon" })), h("div", { key: 'dc19ff38c0c039b8296749f418cf6fcb06159ad9', class: "gux-content" }, h("gux-truncate", { key: 'ea408eb0806dd5f58bceeb9a7b8fbaef9e702fb4', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'c6830def6d5e01d3761f7b5a187cf5a52866a0aa', name: "title" })), h("gux-truncate", { key: '319a9a3e695163d12a869577b88a4c84afbf1713', class: "gux-message", "max-lines": 2 }, h("slot", { key: '789ff5fb32b7da6408d2ee31328e2a39d3d6bd86', name: "message" }))), h("gux-dismiss-button", { key: '2abc520e1b95ccc419209202de06265398542179', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '05fb3239ed8a7b3b97cc88b6a613cc8b2669bf6e' }, h("div", { key: 'b5c97740a392fb8bf6dd10dfc17717ba9b236c1f', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'd8d9b5bdbc05665dee31bd29244870ff07df9078', name: "icon" })), h("div", { key: '2ea8b352598f85ad7747d86b073c96202ae05423', class: "gux-content" }, h("gux-truncate", { key: '780143649c27a9a3df52ba03624923972b20c927', class: "gux-title", "max-lines": 1 }, h("slot", { key: '763979ada598277bd68461c15685570ec37f8f58', name: "title" })), h("gux-truncate", { key: 'a87f67cde3759bcc6fa673580b2e2820ab48ba94', class: "gux-message", "max-lines": 2 }, h("slot", { key: '9c1e1d712dfc9ed9527934474c66b28caf8bb471', name: "message" }))), h("gux-dismiss-button", { key: 'ac4562e6830355aa38569035621936aa7b8bbce2', 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

@@ -69,7 +69,7 @@ export class GuxPaginationButtonsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: 'd8c81c219ac05bc53adb30f145ae963fcfcc32c2', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '8e885c3c6a8faaa84848eb50224dd7480b4dccb8', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '7fcea3d2f0278a6a79f1ab2574effe6a1c2e4e7e', accent: "ghost" }, h("button", { key: '6d7d3e30c99c3b5e8cc211cc1f4c0b030251188c', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'a9ecd35be4e3ab14eddd4cebbab05f96c45dc84a', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'a51237614face62ae69ab1c834ba0bc486324d30', accent: "ghost" }, h("button", { key: '31c7817937aa6730886e8f17f63a7dca79c8921f', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'b55f173a1ac205741ae649381f89606f7589d82e', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '39e50e104d0e8c9924deaebec2d338893c8286ff', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '7c65c3c5a1e373b6d3c12dc7bb64a3cb4674b217', accent: "ghost" }, h("button", { key: '712b22788b90bb251807f95eb775cd1c1dabf358', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'bb75fa24ff0f240a57627f0faeba7f2f9182aac8', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '3335aedc8c13bc0384c4095f38355b7a9636a5d2', accent: "ghost" }, h("button", { key: '0eafffbba4c710d54e23400fb017c50f9ad4340d', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '9ed3f45ee34f10a779bc24ff9e952134d4e0c2ca', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '94e78129a0eab8031622b92ed8fe5f392a6495b0', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '5c1a04dc93ae0fd25c4f0b1121d633fe9b951b2c', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '6cbc04a2b7e1bfb448894c8895ac3232648e5fc3', accent: "ghost" }, h("button", { key: '7e05c92cd3e4fff399ce9dbbff8e6f97e4c45147', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '6f8f9d39f5124c98221b90b840557f79d1bd206a', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '36ea45dfcb84f21e0968dd47f11e56296596ade3', accent: "ghost" }, h("button", { key: 'e3f613c72ab8a52b831bd02d8467a446d72fd767', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'be79fa6701289fe96cba8dd9c50772159c56de5c', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '3152b124bf97384c1d0bc4b9412e0c112a4d6812', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '74f2c533370dab51946d1fd639382c57cfb4435c', accent: "ghost" }, h("button", { key: '10765d3f555991bde133be3fade1fba2185bb7cc', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '454302ddb2294af9922116255aa3f60eace8edf0', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'f4fc51a9e28351e111813f10b09a7aa5bc04d985', accent: "ghost" }, h("button", { key: '05e9a24f9c28995d8876ee2f76ab351a6e271830', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '718c22f69a257dfa66d7c13256d8dca985cca2d9', 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: '3969b1af65c90c8567a902566de629ffac63d0ca', class: "gux-pagination-item-counts-container" }, h("span", { key: '0bd93fccccfd9f95c077d1ae7a0088a9fc7b4022', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'adc625e79d3bc3b2cee319fd36e01a6a7b55e2f0', class: "gux-pagination-item-counts-container" }, h("span", { key: 'ae0af79204b86e5902722892101fa644a8705a18', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '7c8ab21a8206d034d482dab298f225bfb6bc1efa' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: '98a27d3f011a9766d9fb69be3b1f47bb45e7a408' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
     }
     static get is() { return "gux-pagination-item-counts-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js

@@ -19,7 +19,7 @@ export class GuxPaginationItemsPerPageLegacy {
             }) }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
     }
     render() {
-        return (h("div", { key: '454327fa8b75606eddaba6090d2761a27b7c9439', class: "gux-pagination-items-per-page-container" }, h("div", { key: '9cacb03bd2d17176a1ae60b970d600fd3c51957c', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'e345e541a007cff06b04c4cbcb8180ab4f99e097', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: 'e601a72a600861196a6ef6ccdd5f55f43d6eee03', class: "gux-pagination-items-per-page-container" }, h("div", { key: '907d9f76dc84110cad4d4e52a23b8e675ab36f0f', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'ec10de58cb9cfdbb2b75cae02a414cd8e79f924c', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {

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

@@ -69,7 +69,7 @@ export class GuxPaginationLegacy {
         this.currentPage = this.calculateCurrentPage();
     }
     render() {
-        return (h("div", { key: 'a58ffb8af89a9a703d06e4d71eedace7124ceba0', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '36447ac1277e986ddc5d8ebd63b5b45c2173a803', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '99ec98ab5d28bd4507fc71e694dbb888dc07f9c4', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '9fb7768816e0454d90373f6a01ab55569763ec1a', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '24c5f9d3d51777b64071d9ebf14ba61ad930788b', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '162dd6ade2c6aba07a3810d3ca26908c706cc630', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination-legacy"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class GuxSimpleToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: 'b022fe27d1a0c806917115667e200a58468eb474' }, h("div", { key: 'e01dd34b6461873c99e06cdfd5cba65a15ea9d67', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'e95707158b85975f307e8f45e4fa5d2cc1d2f05b', name: "icon" })), h("gux-truncate", { key: 'cf410ee970d02de03f41404e3a8877e28f07f0ea', class: "gux-message", "max-lines": 2 }, h("slot", { key: '7c0492f7df9f8fc0b45b6a9f9dec3e32f7a00da6', name: "message" })), h("gux-dismiss-button", { key: 'ff8560eb767a83c595c5a66b8898f9fd4653ef0e', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '157ec729027a3467e254db6b592f81172a462f2e' }, h("div", { key: 'dbf92076c88be8e234b25faa4e6ff582082aa38f', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '7a83c235f3a25668879fb51053b612f863ebb6ab', name: "icon" })), h("gux-truncate", { key: '1f8981a054dae732bd85f3a866d3eb04f1303a91', class: "gux-message", "max-lines": 2 }, h("slot", { key: '29b960000f1e1acf28fa75115ed7f48d719a0580', name: "message" })), h("gux-dismiss-button", { key: '023a768ce4dd6f863e53c8d9de74455de1ca152d', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js

@@ -13,7 +13,7 @@ export class GuxSwitchItem {
         }
     }
     render() {
-        return (h(Host, { key: '4a1ce4e5241f9120e9b6da06110dbdbd784c5569', class: { 'gux-selected': this.selected } }, h("button", { key: 'e6bd6a36882d873813cdcb3f038443b5ecc28df6', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: 'f96b1f1c3078030a2ef6c850376dc036cffcf25c' }))));
+        return (h(Host, { key: '427c0acdb3ea194da69f2e0f3734756dc8d25b31', class: { 'gux-selected': this.selected } }, h("button", { key: '20e6b544fc6b8debdaff1fce9fd0182401e4e0e7', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: 'e06695181ca1640f0abc4ec29bd2a19ceffb5a34' }))));
     }
     static get is() { return "gux-switch-item"; }
     static get originalStyleUrls() {

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

@@ -30,7 +30,7 @@ export class GuxSwitch {
         });
     }
     render() {
-        return (h(Host, { key: 'd2608a24a8392e1a7e2cbbf58f84143dfd3e2378', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'b40570f18b9b91311fb9399538b2ff28c85a8e05', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'b6e6abc91f2e90ba0951b8172abb7593706a1fbb', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '6c670755228b8e27a10572ccf2c6e93b3d2ef376', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-switch-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -49,20 +49,20 @@ export class GuxAccordionSection {
         this.hasIconSlot = !!this.root.querySelector('[slot="icon"]');
     }
     render() {
-        return (h("section", { key: 'd74bb7f49c3f8ac0fb931304f83d2d8d1838dbfe', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'b04ad7633ec4be364bed7af485e91bb36fa7412c', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '1102cea708fb4548ffff6b73fd5b58e17b28fc8e', class: {
+        return (h("section", { key: 'ce5c3ef6c5448adf33050a6687089fd607b97df7', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'e662a0706a4abf91100b9ea1a3a6a5f8805021bd', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'f946ebdff40de428bbafef3b668ee515bba8afa0', class: {
                 'gux-header': true,
                 'gux-reverse-headings': this.reverseHeadings
-            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: 'd53dabe0c1df96cb3f9876a66f1be6005fe8379c', name: "icon" }), h("div", { key: '6d145ce1dfa650476f3ff44afd47bd074619c29c', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: '5960cf6f0c5165d5c455d1d1ca6aa821cf9399ad', name: "icon" }), h("div", { key: 'b9cfa0077b93654ff2b06a3830f4f3aa46dd9214', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: 'ea11e0fa8331421c639b2a0aaeb7935fd7543131', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '170f202b3b8eae037c0ab99cfcdf8d765e2ae257', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '0b7a1648b9332ed9b106f495c3abfa9cee3f2bc3', class: {
+            } }, h("slot", { key: '327f8c42f2e2794aa82eaccf6fbb0e1ebd04038a', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: 'cf24272a420fa450f6c8242dd5788eac6587330f', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'cd9960bb642cc498fa6da71a3e5a3ce1c7ca0fdb', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '150517ea773647f93fe9cd277c499d719a374245', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: '580444ec143bf76324dc24cb91a26a2d2204792d', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: 'c847512d1d91ff560ec29e6ce9b50e17338a245b', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: 'f4af00d7986a782818fb529ae9ac81fedbc45f39', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
                 'gux-content': true,
                 'gux-expanded': this.open,
                 'gux-text-content-layout': this.contentLayout === 'text'
-            } }, h("slot", { key: 'ce97c9adc5006041d0a10c100e70a93a496d4156', name: "content" }))));
+            } }, h("slot", { key: '172b7ea909f11aca0e750b947b529cdf3aaab03d', name: "content" }))));
     }
     static get is() { return "gux-accordion-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-accordion/gux-accordion.js

@@ -36,7 +36,7 @@ export class GuxAccordion {
         }
     }
     render() {
-        return (h("slot", { key: '9801714d16ec945beb1e8b281c70256a0fdd750d' }));
+        return (h("slot", { key: '54960a3042d80ad89763aeb11de0a4d24d31c601' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }