genesys-spark-components 4.186.0 → 4.187.0

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

@@ -1,13 +1,18 @@
-import { forceUpdate, h } from "@stencil/core";
-import { getWeekdays, getFirstOfMonth, localizedYearMonth, firstDateInWeek, AttributeSynchronizer } from "./services/calendar.service";
-import { getDesiredLocale, getFirstDayOfWeek, buildI18nForComponent } from "../../../i18n";
-import translationResources from "./i18n/en.json";
+import { h } from "@stencil/core";
+import { Temporal } from "@js-temporal/polyfill";
 import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
-import { logError } from "../../../utils/error/log-error";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
-import { Temporal } from "@js-temporal/polyfill";
+import { getDesiredLocale, getFirstDayOfWeek, buildI18nForComponent } from "../../../i18n";
+import { getWeekdays, getFirstOfMonth, localizedYearMonth, firstDateInWeek, isoToTemporalDate } from "./gux-calendar.service";
+import translationResources from "./i18n/en.json";
 export class GuxCalendar {
     constructor() {
+        this.locale = 'en';
+        this.MONTH_DATE_COUNT = 42; // Total number of dates that will display for each month in the calendar
+        this.defaultValue = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.formDisabled = false;
         /**
          * The date that receives focus when selecting a specific day. This also
          * determines what month is currently displayed. The corresponding element
@@ -15,57 +20,95 @@ export class GuxCalendar {
          * may be on other parts of the component.
          */
         this.focusDate = Temporal.Now.plainDateISO();
-        this.disabled = false;
-        this.locale = 'en';
-        // Total number of dates that will display for each month in the calendar
-        this.MONTH_DATE_COUNT = 42;
     }
-    async guxForceUpdate() {
-        forceUpdate(this.root);
+    onValueChange(newValue, oldValue) {
+        var _a;
+        if (this.isInvalidDate(newValue)) {
+            return;
+        }
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue);
+        }
+        this.focusDate = isoToTemporalDate(newValue) || Temporal.Now.plainDateISO();
+        this.focusOnFocusDate();
+        simulateNativeEvent(this.root, 'input');
+        if (oldValue !== newValue) {
+            simulateNativeEvent(this.root, 'change');
+        }
+    }
+    formAssociatedCallback(form) {
+        console.info('Form associated:', form);
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
     }
-    get slottedInput() {
-        return this.root.querySelector('input[type="date"]');
+    formResetCallback() {
+        this.value = this.defaultValue;
+    }
+    formStateRestoreCallback(state
+    // mode: 'restore' | 'autocomplete' // eslint-disable-line @typescript-eslint/no-unused-vars
+    ) {
+        this.value = state;
+    }
+    connectedCallback() {
+        this.defaultValue = this.value;
     }
     async componentWillLoad() {
-        if (!this.slottedInput) {
-            logError(this.root, 'You must slot a date input element like so: input[type="date"].');
-        }
+        var _a;
         this.locale = getDesiredLocale(this.root);
-        // Set start day of week
         this.startDayOfWeek = this.startDayOfWeek || getFirstDayOfWeek(this.locale);
         this.i18n = await buildI18nForComponent(this.root, translationResources);
-        const selectedDate = this.getSelectedDate();
-        if (selectedDate) {
-            this.focusDate = selectedDate;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+        const valueDate = isoToTemporalDate(this.value);
+        if (valueDate) {
+            this.focusDate = valueDate;
         }
-        this.attributeSynchronizer = new AttributeSynchronizer({
-            readFrom: this.slottedInput,
-            writeTo: this,
-            mappings: {
-                min: (val) => {
-                    return val ? Temporal.PlainDate.from(val) : undefined;
-                },
-                max: (val) => {
-                    return val ? Temporal.PlainDate.from(val) : undefined;
-                },
-                disabled: val => val
-            }
-        });
-    }
-    onSlotChange() {
-        this.attributeSynchronizer.setSourceElement(this.slottedInput);
     }
-    async disconnectedCallback() {
-        this.attributeSynchronizer.disconnect();
+    onDayKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.shiftFocusDate({ weeks: 1 });
+                this.focusOnFocusDate();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.shiftFocusDate({ weeks: -1 });
+                this.focusOnFocusDate();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.shiftFocusDate({ days: -1 });
+                this.focusOnFocusDate();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.shiftFocusDate({ days: 1 });
+                this.focusOnFocusDate();
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.shiftFocusDate({ months: 1 });
+                this.focusOnFocusDate();
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.shiftFocusDate({ months: -1 });
+                this.focusOnFocusDate();
+                break;
+        }
     }
-    detectDayClick(event) {
-        if (!(event.target.tagName === 'GUX-DAY-BETA')) {
-            return;
+    onDayClick(event) {
+        if (event.target.tagName === 'GUX-DAY-BETA') {
+            if (this.readonly) {
+                return;
+            }
+            const dayElement = event.target;
+            this.value = dayElement.day;
+            event.stopPropagation();
         }
-        const dayElement = event.target;
-        const selectedDate = Temporal.PlainDate.from(dayElement.day);
-        this.selectDate(selectedDate);
-        event.stopPropagation();
     }
     /**
      * Finds the `gux-day` element corresponding to the provided
@@ -75,32 +118,24 @@ export class GuxCalendar {
     getGuxDayForDate(dateStr) {
         return this.root.shadowRoot.querySelector(`.day-${dateStr}`);
     }
-    selectDate(date) {
-        if (this.isInvalidDate(date)) {
-            return;
-        }
-        const newDateStr = date.toString();
-        this.slottedInput.value = newDateStr;
-        this.focusDate = date;
-        this.focusOnFocusDate();
-        simulateNativeEvent(this.root, 'input');
-        simulateNativeEvent(this.root, 'change');
-    }
     /**
      * Shifts the focused date by the provided interval
      * @param interval A Temporal-compatible interval definition
      */
     shiftFocusDate(interval) {
+        if (this.readonly) {
+            return;
+        }
         const shiftInterval = Temporal.Duration.from(interval);
         let newFocusedValue = this.focusDate.add(shiftInterval);
         // Clamp to the valid range
         if (this.min &&
-            Temporal.PlainDate.compare(newFocusedValue, this.min) == -1) {
-            newFocusedValue = this.min;
+            Temporal.PlainDate.compare(newFocusedValue, isoToTemporalDate(this.min)) == -1) {
+            newFocusedValue = isoToTemporalDate(this.min);
         }
         else if (this.max &&
-            Temporal.PlainDate.compare(newFocusedValue, this.max) == 1) {
-            newFocusedValue = this.max;
+            Temporal.PlainDate.compare(newFocusedValue, isoToTemporalDate(this.max)) == 1) {
+            newFocusedValue = isoToTemporalDate(this.max);
         }
         this.focusDate = newFocusedValue;
     }
@@ -117,42 +152,6 @@ export class GuxCalendar {
             }
         });
     }
-    onKeyDown(event) {
-        switch (event.key) {
-            case ' ':
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.shiftFocusDate({ weeks: 1 });
-                this.focusOnFocusDate();
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.shiftFocusDate({ weeks: -1 });
-                this.focusOnFocusDate();
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.shiftFocusDate({ days: -1 });
-                this.focusOnFocusDate();
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                this.shiftFocusDate({ days: 1 });
-                this.focusOnFocusDate();
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                this.shiftFocusDate({ months: 1 });
-                this.focusOnFocusDate();
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                this.shiftFocusDate({ months: -1 });
-                this.focusOnFocusDate();
-                break;
-        }
-    }
     /**
      * Returns true if the date is less than the min date or greater than the max date
      */
@@ -162,12 +161,12 @@ export class GuxCalendar {
     }
     getMonthDays() {
         const today = Temporal.Now.plainDateISO();
-        const firstOfMonth = getFirstOfMonth(this.getFocusDate());
+        const firstOfMonth = getFirstOfMonth(this.focusDate);
         const weeks = [];
         let currentWeek = { dates: [] };
         let weekDayIndex = 0;
         const currentMonth = firstOfMonth.month;
-        const selectedValue = this.getSelectedDate();
+        const valueDate = isoToTemporalDate(this.value);
         let currentDate = firstDateInWeek(firstOfMonth, this.startDayOfWeek);
         // Generate all of the dates in the current month
         for (let d = 0; d < this.MONTH_DATE_COUNT + 1; d += 1) {
@@ -181,8 +180,8 @@ export class GuxCalendar {
                 date: Temporal.PlainDate.from(currentDate),
                 disabled: this.isInvalidDate(currentDate),
                 inCurrentMonth: currentMonth === currentDate.month,
-                selected: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.equals(currentDate),
-                focused: this.getFocusDate().equals(currentDate),
+                selected: valueDate === null || valueDate === void 0 ? void 0 : valueDate.equals(currentDate),
+                focused: this.focusDate.equals(currentDate),
                 isCurrentDate: currentDate.equals(today)
             });
             weekDayIndex += 1;
@@ -190,38 +189,49 @@ export class GuxCalendar {
         }
         return weeks;
     }
-    getFocusDate() {
-        return this.focusDate;
+    isFocusableDay(day) {
+        return (day.selected || day.focused) && !this.disabled;
     }
-    getSelectedDate() {
-        if (this.slottedInput.value) {
-            return Temporal.PlainDate.from(this.slottedInput.value);
+    renderPreviousButton() {
+        if (this.readonly) {
+            return null;
         }
-        return null;
+        return (h("button", { type: "button", class: "gux-left", disabled: this.disabled || this.formDisabled, "aria-label": this.i18n('previousMonth', {
+                localizedPreviousMonthAndYear: localizedYearMonth(this.focusDate.add({ months: -1 }), this.locale)
+            }), onClick: () => this.shiftFocusDate({ months: -1 }) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })));
+    }
+    renderNextButton() {
+        if (this.readonly) {
+            return null;
+        }
+        return (h("button", { type: "button", class: "gux-right", disabled: this.disabled || this.formDisabled || this.readonly, "aria-label": this.i18n('nextMonth', {
+                localizedNextMonthAndYear: localizedYearMonth(this.focusDate.add({ months: 1 }), this.locale)
+            }), onClick: () => this.shiftFocusDate({ months: 1 }) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" })));
     }
     renderHeader() {
-        return (h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
-                localizedPreviousMonthAndYear: localizedYearMonth(this.getFocusDate().add({ months: -1 }), this.locale)
-            }), onClick: () => this.shiftFocusDate({ months: -1 }) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), h("span", { class: "gux-header-month-and-year" }, localizedYearMonth(this.getFocusDate(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
-                localizedNextMonthAndYear: localizedYearMonth(this.getFocusDate().add({ months: 1 }), this.locale)
-            }), onClick: () => this.shiftFocusDate({ months: 1 }) }, h("gux-icon", { size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))));
+        return (h("div", { class: "gux-header" }, this.renderPreviousButton(), h("div", { class: "gux-header-month-and-year" }, localizedYearMonth(this.focusDate, this.locale)), this.renderNextButton()));
     }
     renderContent() {
-        return (h("div", { onKeyDown: e => void this.onKeyDown(e), onClick: e => void this.detectDayClick(e) }, h("div", { class: "gux-content" }, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", null, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => {
+        return (h("div", { onKeyDown: e => void this.onDayKeyDown(e), onClick: e => void this.onDayClick(e) }, h("div", { class: "gux-content" }, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", null, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => {
             const isoDateStr = day.date.toString();
-            return (h("gux-day-beta", { day: isoDateStr, "aria-current": day.selected ? 'true' : 'false', disabled: day.disabled ? true : false, tabindex: day.selected || day.focused ? '0' : '-1', class: `
+            return (h("gux-day-beta", { day: isoDateStr, "aria-current": day.selected ? 'true' : 'false', "aria-disabled": !day.inCurrentMonth || day.disabled || this.disabled
+                    ? 'true'
+                    : 'false', disabled: day.disabled ? true : false, tabindex: this.isFocusableDay(day) ? '2' : '-1', class: `
                             ${!day.inCurrentMonth || day.disabled ? 'gux-muted' : ''}
-                            day-${isoDateStr}  
+                            day-${isoDateStr}
                           ` }));
         }))))))));
     }
     render() {
-        return (h("div", { key: 'fe73d841f223be6ddca2961f70218cc3eb670ae2', class: `gux-calendar-beta ${this.disabled ? 'gux-disabled' : ''}` }, h("slot", { key: '963de79dccf6552e1861f47543992f11d0078e32', onSlotchange: () => {
-                this.onSlotChange();
-            } }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: '7bb2da3e23376149f773b686150d73d443199117', class: {
+                'gux-calendar-beta': true,
+                'gux-disabled': this.disabled || this.formDisabled
+            }, "aria-disabled": this.disabled || this.formDisabled ? 'true' : 'false' }, this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["gux-calendar.scss"]
@@ -258,37 +268,136 @@ export class GuxCalendar {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "focusDate": {},
-            "min": {},
-            "max": {},
-            "disabled": {}
-        };
-    }
-    static get methods() {
-        return {
-            "guxForceUpdate": {
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "GuxISODate",
+                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}`",
+                    "references": {
+                        "GuxISODate": {
+                            "location": "import",
+                            "path": "./gux-calendar.types",
+                            "id": "src/components/beta/gux-calendar-beta/gux-calendar.types.ts::GuxISODate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "min": {
+                "type": "string",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxISODate",
+                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}`",
+                    "references": {
+                        "GuxISODate": {
+                            "location": "import",
+                            "path": "./gux-calendar.types",
+                            "id": "src/components/beta/gux-calendar-beta/gux-calendar.types.ts::GuxISODate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "attribute": "max",
+                "mutable": false,
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "original": "GuxISODate",
+                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}`",
                     "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
+                        "GuxISODate": {
+                            "location": "import",
+                            "path": "./gux-calendar.types",
+                            "id": "src/components/beta/gux-calendar-beta/gux-calendar.types.ts::GuxISODate"
                         }
-                    },
-                    "return": "Promise<void>"
+                    }
                 },
+                "required": false,
+                "optional": false,
                 "docs": {
-                    "text": "",
-                    "tags": []
-                }
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "formDisabled": {},
+            "focusDate": {}
+        };
+    }
     static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/beta/gux-calendar-beta/gux-calendar.service.js

@@ -0,0 +1,55 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Given a date, return the first day of the month that date is in.
+ */
+export function getFirstOfMonth(date) {
+    return Temporal.PlainDate.from({
+        day: 1,
+        month: date.month,
+        year: date.year
+    });
+}
+export function getWeekdays(locale, startDayOfWeek) {
+    const days = [];
+    // Sunday
+    const day = new Date(1970, 0, 4);
+    for (let i = 0; i < 7; i++) {
+        const weekday = day.toLocaleString(locale, { weekday: 'narrow' });
+        days.push(weekday);
+        day.setDate(day.getDate() + 1);
+    }
+    return rotateArray(days, startDayOfWeek);
+}
+export function localizedYearMonth(date, locale) {
+    return date.toLocaleString(locale, {
+        calendar: 'gregory',
+        year: 'numeric',
+        month: 'long'
+    });
+}
+/**
+ * Given a starting date and the first day of the week, find the first date of
+ * the week of the provided date. For example, February 1st 2025 is a Saturday.
+ * If the first day of the week is considered Monday (1), this function would
+ * return a date of 2027-01-27.
+ * @param date The date we want to find the start of the week for
+ * @param startDayOfWeek The day that should be considered the first day of the week
+ * @returns The first day of the first week of the provided month
+ */
+export function firstDateInWeek(date, startDayOfWeek) {
+    let dayDelta = startDayOfWeek - date.dayOfWeek;
+    if (dayDelta > 0) {
+        dayDelta = dayDelta - 7;
+    }
+    return date.add({ days: dayDelta });
+}
+export function isoToTemporalDate(iso) {
+    if (iso) {
+        return Temporal.PlainDate.from(iso);
+    }
+    return null;
+}
+function rotateArray(arr, n) {
+    const times = n % arr.length;
+    return arr.concat(arr.splice(0, times));
+}

package/dist/collection/components/beta/gux-calendar-beta/tests/gux-calendar.common.js

@@ -0,0 +1,40 @@
+const basicRenderConfig = [
+    {
+        description: 'should render a gux-calendar-beta component with single date selection',
+        html: `<gux-calendar-beta value="2023-05-19"></gux-calendar-beta>`
+    },
+    {
+        description: 'should render a gux-calendar-beta component with empty date selection',
+        html: `<gux-calendar-beta></gux-calendar-beta>`
+    }
+];
+const constraintRenderConfigs = [
+    {
+        description: 'should render component with min and max date constraints',
+        html: `<gux-calendar-beta value="2023-05-19" min="2023-05-13" max="2023-05-20"></gux-calendar-beta>`
+    }
+];
+const startDayRenderConfigs = [
+    { day: '1', name: 'Monday' },
+    { day: '6', name: 'Saturday' },
+    { day: '7', name: 'Sunday' }
+].map(({ day, name }) => ({
+    description: `should render component with start day of week set to ${name}`,
+    html: `<gux-calendar-beta start-day-of-week="${day}" value="2023-07-28"></gux-calendar-beta>` // nosemgrep
+}));
+const stateRenderConfigs = [
+    {
+        description: 'should render component in disabled state',
+        html: `<gux-calendar-beta disabled value="2023-05-19"></gux-calendar-beta>`
+    },
+    {
+        description: 'should render component in readonly state',
+        html: `<gux-calendar-beta readonly value="2023-05-19"></gux-calendar-beta>`
+    }
+];
+export const renderConfigs = [
+    ...basicRenderConfig,
+    ...constraintRenderConfigs,
+    ...startDayRenderConfigs,
+    ...stateRenderConfigs
+];

package/dist/collection/components/beta/gux-calendar-beta/tests/tests.service.playwright.js

@@ -14,24 +14,24 @@ export async function findSelectedDayElement(page) {
     return page.locator('gux-day-beta[aria-current="true"]');
 }
 export async function validateFocusedDay(page, expectedDate) {
-    const focusedElement = await page.locator(':focus').last();
+    const focusedElement = page.locator(':focus').last();
     await validateDate(focusedElement, expectedDate);
 }
 export async function findDayElement(page, isoDate) {
-    return await page.locator(`.day-${isoDate}`);
+    return page.locator(`.day-${isoDate}`);
 }
 export async function goToPreviousMonth(page) {
-    const button = await page.locator('.gux-left');
+    const button = page.locator('.gux-left');
     await button.click();
     return await page.waitForChanges();
 }
 export async function goToNextMonth(page) {
-    const button = await page.locator('.gux-right');
+    const button = page.locator('.gux-right');
     await button.click();
     return await page.waitForChanges();
 }
 async function validateDate(element, expectedDate) {
     const expectedLabel = Temporal.PlainDate.from(expectedDate).toLocaleString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
-    const labelElement = await element.locator('.gux-sr-only');
+    const labelElement = element.locator('.gux-sr-only');
     expect(await labelElement.textContent()).toBe(expectedLabel);
 }

package/dist/collection/components/beta/gux-cloud-logo/gux-cloud-logo.js

@@ -23,7 +23,7 @@ export class GuxCloudLogo {
         }
     }
     render() {
-        return (h("svg", { key: 'e45930fad4a8a94336b45da49e102817b66e4945', class: {
+        return (h("svg", { key: '7804dd5d41a17ef3253b55d45206433182c22654', class: {
                 'gux-monotone': this.type === 'monotone'
             }, xmlns: "http://www.w3.org/2000/svg", viewBox: this.viewBox, "aria-label": this.i18n('genesysCloudLogo'), role: "img" }, this.renderPaths(this.layout)));
     }

package/dist/collection/components/beta/gux-cloud-logomark/gux-cloud-logomark.js

@@ -11,7 +11,7 @@ export class GuxCloudLogomark {
         trackComponent(this.root, { variant: this.variant });
     }
     render() {
-        return (h("svg", { key: 'f309da3d69edee9695957393a982dd7a7807d253', class: `gux-${this.variant}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", "aria-label": this.i18n('genesysCloudLogomark'), role: "img" }, h("path", { key: '3ba9f456fb76011caed0b9ad31b71046b74297b6', class: "gux-background", d: "M50 0H0V50H50V0Z" }), h("path", { key: '8e2429fcabb75a5456453e2f64014983e35f4cb2', class: "gux-foreground", d: "M29.283 11.5234H20.6388C17.1517 11.5234 14.325 14.3502 14.325 17.8372V17.8967C14.325 21.3838 17.1517 24.2105 20.6388 24.2105H29.283C32.77 24.2105 35.5968 21.3838 35.5968 17.8967V17.8372C35.5968 14.3502 32.77 11.5234 29.283 11.5234Z" }), h("path", { key: '52441fac21628323ca6c6f15430d08e23f3aab28', class: "gux-foreground", d: "M23.4827 32.6137C23.4827 29.3995 26.0884 26.7937 29.3027 26.7937H39.878C43.0922 26.7937 45.698 29.3995 45.698 32.6137C45.698 35.828 43.0922 38.4337 39.878 38.4337H29.3027C26.0884 38.4337 23.4827 35.828 23.4827 32.6137Z" }), h("path", { key: '7cd3748bb675c32828abf4d42b915857d49a3256', class: "gux-foreground", d: "M4.29688 32.6137C4.29688 29.3995 6.90258 26.7937 10.1168 26.7937H15.0798C18.2942 26.7937 20.8999 29.3995 20.8999 32.6137C20.8999 35.828 18.2942 38.4337 15.0798 38.4337H10.1168C6.90258 38.4337 4.29688 35.828 4.29688 32.6137Z" })));
+        return (h("svg", { key: '78cdf127598bb5fdf5f391339ca49754252049d8', class: `gux-${this.variant}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", "aria-label": this.i18n('genesysCloudLogomark'), role: "img" }, h("path", { key: '6d6e8ce118a5ca657e24bc1c93e75a200c858739', class: "gux-background", d: "M50 0H0V50H50V0Z" }), h("path", { key: '96982a4121bce6f87d87b661e092164794005a2f', class: "gux-foreground", d: "M29.283 11.5234H20.6388C17.1517 11.5234 14.325 14.3502 14.325 17.8372V17.8967C14.325 21.3838 17.1517 24.2105 20.6388 24.2105H29.283C32.77 24.2105 35.5968 21.3838 35.5968 17.8967V17.8372C35.5968 14.3502 32.77 11.5234 29.283 11.5234Z" }), h("path", { key: '5f0af376c355137068301f7de450de9964e58654', class: "gux-foreground", d: "M23.4827 32.6137C23.4827 29.3995 26.0884 26.7937 29.3027 26.7937H39.878C43.0922 26.7937 45.698 29.3995 45.698 32.6137C45.698 35.828 43.0922 38.4337 39.878 38.4337H29.3027C26.0884 38.4337 23.4827 35.828 23.4827 32.6137Z" }), h("path", { key: '5985c6c8ce040826181fb24d7a7f4c4c86d68101', class: "gux-foreground", d: "M4.29688 32.6137C4.29688 29.3995 6.90258 26.7937 10.1168 26.7937H15.0798C18.2942 26.7937 20.8999 29.3995 20.8999 32.6137C20.8999 35.828 18.2942 38.4337 15.0798 38.4337H10.1168C6.90258 38.4337 4.29688 35.828 4.29688 32.6137Z" })));
     }
     static get is() { return "gux-cloud-logomark-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-cta-group/gux-cta-group.js

@@ -68,7 +68,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: '5576ee99bcf6a2ff0c226876e6cc00295155e4db', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '468e43fa8cbbff075886c971495d20c4579eb321', name: "primary" }), h("slot", { key: '447fd8ce5b2c9cd176eb4408e9e29773364bfcef', name: "secondary" }), h("slot", { key: '807bc66212269fcf96bb0c8fb50fe1a2fb37e35f', name: "dismiss" })));
+        return (h("div", { key: '1a13e0cbbec482fe85735ea27f724d2b3fd64dcf', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'd2c23840e405df9a15f989fad7b6db8057412832', name: "primary" }), h("slot", { key: '57e6352df29b3dbf5ae0dbec74454bac2d74bab5', name: "secondary" }), h("slot", { key: '33d077ed94e57849ae71ba5cac3b0717f5551e59', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }