genesys-spark-components 4.136.0 → 4.137.0

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

@@ -0,0 +1,289 @@
+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 { 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";
+export class GuxCalendar {
+    constructor() {
+        this.locale = 'en';
+        // Total number of dates that will display for each month in the calendar
+        this.MONTH_DATE_COUNT = 42;
+        this.startDayOfWeek = undefined;
+        this.focusDate = Temporal.Now.plainDateISO();
+        this.min = undefined;
+        this.max = undefined;
+        this.disabled = false;
+    }
+    async guxForceUpdate() {
+        forceUpdate(this.root);
+    }
+    get slottedInput() {
+        return this.root.querySelector('input[type="date"]');
+    }
+    async componentWillLoad() {
+        if (!this.slottedInput) {
+            logError(this.root, 'You must slot a date input element like so: input[type="date"].');
+        }
+        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;
+        }
+        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();
+    }
+    detectDayClick(event) {
+        if (!(event.target.tagName === 'GUX-DAY-BETA')) {
+            return;
+        }
+        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
+     * date string.
+     * @param dateStr The date to find in ISO format
+     */
+    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) {
+        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;
+        }
+        else if (this.max &&
+            Temporal.PlainDate.compare(newFocusedValue, this.max) == 1) {
+            newFocusedValue = this.max;
+        }
+        this.focusDate = newFocusedValue;
+    }
+    /**
+     * Directs browser focus to the element corresponding to the `.focusDate` date.
+     */
+    focusOnFocusDate() {
+        // Wait for render in case the displayed month just changed with the focus date
+        afterNextRenderTimeout(() => {
+            const isoDateStr = this.focusDate.toString();
+            const target = this.getGuxDayForDate(isoDateStr);
+            if (target) {
+                target.focus();
+            }
+        });
+    }
+    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
+     */
+    isInvalidDate(date) {
+        return ((this.min && Temporal.PlainDate.compare(date, this.min) == -1) ||
+            (this.max && Temporal.PlainDate.compare(date, this.max) == 1));
+    }
+    getMonthDays() {
+        const today = Temporal.Now.plainDateISO();
+        const firstOfMonth = getFirstOfMonth(this.getFocusDate());
+        const weeks = [];
+        let currentWeek = { dates: [] };
+        let weekDayIndex = 0;
+        const currentMonth = firstOfMonth.month;
+        const selectedValue = this.getSelectedDate();
+        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) {
+            if (weekDayIndex > 0 && weekDayIndex % 7 === 0) {
+                weeks.push(currentWeek);
+                currentWeek = {
+                    dates: []
+                };
+            }
+            currentWeek.dates.push({
+                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),
+                isCurrentDate: currentDate.equals(today)
+            });
+            weekDayIndex += 1;
+            currentDate = currentDate.add({ days: 1 });
+        }
+        return weeks;
+    }
+    getFocusDate() {
+        return this.focusDate;
+    }
+    getSelectedDate() {
+        if (this.slottedInput.value) {
+            return Temporal.PlainDate.from(this.slottedInput.value);
+        }
+        return null;
+    }
+    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" }))));
+    }
+    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 => {
+            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: `
+                            ${!day.inCurrentMonth || day.disabled ? 'gux-muted' : ''}
+                            day-${isoDateStr}  
+                          ` }));
+        }))))))));
+    }
+    render() {
+        return (h("div", { key: '1da41ece22aace32e14be09942b85ed17a92ee60', class: `gux-calendar-beta ${this.disabled ? 'gux-disabled' : ''}` }, h("slot", { key: '6ab2911fc37e3157a24a4e1c746e8b5de0d2c769', onSlotchange: () => {
+                this.onSlotChange();
+            } }), this.renderHeader(), this.renderContent()));
+    }
+    static get is() { return "gux-calendar-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startDayOfWeek": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "GuxCalendarDayOfWeek",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6 | 7",
+                    "references": {
+                        "GuxCalendarDayOfWeek": {
+                            "location": "import",
+                            "path": "./gux-calendar.types",
+                            "id": "src/components/beta/gux-calendar-beta/gux-calendar.types.ts::GuxCalendarDayOfWeek"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "start-day-of-week",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusDate": {},
+            "min": {},
+            "max": {},
+            "disabled": {}
+        };
+    }
+    static get methods() {
+        return {
+            "guxForceUpdate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

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

@@ -1,6 +1,13 @@
-import { capitalizeFirstLetter } from "../../../../utils/string/capitalize-first-letter";
+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 new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
+    return Temporal.PlainDate.from({
+        day: 1,
+        month: date.month,
+        year: date.year
+    });
 }
 export function getWeekdays(locale, startDayOfWeek) {
     const days = [];
@@ -13,18 +20,70 @@ export function getWeekdays(locale, startDayOfWeek) {
     }
     return rotateArray(days, startDayOfWeek);
 }
-export function getDateAsMonthYear(date, locale) {
-    return capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
-}
 function rotateArray(arr, n) {
     const times = n % arr.length;
     return arr.concat(arr.splice(0, times));
 }
-export function firstDateInMonth(month, year, startDayOfWeek) {
-    const startDate = new Date(year, month, 1, 0, 0, 0, 0);
-    const firstDayOfMonth = startDate.getDay();
-    const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
-    const firstDateInMonth = new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
-    firstDateInMonth.setHours(0, 0, 0, 0);
-    return firstDateInMonth;
+export function localizedYearMonth(date, locale) {
+    return date.toLocaleString(locale, { 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 class AttributeSynchronizer {
+    constructor(options) {
+        this.writeTarget = options.writeTo;
+        this.mappings = options.mappings;
+        this.observer = new MutationObserver(changes => {
+            changes.forEach(change => {
+                const name = change.attributeName;
+                this.syncAttribute(name);
+            });
+        });
+        this.setSourceElement(options.readFrom);
+    }
+    /**
+     * Changes the source element attributes are copied from. Usually called in
+     * response to a `slotchange` event.
+     * @param sourceElement
+     */
+    setSourceElement(sourceElement) {
+        this.observer.disconnect(); // Stop observing any previously observed element
+        this.sourceElement = sourceElement; // Start reading from the new source
+        this.syncAll(); // Sync data from the new source
+        // Start the observer back up with the new source
+        this.observer.observe(sourceElement, {
+            attributes: true,
+            attributeFilter: Object.keys(this.mappings)
+        });
+    }
+    /**
+     * Disconnects the synchronization between the source and destination elements.
+     * Should be called to clean up when the relationship is no longer needed,
+     * typically on `disconnectedCallback`.
+     */
+    disconnect() {
+        this.observer.disconnect();
+    }
+    syncAll() {
+        Object.keys(this.mappings).forEach(name => {
+            this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
+        });
+    }
+    syncAttribute(name) {
+        this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
+    }
 }

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

@@ -0,0 +1,34 @@
+import { Temporal } from "@js-temporal/polyfill";
+export async function validateSelectedDate(element, expectedDate) {
+    const selectedDayElement = await findSelectedDayElement(element);
+    await validateDate(selectedDayElement, expectedDate);
+}
+export async function validateHeaderMonth(element, expectedMonthAndYear) {
+    const currentMonthAndYear = await element.find('pierce/.gux-header-month-and-year');
+    expect(currentMonthAndYear.innerHTML).toBe(expectedMonthAndYear);
+}
+export async function findSelectedDayElement(element) {
+    return element.find('pierce/gux-day-beta[aria-current="true"]');
+}
+export async function validateFocusedDay(element, expectedDate) {
+    const focusedElement = await element.find('pierce/:focus');
+    await validateDate(focusedElement, expectedDate);
+}
+export async function findDayElement(element, isoDate) {
+    return await element.find(`pierce/.day-${isoDate}`);
+}
+export async function goToPreviousMonth(element, page) {
+    const button = await element.find('pierce/.gux-left');
+    await button.click();
+    return await page.waitForChanges();
+}
+export async function goToNextMonth(element, page) {
+    const button = await element.find('pierce/.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.find('pierce/.gux-sr-only');
+    expect(labelElement.textContent).toBe(expectedLabel);
+}

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

@@ -0,0 +1,60 @@
+:host {
+  display: inline-block;
+  inline-size: var(--gse-ui-calendarMenu-day-date-size);
+  block-size: var(--gse-ui-calendarMenu-day-input-height);
+  outline: none;
+  border: none;
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
+}
+
+:host(:hover) {
+  background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
+}
+
+:host(:focus-within) {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
+}
+
+:host([aria-current=true]) {
+  color: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+}
+
+:host(:disabled),
+:host(.gux-muted) {
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
+}
+
+button {
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  background: none;
+  border: none;
+  inline-size: 100%;
+  block-size: 100%;
+  font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
+  font-style: normal;
+  font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
+  line-height: 32px;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+
+button:focus {
+  outline: none;
+}
+
+.gux-sr-only:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}

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

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import { getDesiredLocale } from "../../../i18n/index";
+import * as sparkIntl from "../../../genesys-spark-utils/intl";
+import { Temporal } from "@js-temporal/polyfill";
+import { formatPlainDate } from "../../../utils/date/temporal";
+/**
+ * The gux-day component is how we render a day within an calendar. It should
+ * not be used stand-alone.
+ */
+export class GuxDay {
+    constructor() {
+        this.day = undefined;
+        this.disabled = undefined;
+        this.date = undefined;
+    }
+    /* Watcher to sync the internal date with the day attribute on changes */
+    onDayPropChange() {
+        this.readDateFromProp();
+    }
+    /**
+     * Syncs the internal rich `date` from the string `day` prop. Needs
+     * to run when connected to the DOM, and when the prop changes.
+     */
+    readDateFromProp() {
+        this.date = Temporal.PlainDate.from(this.day);
+    }
+    async connectedCallback() {
+        this.readDateFromProp();
+        const locale = getDesiredLocale(this.root);
+        this.readerFormatter = sparkIntl.dateTimeFormat(locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+    render() {
+        return (h("button", { key: '4282bb9b77fc4238e0748cc142f4e422ab29be41', type: "button", disabled: this.disabled }, h("slot", { key: '54b746f12a4a7d95468f983e6cb5bbeba0733061' }, h("span", { key: '712abfbeb57c6b477f46ad8999d0931ab12017b8', "aria-hidden": "true" }, this.date.day), h("span", { key: 'be8a82a9454f700a5b2966db75395e1d7b6ad789', class: "gux-sr-only" }, formatPlainDate(this.readerFormatter, this.date)))));
+    }
+    static get is() { return "gux-day-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-day.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-day.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "day": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "day",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "date": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "day",
+                "methodName": "onDayPropChange"
+            }];
+    }
+}

package/dist/collection/components/beta/gux-flag-icon/gux-flag-icon.js

@@ -14,7 +14,7 @@ export class GuxFlagIconBeta {
     }
     render() {
         var _a;
-        return (h("span", { key: '55607786b8e3057c58ca246b0d85ad1918ac67f9', role: "img", class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.getLabel() }));
+        return (h("span", { key: '83abdfad7fc40121981dcee3120e539a5d44a4a5', role: "img", class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.getLabel() }));
     }
     getLabel() {
         return (this.screenreaderText ||

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormDescription {
     render() {
-        return (h("slot", { key: '590c919181bec614d45a8835a90d417572edc1bb' }));
+        return (h("slot", { key: '856101faf04e13b5c812769e6332eeb073bc92bf' }));
     }
     static get is() { return "gux-form-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormFieldsetHeading {
     render() {
-        return (h("slot", { key: '2b0d39d5e011ed0259867db24b94e54e4f162f61' }));
+        return (h("slot", { key: '711c1a3ecbb67f3240b1ec27c57a3dccf8c915c4' }));
     }
     static get is() { return "gux-form-fieldset-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,9 +11,9 @@ export class GuxFormFooter {
         trackComponent(this.root, { variant: this.placement });
     }
     render() {
-        return (h(Host, { key: '0774e81704c625853d6f739af363d893252daaae', class: {
+        return (h(Host, { key: '4f6079d93cee9ed8f9ac2e99c23c61ce4266621e', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: 'f498ba2dfb986be5650304b20dc23fc57d3ab316' })));
+            } }, h("slot", { key: '099c671fbbf9d2465a54e14c5314b219eda9fb74' })));
     }
     static get is() { return "gux-form-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormHeading {
     render() {
-        return (h("slot", { key: 'c92319be9b754d89b654624db16477a68a11a9ea' }));
+        return (h("slot", { key: 'f3dc7b4c83524a983b2d616fdacde57df9878978' }));
     }
     static get is() { return "gux-form-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxForm {
     render() {
-        return (h("slot", { key: '8985cb89deebce3d1358851b2816832daab4e646' }));
+        return (h("slot", { key: '56c49bed555146e613a36878aba8247a8c5724fc' }));
     }
     static get is() { return "gux-form-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class GuxIconTooltip {
         return await this.tooltip.hideTooltip();
     }
     render() {
-        return (h("div", { key: 'b1ab7cde7ab8293906afea3263feb09701769426', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'ea6a172ba645847dd5aedb6ddfd4141a10ea272a' }, h("slot", { key: '505426b503eb600716ce006271edbb618e1b57c8', name: "content" })), h("gux-icon", { key: '79f5a63026e7b66d9dad62c93227fe6bbe8ae0cc', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'b05c706231c1d7f2341136feedd56e067ae61b91', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: 'c1f926ba7d40a87cc67aa8e9edf9bd24fdbbf878', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: '1d7c4cd8f3a16245f010ec66dd975c97234b01ac', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'd6fef5089af4f967c9df31d2732c65d160604beb' }, h("slot", { key: '6867e45124f6031a25a5b3c8725642773871a39e', name: "content" })), h("gux-icon", { key: 'ead0d91cb12c90697046d89c114206020d4d685c', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '49cabba6e05798ee7720dd085b6686f669ab59be', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '439b5a9da00fa5cd885dac7c51238c3f8ee5c72e', slot: "content" }, getSlotTextContent(this.root, 'content')))));
     }
     static get is() { return "gux-icon-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-label-info/gux-label-info.js

@@ -30,7 +30,7 @@ export class GuxLabelInfo {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (h("div", { key: '61c9218e6577b4836f5326dbe1810e38bd326ed3', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '3cf9c2a55b8c7999a929cdb779d8b788f3963c89' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: '59597212b0fedcab0229cfcaabe25aa4dca7f20c', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '6e853294fdca7244a480d7cf9bbe5a9c9d67dbd5', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'b30c8327689ef3db24ec6192f05b4222358b5ed1', name: "content" }))));
+        return (h("div", { key: '56d47ce5f2b632072104e8cd5e9367d9abb73097', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: 'a720884b1bb912502416c10087878d16885e6431' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'd998e3257efcfe68159cd3bbe1ea5fedac6d56f2', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'bb243c88b2c7ad7217cf88c156f7a7e01617b38c', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'c15c6233b298c2f03cb0a6a9d4b6c3d62c062a2a', name: "content" }))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }