genesys-spark-components 4.153.1 → 4.154.0

package/dist/collection/components/beta/gux-stepper/gux-step/gux-step.js

@@ -0,0 +1,185 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../utils/tracking/usage";
+/**
+ * @slot title - Slot for gux-step-title element.
+ * @slot helper - Optional slot for help message.
+ */
+export class GuxStep {
+    constructor() {
+        this.status = 'incomplete';
+        this.disabled = false;
+        this.active = false;
+    }
+    onClick() {
+        if (!this.active && !this.disabled) {
+            this.internalactivatestep.emit(this.stepId);
+        }
+    }
+    async guxSetActive(active) {
+        this.active = active;
+    }
+    componentWillLoad() {
+        trackComponent(this.root);
+    }
+    getStatusIcon(status) {
+        switch (status) {
+            case 'incomplete':
+                return 'fa/circle-dashed-regular';
+            case 'completed':
+                return 'fa/circle-check-solid';
+            case 'error':
+                return 'fa/hexagon-exclamation-solid';
+            default:
+                return 'fa/circle-dashed-regular';
+        }
+    }
+    render() {
+        return (h("div", { key: '138bd81c011392e0b69f478b12056c0720bed45c', class: {
+                'gux-stepper': true,
+                [`gux-step-${this.status}`]: true,
+                'gux-disabled': this.disabled,
+                'gux-active': this.active
+            }, "aria-current": this.active.toString(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { key: 'be271cf4a3ac8162f6395e57e8a318e35b316af2', size: "small", "icon-name": this.active
+                ? 'fa/circle-half-stroke-regular'
+                : this.getStatusIcon(this.status), decorative: true }), h("div", { key: 'e756b08441febaa061e3a42bc5ea44aba03a5823', class: "gux-step-information" }, h("slot", { key: 'd108baaf0263d9b89b9132726bcc2b2733d0d8e5', name: "title" }), h("gux-truncate", { key: '73fea785882b6ad73c56d2b37c64ef6536130897', maxLines: 2 }, h("slot", { key: '571d98d8af9c7313713c132f056e3e72410e0b00', name: "helper" })))));
+    }
+    static get is() { return "gux-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-step.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxStepStatus",
+                    "resolved": "\"completed\" | \"error\" | \"incomplete\"",
+                    "references": {
+                        "GuxStepStatus": {
+                            "location": "import",
+                            "path": "../gux-stepper.types",
+                            "id": "src/components/beta/gux-stepper/gux-stepper.types.ts::GuxStepStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "'incomplete'"
+            },
+            "stepId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step id for the step"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "internalactivatestep",
+                "name": "internalactivatestep",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "guxSetActive": {
+                "complexType": {
+                    "signature": "(active: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "active",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "internalactivestepchange",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/beta/gux-stepper/gux-stepper.css

@@ -0,0 +1,55 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+:host .gux-stepper {
+  display: flex;
+  block-size: 100%;
+}
+:host .gux-stepper.gux-stepper-horizontal {
+  flex-direction: row;
+  --stepper-min-inline-size: var(--gse-ui-stepper-step-horizontal-minWidth);
+  --step-gap: var(--gse-ui-stepper-step-gap);
+  --stepper-padding-block: var(--gse-ui-stepper-step-horizontal-gap) 0;
+  --stepper-border-block-start-incomplete: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-incompleted-foregroundColor) solid;
+  --stepper-border-block-start-completed: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-icon-completed-selectedForegroundColor) solid;
+  --stepper-border-block-start-error: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-error-foregroundColor) solid;
+  --stepper-border-block-start-active: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-active-foregroundColor) solid;
+}
+:host .gux-stepper.gux-stepper-vertical {
+  flex-direction: column;
+  --step-gap: var(--gse-ui-stepper-step-vertical-gap);
+  --stepper-min-block-size: var(--gse-ui-stepper-step-vertical-minHeight);
+  --stepper-padding-inline: var(--gse-ui-stepper-step-vertical-gap) 0;
+  --stepper-border-inline-start-incomplete: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-incompleted-foregroundColor) solid;
+  --stepper-border-inline-start-completed: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-icon-completed-selectedForegroundColor) solid;
+  --stepper-border-inline-start-error: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-error-foregroundColor) solid;
+  --stepper-border-inline-start-active: var(
+      --gse-ui-stepper-bar-horizontal-height
+    )
+    var(--gse-ui-stepper-bar-active-foregroundColor) solid;
+  --stepper-step-body-margin: var(
+    --gse-ui-stepper-step-vertical-body-marginTop
+  );
+}

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

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+/**
+ * @slot - for gux-step elements
+ */
+export class GuxStepper {
+    constructor() {
+        /**
+         *  Specifies horizontal or vertical orientation of steps.
+         */
+        this.orientation = 'horizontal';
+        this.disabled = false;
+        this.stepList = [];
+    }
+    onInternalActiveStepChange(event) {
+        event.stopPropagation();
+        const stepId = event === null || event === void 0 ? void 0 : event.detail;
+        this.activateStep(stepId, this.stepList);
+    }
+    watchActiveStep(newStepId) {
+        this.activateStep(newStepId, this.stepList);
+        this.guxactivestepchange.emit(newStepId);
+    }
+    componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.activateStep(this.activeStepId, this.stepList);
+        if (this.activeStepId) {
+            this.guxactivestepchange.emit(this.activeStepId);
+        }
+    }
+    activateStep(stepId, stepList) {
+        if (stepId) {
+            this.activeStepId = stepId;
+        }
+        stepList === null || stepList === void 0 ? void 0 : stepList.forEach(step => void step.guxSetActive(step.stepId === this.activeStepId));
+    }
+    onSlotChange() {
+        const slot = this.root.shadowRoot.querySelector('slot');
+        this.stepList = slot.assignedElements();
+    }
+    render() {
+        return (h("div", { key: 'e47f240d69e16893425a93471aa31c1cb3195285', class: {
+                'gux-stepper': true,
+                [`gux-stepper-${this.orientation}`]: true
+            } }, h("slot", { key: '11e714afac97055cc38a7f9f8f606045d64ad962', onSlotchange: this.onSlotChange.bind(this) })));
+    }
+    static get is() { return "gux-stepper-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxStepperOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "GuxStepperOrientation": {
+                            "location": "import",
+                            "path": "./gux-stepper.types",
+                            "id": "src/components/beta/gux-stepper/gux-stepper.types.ts::GuxStepperOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies horizontal or vertical orientation of steps."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "activeStepId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "stepId of the currently active step."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-step-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stepList": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxactivestepchange",
+                "name": "guxactivestepchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStepId",
+                "methodName": "watchActiveStep"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "internalactivatestep",
+                "method": "onInternalActiveStepChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/beta/gux-stepper/gux-stepper.types.js

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

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

@@ -43,7 +43,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: '2a9c1458c092543436ad93329af035318e1603f6' }, this.renderTime()));
+        return (h(Host, { key: '5d883f6ca87976508bae01d8ba1e24b01512de39' }, 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

@@ -25,7 +25,7 @@ export class GuxTimeZoneBeta {
         this.i18n = await buildI18nForComponent(this.root, translationResources, 'gux-time-zone-picker');
     }
     render() {
-        return (h(Host, { key: '14713114b34655e4e23c8ef552df7edd5f0c65a4' }, this.renderZoneDisplay()));
+        return (h(Host, { key: '305b2895b6e1a43dc0f9e6b9684777b76af07c29' }, 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

@@ -143,11 +143,11 @@ export class GuxTimeZonePickerBeta {
         return (h("gux-option-group-beta", { label: this.i18n('all') }, this.timeZoneOptionElements));
     }
     render() {
-        return (h("gux-dropdown", { key: '8a65b11f06a8db17793321e05242e60a47534433', class: {
+        return (h("gux-dropdown", { key: '5678c0115e471da7d88dfe17a706e41731f2ed62', 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: '8bd6a6825e0d50b49e3d6b32acb89fe645de9ea0', "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: 'bce0d5e03122db54277328cce178149c4481d2ff', "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

@@ -170,10 +170,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: 'e4af4855cbfc584aca2936f15588aa403f4f4c6b', 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: 'c7e1aedffe39b49700cb2f06e660cc222632fef9', class: {
+        return (h(Host, { key: 'e9b989b05b3f3e40d6340fc3df779eab33f84806', 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: 'f07449d7e6a7a3ebb47da13396a7f1de814974ab', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '0a682c31b0b57a6556e65a269f7646ad25b258f1', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '0ac529ac55fbef7302c907404283939651abbba1', 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

@@ -76,7 +76,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '50151fd382b63c55c2b424dec466f987d04ac916', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '0378c9890690a342661bc89f501ad90952ec6250', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '12ca9a8bd32c5346dbd56b7885d5770f2c7fb699', slot: "content" }, h("slot", { key: '2cfd4dcb8a7a22783d097aea03d299b470bb904c', name: "content" }, h("slot", { key: '01fc9311d1a9f916d5acb12b7958708ced498242' }))))));
+        return (h(Host, { key: 'd0b2e3181a2588558f7ec6e6dce60db9f4ba7011', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'a43ed8e1a405842c2a0a18e7c376d8651aeb581d', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '4d6464a3bbc979aac5149e41e44925e071aed157', slot: "content" }, h("slot", { key: 'be4cefbcf70e6e0ba729bd0083ec4f55f5268d3a', name: "content" }, h("slot", { key: '9faabb31c6ba49e5f4162b8f2e4c93568ee08c08' }))))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class GuxTooltipPointer {
         }
     }
     render() {
-        return (h(Host, { key: 'c86496d311a4534afaaa6cfda427a88166031784', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'da31182737a8e4eb0d706d5ef19c623d98e8da7a', 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: '2b59d473043f3b4a1aec814b0514a6eb46798d9c', slot: "content" }, h("slot", { key: '8cf5c44bb75c3ad6c067cfcc63a7c690f54e5003', name: "content" }, h("slot", { key: 'df3bbae316eaa88cce8f2a129c026fa3d4f6090d' }))))));
+        return (h(Host, { key: '63644551b967d0ac9845a6666f59a811239d0237', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '362c5ff0ed2605b11d75cef9d9603e63bf0f600f', 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: '7710ecc8942e0c50370395f24d2456b8e34a4c28', slot: "content" }, h("slot", { key: '238564d49e4436d6631cbe3850a5b196e99c6641', name: "content" }, h("slot", { key: '0d87d1a053c7698ca323e84b305339673991a08f' }))))));
     }
     static get is() { return "gux-tooltip-pointer-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: '5d7be20ea53282aef79c15e42517b144b0cbfd5b' }, h("div", { key: 'fbb672040f9b00139370de77842f763d7c444d82', class: "gux-header" }, h("div", { key: '46df3ad076b750f44376e487d233d7be2ef14b01', class: "gux-icon" }, h("slot", { key: 'dc0730150a9af5ad75aad9db5d33bc909c714047', name: "icon" })), h("div", { key: 'd1f9a0c574c16e676eb92645c9e51b597edd886c', class: "gux-title" }, h("slot", { key: '9372dabc098635cc19ad656311f30c62ba1a5565', name: "title" }))), h("div", { key: 'd2ae69071c50cce8e798935738921287a2facd93', class: "gux-message" }, h("slot", { key: 'ab78c36d967882fb610a218578b5e0210ad1f653', name: "message" })), h("div", { key: '60a7954ddd8e6a8df9e7f33b9756cd17a1907e50', class: "gux-action-buttons" }, h("div", { key: 'a046473821a2859c475988b28a20cff06b46d529', class: "gux-positive-button" }, h("slot", { key: '6a1f75aab4d30d5e55e5b9a0a4a5b3d2af879fd1', name: "positive-button" })), h("div", { key: 'd0c0656c38ccaf912c339a232064e01568b53dc5', class: "gux-negative-button" }, h("slot", { key: '82410c00de820177bffa6e7e3ac510792a4e7dd6', name: "negative-button" })))));
+        return (h(Host, { key: '1506992246aa83217b6d73cfdd0e8c85631e8278' }, h("div", { key: 'e51d40ec1cc3650da7a8c56b44886e19af8f5c82', class: "gux-header" }, h("div", { key: 'b82beceef04d6c3826865501295278cdd42eb59b', class: "gux-icon" }, h("slot", { key: '113bdb46f8e908f2ba692c61cbd004bd1dbcd68e', name: "icon" })), h("div", { key: 'd82f9009a6dc984f4b510f2afff51baacc7ad262', class: "gux-title" }, h("slot", { key: '572c9821793787350bf4794cdafa52578178e873', name: "title" }))), h("div", { key: 'bb9fdfeb5cc2c5e0b6ce799ae5c73f44e0377e99', class: "gux-message" }, h("slot", { key: '4b5224ff6c9b8d9d89599fb3844764caa02977a5', name: "message" })), h("div", { key: 'cb928aaca6ee3b28daef8650359d9fe081e53a2e', class: "gux-action-buttons" }, h("div", { key: '3031f0c0b5111bac18d42cd65c4086a26838fc15', class: "gux-positive-button" }, h("slot", { key: 'dde475930730886bea30537ace45997f091ca576', name: "positive-button" })), h("div", { key: '99c2f76f71099fce3a21e40fc51f920305d2a1aa', class: "gux-negative-button" }, h("slot", { key: '9ab48c1cbc8c92087b7427aedba720cd60eb2073', 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: '0fccd2988e5b9aabb95e0c493e5909a2a8966776', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: 'f725c7472c496316e8d7bf04a94dda49a1ae5c0f', 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: '4947b997e0c4cf2fa0697bb6b5e76bcad59fe506', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'a506bbe771787907741b05e2ffc45d64f5f61d58', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '75b662805ce1aabb518616093391977c1bb04cb8', 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: 'a355b8d95cebc494db5f98a460b2cf22ccd67339', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: 'a0984e104432d64562835f890eeba99d3abb0de0', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '02e3459995c75e94512eb4dc2f2ad430a42f4176', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'bd38fbe5026b2b74a8792723a2e1b1860ebf3d4d', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '25444cf37c66399a1e78e4e97a030486cedf0a09', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '74417ddcaf9a88996d3525701474235041f8727b', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'f4d02316cb59dc8431d30c56cfee8141d6e16bea', "label-position": "screenreader" }, h("label", { key: '901ffe3d5f11a5c464337d12db7d5ef653c41956', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'fce20548f41e15d50da1a7e7309a5573920cb493', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: 'f35ff963ea0936273394396e3433763ab1133aeb', expanded: this.opened, disabled: this.disabled }, h("div", { key: '1e34ff4b82be18a74ffd1f37233012e43f7fc18f', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'd49396581273df932ad86c71cc69d4ece2de0f5a', 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: '0f56eb0c5b7939573073b35aef386399e4c05bf9', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '6a93a48248890c16faf8a570786547d312f3118c', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '876190acca853f1a7e1c01c1a4776c3f79096a61', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'a8003e1eeebcc46fe533067a172a229518298326', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'eb4a9ba587e2c8495eaf8606cd1f9fbfc82b8a62', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'c189b3f246e2e28ce4c0f44102e05b1deecdb4fa', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '249a443171cfa09a43f5a1fec2866fb96dba28dd', "label-position": "screenreader" }, h("label", { key: '270c3b22e776955348e945596f879ebaa71bd17f', slot: "label" }, this.i18n('searchAria')), h("input", { key: '0ec79593819d6196ffe1a4edf8fb0a583101d097', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '05ac66751074363457e06f934dbcb19056fbec98', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '7cd11640cd374f0f9ee2c548ea479a7495c94e68' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '42703d008e5454a339e46aa2c46c8306133f8f67', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'efd0d1d6d48d81da4ef16acf1ff29c6bbb2d24be' }))))));
     }
     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: '3ed65b991af302bfe7d7a34f24655af18858441b', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '4f6715e8c5bbb054d8c9bbbcdb578354cd4b6003', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: '375bc852941b001bdb3943920f89624dd33562e9', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '50b0d062f3b74e7ff4b1c9dcc4ae33eee70d2d70', id: this.panelId, class: {
+        return (h("div", { key: '747050bec6ca0ca70b51fe1f8efb1950bb4067e7', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '9777b416941be9663138cc389a511140b9b5029b', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: 'ed8712e407c36294c3fccc057276bc798f56c1fd', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '08749b4054704a5b117d5441f521a6b76e2e5ba7', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: 'd5d8b96a5320a5059417fd63d88c6c94288a250d', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '5537e7e7ec37df16faff2c47ba1d69894b892812', 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: '031ff7a58553125d01cf7fd6f42c5be903149b5c', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '123628751d97390036422179ca73d2dba021d9a8', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: 'fdb3c7c38ea79a0069797f0d3482a86256bb4676', class: "gux-modal-header", id: titleID }, h("slot", { key: '95186647f351f4dbc6a4a2638ed8b81ebc929235', name: "title" }))), h("gux-dismiss-button", { key: 'a45d8854a38ea724dfa5986d40f40c2aab68c1e2', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '295de0752cf87d420d37a8d510cf7b8644ae7d83', class: {
+        return (h("div", { key: 'eb19b6f4d5e706e5f631af65788790b4b6a28988', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'e87022164421cddbfe8b27a38b8e239e14033b23', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: 'b5cd2c9a126417ef21c94e860643f66d5dcc87e9', class: "gux-modal-header", id: titleID }, h("slot", { key: '770edea87c19561922dd3f8431c091e67712ebf1', name: "title" }))), h("gux-dismiss-button", { key: '3a976273e3565189fc9c23a28d86d77da6782172', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '63f5ff17b14028cf92dcd8abad21ba8c44909d86', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'ac0fb8ebd4a6d063bc1186ccbbf3919468330dc4' }, h("slot", { key: '2ae6de8a8b5375034b79b21d6fbfc84127888c66', name: "content" }))), hasFooterButtons && (h("div", { key: 'e3554d6aa17546638b88e8ac98ef8ebc8fa789cb', class: "gux-button-footer" }, h("div", { key: '340f525af22095d6854b9f9ef2e062582bfca1d8', class: "gux-left-align-buttons" }, h("slot", { key: 'ef9d1bf333171f64c1240355fb6559c456b24cb5', name: "left-align-buttons" })), h("div", { key: '90bfd9fdf40b0789dc8ce252bad24bb207f834d7', class: "gux-right-align-buttons" }, h("slot", { key: '972a396e077178093f9a23710ded2f8e111c62a3', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: 'dcac66f03f3c1c0bf8aa5f2ac47de7985654d5d4' }, h("slot", { key: '0d458479ea3a41f540569229df9ad362b49fbd6c', name: "content" }))), hasFooterButtons && (h("div", { key: 'bc59458c481d65841cec791c1d49f6ebfdf6da2c', class: "gux-button-footer" }, h("div", { key: 'cc598c263f762d22574b6c36e0a6c64e708ca265', class: "gux-left-align-buttons" }, h("slot", { key: 'c0f5c6b565059278216be874d0f8b1801e6141eb', name: "left-align-buttons" })), h("div", { key: 'a7908faf1ab3801ea531a3429ee4c4f3a3be0b95', class: "gux-right-align-buttons" }, h("slot", { key: '3a63cdb61c930d575b8673dd4fbef51c538de1af', 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: '5915414bcc468b818b63e6c8aad41742ac018559' }, h("div", { key: '9228e8dcdc3d4c3c0b50c97b6a07aa78a4502769', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '29d9f4b32101e12e8de80f1f0b33de887106ef4d', name: "icon" })), h("div", { key: '9f49449d82064ea163b805306c3dcb12f3124296', class: "gux-content" }, h("gux-truncate", { key: 'b45c29a9d5e13f11770ceb831d9509540fd92ec8', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'c37210ec2f9c967d4c549a686057953c5bd529ec', name: "title" })), h("gux-truncate", { key: '62f5ac015e944a799cb5d297e16808589d68d5a1', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'abcb41009c9a30e8c558514e3a9b9be05045af15', name: "message" }))), h("gux-dismiss-button", { key: '2f15c435e27868efea224a01189a52c3b0a8f586', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: 'e49229eae063064416b3aa771ea42bbf576cc89d' }, h("div", { key: 'e9d17ba196fd3d42bf71b79daaef314460d8fa16', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'b148bc51252ec6598cb09d3890c8ac741006fd49', name: "icon" })), h("div", { key: '38b5547befdfe2d723114ded494279969fa5b9a6', class: "gux-content" }, h("gux-truncate", { key: '7075cb4f27361e6a89a8cefec06001cc82687430', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'c18aa4bab6040b54033b7d4d71ffbdeb888188e9', name: "title" })), h("gux-truncate", { key: 'c131d90b96d47d15070344570ca95c892efff77a', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'a4952c02699ad006853adb5713abe3b18cfa4c97', name: "message" }))), h("gux-dismiss-button", { key: 'eaa16b6a0643038103f734689333c1ae1b64ae5f', 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: 'e52c1b7f45e53ed347e956686990c7d0b6c0ad60', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'a3d0b1e27d98b40f541decbce0b4c08baf4adbba', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'd34c3040f79ea7de6dc6c9e99996c5d5884b43de', accent: "ghost" }, h("button", { key: '9e9f38cbfd4fec6bb07638278b02558d96b0510c', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'e3c722c240aa275e959285b580c854f3ef927751', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '979883c625c2b1d45c314206f423816d9538884d', accent: "ghost" }, h("button", { key: '1eed7bc83163a1e3b7a6c73688f620aeb6b5ed88', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '9e2ba89f56a250f264a870dcbd0a32079604bcb9', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: 'ea10d472aba3fcc9ad748cab6ec5763f25309bdf', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '6331a09206f40d35ce1ab4c73cfd6519ec70b996', accent: "ghost" }, h("button", { key: 'b8611bcd8a78ead2a5a2cf1d9e15911f40e4460f', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '6cf625a3aa3ac6b8b1fa6988ffa1281b2dfd1709', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '7cb39e734d464bd80a49895763117405b787ed83', accent: "ghost" }, h("button", { key: 'ad79df1004d2ce953688d9111cc69a68e28ed677', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '369fa53f81abd9b1a8d1cb68e4eebad9188dfad5', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '5e26b4c88c75858004872520573e4e9a24f38520', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'd69821705a27f94c4076b3a52cd33fae7d2a59bb', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '81c2988010ddc9dbf4f0dc95d2d77c91a68a31e8', accent: "ghost" }, h("button", { key: 'a464a8047dc67ca58a78bfe8b88c0c61e85cb134', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '4e1c2c529cc99124ba8c4760296db50930805f79', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'fdb430cf0997fb1cd11eb4d514471f80fd3d3d22', accent: "ghost" }, h("button", { key: 'e003ad9f868619f41987312bbf368865fe93688c', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '6093b0a5112efe3b1e48a189ec91859e7fe3a472', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '7b50ddbd7bfca49ea34cbbda850000125fb466d6', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '238a6a4ddb27edd4562d6c3cc28d59a45038a0eb', accent: "ghost" }, h("button", { key: '3bbdeda74c0459640895b9b1f6109b405e1b2f34', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '2fd99e8e2ae2b058a61e7d200a898245118990c9', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '07af0468c68c533bfeae77130b7ae0a5d8ab8527', accent: "ghost" }, h("button", { key: '4f1033f47d62708c38a621454037f575f3e0b2fc', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '73e2c027239e5861875c99a72e370ddce12a52b9', 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: '5f1ff31bbacbf183b175f15ff297f615c29587e1', class: "gux-pagination-item-counts-container" }, h("span", { key: '92a48f4e8955038e594abb5fb9517e09c9e4b53b', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'a194f602611450321c1ca072500eed6dbd051400', class: "gux-pagination-item-counts-container" }, h("span", { key: 'b05780de885df7f9690450f52a5ab319fda268db', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '60e30d9c59896ebb9e3b32e4be40ecae2caeaef5' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'd5507dcfb2a71b761fca1e6149edf720573771cf' }, 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: 'd2bf5f6979bb5a55d46da794c086535605f66aab', class: "gux-pagination-items-per-page-container" }, h("div", { key: '27a2eedd7b90ecdc1417bcea6d9408fd60991c2e', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '0251e86d96c80dc7bc6ce3e1378f115a85ef1a5c', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: 'e1a57ac40499540ef858b15900dc9224cad95c9c', class: "gux-pagination-items-per-page-container" }, h("div", { key: '3b7f866b9ccb83f659323f1a968951bb7021efcf', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '4bb3b1b71d6ca80b09c049461533c669e22d95ed', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {