genesys-spark-components 4.59.0 → 4.60.0

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.css

@@ -0,0 +1,32 @@
+:host ::slotted(footer) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--gse-semantic-forms-formFooter-verticalPadding) var(--gse-semantic-forms-margin);
+  margin-top: var(--gse-semantic-forms-formBody-paddingBottom);
+  border-top: var(--gse-ui-formFooter-separator-width) var(--gse-ui-formFooter-separator-style) var(--gse-ui-formFooter-separator-color);
+}
+
+:host(.gux-form-footer-page-desktop) ::slotted(footer) {
+  gap: var(--gse-ui-formFooter-page-desktop-gap);
+  padding: var(--gse-ui-formFooter-page-desktop-topPadding) var(--gse-ui-formFooter-page-desktop-horizontalPadding) var(--gse-ui-formFooter-page-desktop-bottomPadding) var(--gse-ui-formFooter-page-desktop-horizontalPadding);
+}
+
+:host(.gux-form-footer-page-mobile) ::slotted(footer) {
+  flex-direction: column;
+  gap: var(--gse-ui-formFooter-page-mobile-gap);
+  align-items: stretch;
+  justify-content: center;
+  padding: var(--gse-ui-formFooter-page-mobile-topPadding) var(--gse-ui-formFooter-page-mobile-horizontalPadding) var(--gse-ui-formFooter-page-mobile-bottomPadding) var(--gse-ui-formFooter-page-mobile-horizontalPadding);
+}
+
+:host(.gux-form-footer-side-sheet-desktop) ::slotted(footer) {
+  gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
+  padding: var(--gse-ui-formFooter-sideSheet-desktop-topPadding) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding) var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding);
+}
+
+:host(.gux-form-footer-modal-desktop) ::slotted(footer) {
+  gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
+  justify-content: flex-end;
+  padding: var(--gse-ui-formFooter-modal-desktop-topPadding) var(--gse-ui-formFooter-modal-desktop-horizontalPadding) var(--gse-ui-formFooter-modal-desktop-bottomPadding) var(--gse-ui-formFooter-modal-desktop-horizontalPadding);
+}

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.js

@@ -0,0 +1,59 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../../utils/tracking/usage";
+/**
+ * @slot - Slot for footer element.
+ */
+export class GuxFormFooter {
+    constructor() {
+        this.placement = 'page-desktop';
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.placement });
+    }
+    render() {
+        return (h(Host, { key: '94325f71c5d4f4efeb629095c05c0c7b75a16ac9', class: {
+                [`gux-form-footer-${this.placement}`]: true
+            } }, h("slot", { key: 'e52a9d6a79c907afc065983759d96f79e5f40a69' })));
+    }
+    static get is() { return "gux-form-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFooterPlacement",
+                    "resolved": "\"modal-desktop\" | \"page-desktop\" | \"page-mobile\" | \"side-sheet-desktop\"",
+                    "references": {
+                        "GuxFormFooterPlacement": {
+                            "location": "import",
+                            "path": "./gux-form-footer.types",
+                            "id": "src/components/beta/gux-form/gux-form-footer/gux-form-footer.types.ts::GuxFormFooterPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'page-desktop'"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.types.js

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

package/dist/collection/components/beta/gux-form/gux-form-footer/tests/gux-form-footer.e2e.js

@@ -0,0 +1,25 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../../test/e2eTestUtils";
+describe('gux-form-footer', () => {
+    describe('#render', () => {
+        [
+            `<gux-form-footer placement="page-desktop">
+      <footer>
+        <gux-button accent="primary">Primary</gux-button>
+        <gux-button accent="secondary">Secondary</gux-button>
+      </footer>
+        </gux-form-footer>`,
+            `<gux-form-footer placement="page-desktop">
+      <footer>
+        <gux-button accent="primary">Primary</gux-button>
+      </footer>
+    </gux-form-footer>`
+        ].forEach((html, index) => {
+            it(`should render the gux-form-footer component as expected (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                const element = await page.find('gux-form-footer');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/beta/gux-form/gux-form-footer/tests/gux-form-footer.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxFormFooter } from "../gux-form-footer";
+const components = [GuxFormFooter];
+const language = 'en';
+describe('gux-form-footer', () => {
+    it('should build', async () => {
+        const html = `
+    <gux-form-footer placement="page-desktop">
+    <footer>
+      <gux-button accent="primary">Primary</gux-button>
+      <gux-button accent="secondary">Secondary</gux-button>
+    </footer>
+    </gux-form-footer>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormFooter);
+    });
+});

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.css

@@ -0,0 +1,8 @@
+::slotted(*) {
+  margin: 0;
+  font-family: var(--gse-semantic-forms-formHeader-text-fontFamily) !important;
+  font-size: var(--gse-semantic-forms-formHeader-text-fontSize) !important;
+  font-weight: var(--gse-semantic-forms-formHeader-text-fontWeight) !important;
+  line-height: var(--gse-semantic-forms-formHeader-text-lineHeight) !important;
+  color: var(--gse-semantic-forms-formHeader-foregroundColor) !important;
+}

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - Slot for section heading element.
+ */
+export class GuxFormHeading {
+    render() {
+        return (h("slot", { key: '29312b9a7103b147c7755b9ed366cecb4a4c7b7c' }));
+    }
+    static get is() { return "gux-form-heading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-heading.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-heading.css"]
+        };
+    }
+}

package/dist/collection/components/beta/gux-form/gux-form-heading/tests/gux-form-heading.e2e.js

@@ -0,0 +1,16 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../../test/e2eTestUtils";
+describe('gux-form-heading', () => {
+    describe('#render', () => {
+        [
+            `<gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>`,
+            `<gux-form-heading><h2 slot="heading">Form Heading</h2></gux-form-heading>`
+        ].forEach((html, index) => {
+            it(`should render the gux-form-heading component as expected (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                const element = await page.find('gux-form-heading');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/beta/gux-form/gux-form-heading/tests/gux-form-heading.spec.js

@@ -0,0 +1,11 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxFormHeading } from "../gux-form-heading";
+const components = [GuxFormHeading];
+const language = 'en';
+describe('gux-form-heading', () => {
+    it('should build', async () => {
+        const html = `<gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>`;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormHeading);
+    });
+});

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

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - Slot for form element.
+ */
+export class GuxForm {
+    render() {
+        return (h("slot", { key: '7cf122ef2820dda8c5e854f0aab3863716ea218b' }));
+    }
+    static get is() { return "gux-form-beta"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/beta/gux-form/tests/gux-form.e2e.js

@@ -0,0 +1,64 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+describe('gux-form', () => {
+    describe('#render', () => {
+        [
+            `<gux-form-beta>
+      <form>
+        <header>
+          <gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>
+          <gux-form-description
+            ><p slot="description">
+              This is a simple paragraph to accompany the form header.
+            </p></gux-form-description
+          >
+        </header>
+        <fieldset>
+          <legend>
+            <gux-form-fieldset-heading
+              ><h2 slot="heading">Form Fieldset Header</h2>
+            </gux-form-fieldset-heading>
+            <gux-form-description
+              ><p slot="description">
+                This is a simple paragraph to accompany the fieldset header.
+              </p></gux-form-description
+            >
+          </legend>
+          <gux-form-field-text-like label-position="above">
+            <input slot="input" type="text" name="lp-3" />
+            <label slot="label">Fieldset Form field label</label>
+          </gux-form-field-text-like>
+    
+          <gux-form-field-phone label-position="above">
+            <gux-phone-input-beta></gux-phone-input-beta>
+            <label slot="label">Fieldset Form field label</label>
+          </gux-form-field-phone>
+    
+          <gux-form-field-textarea label-position="above">
+            <textarea slot="input" name="textarea"></textarea>
+            <label slot="label">Fieldset Form field label</label>
+          </gux-form-field-textarea>
+        </fieldset>
+    
+        <gux-form-field-text-like label-position="above">
+          <input slot="input" type="text" name="lp-3" />
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+    
+        <gux-form-footer placement="page-desktop">
+          <footer>
+            <gux-button accent="primary">Primary</gux-button>
+            <gux-button accent="secondary">Secondary</gux-button>
+          </footer>
+        </gux-form-footer>
+      </form>
+    </gux-form-beta>`
+        ].forEach((html, index) => {
+            it(`should render the gux-form component as expected (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                const element = await page.find('gux-form-beta');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/beta/gux-form/tests/gux-form.spec.js

@@ -0,0 +1,148 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxForm } from "../gux-form";
+const components = [GuxForm];
+const language = 'en';
+describe('gux-form', () => {
+    it('should build', async () => {
+        const html = `
+    <gux-form-beta>
+    <form>
+      <header>
+        <gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>
+        <gux-form-description
+          ><p slot="description">
+            This is a simple paragraph to accompany the form header.
+          </p></gux-form-description
+        >
+      </header>
+      <fieldset>
+        <legend>
+          <gux-form-fieldset-heading
+            ><h2 slot="heading">Form Fieldset Header</h2>
+          </gux-form-fieldset-heading>
+          <gux-form-description
+            ><p slot="description">
+              This is a simple paragraph to accompany the fieldset header.
+            </p></gux-form-description
+          >
+        </legend>
+        <gux-form-field-text-like label-position="above">
+          <input slot="input" type="text" name="lp-3" />
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+  
+        <gux-form-field-phone label-position="above">
+          <gux-phone-input-beta></gux-phone-input-beta>
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-phone>
+  
+        <gux-form-field-textarea label-position="above">
+          <textarea slot="input" name="textarea"></textarea>
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-textarea>
+      </fieldset>
+  
+      <gux-form-field-text-like label-position="above">
+        <input slot="input" type="text" name="lp-3" />
+        <label slot="label">Fieldset Form field label</label>
+      </gux-form-field-text-like>
+  
+      <gux-form-footer placement="page-desktop">
+        <footer>
+          <gux-button accent="primary">Primary</gux-button>
+          <gux-button accent="secondary">Secondary</gux-button>
+        </footer>
+      </gux-form-footer>
+    </form>
+  </gux-form-beta>  
+    `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxForm);
+    });
+    describe('#render', () => {
+        [
+            `
+      <gux-form-beta>
+      <form>
+        <header>
+          <gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>
+          <gux-form-description
+            ><p slot="description">
+              This is a simple paragraph to accompany the form header.
+            </p></gux-form-description
+          >
+        </header>
+        <fieldset>
+          <legend>
+            <gux-form-fieldset-heading
+              ><h2 slot="heading">Form Fieldset Header</h2>
+            </gux-form-fieldset-heading>
+            <gux-form-description
+              ><p slot="description">
+                This is a simple paragraph to accompany the fieldset header.
+              </p></gux-form-description
+            >
+          </legend>
+          <gux-form-field-text-like label-position="above">
+            <input slot="input" type="text" name="lp-3" />
+            <label slot="label">Fieldset Form field label</label>
+          </gux-form-field-text-like>
+        </fieldset>
+    
+        <gux-form-field-text-like label-position="above">
+          <input slot="input" type="text" name="lp-3" />
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+    
+        <gux-form-footer placement="page-desktop">
+          <footer>
+            <gux-button accent="primary">Primary</gux-button>
+            <gux-button accent="secondary">Secondary</gux-button>
+          </footer>
+        </gux-form-footer>
+      </form>
+    </gux-form-beta>
+      `,
+            `
+      <gux-form-beta>
+      <form>
+        <header>
+          <gux-form-heading><h1 slot="heading">Form Heading</h1></gux-form-heading>
+          <gux-form-description
+            ><p slot="description">
+              This is a simple paragraph to accompany the form header.
+            </p></gux-form-description
+          >
+        </header>
+        <fieldset>
+          <legend>
+            <gux-form-fieldset-heading
+              ><h2 slot="heading">Form Fieldset Header</h2>
+            </gux-form-fieldset-heading>
+            <gux-form-description
+              ><p slot="description">
+                This is a simple paragraph to accompany the fieldset header.
+              </p></gux-form-description
+            >
+          </legend>
+          <gux-form-field-text-like label-position="above">
+            <input slot="input" type="text" name="lp-3" />
+            <label slot="label">Fieldset Form field label</label>
+          </gux-form-field-text-like>
+        </fieldset>
+    
+        <gux-form-field-text-like label-position="above">
+          <input slot="input" type="text" name="lp-3" />
+          <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+      </form>
+    </gux-form-beta>    
+    `
+        ].forEach((html, index) => {
+            it(`should render gux-form component as expected (${index + 1})`, async () => {
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

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

@@ -128,7 +128,7 @@ export class GuxMonthCalendar {
         return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
     }
     render() {
-        return (h("div", { key: 'a2ec84632e69c6e7005796a8ff6edb5fd1ba4b7f', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+        return (h("div", { key: '7779da6a0844737396b0275636f38d2cea6e49e4', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
     }
     static get is() { return "gux-month-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '1318dfd3ecd31ec2d792b7f0aaa04af6e2d2588a', role: "listitem", value: this.value }, h("div", { key: 'ac39e1e4a73a946a4b06392c6d11ec88a3545228', class: "gux-container" }, h("button", { key: '9b1c74b547c78b50ec88e42398f617c3f3b6aeaf', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '35a3642488917660657784d2a38406a88ae6997f' })))));
+        return (h(Host, { key: 'e9c6b86867d88fa44b26d36a97d4d25d4dc7cf2d', role: "listitem", value: this.value }, h("div", { key: '520ca63e02ee81721a24b4ae36c62a5deec3e9d4', class: "gux-container" }, h("button", { key: '0dd40d84e2390042a04d3b72d64ee611f7c8efef', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '47a91af6a384fcac1e45e1b5fa65379f596eac1a' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: '3a21309c58f73ea7bfdac59a945a4a107d938219', role: "list" }, h("slot", { key: '0e9d862171ce091b513b72e8f6aa81d6e0ba9d7a' })));
+        return (h(Host, { key: '98c8984c53ebbc2b5cc5c51420565e4559abff78', role: "list" }, h("slot", { key: '5abeb539983936671adbd78b4876aa06e30cfc1b' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -194,7 +194,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '2ebbd58561728576b2c322260ebfeb16d4464e8b', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '0cec690f0cf6289c761678fe22bea1ee16de27d6', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,7 +342,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: 'b294342bee9d5a6843ed245f080fa05e8d357e1c', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'd757a933268055f0d21c970964bc4f95b136bec5', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: 'ab62b771828b0d44468c7220b0f4985ba82457bc', class: "gux-sr-only" }, h("slot", { key: '37ab3b9a95d91260ea10e940180045693451c5b4' })));
+        return (h("span", { key: 'a1984ab57adde238791ceedbf7b53924268dd044', class: "gux-sr-only" }, h("slot", { key: '7aa8337a58af16c329b365b9acfcbdb2735005dc' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -45,18 +45,18 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '99ca10f1505b6c7febda6f8a728450d3e47bddc4', class: {
+        return (h("div", { key: '0566c417db56e075b7515a3102f24f852d30d689', class: {
                 'gux-container': true,
                 'gux-start': this.isInStartPosition(this.root),
                 'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: '0ec79b3df9b6d395dd01b7cf5acbc7b88debf789', class: {
+            } }, h("button", { key: '6859728b3f9bf1fc8bf15f361795d6d1f728b3f1', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '6c520a2b9dbdb5894d3f9a233730a19d4c850950', class: {
+            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '3879c5709da14e7d66f97611b4491a38460b5519', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'ff26f8670d4b066d7999c020798913e4642b6042', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'e97a25af91f85b8e8212d7f34c480d6fe7597b28', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -30,7 +30,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: '94f6ef5226c14619ca405c342abb086ffeb483f1', role: "group" }, h("slot", { key: 'a367904d82d5e70e4b54186e903f146279486672', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'd053abfb3d9593e45ce22e0944d2452c4a48cfa6', role: "group" }, h("slot", { key: '956a75cb66ba7e29f6cec555ee098eda205c905c', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -50,11 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: 'b76c1d4a8d437a154542478b344d7d8a36e357b3', class: {
+        return (h("div", { key: '4341262b9567224c6278912198bfbe8ea5ccab5b', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            }, onClick: () => this.input.setAttribute('checked', 'true') }, h("div", { key: '7510e92a07c04b9d4afb4c6545afdde2d6068b33', class: "gux-content" }, h("div", { key: '3cd3676b4e3f768cc30188afa2e16dd1c2a45fc3', class: "gux-icon" }, h("slot", { key: '4114bb5813890d3f07a25e0d0e7327674c6a097a', name: "icon" })), h("gux-truncate", { key: '89e4611a8ceeb6c2da47565a0563d8bc51733817', class: "gux-label", "max-lines": 2 }, h("slot", { key: 'a598116d7c68874542dd5656339c5172be565ee9', name: "label" })), h("slot", { key: '5918c2cbe784b5049f989146b52fffb989927b55', name: "input" }), this.renderDescription(), this.renderBadge())));
+            }, onClick: () => this.input.setAttribute('checked', 'true') }, h("div", { key: '8d63394652e97233cde356ab4898881cab25b479', class: "gux-content" }, h("div", { key: '64f38300cea7bd53fd06033081fe977356f3e05f', class: "gux-icon" }, h("slot", { key: '9cbf9165b0e0b64aa67f70a2b59c1c349d8b8f26', name: "icon" })), h("gux-truncate", { key: '852cb669b67911566842b842146ecbb2987a86f6', class: "gux-label", "max-lines": 2 }, h("slot", { key: '438abf80a7a27c480dba5d247e7e9680aff69a3a', name: "label" })), h("slot", { key: 'ec2a2007157c2149f0e23c3ed5601bcae4735635', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-cards.js

@@ -8,7 +8,7 @@ export class GuxSelectorCards {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: 'da9666635224d9aed3e113fd6e16ffdf5efaa359', class: "gux-selector-cards" }, h("slot", { key: '784794a3636e7224fc7860340814b59ebf68a377' })));
+        return (h("div", { key: 'f8b46d99477c52ac38d9f720e56dff88d00c3c50', class: "gux-selector-cards" }, h("slot", { key: '8e17104d749dfc32fc86db35ddb678c7accc57bb' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: '3f0319de47530af60f8d9cd86efae0ebb1d432d5' }, this.renderTime()));
+        return (h(Host, { key: 'c76b712d05bf133d62da352d69234a84ed950fc8' }, this.renderTime()));
     }
     static get is() { return "gux-time-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -146,9 +146,9 @@ export class GuxTimeZonePickerBeta {
         }
     }
     render() {
-        return (h("gux-dropdown", { key: 'ce2c11489b3e4acc77a8dc4b1409cec5895a84a0', class: {
+        return (h("gux-dropdown", { key: '16b8666e4d776fcdf167b962e92ac0d9e8054603', class: {
                 'has-defaults': !!this.workspaceDefault || !!this.localDefault
-            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: '13010a16bba1b2ebe1b34608862e240b66f4189e', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
+            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: '214c04c3c9034269de8e93263cfbb47f6be45bee', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
     }
     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

@@ -113,10 +113,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: 'f6298be4ffd385ec391e3ebea8a605b1b77ce6da', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '8626112e9b077cdb6f5baf8a1ff6db2260eb2c85', class: {
+        return (h(Host, { key: 'a2e45b563971c95f0e37e54ff7762c3ba3974dbc', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: 'f34102cfb85e5b5853e89c37831a84ecd5634e7d', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'c81057992d4bb9bc5a767b6bbe2222b6f4855a27', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'ec4e87b9a141c6c4709e4dfe1c0c1a787d0a3dcf', 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

@@ -52,7 +52,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '023c5a774415ada51376c5f15302883b731bf123', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: '7a3740c4718ec7fc068e7d0adde526b77e65cdfe', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: '2ef024784bc0440e0999e2c40a70ddf22b9a4b62', slot: "content" }, h("slot", { key: '49daea811a2a68ae2d2e75301aa6bbe0f9575b38', name: "content" }, h("slot", { key: '1d223215d0437e4568c3388b8b69bfafeae84cab' }))))));
+        return (h(Host, { key: '033659dd2131163ef7e2e785b7c0913dcadc63cb', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: 'b212954a9046c1a68925bce619ae3998c9279423', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'f4aa6a1ef2d61e7cc9b36adcc455150702cbc09f', slot: "content" }, h("slot", { key: 'fa6f543369de03166f34985f1c0ae8a2c0224cef', name: "content" }, h("slot", { key: 'ff72e008ef3bb24184a0b386dc6d695dfa0d7181' }))))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class GuxActionToast {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '010dd01d365a1ba177cacd74a8c61a9f489df777' }, h("div", { key: '582e2b6b6dc97ac7c556afaeb408482c8e89eb93', class: "gux-header" }, h("div", { key: 'c7afddacb4a8bbd5246bfdefbca8164687a45a95', class: "gux-icon" }, h("slot", { key: 'db6b305fe9b53933063e47d6e5207609e8e23525', name: "icon" })), h("div", { key: 'e24ba835cad0fc60ad654202d5770a1e2169a692', class: "gux-title" }, h("slot", { key: 'a9cce4c0c2fcde5430c989edb5aa67f968c57eaf', name: "title" }))), h("div", { key: 'cb6ae2190eb7c73a4dece91bc6b0e4e40f797df6', class: "gux-message" }, h("slot", { key: '8c5feb27d71065d572ee20b9d2eaa03cc6b4eeb7', name: "message" })), h("div", { key: '5200444b6bddcc717619ee332a56f7c93dbc8dd8', class: "gux-action-buttons" }, h("div", { key: '78d4def0b4d74a9eaba696d6976e49f5972f540a', class: "gux-positive-button" }, h("slot", { key: '8d7754c3c6a12359ccffef190fff1a7ff69a2236', name: "positive-button" })), h("div", { key: '807e94ed45811f3c4116acebadd08a61ef733431', class: "gux-negative-button" }, h("slot", { key: '4fa3e73efe2969293711cee259dcceeae2459b1c', name: "negative-button" })))));
+        return (h(Host, { key: '57f38300fffab4419c9a753efe743d202809cbb7' }, h("div", { key: 'f16f68c58d37f8f20b7a3bf45fcd84862018044a', class: "gux-header" }, h("div", { key: 'c5b52b07ab320280624b2775ef92289a27e44c22', class: "gux-icon" }, h("slot", { key: 'a9a8a183d8f8bb352443beaf41761a2851b7b2fb', name: "icon" })), h("div", { key: '4b26d426c07cb5193bacb9d18ded4a954ebe4d8a', class: "gux-title" }, h("slot", { key: 'b70271fd9475c858b6811efc369c2968832cb038', name: "title" }))), h("div", { key: '729ef9be2c7bb61e00cbab7f58f9f74edf0a6458', class: "gux-message" }, h("slot", { key: '233db2929092118ffdb8fa84aaa58651f5f09742', name: "message" })), h("div", { key: 'cc99ab8c945f4fe49c922252af04401a29024b30', class: "gux-action-buttons" }, h("div", { key: '81451056ee5c4922fe3ee9c7d03b727c36d4384c', class: "gux-positive-button" }, h("slot", { key: 'c1486c7fab07990b4119ed854afb061c7cbd4ac8', name: "positive-button" })), h("div", { key: '50b8d126d158e8811fa0cde14326fa970bdcda4c', class: "gux-negative-button" }, h("slot", { key: '37d1f81807d5b28b5ef6714c8c15d184974a9461', name: "negative-button" })))));
     }
     static get is() { return "gux-action-toast-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -58,7 +58,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: '2a75a6c25ba64caa912e2208ab81c18387086529', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '388c35f13069f7f54bff75ea298f730862ca39fb', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {