genesys-spark-components 4.60.0 → 4.61.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/gux-form-field-file.js

@@ -0,0 +1,133 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../../i18n/index";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldHelp, GuxFormFieldLegendLabel } from "../../functional-components/functional-components";
+import { getComputedLabelPosition, getSlottedInput, validateFormIds } from "../../gux-form-field.service";
+import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
+import componentResources from "./i18n/en.json";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
+/**
+ * @slot input - Required slot for input tag
+ * @slot label - Required slot for label tag
+ * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
+ */
+export class GuxFormFieldFile {
+    constructor() {
+        this.labelPosition = undefined;
+        this.computedLabelPosition = 'above';
+        this.hasError = false;
+        this.hasHelp = false;
+        this.required = false;
+    }
+    onMutation() {
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.setLabel();
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+        trackComponent(this.root, { variant: this.variant });
+    }
+    disconnectedCallback() {
+        if (this.requiredObserver) {
+            this.requiredObserver.disconnect();
+        }
+    }
+    renderScreenReaderText(text, condition = true) {
+        if (condition) {
+            return (h("gux-screen-reader-beta", null, text));
+        }
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="label"]');
+        this.computedLabelPosition = getComputedLabelPosition(this.label, this.labelPosition);
+    }
+    setInput() {
+        this.fileInputElement = getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        preventBrowserValidationStyling(this.fileInputElement);
+        this.required = this.fileInputElement.required;
+        this.requiredObserver = onRequiredChange(this.fileInputElement, (required) => {
+            this.required = required;
+        });
+        validateFormIds(this.root, this.fileInputElement);
+    }
+    get variant() {
+        const labelPositionVariant = this.labelPosition
+            ? this.labelPosition.toLowerCase()
+            : 'none';
+        const type = 'fileInput';
+        return `${type}-${labelPositionVariant}`;
+    }
+    render() {
+        var _a;
+        return (h(GuxFormFieldFieldsetContainer, { key: 'd623abdf116c5e7c87ca3ca3779b7c98cd52be7d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '99fd595817f3f6938022d0e66bbd88ccb800ef83', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'e1a4251e79dff9e7546d48fae9696f6167003865', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("slot", { key: '526cfe8bb01e4ee4a5dbb557015322208a5a48ab', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'f318b5ed353a7bacff2f3c10f1f2390e85c702d5', show: this.hasError }, h("slot", { key: '0b0733b5bc784b6f5112aebb7ba9fe59e7d6e6e7', name: "error" })), h(GuxFormFieldHelp, { key: '59ed2b761b1365f568b235020b60a584073f4387', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f74cab7cd8a162d2c3c6c4e834efe9bcfb173d6c', name: "help" }))));
+    }
+    static get is() { return "gux-form-field-file"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-file.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-file.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldLabelPosition",
+                    "resolved": "\"above\" | \"beside\" | \"screenreader\"",
+                    "references": {
+                        "GuxFormFieldLabelPosition": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldLabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "computedLabelPosition": {},
+            "hasError": {},
+            "hasHelp": {},
+            "required": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldFile.prototype, "onMutation", null);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.e2e.js

@@ -0,0 +1,102 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-form-field-file', () => {
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                const html = `
+        <gux-form-field-file ${componentAttribute}>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          slot="input"
+        />
+      </gux-form-field-file>
+        `;
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newNonrandomE2EPage({ html });
+                    const element = await page.find('gux-form-field-file');
+                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                    expect(element.outerHTML).toMatchSnapshot();
+                    expect(elementShadowDom).toMatchSnapshot();
+                });
+                it(`should be accessible (${index + 1})`, async () => {
+                    const page = await newSparkE2EPage({ html });
+                    await a11yCheck(page, axeExclusions);
+                });
+            });
+        });
+        describe('input attributes', () => {
+            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+                const html = `
+        <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          ${inputAttribute}
+        />
+      </gux-form-field-file>
+        `;
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newNonrandomE2EPage({ html });
+                    const element = await page.find('gux-form-field-file');
+                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                    expect(element.outerHTML).toMatchSnapshot();
+                    expect(elementShadowDom).toMatchSnapshot();
+                });
+                it(`should be accessible (${index + 1})`, async () => {
+                    const page = await newSparkE2EPage({ html });
+                    await a11yCheck(page, axeExclusions);
+                });
+            });
+        });
+        describe('help', () => {
+            const html = `
+      <gux-form-field-file>
+      <label slot="label">Upload a profile picture</label>
+      <input
+        slot="input"
+        type="file"
+        id="avatar"
+        name="avatar"
+        accept="image/png, image/jpeg"
+      />
+      <span slot="help">This is a help message </span>
+    </gux-form-field-file>
+      `;
+            it('should render component as expected', async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-file');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it('should be accessible', async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.spec.js

@@ -0,0 +1,89 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldFile } from "../gux-form-field-file";
+const components = [GuxFormFieldFile];
+const language = 'en';
+describe('gux-form-field-file', () => {
+    it('should build', async () => {
+        const html = `
+    <gux-form-field-file>
+      <label slot="label">Upload a profile picture</label>
+      <input
+        type="file"
+        id="avatar"
+        name="avatar"
+        accept="image/png, image/jpeg"
+        slot="input"
+      />
+    </gux-form-field-file>
+    `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormFieldFile);
+    });
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-file ${componentAttribute}>
+            <label slot="label">Upload a profile picture</label>
+            <input
+              type="file"
+              id="avatar"
+              name="avatar"
+              accept="image/png, image/jpeg"
+              slot="input"
+            />
+          </gux-form-field-file>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
+        describe('input attributes', () => {
+            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-file>
+            <label slot="label">Upload a profile picture</label>
+            <input
+              slot="input"
+              type="file"
+              id="avatar"
+              name="avatar"
+              accept="image/png, image/jpeg"
+              ${inputAttribute}
+            />
+          </gux-form-field-file>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
+        describe('help', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+        />
+        <span slot="help">This is a help message </span>
+      </gux-form-field-file>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -69,14 +69,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'f8a6263300721fabed1598de265f03f057838f74', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'e32c773c643108d62c37d418f9cc6beba83e0e36', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'efc3fef4d86af9b7790cb230b3a27a11d4d6b907', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '2acd69ecc8a21a92936bd585f9e9a4b621231bd9', class: "gux-input-and-error-container" }, h("div", { key: '233fd1e290da8bf45d0e77a0ca43a88677e6cf0a', class: {
+        return (h(GuxFormFieldContainer, { key: '06d690ac53196b338f63ffc43357ec2f767db8c3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8c0e4b58c2ffdfb2512d063354d306d1bf6bcf84', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '52630c99f6639976c957f5ffd7ef0f1eaee513c0', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '884cd8c9a479f219af5993d6647373271ce38e3f', class: "gux-input-and-error-container" }, h("div", { key: 'fad6d2520508f8fbb72debf0c9ea4b7f4155da33', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '7930f9f5df29d0c836d9f4abdc8887b8c3d1cfc2', class: {
+            }, part: "input-section" }, h("div", { key: '52ea9a851b4d833a785c2a67261714e0f82046be', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: '8d33ab29cbea52b965970e80567c0a7c5b70caab', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '14856b89f418274dbbd30b39e043c0adfcbe5b99', show: this.hasError }, h("slot", { key: 'a485d17c2c0edb3e4d6c47e9d1989f7de3c1e9d4', name: "error" })), h(GuxFormFieldHelp, { key: '9e5ad524d3593c58845d5d0c9fc2fffb984043b2', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f215b7c1df4b4824bba6e9294eb4360de5a7ef1c', name: "help" })))));
+            } }, h("slot", { key: '8869341bffc6aa5d9e2044af0e909b551d817283', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '60ce4357b7f6bce84f7022555e6e0fedde67abac', show: this.hasError }, h("slot", { key: 'c1747439b8451b5733025f14274c7661a3138cb8', name: "error" })), h(GuxFormFieldHelp, { key: '4b8b48d158613a9549000729e04795f4e7925015', show: !this.hasError && this.hasHelp }, h("slot", { key: '3f55b12da9f0a678c2758f00fdaaa0c63fea1446', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js

@@ -60,13 +60,13 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '6f3dcc2df1e049772e8fa25a9165092bbcb7e37a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '5c0ce7b6b7b76052811481e8c0d110600571d176', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'ce266647a05aa9ea122186d6eae6317756aed01f', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '5f01ad183044592ddf5141d6109f347a97fae0d3', class: "gux-input-and-error-container" }, h("div", { key: '20dd9d00ffe2aa659ba2d62334454c5feb29c7e9', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '4e15cadb0eb096b2609080f112df6a2ba8ea03da', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '66b6d1acb37bdc0724dd7ba84e6efb486bcb6bfe', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '77909d4f5530b80c06c0d5208d765b6ff0cc22ac', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '8166739123cb47ba77b18222fb7b7fe91ab2dfbf', class: "gux-input-and-error-container" }, h("div", { key: 'b59c8329ecbc6ac0358aaf47c2c9d8ac230d9105', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'e53e678ece01ed35a0d30f8f5634180d7db1daf2', class: {
+            } }, h("div", { key: '098d02652a52fa7260aaa7e8d72f36afcb6fb320', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '1a01971423a7a0a5bedd726ce946c37d4f8a7952' }))), h(GuxFormFieldError, { key: '526dbfac1bfcda733f72816852ee529da891207e', show: this.hasError }, h("slot", { key: '04bb439b88d010b43d312b6bf5f95eddb476a216', name: "error" })), h(GuxFormFieldHelp, { key: 'a7f8f06b605800b4d03a9519e053a92cbd4e485c', show: !this.hasError && this.hasHelp }, h("slot", { key: '8242387ab7a043766c6ec74cf20352ca0ed7fa67', name: "help" })))));
+            } }, h("slot", { key: '01535a871d32c7f3c6b6c876add52655c82644d6' }))), h(GuxFormFieldError, { key: 'ea7ddb822798705b64c35198b9d60dee20133a3d', show: this.hasError }, h("slot", { key: '70c6fa4e41a5d4c6dec4a65cabee1333ecdebe03', name: "error" })), h(GuxFormFieldHelp, { key: '2c2952d3a7151b0a45f92d0b073f3c3a71099ca3', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e788906cf4aa66f1f43224b19d9c0de033194376', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -47,10 +47,10 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: 'e17456ce9b8015838eacb38cd698f3f4877b1a99', class: {
+        return (h(Host, { key: '103e6558a905331341f5984522d62ce28a0e9977', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'fe8d1587dc9d4fc8f018820c71c732744953f207', class: "gux-form-field-container" }, h("div", { key: '808758ed100a768166f5293516deda32a0e43a76', class: "gux-input-label" }, h("div", { key: 'bf76f380a1eef45ddad060fc329692191d8975a7', class: "gux-input" }, h("slot", { key: '50b92448e54b4f8657d6635776797051640797cb', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '96c770f17e7f9b64a321eedf688b494ff7d21934', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '95a58e33847a0f69581dbdb7c5daf85c1f94d920', name: "label" }), h(GuxFormFieldError, { key: 'a55afaef6dce712f6642f32f5062b3390f39bd76', show: this.hasError }, h("slot", { key: '4aa4107d5024de21aa285af17d50be5855636309', name: "error" })), h(GuxFormFieldHelp, { key: '7e01a45a1f0e6d8ee1f72ecf90e890b35ebf3b99', show: !this.hasError && this.hasHelp }, h("slot", { key: '970ad77bfd7ff17c5d48f0786aa23c6af45cb9e2', name: "help" })))))));
+            } }, h("div", { key: '4ffd4e6a959cd95a775d039c6fd30c210ee67e62', class: "gux-form-field-container" }, h("div", { key: '486c5cc20301afe399a8019b8faa0ed7e8e91e92', class: "gux-input-label" }, h("div", { key: '384342b099a95c0c22de30676f610109a639c68b', class: "gux-input" }, h("slot", { key: '614bdc5b837453bf0b905515f75cbafbbcb52d6d', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'b31c7c52fd0342c54036e8923eddd45b0fbb86d8', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '00abf1d396a7c7d3e85ada03f3252beca0a605b3', name: "label" }), h(GuxFormFieldError, { key: 'f37943064f7a1affdca7415d19fa1aafa5980a06', show: this.hasError }, h("slot", { key: '22fb9f64a29aef17e7f2960a9cd6adc392674e59', name: "error" })), h(GuxFormFieldHelp, { key: '76710558d201dd9c0284438db53edd4d549d5852', show: !this.hasError && this.hasHelp }, h("slot", { key: '21d96cceefea2b18cb73333d6c9da8092f4651ea', name: "help" })))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js

@@ -67,7 +67,7 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '8f54b265084eb1c2da7fe3283746c5d7be789492', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: 'd3589e14418dea8366238f3c51b9fe733c04ea68', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '388c245f668ab9bdf799c6796f2dfd0ec1f3fa6e', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: '05ab0e89cb8796d91e744d527fce8f27af0a1707' }), h(GuxFormFieldError, { key: 'cea0ae86c19cf0de7c9606ef53b9371a6cc6311a', show: this.hasGroupError }, h("slot", { key: 'b58ebc4dad34f9b7dc5b3c0c513910e2dc2301ce', name: "group-error" })), h(GuxFormFieldHelp, { key: '567d7d9da1dca56dab2e8611bff268736b2c251c', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'ebaa33bca1a7e949e570556da99fe95977446a86', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '27afb9a6d9276abd37b5c68ce4747be7a890f6e3', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: '80423b504cf7daed7c1e8e04120c01643e6488ca', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'ab56ce608357019c087c6e4e638294f7d4670532', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: 'e8cbcbb7bc62ca22f0d76b72df75149796fe3478' }), h(GuxFormFieldError, { key: 'de0d9249b65521238028acbf380842df2a511d70', show: this.hasGroupError }, h("slot", { key: 'bf0db1f80929a8058dd66b73b6888043446b46e8', name: "group-error" })), h(GuxFormFieldHelp, { key: '31fbd032ac3b195c2fb2a926fcb1d085a9b661a2', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '6c221afbdfa6103b12e76b74247380ba13b362e1', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -82,9 +82,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'ab84b7a0a6ffe60550f76789f435a86e32850874', class: {
+        return (h(Host, { key: 'ab911417f8987db8dae45169245281a517a2e0bc', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '7e37db581de411b3c8548ef9142e11362c59ff41', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '81bfda9e439bcdf6d4a444cd53ae80cb6d186d60', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f1536b5af281b9051919c5c11d18a7e5633d9603', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '0868eb6e6af3efe69db3b3d3c5324a6450f7eb73', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '91130872a632988e5cde9765dd74a27a8a0cc4f7', show: this.hasError }, h("slot", { key: '3081f22e9dfc5d58cc42bd6075fa225fb4dbe036', name: "error" })), h(GuxFormFieldHelp, { key: '0e3d8cf3afc0773f369f19257916c919dd6c8ca2', show: !this.hasError && this.hasHelp }, h("slot", { key: '02b487e1c73af225d7227b56d9fc1bb9da51498e', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '4fd8e66e4a8ce9b4d089f91ff858d376530ee311', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b216389853b2fc1159d08c6197642a962c32a6f2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f0e54cd4a3c8f5138718a1f5dfc0f2d25fa3606c', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '616c791c64a1f595a729f201a28efe3e2a816b20', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '9c5a20f9fb423e34c0dd99e91aa40c994732ca54', show: this.hasError }, h("slot", { key: '6627e9d4bdf8e1f28add3de842b3305e4fda3f2f', name: "error" })), h(GuxFormFieldHelp, { key: '291c0dacc1116dc58eb41db4f54875bd3121c158', show: !this.hasError && this.hasHelp }, h("slot", { key: '97345b7e0f110c4ddd500f26848960d9c61d02d8', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -62,13 +62,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '42779f1c2d0cab45b38f18e6ae50166f70f257f7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '080fb3751b41d43042a65ac6a2bbf666d25f0be4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c6ffd706741bb8daeb959b720daa0c03a44a27e5', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '525766420143a047d9f7ed56ce06399f100931a2', class: "gux-input-and-error-container" }, h("div", { key: '83073128ad9ed6c7a168e77c690ee4792900a4f2', class: {
+        return (h(GuxFormFieldContainer, { key: 'f00607cfa9dd0dd961ca87d93aadc86dada59955', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f97392a34ffd54d453e5fa8eab87af33a19aafee', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '40386b8ea847c417561968ce09cfef3218c2b779', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '1b40b3d66c8ee971240dbb79477eccab3262daae', class: "gux-input-and-error-container" }, h("div", { key: '48596cfe8e15b3647c3446309947ae3439a2aa61', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '5ba45dde5c2aab840675dca2ff37272527793d01', class: {
+            } }, h("div", { key: 'f32239cdfa609f8637d70887364b1aa297431bc5', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: 'f673d51be68a9a3ca29d75e71fc78b87bfc6e588', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '317c0dab47ae69fece7829507aa3800e4f08a384', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '897ae0159c0abfe24724897b079d631e878c00a5', show: this.hasError }, h("slot", { key: '5ec68b0692c98b2154f2d7baefb109b1de6ad5f9', name: "error" })), h(GuxFormFieldHelp, { key: '1f457eae9906f50809f53510e36b9aa799294772', show: !this.hasError && this.hasHelp }, h("slot", { key: '5acac15b6f1306fe62398ff136cfb487b35e2be0', name: "help" })))));
+            } }, h("gux-icon", { key: '2b7f2f102517c1fa52a1f68d32d559ebbe8f4c27', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'a05847665f136b0a8ab2fb3cf99ae82e38b503eb', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'ae5562689221e73b608d14884c32a4685023dfc9', show: this.hasError }, h("slot", { key: '4d3d2a02059ca3f22961a20b651f30698d0bb837', name: "error" })), h(GuxFormFieldHelp, { key: 'bbee0d886b9dfe5bb468b17062188df7de70fc53', show: !this.hasError && this.hasHelp }, h("slot", { key: '913206b4f832954b7d8b2e63eb4f04af3a6fc116', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -53,13 +53,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '0f05fda9050e25ffa3dafa20b650a79e5451b557', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'df77654c404549e8649b9fd0825f7cbf2e133271', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'cc902ff85b3a340db13c2bf984af0129be98b9fa', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '5798224cf3620259bbcc051327772bf484b43065', class: "gux-input-and-error-container" }, h("div", { key: '7dc8d4a80418c7f26b4987e0f5a7b9124ae12399', class: {
+        return (h(GuxFormFieldContainer, { key: 'f58fc0d759ccdbceb99dcf2a3ad807ed8c4221b9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '30ff86898ffb5770b3cd632d84cf481f8d1355ff', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e4838ccd6ec174bae23902af8bc4446981503787', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '65d278d8549366d02759698b511d60abf1db3389', class: "gux-input-and-error-container" }, h("div", { key: '8a89344b263745ef9a1f39cc66f4577daabffe87', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'd363aa3963e9be7174d74e96976244ccc3ce7d37', class: {
+            } }, h("div", { key: 'ba4bf085608671a1224a35fdb2c2227b04708c39', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '5933423758246e0a2e6ac345eb74398372c20f4f', name: "input" }), h("gux-icon", { key: '6ad7a5a76f4f84c4b2f8102705ea523baac3f542', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '76effa57179c825bd47ac1c4b608d0528b5f55c5', show: this.hasError }, h("slot", { key: '675f20bf2273b7d82d34a7e628b1dbe70e9e70f7', name: "error" })), h(GuxFormFieldHelp, { key: '56d5679c4bdc9a436fc703b4450ae2d18bb13a9d', show: !this.hasError && this.hasHelp }, h("slot", { key: '3bf29e3d11f598851a2538f6096760a068cc2627', name: "help" })))));
+            } }, h("slot", { key: '4d8338db3bdd45abc4aefeb31f5dd3aec53d8471', name: "input" }), h("gux-icon", { key: '07d9a44ba9e17cf33bf83959c61788e9af21741e', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'cccd81f08fbd22012613882dc29391dbe0cd87bb', show: this.hasError }, h("slot", { key: '6afa10449eb38f0323b6a6d0dbb15a9516eddb8e', name: "error" })), h(GuxFormFieldHelp, { key: '3ee2f5880ce92ebc8ee37e9697235a60dc37da3e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f78fa30b128f5b50a76635475131478559473a8c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.js

@@ -57,12 +57,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '3e5c4c4fbcac1d5bf9d19d95d7bc1fd70d43019e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '113d8de398b8f7d22bcb07531103c82a3a8e7abf', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '3a310279167b2adeeed50e44481c8bbf866d1157', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'f2d964b6e336fe7be88e6e0ba568fc01bf0ef485', class: "gux-input-and-error-container" }, h("div", { key: '712f3f48fb15d0c1481fa1cf81723e0121c736fd', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '30002bf2fd4403de6a812ee46ab0ba04420bd58a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5acc27c24af2cc259363a0a9e551946ffe951cf2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '605c33a9258b0a4b713454d59903256482e23d80', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'da821fd3c03fd7e815fcaf10d605c3218f542cc2', class: "gux-input-and-error-container" }, h("div", { key: '9c67ad442bcf103250fe0e517c4e12368efc51c8', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'd9da9023de29d890a935ec1e0b0b79bf0f7d19b1', name: "input" })), h(GuxFormFieldError, { key: 'fa7bbaf903fa1eb0554a29750bbbc018806620e4', show: this.hasError }, h("slot", { key: '790a3c8ae66649ff548e9c651882c529abd3df47', name: "error" })), h(GuxFormFieldHelp, { key: '689e7ce01a75b85e0219096b36bcad0020afd167', show: !this.hasError && this.hasHelp }, h("slot", { key: '2fe135afeb4851885897b3227fd8a67d18f40f53', name: "help" })))));
+            } }, h("slot", { key: '089685c1e8e4ad74a087bce1567cfaf9ea8cb0b0', name: "input" })), h(GuxFormFieldError, { key: 'b2dab4ad4c403f313704347847af60c1e3fd48a9', show: this.hasError }, h("slot", { key: '476b6baa6fd870cc9ed37e7dc2c0e6c5507513fe', name: "error" })), h(GuxFormFieldHelp, { key: '5cfcc2330057b42e5d8fabd3bd1fc834ee07fadd', show: !this.hasError && this.hasHelp }, h("slot", { key: '9899bd978401bf2ac9bfea2b98c3c1020971c3e4', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js

@@ -61,13 +61,13 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'dd411e739df07f7c1eba5bd79dd57bc65cd03caf', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'ce01d20567e7424760c81e9fe6668e33ceb12d0b', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '6f2915ad697f455b4f08139eb9838a9e636aa3b8', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '068d6aadb8a70d7b77a82f7837d5a4021eb272fe', class: "gux-input-and-error-container" }, h("div", { key: '4e45c08204dba5e52018bdeb38c39d3454e8cb75', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f5154769059a9725983ef4d4d3b93002c102da02', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'd58497619db5f569c82bc9e876853271d577d7b9', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '753d15d89d8900991815ccc55afb738ec12ba1d3', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'ba3f292271b2cdcc6802830d5c3b1c176be107e7', class: "gux-input-and-error-container" }, h("div", { key: '380d8ebe10e0f54ef5c6b64f33c36069470d5b75', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '857c8ab3f5e7cd4c6bca4f3fb51509152d416a22', class: {
+            } }, h("div", { key: '7f84fd70ca81b1813063b1b8f3c5d42fc525af57', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '8d5b8a0856f1562a4d7437f6512f592b6342c228' }))), h(GuxFormFieldError, { key: '00d2bacf3b165896326edf957e8b361d33a72cc4', show: this.hasError }, h("slot", { key: '409e5e1117d520e5a3e8d00f70726545114378df', name: "error" })), h(GuxFormFieldHelp, { key: '53b4932c7332ba0cf6428e7ffa6603afc793dcfa', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e16ced5c18d6df46e4ff2fb849d74657dc16b068', name: "help" })))));
+            } }, h("slot", { key: '16e96b921b2fb64bd759bb5afb2dc0532fd8ae02' }))), h(GuxFormFieldError, { key: '0a0241f374fb75ff074d9c3c9cca3ab193307d78', show: this.hasError }, h("slot", { key: '0247e4a54be9d59103c5884dde53a129b156631b', name: "error" })), h(GuxFormFieldHelp, { key: 'b4c8f4b3c20edcea1c500f118671c239d75ce894', show: !this.hasError && this.hasHelp }, h("slot", { key: '0e669a3b49fa7c7520acdd3c08a27066e90bf167', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js

@@ -61,12 +61,12 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f94434c2698f294abbdb8bb06b05c634f6bd7544', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '36b28fee558e5a55565ee0046a05a8e4074445e8', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '4b1ae9a76308987b21ee89477e28f0b9ccee5590', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '57e80ad01c6c5d4c70851a53c6af5960a194ead4', class: "gux-input-and-error-container" }, h("div", { key: '9dba2395f519b52dca9af3e343665a5a4b89f4a3', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'd450f811957fdc581b5889f22d70a56f96dfb139', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'ac18a55b69ea7ff65a3caa377cb1aa0e5afbd641', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '94b4dfc511929b5e3380c62c999ec44d1e7564c5', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '58cf1488239a1511bf870df57109a9f3011b06a6', class: "gux-input-and-error-container" }, h("div", { key: '62fa2d885f76d417e6e5e76fa47a213ba4f482ed', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'c21a0347234434ec2496fb03c2a45cb156109351' })), h(GuxFormFieldError, { key: '93c6e7fe6a8e300145ffba7d31dbd412978cf6c2', show: this.hasError }, h("slot", { key: 'f63893abd4985dc87d923f7b7df46d0979f70dac', name: "error" })), h(GuxFormFieldHelp, { key: 'e1646724b78fc3be329b135041edec3a455a8706', show: !this.hasError && this.hasHelp }, h("slot", { key: '907afd34c8a11d6dac079c7f2c07574e8e61e790', name: "help" })))));
+            } }, h("slot", { key: '9bf1a71c5f329e6daa3981892cb3d1556841b945' })), h(GuxFormFieldError, { key: '1d59017b5a8194225e5773fb94c8cf0e76c8559d', show: this.hasError }, h("slot", { key: '0ba994d4492af9cb930e867be15104b030f2c036', name: "error" })), h(GuxFormFieldHelp, { key: '5014b949671c39767ee2d289c2f1d4f4abf59658', show: !this.hasError && this.hasHelp }, h("slot", { key: 'eb50b5dd63bd44d33bc6c4506bf3dce893a80d91', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -8,7 +8,7 @@ export class GuxFormFieldInputClearButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '2fec9ebe928cf7f23d8752891952bda5809a7c82', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '9470e5bd4e5784f7cbc4ecb1d67bca57502ecb78', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: 'a084accbb1073a43f220570ee24b483acd28ba00', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '8d0b6d02390cdefb292a12fb0f0ff6417cf0e0c5', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class GuxIcon {
         return svgElement.outerHTML;
     }
     render() {
-        return (this.svgHtml && (h("div", { key: '694aac75cdd425c301e0088cf80a3a20dd37913e', class: "gux-icon-container", innerHTML: this.svgHtml })));
+        return (this.svgHtml && (h("div", { key: '332c309ac3be268058f355c8ab77877533dd1e67', class: "gux-icon-container", innerHTML: this.svgHtml })));
     }
     static get is() { return "gux-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.js

@@ -28,10 +28,10 @@ export class GuxAlert {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'd4897171b315ea142cb4d12a7afff3db063309e4', class: {
+        return (h("div", { key: 'e95ad17689a44b33f8cbc5497e45e7ba5887234a', class: {
                 'gux-inline-alert': true,
                 [`gux-${this.accent}`]: true
-            } }, h("div", { key: 'a5ca1982a42cfdb2c393e2350668f277b916dec9', class: "gux-message-wrapper" }, h("gux-icon", { key: '5bb1ad27a430cccc0827f26951d33ac093c3d077', "icon-name": this.getIcon(this.accent), decorative: true }), h("div", { key: 'b04e28df8c293ee1f48d7b635a295c8111e7620a', class: "gux-sr-only" }, this.i18n(this.accent)), h("div", { key: '6d65691d9af0fe6dc824b375083c2d2f33c50326', class: "gux-content" }, h("slot", { key: '05b87957bf7e8526e5c5492834659c1bdd1a9ee5', name: "content" }, h("slot", { key: 'ba2843905e91bc367aedd001af0de39938d1d73f' }))))));
+            } }, h("div", { key: '078ccfcc6ff24ff01f694a9af4f7bc84520369f9', class: "gux-message-wrapper" }, h("gux-icon", { key: '39f55da6f333a292b921111eabd1e8ee694c5160', "icon-name": this.getIcon(this.accent), decorative: true }), h("div", { key: 'f8e04ba95cf07f4e35b63798a5c33fab5be484b6', class: "gux-sr-only" }, this.i18n(this.accent)), h("div", { key: '2097b7e9cf9b21818b2f5ffb18c9307639cfe1d3', class: "gux-content" }, h("slot", { key: 'd32f93fbe9e146d93bb681f3614537a1809296a3', name: "content" }, h("slot", { key: 'b9030f479f208b77f40f1b9f3f1694efcf5cc623' }))))));
     }
     static get is() { return "gux-inline-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.js

@@ -31,11 +31,11 @@ export class GuxCreateOption {
         return (h("span", { class: "gux-screenreader" }, this.i18n('createCustomOptionInstructions')));
     }
     render() {
-        return (h(Host, { key: 'cbe16c34f5d4dbb6c810bd5d4a44ef07a807ef75', role: "option", "aria-selected": false, class: {
+        return (h(Host, { key: '47304aae40590b1908c558d5b775af506a25f8d1', role: "option", "aria-selected": false, class: {
                 'gux-active': this.active,
                 'gux-hovered': this.hovered,
                 'gux-filtered': this.filtered
-            } }, h("div", { key: 'be0980093f4fc37bf585bfbcf2f875d0208ae925', class: "gux-option" }, h("gux-icon", { key: '3c62a020b6856abf567eda0993e2a53853ab2263', decorative: true, "icon-name": "fa/plus-regular" }), h("div", { key: '9ecfe5f1fdac85bdf773ebd8d7c407ec7d6a6d36', class: "gux-create-text" }, this.i18n('createOption', {
+            } }, h("div", { key: '347a6882a380ae6f52e71dd6833e403faa770c47', class: "gux-option" }, h("gux-icon", { key: 'cb81bb756fe84d5f35c8b5229c77dbcde105ee9d', decorative: true, "icon-name": "fa/plus-regular" }), h("div", { key: 'eb93e52b3517257d830f63afa3b83df387512f5b', class: "gux-create-text" }, this.i18n('createOption', {
             optionValue: this.value
         })), this.renderCustomOptionInstructions())));
     }

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js

@@ -10,7 +10,7 @@ export class GuxLoadingMessage {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: 'ffecc5f96e59fd484e0203bc14ea2e1a0bcba847', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: '05cdf94661a3982005096eefbffb23e6c9b9df12', class: "gux-progress" }, h("slot", { key: 'bd58bb0a13ffdc01beffd19c028207d05033a467', name: "progress" })), h("div", { key: 'a872a464bd067ec17229f158d6562c6a236f6651', class: "gux-primary-message" }, h("slot", { key: 'a1f8848e0efa77365e374ce7331659395628e670', name: "primary-message" })), h("div", { key: '2249cc1e2e8e48e2795fb744fde062acf8922210', class: "gux-additional-guidance" }, h("slot", { key: 'a8a3c5ab7b95170686961c6d0f6055483e2a8bb6', name: "additional-guidance" }))));
+        return (h("div", { key: '6456d7e19f794642cb4f5104c7d4e5b235ff78d5', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: '5df0cb814ca9a6e73ec911f5c5f6f9aa3fec2f56', class: "gux-progress" }, h("slot", { key: '7564d594ffbd4703b6968350fdf788db677e75e5', name: "progress" })), h("div", { key: '84192e09f5375756b16d914e714a7981d0f4f80e', class: "gux-primary-message" }, h("slot", { key: '0b993daeb60f63c4b91a56e9af5c4574ebf5ed2d', name: "primary-message" })), h("div", { key: '34b79bd828d27da60fd6c95c89ffbc4c1a5bb946', class: "gux-additional-guidance" }, h("slot", { key: 'b6d49acaacf8ee3274299e27a1a97a115e77e216', name: "additional-guidance" }))));
     }
     static get is() { return "gux-loading-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class GuxModal {
     render() {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const titleID = randomHTMLId();
-        return (h("dialog", { key: '20f220c650f4da3a60d1afe4597b50c60a4b4deb', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'b6794da5404560adc9a26c8857086f1184f6dc0a', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '12ffcc0aead029035b5864f1e25dd8ccbd2c3c97', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '88b1d03a14b5bac70a4f95ac99dda9ad2a21c9d1', class: "gux-modal-content" }, h("p", { key: '98f4eef566be188688f8d2b8345a672200592379' }, h("slot", { key: '7b0ddab83ffbec56edcbe250edb830525ab66388', name: "content" }))), this.renderButtonFooter())));
+        return (h("dialog", { key: '7d21671835c13c9103dfd3af13cfc3a3878c9dc9', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '53cad448d18354572a7b0278629c8d02a771a382', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '17e1783ceb145a72b0aa0de7a8410e34b0ec17e3', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: 'cfdbabe4b805c0edc0f971daf14172cf4fc75b47', class: "gux-modal-content" }, h("p", { key: '45bb9292f09d8e02362baf3ec51de1b2ecaa2a1d' }, h("slot", { key: 'a375e25b53af3cdbb257ba9862793f5be190d91f', name: "content" }))), this.renderButtonFooter())));
     }
     renderTitle(titleID) {
         return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));