genesys-spark-components 4.49.0 → 4.51.0

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

@@ -1,8 +1,14 @@
+const useRegionalDates = jest.fn().mockReturnValue(false);
+jest.mock('i18n/use-regional-dates', () => ({
+    __esModule: true,
+    useRegionalDates
+}));
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxMonthPicker } from "../gux-month-picker";
 import { GuxMonthCalendar } from "../gux-month-calendar/gux-month-calendar";
 import { GuxMonthList } from "../gux-month-calendar/gux-month-list/gux-month-list";
 import { GuxMonthListItem } from "../gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item";
+import { languageList } from "../../../../i18n/languageList";
 const components = [
     GuxMonthPicker,
     GuxMonthCalendar,
@@ -17,11 +23,28 @@ describe('gux-month-picker-beta', () => {
         const component = page.rootInstance;
         expect(component).toBeInstanceOf(GuxMonthPicker);
     });
-    describe('#render', () => {
-        it(`should render the component as expected`, async () => {
-            const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
-            const page = await newSpecPage({ components, language, html });
-            expect(page.root).toMatchSnapshot();
+    describe('#render using non regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(false);
+        });
+        languageList.forEach(language => {
+            it(`should render the component as expected`, async () => {
+                const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
+                const page = await newSpecPage({ components, language, html });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+    describe('#render using regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(true);
+        });
+        languageList.forEach(language => {
+            it(`should render the component as expected`, async () => {
+                const html = '<gux-month-picker-beta value=2022-01></gux-month-picker-beta>';
+                const page = await newSpecPage({ components, language, html });
+                expect(page.root).toMatchSnapshot();
+            });
         });
     });
 });

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

@@ -33,7 +33,7 @@ export class GuxSegmentedControlItem {
     }
     renderTooltip() {
         if (this.iconOnly) {
-            return (h("gux-tooltip", null, getSlotTextContent(this.root, 'text')));
+            return (h("gux-tooltip", null, h("div", { slot: "content" }, getSlotTextContent(this.root, 'text'))));
         }
     }
     renderIconSlot() {
@@ -45,18 +45,18 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: 'd91ef096989c854b0a65713c1102b94a842caaeb', class: {
+        return (h("div", { key: '99ca10f1505b6c7febda6f8a728450d3e47bddc4', class: {
                 'gux-container': true,
                 'gux-start': this.isInStartPosition(this.root),
                 'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: '96d54e7dce6661d3c7749f0fc3325529d00d2ac2', class: {
+            } }, h("button", { key: '0ec79b3df9b6d395dd01b7cf5acbc7b88debf789', 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: 'a6c5baf28bee4abf89ce7665e88b456492bd2dc0', class: {
+            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '6c520a2b9dbdb5894d3f9a233730a19d4c850950', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '4a52bfeae2a62f8c097fb322afc427574df6445f', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'ff26f8670d4b066d7999c020798913e4642b6042', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,29 +1,67 @@
+const useRegionalDates = jest.fn().mockReturnValue(false);
+jest.mock('i18n/use-regional-dates', () => ({
+    __esModule: true,
+    useRegionalDates
+}));
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxTime } from "../gux-time";
 import { timeZoneIdentifiers } from "../../../../i18n/time-zone/identifiers";
+import { languageList } from "../../../../i18n/languageList";
 const components = [GuxTime];
 const language = 'en';
 const date = '2022-07-07T13:35:30.100Z';
+const testCases = [
+    `<gux-time-beta datetime=${date} format="short"></gux-time-beta>`,
+    `<gux-time-beta datetime=${date} format="medium"></gux-time-beta>`,
+    `<gux-time-beta datetime=${date} format="full"></gux-time-beta>`,
+    `<gux-time-beta datetime=${date} format="long"></gux-time-beta>`
+];
 describe('gux-time', () => {
-    describe('#render different time formats eg(short,medium,full,long)', () => {
-        [
-            `<gux-time-beta datetime=${date} format="short"></gux-time-beta>`,
-            `<gux-time-beta datetime=${date} format="medium"></gux-time-beta>`,
-            `<gux-time-beta datetime=${date} format="full"></gux-time-beta>`,
-            `<gux-time-beta datetime=${date} format="long"></gux-time-beta>`
-        ].forEach((html, index) => {
-            it(`should render component as expected (${index + 1})`, async () => {
-                const page = await newSpecPage({ components, html, language });
-                expect(page.root).toMatchSnapshot();
+    describe('#render using non regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(false);
+        });
+        describe('#render different time formats eg(short,medium,full,long)', () => {
+            languageList.forEach(language => {
+                testCases.forEach((html, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
+        });
+        describe('#render different time zones', () => {
+            timeZoneIdentifiers.forEach((timeZone) => {
+                it(`should work as expected for "${timeZone}"`, async () => {
+                    const html = `<gux-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-time-beta>`;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
             });
         });
     });
-    describe('#render different time zones', () => {
-        timeZoneIdentifiers.forEach((timeZone) => {
-            it(`should work as expected for "${timeZone}"`, async () => {
-                const html = `<gux-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-time-beta>`;
-                const page = await newSpecPage({ components, html, language });
-                expect(page.root).toMatchSnapshot();
+    describe('#render using regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(true);
+        });
+        describe('#render different time formats eg(short,medium,full,long)', () => {
+            languageList.forEach(language => {
+                testCases.forEach((html, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
+        });
+        describe('#render different time zones', () => {
+            timeZoneIdentifiers.forEach((timeZone) => {
+                it(`should work as expected for "${timeZone}"`, async () => {
+                    const html = `<gux-time-beta time-zone=${timeZone} datetime="2022-07-07T12:00:00.000Z" format="full"></gux-time-beta>`;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
             });
         });
     });

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

@@ -5,13 +5,17 @@ describe('gux-tooltip-beta', () => {
             `
         <div id="element" lang="en">
           <div>Element</div>
-          <gux-tooltip-beta>Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta>
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `,
             `
         <div lang="en">
           <div id="element">Element</div>
-          <gux-tooltip-beta for="element">Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta for="element">
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `
         ].forEach((html, index) => {

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

@@ -13,13 +13,17 @@ describe('gux-tooltip-beta', () => {
             `
         <div>
           <div>Element</div>
-          <gux-tooltip-beta>Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta>
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `,
             `
         <div>
           <div id="element">Element</div>
-          <gux-tooltip-beta for="element">Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta for="element">
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `
         ].forEach((html, index) => {
@@ -34,13 +38,17 @@ describe('gux-tooltip-beta', () => {
             `
         <div>
           <div>Element</div>
-          <gux-tooltip-beta>Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta>
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `,
             `
         <div>
           <div id="element">Element</div>
-          <gux-tooltip-beta for="element">Tooltip</gux-tooltip-beta>
+          <gux-tooltip-beta for="element">
+            <div slot="content">Tooltip</div>
+          </gux-tooltip-beta>
         </div>
       `
         ].forEach((html, index) => {

package/dist/collection/components/stable/gux-button/gux-button.css

@@ -64,6 +64,7 @@ button:active:enabled {
 button:focus-visible:enabled {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
 button.gux-primary {
   color: var(--gse-ui-button-primary-default-foregroundColor);
@@ -126,6 +127,7 @@ button.gux-inline {
   color: var(--gse-ui-link-default-foregroundColor);
   background: none;
   border: none;
+  border-radius: 0;
 }
 button.gux-inline[disabled] {
   color: var(--gse-ui-link-disabled-foregroundColor);

package/dist/collection/components/stable/gux-calendar/tests/gux-calendar.spec.js

@@ -1,7 +1,19 @@
+const useRegionalDates = jest.fn().mockReturnValue(false);
+jest.mock('i18n/use-regional-dates', () => ({
+    __esModule: true,
+    useRegionalDates
+}));
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxCalendar } from "../gux-calendar";
+import { languageList } from "../../../../i18n/languageList";
 const components = [GuxCalendar];
 const language = 'en';
+const testCases = [
+    `<gux-calendar mode="single" value="1997-08-29"></gux-calendar>`,
+    `<gux-calendar mode="range" number-of-months="2" value="2019-11-25/2019-12-02"></gux-calendar>`,
+    `<gux-calendar mode="single" value="1997-08-29" start-day-of-week="6"></gux-calendar>`,
+    `<gux-calendar mode="single" value="1997-08-29" lang="ar"></gux-calendar>`
+];
 describe('gux-datepicker', () => {
     it('should build', async () => {
         const page = await newSpecPage({
@@ -12,19 +24,38 @@ describe('gux-datepicker', () => {
         expect(page.rootInstance).toBeInstanceOf(GuxCalendar);
     });
     describe('#render', () => {
-        [
-            `<gux-calendar mode="single" value="1997-08-29"></gux-calendar>`,
-            `<gux-calendar mode="range" number-of-months="2" value="2019-11-25/2019-12-02"></gux-calendar>`,
-            `<gux-calendar mode="single" value="1997-08-29" start-day-of-week="6"></gux-calendar>`,
-            `<gux-calendar mode="single" value="1997-08-29" lang="ar"></gux-calendar>`
-        ].forEach((input, index) => {
-            it(`should render component as expected (${index + 1})`, async () => {
-                const page = await newSpecPage({
-                    components,
-                    html: input,
-                    language
+        describe('#render using non regional dates', () => {
+            beforeAll(() => {
+                useRegionalDates.mockReturnValue(false);
+            });
+            languageList.forEach(language => {
+                testCases.forEach((input, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const page = await newSpecPage({
+                            components,
+                            html: input,
+                            language
+                        });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
+        });
+        describe('#render using regional dates', () => {
+            beforeAll(() => {
+                useRegionalDates.mockReturnValue(true);
+            });
+            languageList.forEach(language => {
+                testCases.forEach((input, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const page = await newSpecPage({
+                            components,
+                            html: input,
+                            language
+                        });
+                        expect(page.root).toMatchSnapshot();
+                    });
                 });
-                expect(page.root).toMatchSnapshot();
             });
         });
     });

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css

@@ -50,9 +50,6 @@ button {
   display: inline-flex;
   align-items: center;
 }
-.gux-copy-to-clipboard-wrapper gux-tooltip .gux-tooltip-content > * {
-  vertical-align: middle;
-}
 .gux-copy-to-clipboard-wrapper gux-tooltip gux-icon {
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.js

@@ -50,14 +50,14 @@ export class GuxCopyToClipboard {
         }
     }
     renderTooltip() {
-        return (h("gux-tooltip", { placement: "bottom-end" }, h("div", { class: "gux-tooltip-content" }, this.renderTooltipIcon(), h("span", null, this.i18n(this.tooltipContent)))));
+        return (h("gux-tooltip", { placement: "bottom-end" }, h("div", { slot: "content" }, this.renderTooltipIcon(), h("span", null, this.i18n(this.tooltipContent)))));
     }
     async componentWillLoad() {
         trackComponent(this.root);
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: 'f5625826126c249bd9a72d25932114287b6d34b8', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: '58b397ebef31117597a142eb981c0eedefa62542', class: "gux-copy-content" }, h("slot", { key: '9a981366d109a3553131b204095bbef5a7209bfa', name: "content" }), h("gux-icon", { key: '7be0b55c634f057336ff459e2febc5740635bfab', "icon-name": "fa/copy-regular", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: '44a5d72f48a5ae3f61efdd8fb0d5a6b4a94cca01', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: 'efb174d98e3f69e2c599703e44e4074598663070', class: "gux-copy-content" }, h("slot", { key: 'e287d43bcac5f3a09ef4bce02ef0dfb0ca9472e5', name: "content" }), h("gux-icon", { key: '6ee5929df43b450919a3c9bed98ab863712d24df', "icon-name": "fa/copy-regular", decorative: true })), this.renderTooltip()));
     }
     static get is() { return "gux-copy-to-clipboard"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-datepicker/tests/gux-datepicker.e2e.js

@@ -103,10 +103,5 @@ describe('gux-datepicker', () => {
         expect(labels[0].textContent).toBe('Start');
         expect(labels[0].className).not.toContain('gux-sr-only');
         expect(labels[1].textContent).toBe('End');
-        // await element.setAttribute('label', ['test1', 'test2']);
-        // await page.waitForChanges();
-        // expect(labels[0].textContent).toEqual('test1');
-        // expect(labels[0].className).not.toContain('gux-sr-only');
-        // expect(labels[1].textContent).toEqual('test2');
     });
 });

package/dist/collection/components/stable/gux-datepicker/tests/gux-datepicker.spec.js

@@ -1,35 +1,47 @@
+const useRegionalDates = jest.fn().mockReturnValue(false);
+jest.mock('i18n/use-regional-dates', () => ({
+    __esModule: true,
+    useRegionalDates
+}));
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxDatepicker } from "../gux-datepicker";
+import { languageList } from "../../../../i18n/languageList";
+const testCases = [
+    `<gux-datepicker value="1997-08-15"></gux-datepicker>`,
+    `<gux-datepicker value="1997-08-15" format="mm/dd/yy"></gux-datepicker>`,
+    `<gux-datepicker value="1997-08-15" format="mm.dd.yyyy"></gux-datepicker>`,
+    `<gux-datepicker value="1997-08-15" disabled></gux-datepicker>`,
+    `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" number-of-months="2" ></gux-datepicker>`,
+    `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" min-date="2019-11-10" max-date="2019-12-31" number-of-months="2" ></gux-datepicker>`,
+    `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" min-date="2019-11-10" max-date="2019-12-31" number-of-months="2" format="mm.dd.yyyy" ></gux-datepicker>`,
+    `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" number-of-months="2" disabled></gux-datepicker>`,
+    `<gux-datepicker value="1997-08-15" start-day-of-week="6"></gux-datepicker>`
+];
 const components = [GuxDatepicker];
-const language = 'en';
 describe('gux-datepicker', () => {
-    it('should build', async () => {
-        const page = await newSpecPage({
-            components,
-            html: `<gux-datepicker></gux-datepicker>`,
-            language
+    describe('#render using non regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(false);
+        });
+        languageList.forEach(language => {
+            testCases.forEach((html, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
         });
-        expect(page.rootInstance).toBeInstanceOf(GuxDatepicker);
     });
-    describe('#render', () => {
-        [
-            `<gux-datepicker value="1997-08-15"></gux-datepicker>`,
-            `<gux-datepicker value="1997-08-15" format="mm/dd/yy"></gux-datepicker>`,
-            `<gux-datepicker value="1997-08-15" format="mm.dd.yyyy"></gux-datepicker>`,
-            `<gux-datepicker value="1997-08-15" disabled></gux-datepicker>`,
-            `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" number-of-months="2" ></gux-datepicker>`,
-            `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" min-date="2019-11-10" max-date="2019-12-31" number-of-months="2" ></gux-datepicker>`,
-            `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" min-date="2019-11-10" max-date="2019-12-31" number-of-months="2" format="mm.dd.yyyy" ></gux-datepicker>`,
-            `<gux-datepicker mode="range" value="2019-11-25/2019-12-02" number-of-months="2" disabled></gux-datepicker>`,
-            `<gux-datepicker value="1997-08-15" start-day-of-week="6"></gux-datepicker>`
-        ].forEach((input, index) => {
-            it(`should render component as expected (${index + 1})`, async () => {
-                const page = await newSpecPage({
-                    components,
-                    html: input,
-                    language
+    describe('#render using regional dates', () => {
+        beforeAll(() => {
+            useRegionalDates.mockReturnValue(true);
+        });
+        languageList.forEach(language => {
+            testCases.forEach((html, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
                 });
-                expect(page.root).toMatchSnapshot();
             });
         });
     });

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

@@ -74,17 +74,17 @@ slot[name=start-align-buttons]::slotted(:not(button, gux-button-slot)) {
   padding-right: var(--gse-ui-modal-padding);
   padding-left: var(--gse-ui-modal-padding);
   margin-top: var(--gse-ui-modal-gap);
-  margin-bottom: var(--gse-ui-modal-gap);
   overflow-y: auto;
 }
-:host dialog .gux-modal-container .gux-modal-content.gux-no-buttons {
-  margin-bottom: 0;
-}
 :host dialog .gux-modal-container .gux-button-footer {
   display: flex;
   justify-content: space-between;
   padding-right: var(--gse-ui-modal-padding);
   padding-left: var(--gse-ui-modal-padding);
+  margin-top: var(--gse-ui-modal-gap);
+}
+:host dialog .gux-modal-container .gux-button-footer.gux-no-buttons {
+  display: none;
 }
 @media (max-width: 416px) {
   :host dialog .gux-modal-container.gux-small, :host dialog .gux-modal-container.gux-medium, :host dialog .gux-modal-container.gux-large {

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

@@ -50,23 +50,26 @@ export class GuxModal {
         return Boolean(this.root.querySelector('[slot="title"]'));
     }
     hasFooterButtons() {
-        return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
-            Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
+        var _a, _b;
+        const startAlignButtonsSlot = this.root.querySelector('[slot="start-align-buttons"]');
+        const endAlignButtonsSlot = this.root.querySelector('[slot="end-align-buttons"]');
+        return (Boolean((_a = startAlignButtonsSlot === null || startAlignButtonsSlot === void 0 ? void 0 : startAlignButtonsSlot.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+            Boolean((_b = endAlignButtonsSlot === null || endAlignButtonsSlot === void 0 ? void 0 : endAlignButtonsSlot.textContent) === null || _b === void 0 ? void 0 : _b.trim()));
     }
     render() {
         const hasModalTitleSlot = this.hasModalTitleSlot();
-        const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHTMLId();
-        return (h("dialog", { key: '26d5277c5f4873955b21cd4d14d0bd12cfbe8d2a', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '0a8f664358fca4bc4ffa434b2e5c2dd7e5644fb0', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '59323a947e1f0c8d007cd61708962e89023aa25a', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '0206c7b2fd10730ff08f6b25b43824666159e6dc', class: {
-                'gux-modal-content': true,
-                'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'a7a514847b4e1c6275d92fe0e0f4f984fd224ff3' }, h("slot", { key: 'f2c88de369d5b35122251bba209ad6dd46be5bdb', name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
+        return (h("dialog", { key: 'ac1115c2f1f82756df5d91c3d5659fa3d5dd781a', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'bfcfd0f73112b008ef2cf3202076598a87de3f26', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '200698852414120c36c9ec52edde4674fa78c66b', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '6b0fbadcd779f6b71e919a8e1e09bf6a1cbb8bd2', class: "gux-modal-content" }, h("p", { key: '9a526f2eadad360a889850a1f0e4bda2d7c88997' }, h("slot", { key: '2c11aa392f022ba9752c783d309bbb04dd91c46b', name: "content" }))), this.renderButtonFooter())));
     }
     renderTitle(titleID) {
         return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
     }
     renderButtonFooter() {
-        return (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
+        const hasFooterButtons = this.hasFooterButtons();
+        return (h("div", { class: {
+                'gux-button-footer': true,
+                'gux-no-buttons': !hasFooterButtons
+            } }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
     }
     onCloseHandler() {
         this.guxdismiss.emit();

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js

@@ -84,7 +84,7 @@ export class GuxPaginationEllipsisButton {
         this.applyInputListener();
     }
     render() {
-        return (h(Host, { key: '5979c0eb8f14e6ef6f8116f32fb9767bfbb8afa2' }, h("button", { key: '39050d70fbad9934bfb716147bb6b34b8d93fe7a', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '1b770c24d315059b532fc0461d38a96b723a09bd', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })), h("gux-tooltip", { key: '5edec81da9f5d2cf5b6462faa22a2bcb6b244e15', for: "popover-target" }, this.i18n('goToPage')), h("gux-popover", { key: '4ccc2d6b8e33062c289f613c813170223f6c3624', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'd3714a5a950e76c3b3d656a720e0e6d7b99caa3e', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'a437be9f072bc4494bf48d546d4593a4232c2000' }, h("input", { key: '8d380175646958355bbad4784a03752c3f12d45e', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), h("label", { key: 'dcbcb9eee1968bbe0c1a76e847cc745271ebfe5e', slot: "label" })))));
+        return (h(Host, { key: '5979c0eb8f14e6ef6f8116f32fb9767bfbb8afa2' }, h("button", { key: '39050d70fbad9934bfb716147bb6b34b8d93fe7a', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '1b770c24d315059b532fc0461d38a96b723a09bd', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })), h("gux-tooltip", { key: '5edec81da9f5d2cf5b6462faa22a2bcb6b244e15', for: "popover-target" }, h("div", { key: '6b35b456eeed78feae1d5dee1d94f7937d607a0d', slot: "content" }, this.i18n('goToPage'))), h("gux-popover", { key: '1575c0d1573a88ec4c6f6258851bebde33832706', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '51a98e4b06d6f5ab850cdb6fc2c71aa2f4b9cb0c', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'e0fe05c1bf3eb004cadd637467027d6244a4d86f' }, h("input", { key: '99144f1f90e7ba16e00710da268df21645ae456d', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), h("label", { key: 'dd72b30cad5eaf7fdabe8279c512dd118e4f64a0', slot: "label" })))));
     }
     static get is() { return "gux-pagination-ellipsis-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class GuxPaginationItemCounts {
         }
     }
     render() {
-        return (h("div", { key: 'f4398ee2d8d7ca6873eff4d05a8e2f18f0d05723', class: "gux-pagination-item-counts-container" }, h("span", { key: '563ca9b8a7a726cc83922af84d2183de6d8f7814', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '0405f2cb234fc32e8bc39f68f0e0565ed22fb88c', class: "gux-pagination-item-counts-container" }, h("span", { key: '22a37b896e4868d7a1de646c1a51beaefd0f9088', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
         })), this.getPaginationItemCountsRange()));

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

@@ -19,7 +19,7 @@ export class GuxPaginationItemsPerPage {
             }) }, 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: 'c4502412829ea603167742d74ec0535a1897ffa6', class: "gux-pagination-items-per-page-container" }, h("div", { key: 'e2c95e3ba45c052537e8e6d6f617e1b75a10209d', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '9c5dc9f8ba0010794021f07be64746a8ed045d34', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '67c09cd61fc1fb7b8235efdac9203baea373995e', class: "gux-pagination-items-per-page-container" }, h("div", { key: '362a8df1b349f2e7ea3feaff922a703454219691', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'c1f30f957e7f7da2c907c64548e6617e8f870db7', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page"; }
     static get originalStyleUrls() {

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

@@ -146,10 +146,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: '1480dd2172bfa62a2b8aa552985d8e86a7e9f019', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '7bf5f65da1df65ddfca8f8d6f3edc5981a4b8368', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: '5997baac0cc1197432784b33daa27549eb765257', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '7f83cdcd650b6a3b0bf655a458a48f41061a41a4', class: "gux-arrow-caret" })), h("div", { key: '6335e2f83e504b226b13f2435be073b834fea9e2', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'b0ec5ef26ba41fed994a9830fbebbf9ca2bc370e', name: "title" }), this.renderDismissButton()), h("div", { key: 'bc76ae69856b8f00caa741fb287a1aeafd7881ae', class: "gux-popover-content" }, h("slot", { key: 'c0327f47b92aaf50f118d465f84a05d713ef5c9f' }))));
+            }, "data-placement": true }, h("div", { key: '6fb89e7413e82843c5bb6df5047ce5693049ad7f', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'da4a064505c3e8a3e48405bce24bb41a2e7cb789', class: "gux-arrow-caret" })), h("div", { key: 'f25f43e3417e8789808cd2b328a6555472d5678c', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '6af3160507024501dd9942322bcde72f758d9e29', name: "title" }), this.renderDismissButton()), h("div", { key: 'bafb5459b541fccd4ce87f7ad25802d9b694d89e', class: "gux-popover-content" }, h("slot", { key: 'c806ef946192d874f8fbab8fe87a8efdf46d74b6' }))));
     }
     static get is() { return "gux-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -126,10 +126,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: '4b22830c9691287be3680ce64fc6a96e2ab7b832', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '424ec49a8df793d4e3ef4c68aaca9794c761248e', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: '7a59fc5797068f3f8aa48e91d831526371430f12', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), h("div", { key: '42baad2bbe3cc57010d48ff284257e2382975f47', class: "gux-popover-content" }, h("slot", { key: 'bde18d210dcd0c3889ad55fdfc4e6a6e9b89f49a' }))));
+            }, "data-placement": true }, h("div", { key: '3273e0f5b407ebecfe67dff9d44340d83e15cf24', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })), h("div", { key: 'a3a3ef85f2a84a285d68f94def1e8a4bb72a009e', class: "gux-popover-content" }, h("slot", { key: '36427e39777c5734ebcfffe4812172ff755661ea' }))));
     }
     static get is() { return "gux-popover-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,13 +89,13 @@ export class GuxPopup {
         }
     }
     render() {
-        return (h("div", { key: '18794d9d8b14859efc6d78c285acf9d28d85ab6e', class: {
+        return (h("div", { key: 'd92f08e650bdaa7f3b592b5df0a396c2ee9e4933', class: {
                 'gux-target-container': true,
                 'gux-disabled': this.disabled
-            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: 'd30465b0718ba7770892b466349b89e37476889f', name: "target" }), h("div", { key: '8d923e571ed44c599eebe8f48776dd06ed76f664', class: {
+            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: '879b091cc4ca2a7e29c1fbb8fb82c63c4fa51781', name: "target" }), h("div", { key: '7502a88402da33b4fd2340f61a0ab4f09c2af305', class: {
                 'gux-popup-container': true,
                 'gux-expanded': this.expanded && !this.disabled
-            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: 'c20c24e3f91118cc3ff72f3622eeb24ebcd0d199', name: "popup" }))));
+            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: '2797b1d969cfe3ac464b8c72833dda6db34ac21e', name: "popup" }))));
     }
     static get is() { return "gux-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class GuxRadialLoading {
         this.getI18nValue = await buildI18nForComponent(this.root, modalComponentResources);
     }
     render() {
-        return (h(GuxSpinnerState, { key: 'eb7b2fd11fe4302cd48acb030cb779058e73e22d', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
+        return (h(GuxSpinnerState, { key: 'd161bde7c2650393d25832c93afe72563ee0b173', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
     }
     static get is() { return "gux-radial-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class GuxRating {
         }
     }
     render() {
-        return (h(Host, { key: '6b4a6bea9a678cc02dd93a948bb1f5a780b64c53', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, h("div", { key: 'e12d9c8e2e24cdc8d594bb7adf35ac2227e398a3', ref: (el) => (this.starContainer = el), class: {
+        return (h(Host, { key: '624f8d79c2dc38f29d4236a12cd6c2489f497cf8', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, h("div", { key: '7a272f8c57ad78f2836e4e86a76c7ed6f0cc190c', ref: (el) => (this.starContainer = el), class: {
                 'gux-rating-star-container': true,
                 'gux-disabled': this.disabled
             } }, this.getRatingStarElements())));

package/dist/collection/components/stable/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class GuxSkipNavigationItem {
     render() {
-        return (h(Host, { key: 'a5497d8e9a929b6e24979254a27ff850d8c8fe63', role: "listitem" }, h("slot", { key: '6e17d9dfa6fbd85f2df554f6cb5d7cd6ff27ae44' })));
+        return (h(Host, { key: '5394ed7959d46e0134f1629285e8109d18a227a0', role: "listitem" }, h("slot", { key: 'c9f02719eeb6fe344acec077022d471a83f58699' })));
     }
     static get is() { return "gux-skip-navigation-item"; }
     static get encapsulation() { return "shadow"; }