genesys-spark-components 4.186.1 → 4.187.1

package/dist/esm/gux-calendar-beta.entry.js

@@ -1,9 +1,8 @@
-import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-CjVJoR6g.js';
+import { r as registerInstance, h, a as getElement } from './index-mm833MRp.js';
 import { q as qi } from './index.esm-ByC1Z2e8.js';
-import { g as getDesiredLocale, a as getFirstDayOfWeek, b as buildI18nForComponent } from './index-BcJFUYIV.js';
 import { a as afterNextRenderTimeout } from './after-next-render-Bg4q97BS.js';
-import { a as logError } from './log-error-DxtJDeL9.js';
 import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
+import { g as getDesiredLocale, a as getFirstDayOfWeek, b as buildI18nForComponent } from './index-CeE4Vvh6.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './get-closest-element-Cd4R0amv.js';
 
@@ -28,10 +27,6 @@ function getWeekdays(locale, startDayOfWeek) {
     }
     return rotateArray(days, startDayOfWeek);
 }
-function rotateArray(arr, n) {
-    const times = n % arr.length;
-    return arr.concat(arr.splice(0, times));
-}
 function localizedYearMonth(date, locale) {
     return date.toLocaleString(locale, {
         calendar: 'gregory',
@@ -55,53 +50,15 @@ function firstDateInWeek(date, startDayOfWeek) {
     }
     return date.add({ days: dayDelta });
 }
-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 => {
-            if (Object.prototype.hasOwnProperty.call(this.mappings, name)) {
-                this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
-            }
-        });
-    }
-    syncAttribute(name) {
-        if (Object.prototype.hasOwnProperty.call(this.mappings, name)) {
-            this.writeTarget[name] = this.mappings[name](this.sourceElement[name]);
-        }
+function isoToTemporalDate(iso) {
+    if (iso) {
+        return qi.PlainDate.from(iso);
     }
+    return null;
+}
+function rotateArray(arr, n) {
+    const times = n % arr.length;
+    return arr.concat(arr.splice(0, times));
 }
 
 const previousMonth = "Previous month: {localizedPreviousMonthAndYear}";
@@ -111,11 +68,24 @@ var translationResources = {
 	nextMonth: nextMonth
 };
 
-const guxCalendarCss = ".gux-calendar-beta.gux-disabled{pointer-events:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-backgroundColor);border-radius:8px;box-shadow:var(--gse-ui-calendarMenu-boxShadow)}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:space-between;block-size:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{inline-size:var(--gse-ui-calendarMenu-month-single-header-textWidth);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{block-size:100%;color:var(--gse-ui-calendarMenu-header-foregroundColor);cursor:pointer;outline:none;background:none;border:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-calendar-beta .gux-content{display:flex;flex-direction:column;gap:var(--gse-ui-calendarMenu-dateBody-gap);padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-week-days{font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);text-align:center}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;inline-size:var(--gse-ui-calendarMenu-day-range-height);block-size:var(--gse-ui-calendarMenu-day-range-width)}";
+const guxCalendarCss = ":host{display:inline-block}.gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-backgroundColor);border-radius:8px;box-shadow:var(--gse-ui-calendarMenu-boxShadow)}.gux-calendar-beta.gux-disabled{pointer-events:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:center;block-size:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{flex:1 1 auto;inline-size:var(--gse-ui-calendarMenu-month-single-header-textWidth);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{block-size:100%;color:var(--gse-ui-calendarMenu-header-foregroundColor);cursor:pointer;outline:none;background:none;border:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-calendar-beta .gux-content{display:flex;flex-direction:column;gap:var(--gse-ui-calendarMenu-dateBody-gap);padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-week-days{font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);text-align:center}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;inline-size:var(--gse-ui-calendarMenu-day-range-height);block-size:var(--gse-ui-calendarMenu-day-range-width)}";
 
 const GuxCalendar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        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
@@ -123,57 +93,95 @@ const GuxCalendar = class {
          * may be on other parts of the component.
          */
         this.focusDate = qi.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) || qi.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;
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+    }
+    formStateRestoreCallback(state
+    // mode: 'restore' | 'autocomplete' // eslint-disable-line @typescript-eslint/no-unused-vars
+    ) {
+        this.value = state;
     }
-    get slottedInput() {
-        return this.root.querySelector('input[type="date"]');
+    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 ? qi.PlainDate.from(val) : undefined;
-                },
-                max: (val) => {
-                    return val ? qi.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 = qi.PlainDate.from(dayElement.day);
-        this.selectDate(selectedDate);
-        event.stopPropagation();
     }
     /**
      * Finds the `gux-day` element corresponding to the provided
@@ -183,32 +191,24 @@ const GuxCalendar = class {
     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 = qi.Duration.from(interval);
         let newFocusedValue = this.focusDate.add(shiftInterval);
         // Clamp to the valid range
         if (this.min &&
-            qi.PlainDate.compare(newFocusedValue, this.min) == -1) {
-            newFocusedValue = this.min;
+            qi.PlainDate.compare(newFocusedValue, isoToTemporalDate(this.min)) == -1) {
+            newFocusedValue = isoToTemporalDate(this.min);
         }
         else if (this.max &&
-            qi.PlainDate.compare(newFocusedValue, this.max) == 1) {
-            newFocusedValue = this.max;
+            qi.PlainDate.compare(newFocusedValue, isoToTemporalDate(this.max)) == 1) {
+            newFocusedValue = isoToTemporalDate(this.max);
         }
         this.focusDate = newFocusedValue;
     }
@@ -225,42 +225,6 @@ const GuxCalendar = class {
             }
         });
     }
-    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
      */
@@ -270,12 +234,12 @@ const GuxCalendar = class {
     }
     getMonthDays() {
         const today = qi.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) {
@@ -289,8 +253,8 @@ const GuxCalendar = class {
                 date: qi.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;
@@ -298,37 +262,51 @@ const GuxCalendar = class {
         }
         return weeks;
     }
-    getFocusDate() {
-        return this.focusDate;
+    isFocusableDay(day) {
+        return (day.selected || day.focused) && !this.disabled;
+    }
+    renderPreviousButton() {
+        if (this.readonly) {
+            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" })));
     }
-    getSelectedDate() {
-        if (this.slottedInput.value) {
-            return qi.PlainDate.from(this.slottedInput.value);
+    renderNextButton() {
+        if (this.readonly) {
+            return null;
         }
-        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: 'b9a78570ed5fe8ee3f73083058ed07d596206b1e', 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 delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get root() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
 };
 GuxCalendar.style = guxCalendarCss;
 

package/dist/esm/gux-calendar.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CjVJoR6g.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-mm833MRp.js';
 import { a as afterNextRenderTimeout } from './after-next-render-Bg4q97BS.js';
 import { a as asIsoDateRange, c as fromIsoDateRange, b as asIsoDate, f as fromIsoDate } from './iso-dates-aKaDsw_5.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
-import { b as buildI18nForComponent, g as getDesiredLocale, c as getStartOfWeek } from './index-BcJFUYIV.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
+import { b as buildI18nForComponent, g as getDesiredLocale, c as getStartOfWeek } from './index-CeE4Vvh6.js';
 import { c as capitalizeFirstLetter } from './capitalize-first-letter-Cf6_BoFM.js';
 import { d as dateTimeFormat } from './spark-intl-BnH2RPHP.js';
 import { u as useRegionalDates } from './use-regional-dates-BgaA4g76.js';
@@ -415,7 +415,7 @@ const GuxCalendar = class {
         return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: '0306246dfcce32aabad2d001c20669cbe69fe280', class: "gux-calendar" }, h("div", { key: 'e5324dfe443431f5a28ddd5420625d664c24b0e3', class: "gux-header" }, h("button", { key: '8c55a02accf37620a169b0cf3f879a61945d8d58', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '392607efecf36bab5a3efcba1c1f3059d5a6aa59', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '62efa4a387829b89452430c48772ab412aa6d1f7', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '1b2991888a3d39799f0994b9d4594405632871bd', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '288d3d25c4c9a4b97b07de9a5273932892689d30', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: '596295889b4cf3f8cc4d229a0b86b43f650c2042', class: "gux-calendar" }, h("div", { key: '0e8cb8411b29a81e1f06a8f31090f247727ab850', class: "gux-header" }, h("button", { key: 'f3df4445feb03735d91b936e275212a64cc6f006', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: 'f26551589ecf05e6b44ced659e91d22e58780a69', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'ab425a76cd91ef8c8387d6ef53b1018f09efd8ff', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '68b0889deca5edf029b208b66ac24999bdec8eb6', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '638d9e39a5a656ea58b0a578ed5e371789763fb8', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-card.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as getElement } from './index-CjVJoR6g.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
+import { r as registerInstance, h, a as getElement } from './index-mm833MRp.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
 
 const guxCardCss = ":host{display:block;inline-size:fit-content}.gux-card{box-sizing:border-box;padding:var(--gse-ui-card-padding);background-color:var(--gse-ui-card-backgroundColor);border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color);border-radius:var(--gse-ui-card-borderRadius)}.gux-card.gux-bordered{border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color)}.gux-card.gux-raised{border:var(--gse-ui-card-raised-border-width) var(--gse-ui-card-raised-border-style) var(--gse-ui-card-raised-border-color);box-shadow:var(--gse-ui-card-raised-boxShadow)}.gux-card.gux-borderless{border:var(--gse-ui-card-borderless-border-width) var(--gse-ui-card-borderless-border-style) var(--gse-ui-card-borderless-border-color)}";
 
@@ -15,10 +15,10 @@ const GuxCard = class {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: '6a95ced5f017e5981bc34d8b78e0d0a7430878df', class: {
+        return (h("div", { key: '551f8cf1bdf66e559a5d5b69e0f81f9b66781efe', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: '3d8fa3f0b2586a8a4aff7b3995905f66ca506919' })));
+            } }, h("slot", { key: 'd5839084d0fb89fc99a50a9edba6395deea8a455' })));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-cloud-logo-beta.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-CjVJoR6g.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
+import { r as registerInstance, h, a as getElement } from './index-mm833MRp.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const genesysCloudLogo = "Genesys Cloud Logo";
@@ -32,7 +32,7 @@ const GuxCloudLogo = class {
         }
     }
     render() {
-        return (h("svg", { key: 'e45930fad4a8a94336b45da49e102817b66e4945', class: {
+        return (h("svg", { key: '5b013dc7cec5ca26245360ba1f48f7307905fdc6', 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/esm/gux-cloud-logomark-beta.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-CjVJoR6g.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
+import { r as registerInstance, h, a as getElement } from './index-mm833MRp.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const genesysCloudLogomark = "Genesys Cloud Logomark";
@@ -20,7 +20,7 @@ const GuxCloudLogomark = class {
         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: '5e7e9414f15a965b4d13ae757fc7cb104128f550', 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: 'f8c4dd6c44e284fe974f9534faa9759543ea60e6', class: "gux-background", d: "M50 0H0V50H50V0Z" }), h("path", { key: '4ddeeec65d7115d4ec824f24b5dbc688c5555b91', 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: '0907380feabb4a2d5aa6f10875c8efd149c8e80f', 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: 'f76a15dab03c97fc0849f7ba820806143495d428', 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" })));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-column-manager-item.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CjVJoR6g.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-mm833MRp.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
 import { c as getIndexInParent } from './gux-column-manager.service-CB2ijDRX.js';
 import './get-closest-element-Cd4R0amv.js';
 import './clamp-CcCycvZh.js';
@@ -149,14 +149,14 @@ const GuxColumnManagerItem = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '6d9407f9a83665ad211578bd71092c8819bcb399', draggable: "true" }, h("div", { key: '7de5359beff1e462dd133d31a4c778204b0a3f5f', class: {
+        return (h(Host, { key: 'd55753e1cc651b73233dd15ace2ecb8d346a4574', draggable: "true" }, h("div", { key: '9298c144266decf9799879a20fa0c134036b3ce0', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, h("button", { key: '6dfe4fc21eada9b5374ccb94cdb2473e52256b22', class: {
+            } }, h("button", { key: '239abda7a6ea866813fc28f1483883a5d1239957', class: {
                 'gux-reorder': true,
                 'gux-reordering': this.isReordering
-            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: 'cddbf4d959270062c6b43190eed5c6124484253a', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: '28875a8fcf4d8e03734afbac8379be76916ac236', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'c2c96def2a01df9922a2a5009fad8fec49442775', class: "gux-select" }, h("slot", { key: '1cbae9f6ab0aa51925b5a96300d3e88f92ce067b', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: 'b8e550c27b37e7fda2abf7e74489b8d72058fd91', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: '905538a42e996b039af53f9026cdc5286f623303', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: 'd5447c3b82ff2813e44d335d75f74dddf1945c23', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'cd39ac1aa9e7231a885c8cb5a0122943761fd631', class: "gux-select" }, h("slot", { key: 'be1b15c377b74c09e40eb32fc2cbf7e2d84394ba', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '2f1bbc3a44a26a2b32717471a06b306d4690fb34', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-column-manager.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-CjVJoR6g.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-mm833MRp.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
 import { g as getEmptyKeyboardOrderChange, s as setKeyboardReorderPositionIndicator, a as setMainCheckboxElementCheckedState, b as getNewOrder, c as getIndexInParent, d as getNewKeyboardOrderChange, e as setHighlights, f as setAllCheckboxInputs, h as getSelectedColumnCount } from './gux-column-manager.service-CB2ijDRX.js';
 import './get-closest-element-Cd4R0amv.js';
 import './clamp-CcCycvZh.js';
@@ -110,7 +110,7 @@ const GuxColumnManager = class {
         return (h("div", null, h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), h("span", { class: "gux-sr-only" }, count === total ? (h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
     }
     render() {
-        return (h("div", { key: '40b00dccbbc3b9dd2d79f0a7e558a592e7a647c3', class: "gux-container" }, h("div", { key: 'b5fb241078d0acb83118b016e3b667fc54e2f31b', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '2eb3f96dc3f109dcca02466eff1d9038ea2dceae', class: "gux-search" }, h("gux-content-search", { key: '8c86cce49bb3ef53bc548c60bd80d1ca648f1a11', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '3d9a303ef7e13e3bf049009616d78ac03fd268f3', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '2fe55a8bc3f231ee7901723912c6e2f439ea27f6', class: "gux-select" }, h("gux-form-field-checkbox", { key: 'd5460b9363adb42f5a59b03771850aecdfa9ae08' }, h("input", { key: '93d46d6f32a95b9e38046e95ac419b238ce0cec2', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '2bf04216379485802176367913dfb3943a7f7aaf', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '77332327dddcdbd52f4d4fdfd7779b2eb86dd347', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '1afc970e4de08ab42a607d790a3ad25c4f816c8b', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '5923c285545fe76641d276e51e7f257914912b7a', ref: el => (this.announceElement = el) })));
+        return (h("div", { key: '86ea203d2bc59f262613c1343a7d67f0873e624c', class: "gux-container" }, h("div", { key: 'b5df3967d80cb060dc11fb5792d7f5fe3d3bae87', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '36f262c62b4b29973b672f5ab914977f49582716', class: "gux-search" }, h("gux-content-search", { key: '8364d7aa5299ea32fd0e169fcceca1025e486e05', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'f4ceffb69a6360de9b2977462cae932357f9b04d', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '84755123168c385dcb54ee82f1fc607350bf3133', class: "gux-select" }, h("gux-form-field-checkbox", { key: '12784281b13bd165fca5c5098ec53c13bbfa28fe' }, h("input", { key: '85b0f7fe1d879141797f50458db8084d5e357fe2', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: 'd631f892e0d2e5d11d106db7476e27d0021f2374', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '793a77429a1d800764a0ee52f464642615d7d05b', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '66ebc2049c3d05c66874f12666ea0376e9d52381', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '7def738d9531f86410cc17ba78aa5443105934ed', ref: el => (this.announceElement = el) })));
     }
     get root() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/gux-content-search.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CjVJoR6g.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-mm833MRp.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
 import { a as onDisabledChange } from './on-attribute-change-De1NnCmO.js';
 import { f as focusInputElement } from './focus-input-element-JHLuJ8Pb.js';
 import './get-closest-element-Cd4R0amv.js';
@@ -65,10 +65,10 @@ const GuxContentSearch = class {
         }
     }
     render() {
-        return (h("div", { key: '63572ad234bac3b3b9f681995e91adf7eb54f414', class: {
+        return (h("div", { key: '73e492c9ba5084ab4a9be67042f9e2e6f9ecd2f0', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '3cd33bc529e14d1ffbbadcbdcab3f26a7195033f', class: "gux-search-icon" }, h("gux-icon", { key: 'c1b2f73a5bbc7e8e860f5dfa7738c61ff08d023c', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: 'b2b977e60fb69886ff85be6911d212513cc3afd1' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '178f17dd1987bbcd12b610777ea84060de86c0ca', class: "gux-search-icon" }, h("gux-icon", { key: 'ccdaa14da8cf64122b5c736fc9cd16c7fc0a5a58', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '4d853841ba463423b737f9d9976d61902065a18a' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

package/dist/esm/gux-context-menu.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CjVJoR6g.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-mm833MRp.js';
 import { r as randomHTMLId } from './random-html-id-D9jKBqIb.js';
-import { t as trackComponent } from './usage-m3Lae7sj.js';
-import { b as buildI18nForComponent } from './index-BcJFUYIV.js';
-import { O as OnClickOutside } from './on-click-outside-CQ9-ZPII.js';
+import { t as trackComponent } from './usage-Bk9hX_6O.js';
+import { b as buildI18nForComponent } from './index-CeE4Vvh6.js';
+import { O as OnClickOutside } from './on-click-outside-BDKZueG1.js';
 import { b as afterNextRender } from './after-next-render-Bg4q97BS.js';
 import { w as whenEventIsFrom } from './when-event-is-from-kLXvN2m9.js';
 import './get-closest-element-Cd4R0amv.js';
@@ -144,8 +144,8 @@ const GuxContextMenu = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'bd1eaa8a09307fe0b60382908b6979863bab69a7' }, h("gux-popup", { key: 'b421a91f27fc08d60b560bc25f5a5a003257c9b4', placement: this.placement, expanded: this.isOpen, offset: parsePxValue(uiTokens.dropdown['gap']), "exceed-target-width": true }, h("div", { key: '123af2600cfa9c9a75fc58be7c660b66bd38aaf1', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '5057daf882f0fb9e9c1c68f58ee0508322b75df0', accent: "ghost" }, h("button", { key: '82fe5034eb87923ec8be7e0bfbc87a0f55f392ef', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-screen-reader-beta", { key: '14793aafd38222372bc11ae85a08a259b6e35cd3' }, this.screenreaderText ||
-            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: 'e18167df43a3c760b67f0333f1ab22cf94141f1f', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: '26e208572fbc62b91feab22d7e77e7365105c6a0', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: '282dcf2e475722ce1612ac45ad371cc0618f164c', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'a2d238931c1e69fb371fa1bcf31cba104dfe7833' }))))));
+        return (h(Host, { key: '6bf1dded894b9382b71146ae5a0465308f68ad24' }, h("gux-popup", { key: '27adba7de5bb4a24c2ee5fc6390776bf70862484', placement: this.placement, expanded: this.isOpen, offset: parsePxValue(uiTokens.dropdown['gap']), "exceed-target-width": true }, h("div", { key: '0c170d5c4880e3727dcf25c06c490dc34390baee', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '732c1cc18d8fe2ccf719b2bd01c39c1204cbc61c', accent: "ghost" }, h("button", { key: 'ba31c6798868884b53e5517b4af1a1cc0465a54d', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-screen-reader-beta", { key: '72f174c5762a0fb71a416c46dc49b5635028f068' }, this.screenreaderText ||
+            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: 'ccbb8956af52d338731ad4fe3c2954d4df6eca78', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: '392bd0f492eae53922c1c8117d826be892e03535', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'e9e82dc1deaabbce994df45873ce4fdc5a557712', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '9a7b3defb1fd59b6dad1e969ecd658728d18a2e3' }))))));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }