genesys-spark-components 4.231.2 → 4.232.0

package/dist/esm/gux-date-time-beta.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D63QQ8rP.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { D as DateTimeFormatter, g as getValidTimezone } from './get-valid-timezone-DoEFbkU_.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CW7z6RPd.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { D as DateTimeFormatter, g as getValidTimezone } from './get-valid-timezone-CiKGbmJt.js';
 import { d as dateTimeFormat, a as determineDisplayLocale } from './spark-intl-CJJbLxeY.js';
 import { u as useRegionalDates } from './use-regional-dates-BgaA4g76.js';
-import { g as getDesiredLocale } from './index-BaLo2k_8.js';
+import { g as getDesiredLocale } from './index-DV83JT5I.js';
 import './get-closest-element-DCZG2J0G.js';
 import './get-closest-element-Cd4R0amv.js';
 
@@ -45,7 +45,7 @@ const GuxDateTime = class {
         }
     }
     render() {
-        return (h(Host, { key: '814588c4a54ce5cfd71cf53e530d2da91d31ae61' }, this.renderDateTime()));
+        return (h(Host, { key: '9eb788900ebe3f0c7ffd7158c06e05bed2091b99' }, this.renderDateTime()));
     }
     get root() { return getElement(this); }
 };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D63QQ8rP.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CW7z6RPd.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom-8w8ltg_h.js';
 import { r as randomHTMLId } from './random-html-id-D9jKBqIb.js';
 import { a as afterNextRenderTimeout } from './after-next-render-Bg4q97BS.js';
 import { f as fromIsoDate, a as asIsoDateRange, b as asIsoDate, c as fromIsoDateRange } from './iso-dates-B2JGJq8L.js';
-import { O as OnClickOutside } from './on-click-outside-EUgJi7Nq.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { O as OnClickOutside } from './on-click-outside-DGKD-rDs.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import { g as getFormat, a as determineDisplayLocale } from './spark-intl-CJJbLxeY.js';
 import { u as useRegionalDates } from './use-regional-dates-BgaA4g76.js';
 import './get-closest-element-Cd4R0amv.js';
@@ -24,10 +24,10 @@ var translationResources = {
 
 function getCalendarLabels(labelString, mode, defaultLabels) {
     const labels = labelString.split(',').map(label => label.trim());
-    if (mode === "range" /* CalendarModes.Range */) {
+    if (mode === 'range') {
         return [labels[0] || defaultLabels[0], labels[1] || defaultLabels[1]];
     }
-    else if (mode !== "range" /* CalendarModes.Range */ && !labels[0]) {
+    else if (mode !== 'range' && !labels[0]) {
         return [defaultLabels[2]];
     }
     return [labels[0]];
@@ -187,7 +187,7 @@ const GuxDatepicker = class {
         /**
          * The calendar mode (can be single or range)
          */
-        this.mode = "single" /* CalendarModes.Single */;
+        this.mode = 'single';
         /**
          * Disable the input and prevent interactions.
          */
@@ -427,7 +427,7 @@ const GuxDatepicker = class {
         this.input.emit(this.value);
         this.updateDate();
         this.inputElement.value = this.formattedValue;
-        if (this.mode === "range" /* CalendarModes.Range */) {
+        if (this.mode === 'range') {
             this.toInputElement.value = this.toFormattedValue;
         }
         if (document.activeElement !== this.inputElement ||
@@ -436,7 +436,7 @@ const GuxDatepicker = class {
         }
     }
     setValue() {
-        if (this.mode === "range" /* CalendarModes.Range */) {
+        if (this.mode === 'range') {
             const fromValue = this.stringToDate(this.inputElement.value);
             const toValue = this.stringToDate(this.toInputElement.value);
             if (!this.isValidDateFormat(fromValue) ||
@@ -539,7 +539,7 @@ const GuxDatepicker = class {
         }
     }
     updateDate() {
-        if (this.mode === "range" /* CalendarModes.Range */) {
+        if (this.mode === 'range') {
             const [from, to] = fromIsoDateRange(this.value);
             const { map: map1, regexp: regexp1 } = this.getMapAndRegexFromField(from);
             this.formattedValue = this.format.replace(regexp1, match => {
@@ -580,7 +580,7 @@ const GuxDatepicker = class {
         this.intervalRange = intervalRange;
     }
     getCombinedFocusedDateValue() {
-        return this.mode === "range" /* CalendarModes.Range */
+        return this.mode === 'range'
             ? this.getRangeFocusedDateValue()
             : this.getFocusedDateValue();
     }
@@ -627,13 +627,13 @@ const GuxDatepicker = class {
         if (!this.value) {
             const now = new Date();
             now.setHours(0, 0, 0, 0);
-            if (this.mode === "range" /* CalendarModes.Range */) {
+            if (this.mode === 'range') {
                 this.value = asIsoDateRange(now, now);
             }
             else {
                 this.value = asIsoDate(now);
             }
-            if (this.mode === "range" /* CalendarModes.Range */ && this.numberOfMonths < 2) {
+            if (this.mode === 'range' && this.numberOfMonths < 2) {
                 this.numberOfMonths = 2;
             }
         }
@@ -693,11 +693,11 @@ const GuxDatepicker = class {
             } }, h("label", { htmlFor: this.startInputId, class: {
                 'gux-datepicker-field-label': true,
                 'gux-sr-only': this.labelPosition === 'screenreader' ||
-                    (this.mode === "single" /* CalendarModes.Single */ && !this.label)
+                    (this.mode === 'single' && !this.label)
             } }, this.getCalendarLabels()[0]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.startInputId, type: "text", onClick: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), ref: (el) => (this.inputElement = el), value: this.formattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()), this.renderCalendar())));
     }
     renderEndDateField() {
-        if (this.mode === "single" /* CalendarModes.Single */) {
+        if (this.mode === 'single') {
             return null;
         }
         return (h("div", { class: {
@@ -709,7 +709,7 @@ const GuxDatepicker = class {
             } }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (h("div", { key: '1dc545078977013d055f7758672e20cdc1822bb0', class: {
+        return (h("div", { key: 'd9a0fa114334489ab841a6ea49c0c6516c780ed7', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as getElement } from './index-D63QQ8rP.js';
-import { g as getDesiredLocale } from './index-BaLo2k_8.js';
+import { r as registerInstance, h, a as getElement } from './index-CW7z6RPd.js';
+import { g as getDesiredLocale } from './index-DV83JT5I.js';
 import { d as dateTimeFormat } from './spark-intl-CJJbLxeY.js';
 import { q as qi } from './index.esm-ByC1Z2e8.js';
 import './get-closest-element-Cd4R0amv.js';
@@ -59,7 +59,7 @@ const GuxDay = class {
         });
     }
     render() {
-        return (h("button", { key: '3638f4ebebb2c6aaf917394d51cde42232010b4d', type: "button", disabled: this.disabled }, h("slot", { key: 'cfc34716c038e238c4c8a8c1e295651d149996c1' }, h("span", { key: '8e407e9763565f9a99715c6e6a8a17287651869f', "aria-hidden": "true" }, this.date.day), h("gux-screen-reader-beta", { key: '5d6433d80efe33696dd6259ae410c20907fe6e77' }, formatPlainDate(this.readerFormatter, this.date)))));
+        return (h("button", { key: '7b46b70316ff94ef1c5b63e7d6f9d2f216e72cc4', type: "button", disabled: this.disabled }, h("slot", { key: '390f6a026932132bb971080cb2320232bf277b79' }, h("span", { key: 'b5a89f4113297d385078db6198a7a40d94bc6851', "aria-hidden": "true" }, this.date.day), h("gux-screen-reader-beta", { key: '2ab020511f5695b91e4fef3c8fdec58315682ac6' }, formatPlainDate(this.readerFormatter, this.date)))));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }

package/dist/esm/gux-disclosure-button-legacy.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D63QQ8rP.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CW7z6RPd.js';
 import { r as randomHTMLId } from './random-html-id-D9jKBqIb.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const defaultLabel = "Disclosure button";
@@ -53,10 +53,10 @@ const GuxDisclosureButtonLegacy = class {
         this.updateIcon();
     }
     render() {
-        return (h("div", { key: 'dbdbfbb01c8ff75f0e7400e31375a8c92623d70a', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '691f9ea6521dc4b4472b161a29b05db6703c899d', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: '2dd8bd7077657ed38c9e441e0c2529e96803fc6a', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'd6227fc197227eb76a6c0c3d7a06afec9cb91e72', id: this.panelId, class: {
+        return (h("div", { key: '0a693df63172777c185ff3285aff4646d4e2bdae', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '9f29365bbd6998d3dc982709de029e2308990a42', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: 'a8d352d70b2a3bbcea8e8500a2995c3b99afe583', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '7277f740a408740c43692a27d77d271260a53447', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '575c959ebe5bf2f5fce7b667ba4c69e48c016c87', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '63c80e4922fd427954ebb608cdb97d2bb4cead5a', name: "panel-content" }))));
     }
     get root() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/gux-dismiss-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-D63QQ8rP.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { r as registerInstance, h, a as getElement } from './index-CW7z6RPd.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const dismiss = "Dismiss";
@@ -21,10 +21,10 @@ const GuxDismissButton = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("gux-button-slot", { key: '35c932bd42ac603f57e731f6f17ab6d7d82a7aca', accent: "ghost", class: {
+        return (h("gux-button-slot", { key: '17ce06b1286aef3777313fa6a5dc6afdf29336fe', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, h("button", { key: '215372def7f9629d6d24fbf33b3909fc4653bd68', type: "button", title: this.i18n('dismiss') }, h("div", { key: '0b87676465df52c9648bda6867dbc0b98de66a0b', class: "gux-icon-container" }, h("gux-icon", { key: '7690f5cdd35a393d0c1fea4f6848870e4b7d9afa', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, h("button", { key: '4c8cb790088a3fa251762d1941ea625d6edeb725', type: "button", title: this.i18n('dismiss') }, h("div", { key: '2ee161ab52ca8f0fb3cc6ab94b06aa279675f542', class: "gux-icon-container" }, h("gux-icon", { key: '9420aae88803dc9795629b999b16ed454c48f824', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }

package/dist/esm/gux-dropdown-multi-tag.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D63QQ8rP.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CW7z6RPd.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const clearSelection = "Clear {numberSelected} selected items";
@@ -46,7 +46,7 @@ const GuxDropdownMultiTag = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'ee3fd02e107fb9601920bea6f3ff6acf065d957f', class: {
+        return (h("div", { key: '2f34ac6be6a5bed37d1155fa9242e92ea8cc0366', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

package/dist/esm/gux-dropdown-multi.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-D63QQ8rP.js';
-import { O as OnClickOutside } from './on-click-outside-EUgJi7Nq.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-CW7z6RPd.js';
+import { O as OnClickOutside } from './on-click-outside-DGKD-rDs.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
 import { b as afterNextRender } from './after-next-render-Bg4q97BS.js';
 import { o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
 import { c as convertValueToArray, s as setInitialActiveOption, g as getSearchOption, a as getOptionDefaultSlotText } from './gux-listbox.service-CQAaQM2s.js';
-import { O as OnMutation } from './on-mutation-Buvv8P1w.js';
+import { O as OnMutation } from './on-mutation-hyjKEYin.js';
 import './get-closest-element-Cd4R0amv.js';
 import './get-text-content-from-nodes-qCeLer2f.js';
 
@@ -442,7 +442,7 @@ const GuxDropdownMulti = class {
     }
     render() {
         return [
-            h("div", { key: '1a9f9e76a264bd490ff6f03b2713a7ca6ba4a904', class: "gux-dropdown-container" }, h("gux-popup", { key: '1f453602a3271d00bf1fb9318d1c3077ecb54b5b', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '8218431fc220e7712c78a3149a1411f580a0bafc', class: "gux-dropdown-container" }, h("gux-popup", { key: '4cc022881fff6f407fce2f92d5cdf7b086077a29', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get delegatesFocus() { return true; }

package/dist/esm/gux-dropdown-option.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-D63QQ8rP.js';
+import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-CW7z6RPd.js';
 import { s as safeRegExpString } from './safe-regexp-string-D8NvUiBF.js';
 
 const guxDropdownOptionCss = () => `gux-dropdown-option{position:relative;display:flex;height:var(--option-height);padding:0 16px;line-height:32px;cursor:pointer}gux-dropdown-option div.gux-dropdown-option{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-dropdown-option div.gux-dropdown-option .gux-ghost{position:absolute}gux-dropdown-option[filtered]{display:none}gux-dropdown-option[disabled]{pointer-events:none;cursor:default;opacity:0.5}gux-dropdown-option[disabled=false]{pointer-events:auto;cursor:pointer;opacity:1}gux-dropdown-option:not(:disabled)[selected]{color:#2e394c;background:#deeaff}gux-dropdown-option:not(:disabled):hover,gux-dropdown-option:not(:disabled):focus-visible{color:#fdfdfd;background:#2a60c8}`;
@@ -53,7 +53,7 @@ const GuxDropdownOption = class {
         };
     }
     __stencil_render() {
-        return (h("div", { key: '9ca57fbc664d0c5462e36e88276c14fdef917c97', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '8b776a6bff7f3dc09bd953705e65e82bdd3146c7', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement, H as Host } from './index-D63QQ8rP.js';
-import { O as OnClickOutside } from './on-click-outside-EUgJi7Nq.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement, H as Host } from './index-CW7z6RPd.js';
+import { O as OnClickOutside } from './on-click-outside-DGKD-rDs.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
 import { o as onInputDisabledStateChange, c as calculateInputDisabledState } from './on-input-disabled-state-change-Cb3FOYGS.js';
 import { b as afterNextRender } from './after-next-render-Bg4q97BS.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { O as OnMutation } from './on-mutation-Buvv8P1w.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { O as OnMutation } from './on-mutation-hyjKEYin.js';
 import { s as setInitialActiveOption, b as getListOptions, g as getSearchOption, a as getOptionDefaultSlotText, d as clearActiveOptions, h as hasActiveOption, e as setLastOptionActive, f as setFirstOptionActive, i as hasPreviousOption, j as setPreviousOptionActive, k as hasNextOption, l as setNextOptionActive, m as actOnActiveOption, n as goToOption, o as onClickedOption, c as convertValueToArray, p as matchOption } from './gux-listbox.service-CQAaQM2s.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
 import { w as whenEventIsFrom } from './when-event-is-from-kLXvN2m9.js';
@@ -386,7 +386,7 @@ const GuxDropdown = class {
         }
     }
     render() {
-        return (h("gux-popup", { key: '9225e98cb710c54f4ddd6a71ba844433005a9281', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'cde100c4f62afffb5f98c24d007820479fdb1b5c', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }
@@ -625,13 +625,13 @@ const GuxOption = class {
         return parentListbox === null || parentListbox === void 0 ? void 0 : parentListbox.disabled;
     }
     render() {
-        return (h(Host, { key: '21268fa074d12c669b7d2b987021c00eeb56832e', role: "option", class: {
+        return (h(Host, { key: 'de7fb9d76afcc1feecdb68c23114aff148472d7c', role: "option", class: {
                 'gux-active': this.active,
                 'gux-disabled': this.disabled || this.hasDisabledParent(),
                 'gux-filtered': this.filtered,
                 'gux-selected': this.selected,
                 'gux-show-subtext': this.hasSubtext
-            }, "aria-selected": this.getAriaSelected(), "aria-disabled": booleanString(this.disabled || this.hasDisabledParent()) }, h("div", { key: '73a00464784fe9f4c13f76975181e48fdb72bde0', class: "gux-option-wrapper" }, h("gux-truncate", { key: '6f2dfb81cb8537d91311eba41aa2afc0f30a2dc1', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, h("slot", { key: 'e7df152493e31a6b81ebe47e1a47b04038ec0279' })), h("slot", { key: '37ee59d2f015b763914e1c0e451b4959c316d83e', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
+            }, "aria-selected": this.getAriaSelected(), "aria-disabled": booleanString(this.disabled || this.hasDisabledParent()) }, h("div", { key: '648a0cf759809f2ad694b750aa03f49b07d19440', class: "gux-option-wrapper" }, h("gux-truncate", { key: '07b36de401bd98cce884033e361fadc9699d84fa', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, h("slot", { key: '3ffd223bb7ffa9d5f9093d7232ee71b1cc589f11' })), h("slot", { key: '12d3e46ec86d7fcc7f26707cf2f30dd9c761e350', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
     }
     get root() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/gux-file-list-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D63QQ8rP.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CW7z6RPd.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const removeFile = "Remove {filename} file";
@@ -27,11 +27,11 @@ const GuxFileListItem = class {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: '2d1e97c2ac6825c1dab903b8a48eb1441bff08f3', class: {
+        return (h("div", { key: '0328161fecdfac516d93b290bf80aa20164bb7b4', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '7a66ae5e04bf8163490ac07621ee87b8784ab787', class: "gux-info" }, h("gux-truncate", { key: '915968c4566c17b0fe5e81b88ea6987e1128aa6c' }, h("span", { key: '33484629960329adc81dc43bd586a216ed863671', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, h("div", { key: '65f0b9fb80b042ab77d78755558b76b65d0f4f85', class: "gux-info" }, h("gux-truncate", { key: '3d5e10a298214534d8fc2ee112415e47c485410f' }, h("span", { key: 'ca45c730913d3045378d760b12ba860d105afb99', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
     }
     renderStatusIndicator() {
         switch (this.status) {

package/dist/esm/gux-flag-icon-beta.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-D63QQ8rP.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { r as registerInstance, h, a as getElement } from './index-CW7z6RPd.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const AD = "Andorra";
@@ -514,7 +514,7 @@ const GuxFlagIconBeta = class {
     }
     render() {
         var _a;
-        return (h("span", { key: '1ad2a97c917b786edd69eaf37041c46f87953375', 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: '6ccab652679fac03500de9ee3df1c1afeaf0ab23', 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/esm/gux-flyout-menu.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D63QQ8rP.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CW7z6RPd.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom-8w8ltg_h.js';
 import { a as afterNextRenderTimeout } from './after-next-render-Bg4q97BS.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
 import { h as hideDelay } from './gux-menu.common-QGDBFOq1.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import './get-closest-element-Cd4R0amv.js';
 
 const onMenuFocus = "Use the right arrow to enter the submenu, and the left arrow to return to the previous menu";
@@ -188,10 +188,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f9d26b8567c1436d5966aec6c6c06d4031064382', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'e46c3eee790e63e50957e0d36537665c961a490b', ref: el => (this.announceElement = el) }), h("span", { key: '99eec923e9e9edcc7a0442eb55eb936ea318df8d', ref: el => (this.targetElement = el) }, h("slot", { key: '9a1b5750acb2ca61b830f84c37009a6cc808c342', name: "target" })), h("div", { key: 'e2b97287b64e5eec9b63f21d646e89766f3afd18', class: {
+        return (h(Host, { key: 'f4c90d9741fdb7203ef33e0013b1b13e78ca5922', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: '419d0075631175d863163e992dab85cf504de112', ref: el => (this.announceElement = el) }), h("span", { key: '3033273e3cc690202fb4d8bf71408507acfc3f2d', ref: el => (this.targetElement = el) }, h("slot", { key: '9d1dac9d7fc35d5f33d29952c071f0b237061fdb', name: "target" })), h("div", { key: '864059aa6470236dd411ee3e8b592732cc4c5b28', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '77fa03106ef57bfb59dae0239199c5a93f0cf376', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '3a624af2d215ca1d188397f79dbed8d33423698b', class: "gux-arrow-caret" })), h("slot", { key: '3a58a1f1723edec46a054039f8ec377c93aecc7b', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'dd1ba5b8062d6f4f15a84d3e3dfb36933b9bb67d', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '602eb988123efc466fd67e452c28efec1238fb08', class: "gux-arrow-caret" })), h("slot", { key: 'f4beff6d4dc46547e663725307358a94add992af', name: "menu" }))));
     }
     get root() { return getElement(this); }
 };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, h } from './index-D63QQ8rP.js';
+import { r as registerInstance, h } from './index-CW7z6RPd.js';
 
 const GuxForm = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: 'ae0273b619be5888890ee2b4cfae4d50ee1a5cb1' }));
+        return (h("slot", { key: 'dfc4a6140a717bb5efab98db6915ddbf528147f2' }));
     }
 };
 

package/dist/esm/gux-form-description.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D63QQ8rP.js';
+import { r as registerInstance, h } from './index-CW7z6RPd.js';
 
 const guxFormDescriptionCss = () => `::slotted(*){margin:0 !important;font-family:var(--gse-semantic-body-sm-regular-fontFamily) !important;font-size:var(--gse-semantic-body-sm-regular-fontSize) !important;font-weight:var(--gse-semantic-body-sm-regular-fontWeight) !important;line-height:var(--gse-semantic-body-sm-regular-lineHeight) !important;color:var(--gse-semantic-foreground-container-midEmphasis) !important}`;
 
@@ -7,7 +7,7 @@ const GuxFormDescription = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '754ccb574f753ed39b02255c26570daab0ee612a' }));
+        return (h("slot", { key: 'd74d1382ec479c6d2b4ec243a67051df3a060388' }));
     }
 };
 GuxFormDescription.style = guxFormDescriptionCss();

package/dist/esm/gux-form-field-checkbox-group-beta.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-D63QQ8rP.js';
-import { O as OnMutation } from './on-mutation-Buvv8P1w.js';
+import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-CW7z6RPd.js';
+import { O as OnMutation } from './on-mutation-hyjKEYin.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
 import { l as logWarn } from './log-error-DxtJDeL9.js';
-import { b as buildI18nForComponent } from './index-BaLo2k_8.js';
+import { b as buildI18nForComponent } from './index-DV83JT5I.js';
 import { s as simulateNativeEvent } from './simulate-native-event-BMRf5pjV.js';
-import { a as GuxFormFieldHelp, G as GuxFormFieldError } from './gux-form-field-error-C1R31tLg.js';
-import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-AXYw2QwF.js';
+import { a as GuxFormFieldHelp, G as GuxFormFieldError } from './gux-form-field-error-djiZU2Ab.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-BlF78czj.js';
 import { g as getSlotTextContent } from './get-slot-text-content-MAoEg4ig.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
 import './get-closest-element-Cd4R0amv.js';
 
 function setAllCheckboxInputs(root, checked) {
@@ -196,8 +196,8 @@ const GuxFormFieldCheckboxGroupBeta = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '5b6e707b17bafdcab6c907815b1c461668ebefd5', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'fb23cba36a60545e2e278b4b0830be6b2f9d2cf4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'becbcbc1768106b886059dd5660dab27ed4e580b', position: "above", required: this.required }, h("slot", { key: '6f3ad4d484c4f869dbad54ae2ed50007c54cabdf', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e8ab7767262b6d097dc72a557f1519f11df06cb2', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f1a7a2b4d3fc013ae6b23668556e950f8c8a1fe7', name: "group-label-info" })), h("slot", { key: '6e9b0e4546bbce9c9782114fa5a183191dd43720', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '4f6f63889f32078e7cb954fc933be35ad08e2add', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'cc2e03876364f7aa0e14c5af45f669fff8af0af5', show: this.hasGroupError }, h("slot", { key: '928c87cb8a084d1562318f74d83ac0f71fac6255', name: "group-error" })), h(GuxFormFieldHelp, { key: '78009fc037e5354babe8ef543ecfb9592bd20922', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '472d4c2c67cfcb166726821a47511e7b92f8ed0f', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '60f18cfe8373a9414a78715a4a906c04ff1c4915', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '8c98698b3f4041fa1d64cfa0bef2f44e769c0f07' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '89fe73ff9c4d41ce42a4ae5f3c0e526f4bd63b74', position: "above", required: this.required }, h("slot", { key: '818e93d883540f758169f9345163d9593fa12613', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9cec2969a3b901a6c9a6b89810667a07912f091c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ba7b81204b7ef2c0b8273cd95e6949a1cc46ecf5', name: "group-label-info" })), h("slot", { key: 'd14a2781f4fa7b7cba10d40ecaa7aaa2110a36fe', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'f32b310d6ee22de2c404ffa99919c075a6461bf0', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: '3c9f8d6533a03a2a476f83f01668f66dc4397afa', show: this.hasGroupError }, h("slot", { key: '8cb29288a2163deef3d4d76bd07784bf7fe35bb8', name: "group-error" })), h(GuxFormFieldHelp, { key: 'aef3c9a01bfc98e02229c734b40e9458430530af', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'a7b0d7876bf79720384a8c30d742e6c2d37116ed', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/esm/gux-form-field-checkbox.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D63QQ8rP.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CW7z6RPd.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-Buvv8P1w.js';
+import { O as OnMutation } from './on-mutation-hyjKEYin.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-C1R31tLg.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
-import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-Nq3AAQGS.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-djiZU2Ab.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
+import { a as getSlottedInput, v as validateFormIds } from './gux-form-field.service-C8ZnDb1J.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
@@ -51,10 +51,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (h(Host, { key: '6be5724c6d7f353f7a938e62081613b969633dc9', class: {
+        return (h(Host, { key: '1aefdc84296829f5ecb45726289a57900a8e82c0', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '72f528325f9ddcbfc3d30b2e7567c176be4f9ab0', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '41cec804cb725b17e74d6c2c8f49265337d06b64', class: "gux-input-label" }, h("div", { key: '8feb33f771d8a1357f9760a7c763c92bd84d52c4', class: "gux-input" }, h("slot", { key: 'e89f30cc0d588d7a6971acf79276782dad3afdf3', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '35c75c4845c4c7262157f07374083a251939c648', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '3b75912596bde38531fab54cd962c61c020ece43', name: "label" }))), h("div", { key: 'f3dfa4e1823143792e07a8c5dd03dbb54cdad284', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '318ef061ef7929732a2ab63b54e6bef16cea55e0', show: this.hasError }, h("slot", { key: '7b1ad0b47fdf6169381f06cd3d768cfffbfe2e93', name: "error" })), h(GuxFormFieldHelp, { key: '5bfe1b649709845b10e29e30286bc14807ee5301', show: !this.hasError && this.hasHelp }, h("slot", { key: '482298addc616faf1baf2a7b41cf76683a013653', name: "help" }))))));
+            } }, h("div", { key: '9397e34df74404156f52654082c6e518c48cca52', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'f583148dc05329f2e7180eebe472c075cc4976b2', class: "gux-input-label" }, h("div", { key: '85386940896925c453a654ddb620b6920cfe4ce8', class: "gux-input" }, h("slot", { key: '2c913278d1aa3335ac2371a4c489236acaf03a60', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'd8e24ad74e18b981456abc7ced8c2ad4baf2ba85', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5fee8bf3e1a1bde92a34bac86169a6f71589e472', name: "label" }))), h("div", { key: '30943828d1e9e7873e8ed6fb474ce8e65265173f', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '0201b2ce5b516a1fddeedbc22d762a51b0312417', show: this.hasError }, h("slot", { key: '6aea5f57764f866d2bf87b0a09d68911bf5ebde5', name: "error" })), h(GuxFormFieldHelp, { key: '4eab8a81f4e0e0ae5989a99147b5e43a979230e6', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c492ba0bee665efe56f49b277648e5d49637ae5b', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

package/dist/esm/gux-form-field-color.entry.js

@@ -1,17 +1,44 @@
-import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-D63QQ8rP.js';
+import { r as registerInstance, f as forceUpdate, h, a as getElement } from './index-CW7z6RPd.js';
 import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-Cb3FOYGS.js';
-import { O as OnMutation } from './on-mutation-Buvv8P1w.js';
+import { O as OnMutation } from './on-mutation-hyjKEYin.js';
 import { o as onRequiredChange } from './on-attribute-change-De1NnCmO.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-PYfNAK8p.js';
 import { h as hasSlot } from './has-slot-qzV3vtOw.js';
-import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-C1R31tLg.js';
-import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DnRIKsCy.js';
-import { g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-Nq3AAQGS.js';
-import { t as trackComponent } from './usage-Dr0IUVkV.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-djiZU2Ab.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-DFaxFFI1.js';
+import { a as getSlottedInput, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-C8ZnDb1J.js';
+import { t as trackComponent } from './usage-B4kgQ9Nr.js';
 import './random-html-id-D9jKBqIb.js';
 import './log-error-DxtJDeL9.js';
 import './simulate-native-event-BMRf5pjV.js';
 
+/**
+ * Intercepts programmatic `input.value = ...` assignments on an HTMLInputElement
+ * and invokes a callback when the value changes.
+ *
+ * Browsers do not fire `input` or `change` events for programmatic value sets,
+ * so this overrides the `value` property descriptor on the specific element
+ * instance, wrapping the native setter to detect changes.
+ */
+function onInputValueChange(input, callback) {
+    // Grab the native value getter/setter from the prototype
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    // Override the value property on this specific element instance
+    Object.defineProperty(input, 'value', {
+        get() {
+            return descriptor.get.call(this);
+        },
+        set(newValue) {
+            const oldValue = descriptor.get.call(this);
+            descriptor.set.call(this, newValue);
+            if (oldValue !== newValue) {
+                callback(newValue);
+            }
+        },
+        configurable: true
+    });
+}
+
 const guxFormFieldColorCss = () => `.gux-form-field-container{display:flex;flex-direction:column}.gux-form-field-container.gux-beside{flex-direction:row}.gux-character-counter{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr 1fr}.gux-character-counter :nth-child(1){grid-row:1/2;grid-column:2/3}.gux-character-counter :nth-child(2){grid-row:1/2;grid-column:1/2}.gux-character-counter :nth-child(3){grid-row:2/3;grid-column:1/-1}.gux-character-counter :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-character-counter.gux-beside{grid-template-columns:min-content 1fr}.gux-character-counter.gux-beside :nth-child(1){grid-row:1/2;grid-column:1/-1}.gux-character-counter.gux-beside :nth-child(2){grid-row:2/3;grid-column:1/2}.gux-character-counter.gux-beside :nth-child(3){grid-row:2/3;grid-column:2/3}.gux-character-counter.gux-beside :nth-child(4){grid-row:3/4;grid-column:1/-1}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 0 auto;order:0;color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label{display:inline-flex;flex:1 0 auto}.gux-form-field-label ::slotted(label){min-inline-size:0}.gux-form-field-label ::slotted(gux-label-info-beta){padding-inline-start:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-beside{position:relative;inset-block-start:var(--gse-ui-formControl-input-top);inline-size:fit-content;min-inline-size:var(--gse-ui-formControl-input-textfield-minWidth);max-inline-size:fit-content;margin-inline-end:var(--gse-ui-formControl-group-gapItems)}.gux-form-field-label.gux-above{padding-block-end:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding-block-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-textBold-fontFamily);font-size:var(--gse-ui-formControl-label-textBold-fontSize);font-weight:var(--gse-ui-formControl-label-textBold-fontWeight);line-height:var(--gse-ui-formControl-label-textBold-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}::slotted(input){flex:0 1 auto;align-self:auto;order:0;inline-size:var(--gse-ui-colorPicker-input-swatchSizing);min-inline-size:var(--gse-ui-colorPicker-input-swatchSizing);block-size:var(--gse-ui-colorPicker-input-swatchSizing);padding:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);text-align:end;outline:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);align-content:stretch;align-items:center}.gux-input-and-error-container .gux-input .gux-hex-display{font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);text-transform:uppercase;user-select:text}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;inline-size:var(--gse-ui-formControl-input-colorPicker-size);block-size:var(--gse-ui-formControl-input-colorPicker-size);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within:has(input:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container:hover{cursor:pointer;border-color:var(--gse-ui-formControl-input-hover-border-color)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -49,6 +76,10 @@ const GuxFormFieldColor = class {
         // Trigger re-render when input value changes
         forceUpdate(this.root);
     }
+    handleChange() {
+        // Trigger re-render when input value changes programmatically
+        forceUpdate(this.root);
+    }
     handleKeyup(event) {
         var _a, _b;
         switch (event.key) {
@@ -106,13 +137,13 @@ const GuxFormFieldColor = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '03da50fc2dd75b8fa11fd24fa931686cf9c6ffb2', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'cd136f3469a771cc4fcebc0f8b5776bffb9f8a3e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'a562e070a8863266e4adc1ee05a84174e52a74ee', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fa35f0814863a9a134068bdfece39eb9c8f59ce3', variant: this.indicatorMark, required: this.required }), h("slot", { key: '4a9e9d31b5c5e311e13dba6d321f1af4efece5b9', name: "label-info" })), h("div", { key: '705bf98a58485669bac80a17d247c22ab5118a49', class: "gux-input-and-error-container" }, h("div", { key: 'e00ad006c83ba355371341c15ed8fbfe38a41625', class: {
+        return (h(GuxFormFieldContainer, { key: '22731ec8b3582e60ea9cdabbc101f6ef60b0fd1f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '06949fed7716a0eaa45fb3f3a8086d1b0b7f36ab', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '7385e436877d65d2aab1546e7f2f405bb9127cea', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2b41de5051abf6be0903bd0e0e0ccfbece25cd7f', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7ef8e11ca1f7571603e8c2af9fb9e33e03a045d2', name: "label-info" })), h("div", { key: '6bc29a166a510778cf78bbbb9fc5f9fafabaf059', class: "gux-input-and-error-container" }, h("div", { key: 'ef431d82c936ea957f7aaa7c7498902db5c35305', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '7b50ce52e74f979b43458725c7a45c1ad302f0cf', class: {
+            } }, h("div", { key: '0bfc60c7d39b90269eb5bb37f5fb701fc29af18a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '70275667fc0304d22fe0375cc5a4367bb76e121b', name: "input", onSlotchange: () => this.setInput() })), this.showHexCode && this.input && (h("span", { key: 'c99da4e60bc4bd9bceec8cd1abeb18a11429b6f4', class: "gux-hex-display", role: "status", "aria-live": "polite" }, h("gux-screen-reader-beta", { key: 'd00866dc1bfc0f9fbd2f6475727d21de23e0a532' }, "Selected color:", ' '), this.input.value))), h(GuxFormFieldError, { key: 'b264147281833b9c33806d2b4ac5ae61f667581e', show: this.hasError }, h("slot", { key: '25242b105ecf14258ba4cae79a509b0497c3ca7c', name: "error" })), h(GuxFormFieldHelp, { key: 'd939d8cc211229bf2b4be63b056055994aed071d', show: !this.hasError && this.hasHelp }, h("slot", { key: '7dab8da2318c7badfc223e31d50de9f04d633fe3', name: "help" })))));
+            } }, h("slot", { key: '5ccf7f7d94e010283c76225042243d9c3ef379b6', name: "input", onSlotchange: () => this.setInput() })), this.showHexCode && this.input && (h("span", { key: '9b9e8059d716d85d9c9229976505a5adb888aceb', class: "gux-hex-display", role: "status", "aria-live": "polite" }, h("gux-screen-reader-beta", { key: '3f72b11b8bff88f6624bc0f682ce7ae102019a65' }, "Selected color:", ' '), this.input.value))), h(GuxFormFieldError, { key: '1851f3dd0d546f9caa0ad442267b9d1de6051648', show: this.hasError }, h("slot", { key: 'b779897f71b1d26f1cbcb3e9e69d86f8fc0d340a', name: "error" })), h(GuxFormFieldHelp, { key: '1376fa7f3db8617c97bee8f12163f1d6ea568188', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a9123a8c523b9fc3a487f0254ef07738bf8e2ce9', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -128,6 +159,9 @@ const GuxFormFieldColor = class {
         this.requiredObserver = onRequiredChange(this.input, (required) => {
             this.required = required;
         });
+        onInputValueChange(this.input, () => {
+            forceUpdate(this.root);
+        });
         validateFormIds(this.root, this.input);
     }
     setLabel() {

package/dist/esm/{gux-form-field-container-DnRIKsCy.js → gux-form-field-container-DFaxFFI1.js}

@@ -1,4 +1,4 @@
-import { h } from './index-D63QQ8rP.js';
+import { h } from './index-CW7z6RPd.js';
 
 const GuxFormFieldLabel = ({ position, required }, children) => {
     return (h("div", { class: {