genesys-spark-components 4.231.2 → 4.232.0

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var floatingUi_dom = require('./floating-ui.dom-CMUN3LzO.js');
 var randomHtmlId = require('./random-html-id-DH9-ntZu.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
 var isoDates = require('./iso-dates-C3ShFBCi.js');
-var onClickOutside = require('./on-click-outside-Z81yLXW0.js');
-var usage = require('./usage-CWS5rSpe.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var onClickOutside = require('./on-click-outside-JPx_Y2im.js');
+var usage = require('./usage-CXG6kbqB.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 var sparkIntl = require('./spark-intl-cfvEjiOP.js');
 var useRegionalDates = require('./use-regional-dates-5VnN03zC.js');
 require('./get-closest-element-CfyZl7i7.js');
@@ -26,10 +26,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]];
@@ -189,7 +189,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.
          */
@@ -429,7 +429,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 ||
@@ -438,7 +438,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) ||
@@ -541,7 +541,7 @@ const GuxDatepicker = class {
         }
     }
     updateDate() {
-        if (this.mode === "range" /* CalendarModes.Range */) {
+        if (this.mode === 'range') {
             const [from, to] = isoDates.fromIsoDateRange(this.value);
             const { map: map1, regexp: regexp1 } = this.getMapAndRegexFromField(from);
             this.formattedValue = this.format.replace(regexp1, match => {
@@ -582,7 +582,7 @@ const GuxDatepicker = class {
         this.intervalRange = intervalRange;
     }
     getCombinedFocusedDateValue() {
-        return this.mode === "range" /* CalendarModes.Range */
+        return this.mode === 'range'
             ? this.getRangeFocusedDateValue()
             : this.getFocusedDateValue();
     }
@@ -629,13 +629,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 = isoDates.asIsoDateRange(now, now);
             }
             else {
                 this.value = isoDates.asIsoDate(now);
             }
-            if (this.mode === "range" /* CalendarModes.Range */ && this.numberOfMonths < 2) {
+            if (this.mode === 'range' && this.numberOfMonths < 2) {
                 this.numberOfMonths = 2;
             }
         }
@@ -695,11 +695,11 @@ const GuxDatepicker = class {
             } }, index.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]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.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 (index.h("div", { class: {
@@ -711,7 +711,7 @@ const GuxDatepicker = class {
             } }, this.getCalendarLabels()[1]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.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 (index.h("div", { key: '1dc545078977013d055f7758672e20cdc1822bb0', class: {
+        return (index.h("div", { key: 'd9a0fa114334489ab841a6ea49c0c6516c780ed7', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 var sparkIntl = require('./spark-intl-cfvEjiOP.js');
 var index_esm = require('./index.esm-CO-IlDkX.js');
 require('./get-closest-element-CfyZl7i7.js');
@@ -61,7 +61,7 @@ const GuxDay = class {
         });
     }
     render() {
-        return (index.h("button", { key: '3638f4ebebb2c6aaf917394d51cde42232010b4d', type: "button", disabled: this.disabled }, index.h("slot", { key: 'cfc34716c038e238c4c8a8c1e295651d149996c1' }, index.h("span", { key: '8e407e9763565f9a99715c6e6a8a17287651869f', "aria-hidden": "true" }, this.date.day), index.h("gux-screen-reader-beta", { key: '5d6433d80efe33696dd6259ae410c20907fe6e77' }, formatPlainDate(this.readerFormatter, this.date)))));
+        return (index.h("button", { key: '7b46b70316ff94ef1c5b63e7d6f9d2f216e72cc4', type: "button", disabled: this.disabled }, index.h("slot", { key: '390f6a026932132bb971080cb2320232bf277b79' }, index.h("span", { key: 'b5a89f4113297d385078db6198a7a40d94bc6851', "aria-hidden": "true" }, this.date.day), index.h("gux-screen-reader-beta", { key: '2ab020511f5695b91e4fef3c8fdec58315682ac6' }, formatPlainDate(this.readerFormatter, this.date)))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var randomHtmlId = require('./random-html-id-DH9-ntZu.js');
-var usage = require('./usage-CWS5rSpe.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var usage = require('./usage-CXG6kbqB.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const defaultLabel = "Disclosure button";
@@ -55,10 +55,10 @@ const GuxDisclosureButtonLegacy = class {
         this.updateIcon();
     }
     render() {
-        return (index.h("div", { key: 'dbdbfbb01c8ff75f0e7400e31375a8c92623d70a', class: `gux-disclosure-button-container gux-${this.position}` }, index.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" }, index.h("gux-icon", { key: '2dd8bd7077657ed38c9e441e0c2529e96803fc6a', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: 'd6227fc197227eb76a6c0c3d7a06afec9cb91e72', id: this.panelId, class: {
+        return (index.h("div", { key: '0a693df63172777c185ff3285aff4646d4e2bdae', class: `gux-disclosure-button-container gux-${this.position}` }, index.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" }, index.h("gux-icon", { key: 'a8d352d70b2a3bbcea8e8500a2995c3b99afe583', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: '7277f740a408740c43692a27d77d271260a53447', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, index.h("slot", { key: '575c959ebe5bf2f5fce7b667ba4c69e48c016c87', name: "panel-content" }))));
+            }, role: "region" }, index.h("slot", { key: '63c80e4922fd427954ebb608cdb97d2bb4cead5a', name: "panel-content" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var usage = require('./usage-CWS5rSpe.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var usage = require('./usage-CXG6kbqB.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const dismiss = "Dismiss";
@@ -23,10 +23,10 @@ const GuxDismissButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("gux-button-slot", { key: '35c932bd42ac603f57e731f6f17ab6d7d82a7aca', accent: "ghost", class: {
+        return (index.h("gux-button-slot", { key: '17ce06b1286aef3777313fa6a5dc6afdf29336fe', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, index.h("button", { key: '215372def7f9629d6d24fbf33b3909fc4653bd68', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: '0b87676465df52c9648bda6867dbc0b98de66a0b', class: "gux-icon-container" }, index.h("gux-icon", { key: '7690f5cdd35a393d0c1fea4f6848870e4b7d9afa', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, index.h("button", { key: '4c8cb790088a3fa251762d1941ea625d6edeb725', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: '2ee161ab52ca8f0fb3cc6ab94b06aa279675f542', class: "gux-icon-container" }, index.h("gux-icon", { key: '9420aae88803dc9795629b999b16ed454c48f824', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const clearSelection = "Clear {numberSelected} selected items";
@@ -48,7 +48,7 @@ const GuxDropdownMultiTag = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: 'ee3fd02e107fb9601920bea6f3ff6acf065d957f', class: {
+        return (index.h("div", { key: '2f34ac6be6a5bed37d1155fa9242e92ea8cc0366', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var onClickOutside = require('./on-click-outside-Z81yLXW0.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var onClickOutside = require('./on-click-outside-JPx_Y2im.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
-var usage = require('./usage-CWS5rSpe.js');
+var usage = require('./usage-CXG6kbqB.js');
 var guxListbox_service = require('./gux-listbox.service-FoCeSxM9.js');
-var onMutation = require('./on-mutation-DIPpoQ8V.js');
+var onMutation = require('./on-mutation-BW38lSRA.js');
 require('./get-closest-element-CfyZl7i7.js');
 require('./get-text-content-from-nodes-CKOr9B5M.js');
 
@@ -444,7 +444,7 @@ const GuxDropdownMulti = class {
     }
     render() {
         return [
-            index.h("div", { key: '1a9f9e76a264bd490ff6f03b2713a7ca6ba4a904', class: "gux-dropdown-container" }, index.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()))
+            index.h("div", { key: '8218431fc220e7712c78a3149a1411f580a0bafc', class: "gux-dropdown-container" }, index.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/cjs/gux-dropdown-option.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var safeRegexpString = require('./safe-regexp-string-Bb3vDqCh.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}`;
@@ -55,7 +55,7 @@ const GuxDropdownOption = class {
         };
     }
     __stencil_render() {
-        return (index.h("div", { key: '9ca57fbc664d0c5462e36e88276c14fdef917c97', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (index.h("div", { key: '8b776a6bff7f3dc09bd953705e65e82bdd3146c7', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var onClickOutside = require('./on-click-outside-Z81yLXW0.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var onClickOutside = require('./on-click-outside-JPx_Y2im.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
-var usage = require('./usage-CWS5rSpe.js');
-var onMutation = require('./on-mutation-DIPpoQ8V.js');
+var usage = require('./usage-CXG6kbqB.js');
+var onMutation = require('./on-mutation-BW38lSRA.js');
 var guxListbox_service = require('./gux-listbox.service-FoCeSxM9.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
 var whenEventIsFrom = require('./when-event-is-from-C6TjNoqM.js');
@@ -388,7 +388,7 @@ const GuxDropdown = class {
         }
     }
     render() {
-        return (index.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 (index.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 index.getElement(this); }
@@ -627,13 +627,13 @@ const GuxOption = class {
         return parentListbox === null || parentListbox === void 0 ? void 0 : parentListbox.disabled;
     }
     render() {
-        return (index.h(index.Host, { key: '21268fa074d12c669b7d2b987021c00eeb56832e', role: "option", class: {
+        return (index.h(index.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.booleanString(this.disabled || this.hasDisabledParent()) }, index.h("div", { key: '73a00464784fe9f4c13f76975181e48fdb72bde0', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '6f2dfb81cb8537d91311eba41aa2afc0f30a2dc1', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, index.h("slot", { key: 'e7df152493e31a6b81ebe47e1a47b04038ec0279' })), index.h("slot", { key: '37ee59d2f015b763914e1c0e451b4959c316d83e', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
+            }, "aria-selected": this.getAriaSelected(), "aria-disabled": booleanString.booleanString(this.disabled || this.hasDisabledParent()) }, index.h("div", { key: '648a0cf759809f2ad694b750aa03f49b07d19440', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '07b36de401bd98cce884033e361fadc9699d84fa', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, index.h("slot", { key: '3ffd223bb7ffa9d5f9093d7232ee71b1cc589f11' })), index.h("slot", { key: '12d3e46ec86d7fcc7f26707cf2f30dd9c761e350', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var index$1 = require('./index-DVtwB70Y.js');
-var usage = require('./usage-CWS5rSpe.js');
+var index = require('./index-npRUdf7N.js');
+var index$1 = require('./index-D5gbJ1qH.js');
+var usage = require('./usage-CXG6kbqB.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const removeFile = "Remove {filename} file";
@@ -29,11 +29,11 @@ const GuxFileListItem = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("div", { key: '2d1e97c2ac6825c1dab903b8a48eb1441bff08f3', class: {
+        return (index.h("div", { key: '0328161fecdfac516d93b290bf80aa20164bb7b4', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '7a66ae5e04bf8163490ac07621ee87b8784ab787', class: "gux-info" }, index.h("gux-truncate", { key: '915968c4566c17b0fe5e81b88ea6987e1128aa6c' }, index.h("span", { key: '33484629960329adc81dc43bd586a216ed863671', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, index.h("div", { key: '65f0b9fb80b042ab77d78755558b76b65d0f4f85', class: "gux-info" }, index.h("gux-truncate", { key: '3d5e10a298214534d8fc2ee112415e47c485410f' }, index.h("span", { key: 'ca45c730913d3045378d760b12ba860d105afb99', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
     }
     renderStatusIndicator() {
         switch (this.status) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var usage = require('./usage-CWS5rSpe.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index = require('./index-npRUdf7N.js');
+var usage = require('./usage-CXG6kbqB.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const AD = "Andorra";
@@ -516,7 +516,7 @@ const GuxFlagIconBeta = class {
     }
     render() {
         var _a;
-        return (index.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 (index.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/cjs/gux-flyout-menu.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var floatingUi_dom = require('./floating-ui.dom-CMUN3LzO.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
-var usage = require('./usage-CWS5rSpe.js');
+var usage = require('./usage-CXG6kbqB.js');
 var guxMenu_common = require('./gux-menu.common-B8_9UAPe.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const onMenuFocus = "Use the right arrow to enter the submenu, and the left arrow to return to the previous menu";
@@ -190,10 +190,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f9d26b8567c1436d5966aec6c6c06d4031064382', tabIndex: 0, "aria-haspopup": "true" }, index.h("gux-announce-beta", { key: 'e46c3eee790e63e50957e0d36537665c961a490b', ref: el => (this.announceElement = el) }), index.h("span", { key: '99eec923e9e9edcc7a0442eb55eb936ea318df8d', ref: el => (this.targetElement = el) }, index.h("slot", { key: '9a1b5750acb2ca61b830f84c37009a6cc808c342', name: "target" })), index.h("div", { key: 'e2b97287b64e5eec9b63f21d646e89766f3afd18', class: {
+        return (index.h(index.Host, { key: 'f4c90d9741fdb7203ef33e0013b1b13e78ca5922', tabIndex: 0, "aria-haspopup": "true" }, index.h("gux-announce-beta", { key: '419d0075631175d863163e992dab85cf504de112', ref: el => (this.announceElement = el) }), index.h("span", { key: '3033273e3cc690202fb4d8bf71408507acfc3f2d', ref: el => (this.targetElement = el) }, index.h("slot", { key: '9d1dac9d7fc35d5f33d29952c071f0b237061fdb', name: "target" })), index.h("div", { key: '864059aa6470236dd411ee3e8b592732cc4c5b28', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: '77fa03106ef57bfb59dae0239199c5a93f0cf376', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '3a624af2d215ca1d188397f79dbed8d33423698b', class: "gux-arrow-caret" })), index.h("slot", { key: '3a58a1f1723edec46a054039f8ec377c93aecc7b', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: 'dd1ba5b8062d6f4f15a84d3e3dfb36933b9bb67d', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '602eb988123efc466fd67e452c28efec1238fb08', class: "gux-arrow-caret" })), index.h("slot", { key: 'f4beff6d4dc46547e663725307358a94add992af', name: "menu" }))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 
 const GuxForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: 'ae0273b619be5888890ee2b4cfae4d50ee1a5cb1' }));
+        return (index.h("slot", { key: 'dfc4a6140a717bb5efab98db6915ddbf528147f2' }));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.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}`;
 
@@ -9,7 +9,7 @@ const GuxFormDescription = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: '754ccb574f753ed39b02255c26570daab0ee612a' }));
+        return (index.h("slot", { key: 'd74d1382ec479c6d2b4ec243a67051df3a060388' }));
     }
 };
 GuxFormDescription.style = guxFormDescriptionCss();

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
-var onMutation = require('./on-mutation-DIPpoQ8V.js');
+var index = require('./index-npRUdf7N.js');
+var onMutation = require('./on-mutation-BW38lSRA.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
 var logError = require('./log-error-nWO_o1C3.js');
-var index$1 = require('./index-DVtwB70Y.js');
+var index$1 = require('./index-D5gbJ1qH.js');
 var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
-var guxFormFieldError = require('./gux-form-field-error-CuPbJnEB.js');
-var guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-ymVqngT8.js');
+var guxFormFieldError = require('./gux-form-field-error-Csxri5IS.js');
+var guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-C0ViaU--.js');
 var getSlotTextContent = require('./get-slot-text-content-DZwcXMIm.js');
-var usage = require('./usage-CWS5rSpe.js');
+var usage = require('./usage-CXG6kbqB.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 function setAllCheckboxInputs(root, checked) {
@@ -198,8 +198,8 @@ const GuxFormFieldCheckboxGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '5b6e707b17bafdcab6c907815b1c461668ebefd5', labelPosition: "above" }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'fb23cba36a60545e2e278b4b0830be6b2f9d2cf4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: 'becbcbc1768106b886059dd5660dab27ed4e580b', position: "above", required: this.required }, index.h("slot", { key: '6f3ad4d484c4f869dbad54ae2ed50007c54cabdf', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'e8ab7767262b6d097dc72a557f1519f11df06cb2', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'f1a7a2b4d3fc013ae6b23668556e950f8c8a1fe7', name: "group-label-info" })), index.h("slot", { key: '6e9b0e4546bbce9c9782114fa5a183191dd43720', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), index.h("slot", { key: '4f6f63889f32078e7cb954fc933be35ad08e2add', onSlotchange: () => this.updateMainCheckbox() }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'cc2e03876364f7aa0e14c5af45f669fff8af0af5', show: this.hasGroupError }, index.h("slot", { key: '928c87cb8a084d1562318f74d83ac0f71fac6255', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '78009fc037e5354babe8ef543ecfb9592bd20922', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '472d4c2c67cfcb166726821a47511e7b92f8ed0f', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '60f18cfe8373a9414a78715a4a906c04ff1c4915', labelPosition: "above" }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '8c98698b3f4041fa1d64cfa0bef2f44e769c0f07' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '89fe73ff9c4d41ce42a4ae5f3c0e526f4bd63b74', position: "above", required: this.required }, index.h("slot", { key: '818e93d883540f758169f9345163d9593fa12613', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '9cec2969a3b901a6c9a6b89810667a07912f091c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'ba7b81204b7ef2c0b8273cd95e6949a1cc46ecf5', name: "group-label-info" })), index.h("slot", { key: 'd14a2781f4fa7b7cba10d40ecaa7aaa2110a36fe', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), index.h("slot", { key: 'f32b310d6ee22de2c404ffa99919c075a6461bf0', onSlotchange: () => this.updateMainCheckbox() }), index.h(guxFormFieldError.GuxFormFieldError, { key: '3c9f8d6533a03a2a476f83f01668f66dc4397afa', show: this.hasGroupError }, index.h("slot", { key: '8cb29288a2163deef3d4d76bd07784bf7fe35bb8', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'aef3c9a01bfc98e02229c734b40e9458430530af', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'a7b0d7876bf79720384a8c30d742e6c2d37116ed', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
-var onMutation = require('./on-mutation-DIPpoQ8V.js');
+var onMutation = require('./on-mutation-BW38lSRA.js');
 var preventBrowserValidationStyling = require('./prevent-browser-validation-styling-Dcbciyyc.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
-var guxFormFieldError = require('./gux-form-field-error-CuPbJnEB.js');
-var usage = require('./usage-CWS5rSpe.js');
+var guxFormFieldError = require('./gux-form-field-error-Csxri5IS.js');
+var usage = require('./usage-CXG6kbqB.js');
 var guxFormField_service = require('./gux-form-field.service-BiSsTyYc.js');
 require('./random-html-id-DH9-ntZu.js');
 require('./log-error-nWO_o1C3.js');
@@ -53,10 +53,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6be5724c6d7f353f7a938e62081613b969633dc9', class: {
+        return (index.h(index.Host, { key: '1aefdc84296829f5ecb45726289a57900a8e82c0', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '72f528325f9ddcbfc3d30b2e7567c176be4f9ab0', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '41cec804cb725b17e74d6c2c8f49265337d06b64', class: "gux-input-label" }, index.h("div", { key: '8feb33f771d8a1357f9760a7c763c92bd84d52c4', class: "gux-input" }, index.h("slot", { key: 'e89f30cc0d588d7a6971acf79276782dad3afdf3', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '35c75c4845c4c7262157f07374083a251939c648', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '3b75912596bde38531fab54cd962c61c020ece43', name: "label" }))), index.h("div", { key: 'f3dfa4e1823143792e07a8c5dd03dbb54cdad284', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '318ef061ef7929732a2ab63b54e6bef16cea55e0', show: this.hasError }, index.h("slot", { key: '7b1ad0b47fdf6169381f06cd3d768cfffbfe2e93', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '5bfe1b649709845b10e29e30286bc14807ee5301', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '482298addc616faf1baf2a7b41cf76683a013653', name: "help" }))))));
+            } }, index.h("div", { key: '9397e34df74404156f52654082c6e518c48cca52', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'f583148dc05329f2e7180eebe472c075cc4976b2', class: "gux-input-label" }, index.h("div", { key: '85386940896925c453a654ddb620b6920cfe4ce8', class: "gux-input" }, index.h("slot", { key: '2c913278d1aa3335ac2371a4c489236acaf03a60', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'd8e24ad74e18b981456abc7ced8c2ad4baf2ba85', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '5fee8bf3e1a1bde92a34bac86169a6f71589e472', name: "label" }))), index.h("div", { key: '30943828d1e9e7873e8ed6fb474ce8e65265173f', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '0201b2ce5b516a1fddeedbc22d762a51b0312417', show: this.hasError }, index.h("slot", { key: '6aea5f57764f866d2bf87b0a09d68911bf5ebde5', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4eab8a81f4e0e0ae5989a99147b5e43a979230e6', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'c492ba0bee665efe56f49b277648e5d49637ae5b', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -1,19 +1,46 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
-var onMutation = require('./on-mutation-DIPpoQ8V.js');
+var onMutation = require('./on-mutation-BW38lSRA.js');
 var onAttributeChange = require('./on-attribute-change-Cv7L_5Zv.js');
 var preventBrowserValidationStyling = require('./prevent-browser-validation-styling-Dcbciyyc.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
-var guxFormFieldError = require('./gux-form-field-error-CuPbJnEB.js');
-var guxFormFieldContainer = require('./gux-form-field-container-CEC5Hm16.js');
+var guxFormFieldError = require('./gux-form-field-error-Csxri5IS.js');
+var guxFormFieldContainer = require('./gux-form-field-container-hTZqdcZZ.js');
 var guxFormField_service = require('./gux-form-field.service-BiSsTyYc.js');
-var usage = require('./usage-CWS5rSpe.js');
+var usage = require('./usage-CXG6kbqB.js');
 require('./random-html-id-DH9-ntZu.js');
 require('./log-error-nWO_o1C3.js');
 require('./simulate-native-event-_MPnVmRN.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) {
@@ -51,6 +78,10 @@ const GuxFormFieldColor = class {
         // Trigger re-render when input value changes
         index.forceUpdate(this.root);
     }
+    handleChange() {
+        // Trigger re-render when input value changes programmatically
+        index.forceUpdate(this.root);
+    }
     handleKeyup(event) {
         var _a, _b;
         switch (event.key) {
@@ -108,13 +139,13 @@ const GuxFormFieldColor = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '03da50fc2dd75b8fa11fd24fa931686cf9c6ffb2', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'cd136f3469a771cc4fcebc0f8b5776bffb9f8a3e', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'a562e070a8863266e4adc1ee05a84174e52a74ee', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'fa35f0814863a9a134068bdfece39eb9c8f59ce3', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '4a9e9d31b5c5e311e13dba6d321f1af4efece5b9', name: "label-info" })), index.h("div", { key: '705bf98a58485669bac80a17d247c22ab5118a49', class: "gux-input-and-error-container" }, index.h("div", { key: 'e00ad006c83ba355371341c15ed8fbfe38a41625', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '22731ec8b3582e60ea9cdabbc101f6ef60b0fd1f', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '06949fed7716a0eaa45fb3f3a8086d1b0b7f36ab', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '7385e436877d65d2aab1546e7f2f405bb9127cea', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2b41de5051abf6be0903bd0e0e0ccfbece25cd7f', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '7ef8e11ca1f7571603e8c2af9fb9e33e03a045d2', name: "label-info" })), index.h("div", { key: '6bc29a166a510778cf78bbbb9fc5f9fafabaf059', class: "gux-input-and-error-container" }, index.h("div", { key: 'ef431d82c936ea957f7aaa7c7498902db5c35305', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '7b50ce52e74f979b43458725c7a45c1ad302f0cf', class: {
+            } }, index.h("div", { key: '0bfc60c7d39b90269eb5bb37f5fb701fc29af18a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '70275667fc0304d22fe0375cc5a4367bb76e121b', name: "input", onSlotchange: () => this.setInput() })), this.showHexCode && this.input && (index.h("span", { key: 'c99da4e60bc4bd9bceec8cd1abeb18a11429b6f4', class: "gux-hex-display", role: "status", "aria-live": "polite" }, index.h("gux-screen-reader-beta", { key: 'd00866dc1bfc0f9fbd2f6475727d21de23e0a532' }, "Selected color:", ' '), this.input.value))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'b264147281833b9c33806d2b4ac5ae61f667581e', show: this.hasError }, index.h("slot", { key: '25242b105ecf14258ba4cae79a509b0497c3ca7c', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'd939d8cc211229bf2b4be63b056055994aed071d', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '7dab8da2318c7badfc223e31d50de9f04d633fe3', name: "help" })))));
+            } }, index.h("slot", { key: '5ccf7f7d94e010283c76225042243d9c3ef379b6', name: "input", onSlotchange: () => this.setInput() })), this.showHexCode && this.input && (index.h("span", { key: '9b9e8059d716d85d9c9229976505a5adb888aceb', class: "gux-hex-display", role: "status", "aria-live": "polite" }, index.h("gux-screen-reader-beta", { key: '3f72b11b8bff88f6624bc0f682ce7ae102019a65' }, "Selected color:", ' '), this.input.value))), index.h(guxFormFieldError.GuxFormFieldError, { key: '1851f3dd0d546f9caa0ad442267b9d1de6051648', show: this.hasError }, index.h("slot", { key: 'b779897f71b1d26f1cbcb3e9e69d86f8fc0d340a', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '1376fa7f3db8617c97bee8f12163f1d6ea568188', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'a9123a8c523b9fc3a487f0254ef07738bf8e2ce9', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -130,6 +161,9 @@ const GuxFormFieldColor = class {
         this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
             this.required = required;
         });
+        onInputValueChange(this.input, () => {
+            index.forceUpdate(this.root);
+        });
         guxFormField_service.validateFormIds(this.root, this.input);
     }
     setLabel() {

package/dist/cjs/{gux-form-field-container-CEC5Hm16.js → gux-form-field-container-hTZqdcZZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CBglYKJO.js');
+var index = require('./index-npRUdf7N.js');
 
 const GuxFormFieldLabel = ({ position, required }, children) => {
     return (index.h("div", { class: {