udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/drawers/udp-side-sheet/udp-side-sheet.js

@@ -225,27 +225,27 @@ export class UdpSideSheet {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         const headerStartIcon = Boolean(this.headerActionButtonIcon) ? (h("udp-icon", { iconName: this.headerActionButtonIcon, color: "inherit" })) : undefined;
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const overflowIcon = h("udp-icon", { key: '82de58fadc656689ae099136f99d170855952a3b', iconName: "overflowMenuVertical", color: "inherit" });
-        return (h("div", { key: '23d87cb97f3c002070c3ec8d6b95c6befd269680', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '11b64f69164083c49d753c3093958d3cbba66b13', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: 'ebfd917c6ed5185e4ee1f6a22f515a3fb46c0180', class: "title-container" }, h("div", { key: '9a77857a737482d4cb40a97920616fd70d7b045b', class: "close-button" }, h("stencil-icon-button", { key: '97c54f805436d949c4c53f76c86a3d983ebf9f81',
+        const overflowIcon = h("udp-icon", { key: '114fb6c9c7672ed0c8e0350d35fcaafc5e90fc9d', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: '36c5d92ff2dfe298b600c15a973e05b4e03ef612', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: 'c0d84cde7128de85fd492c8c4002fcef0c65571c', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '91c2ae473b6158d0671fda0f8e89e993b239f659', class: "title-container" }, h("div", { key: '277dd337d923754dd50a8f671498717cf2208f3e', class: "close-button" }, h("stencil-icon-button", { key: '56ad80ad182e482cdfc8b786f99b6962354487de',
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '6015ca2ec8933d375df9b436196d844477bd469d', class: "title-text" }, h("unity-typography", { key: '716aa20dda34803752b4965aa011e172e4c14f99', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: 'b033e5e527fc376a08ee332b2a82a0585eb78cc4', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
-            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: '940031aad5af2d01df53b2ae6b7ccf2dfbbf89fa', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: 'ec6288c444babe7cd43b9fa107aa914b7af1a0c0', class: "title-text" }, h("unity-typography", { key: '9a7f020155a46e9258f8c21afe3f41d6df4b60f2', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '87d81014638a9229a195ffbf9f982307db2c13ef', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
+            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: '7b53fad664ba84d8eeeb2893d18085decdc635d9', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '21bde0a5a0ad153edc86e46c7e7b9e4466a484c5', class: "loader-container" }, h("udp-linear-loader", { key: '657735ff1db919f8d5f336b400969fa2098621f5', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '5bab4bd0520dc6d39873788c41f73d522be8b280', class: { content: true, padding: this.padding } }, h("slot", { key: 'a91f7c8e0ce57be9f570166c39ff949fd2decabd' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '210ddeeb63af2707b05f8ab85e8d3f378d8b979e' }, h("div", { key: '426a125fe61378ea3380c8e4c4ac78a5395f057f', class: "loader-container" }), h("div", { key: 'cd449c510b6324423bd73d909737cc9cbaed5a82', class: {
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '47a68f2b5d8a94709249b8d90a2ca67542d76e4a', class: "loader-container" }, h("udp-linear-loader", { key: '9ec156c748a5faceb4de0db2ca87ef2490294aa2', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '17e9cda2a7d3709f4bb6043c62165efb0685308e', class: { content: true, padding: this.padding } }, h("slot", { key: '43e24e734199f3bae197752b6d284e40a0af84dc' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '5b5c4916c753d4cf9f87c31d929d163fc96cefd9' }, h("div", { key: '6866f082dcd22d831cf938b7749baa40860badf0', class: "loader-container" }), h("div", { key: '779dcc447ed0f2d8e6fdc7c54d6c8d9f424b6028', class: {
                 footer: true,
-            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '44e244ac7b8ef997a7cc36bb9130df567c30a4fa', class: "footer-secondary-buttons-container" }, h("div", { key: 'b189b39ab1d802b32907a132a88b43a3cdf9013f', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: '60f3436e22154c88a725a92b8abe2485ab834ac6', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
+            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: 'd06b60b390d1a71fa363a2154eafb9061fb3bebd', class: "footer-secondary-buttons-container" }, h("div", { key: 'eefa3e4c23c680817567e9cafc6aadfd88671151', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: 'aa5fe72411ecbc3a9b13a104dc2b56fc0992b3c2', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: '5cd3af6ec4886defd8007a56930dffc1328f733c', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '3f40a1e0c83c8274709c6362489a03d28033e199', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: '23cda2d77f54d93a9efdd3898e7d9f7bb9a60a98', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
+            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: 'caefbeae9aa3a1bc103b36014d21654fc5463c74', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '887bc8092861206af6bb4dabcfeaf2dd1b3fdb3b', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: 'd0178781341edf03446cc3fb51caf92c20559c01', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
                 item === null || item === void 0 ? void 0 : item.onClick();
                 this.handleCloseOverflowMenu();
-            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: '406b502d639144dedfeb6d5c47da60c17f791478', ref: el => (this.measurementContainerRef = el), style: {
+            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: '4bee880fe9710a26eb03b074ef35bb7f75802c96', ref: el => (this.measurementContainerRef = el), style: {
                 position: 'absolute',
                 visibility: 'hidden',
                 pointerEvents: 'none',
                 display: 'flex',
                 gap: 'var(--spacing-02, 4px)',
             }, "aria-hidden": "true" }, (_g = this.footerSecondaryButtons) === null || _g === void 0 ? void 0 :
-            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: 'ef454737516b47299acb9a02ba252dd15993660e', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
+            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: 'bc6ddc8680666fee42ef35997bda54a3d895bc30', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
     }
     static get is() { return "udp-side-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedback/udp-notification/alerts/upd-alert-banner.js

@@ -7,7 +7,7 @@ export class UpdAlertBanner {
         this.message = '';
     }
     render() {
-        return (h("div", { key: '885f774f5366cafecd20075d8bb6a16055fb6c58', class: `alert-banner ${this.type}` }, h("unity-typography", { key: '789a73324253a838d2a403683cf2c9a35e69d605', variant: "data-display-three" }, "   ", this.message, " ")));
+        return (h("div", { key: '991526b9c1b99b21c5d851ab889eeafe01f89e86', class: `alert-banner ${this.type}` }, h("unity-typography", { key: 'cc785932707bd8a71ee6385a62d1531d195f4a24', variant: "data-display-three" }, "   ", this.message, " ")));
     }
     static get is() { return "upd-alert-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedback/udp-notification/udp-notification.js

@@ -13,11 +13,11 @@ export class UdpNotification {
     }
     render() {
         const statusClass = `status-${this.status}`;
-        return (h("div", { key: '670493aa1b278db27d8ddd76c1910146f59c693e', class: {
+        return (h("div", { key: '17379efbdace37347b1681c14ce9646352afa8b6', class: {
                 'udp-notification': true,
                 'visible': this.active,
                 [statusClass]: true // This will apply the correct class based on the status
-            } }, this.userCancel && (h("button", { key: '1072d2fef37f90c41f81fc3408fc050f591e6bf8', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: '8741ffc19f70e171e4b28fd0956183aa7d097952', class: "message" }, " ", h("unity-typography", { key: 'e3c0ab7aff59d6e6f548c8bbdbdc32c2393b2d19', variant: 'body' }, " ", this.message, " "))));
+            } }, this.userCancel && (h("button", { key: '188287b8107d70e0664bbec94ae93ecfb86829d2', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: '272d2666af08cd4e208b5cc89c7b66a4a820c308', class: "message" }, " ", h("unity-typography", { key: '1cf9ba151a1daa19888cf61e198cb3e3cc93a626', variant: 'body' }, " ", this.message, " "))));
     }
     static get is() { return "udp-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/autocomplete/udp-autocomplete.js

@@ -89,6 +89,26 @@ export class UdpAutocomplete {
          * @note Not supported in combination with `multiple`.
          */
         this.freeForm = false;
+        /**
+         * Controls the shape of the `valueChanged` payload (see that event's docs):
+         * - `'option'` (default): emit the matched option **object** from the source
+         *   list (legacy behavior). Convenient when the consumer wants the full option
+         *   (label, metadata) on change.
+         * - `'value'`: emit the scalar resolved via `optionValue` (a `string`, or
+         *   `string[]` in `multiple` mode). This is what form bindings want — the
+         *   stored value is the option's id, not the object. Set this when wiring the
+         *   autocomplete into a form (Final Form / react-hook-form / `udp-field`).
+         *   Feed the emitted scalar(s) back into `value`; label resolution still works
+         *   because every internal read goes through `optionValue`. With `freeForm`,
+         *   an unmatched typed entry emits its raw string in either mode.
+         *
+         * @remarks Default is `'option'` to preserve existing behavior. A future
+         * major version is expected to flip the default to `'value'`, since emitting
+         * the scalar matches the convention of most component libraries (MUI, Ant
+         * Design, Vuetify, Element) and avoids the "[object Object]" / stale-option
+         * class of bug in form contexts.
+         */
+        this.valueAs = 'option';
         // --- State ---
         this.internalLoading = false;
         this.filterText = '';
@@ -212,7 +232,7 @@ export class UdpAutocomplete {
                                 ? currentVal.filter(i => this.getOptionValue(i) !== itemVal)
                                 : // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                                     [...currentVal, item];
-                            this.valueChanged.emit(newValue);
+                            this.valueChanged.emit(newValue.map(v => this.toEmitValue(v)));
                         }
                     }
                     else {
@@ -268,7 +288,7 @@ export class UdpAutocomplete {
                 return;
             const itemVal = this.getOptionValue(item);
             const newValue = this.value.filter(i => this.getOptionValue(i) !== itemVal);
-            this.valueChanged.emit(newValue);
+            this.valueChanged.emit(newValue.map(v => this.toEmitValue(v)));
         };
         this.handleChange = (ev) => {
             var _a;
@@ -296,7 +316,7 @@ export class UdpAutocomplete {
                 const originalOption = this.findOptionByValue(selectedValue);
                 const emitValue = originalOption !== undefined ? originalOption : selectedValue;
                 this.selectionForOverlay = emitValue;
-                this.valueChanged.emit(emitValue);
+                this.valueChanged.emit(this.toEmitValue(emitValue));
                 // Fluent sets input.value to the option's textContent (badge text included).
                 // Overwrite with the resolved label so uncontrolled usage stays clean.
                 if (originalOption && this.dropdownRef.control) {
@@ -324,7 +344,7 @@ export class UdpAutocomplete {
                     return !displayValues.has(itemValue) && !visibleSelectedIds.has(itemValue);
                 })
                 : [];
-            this.valueChanged.emit([...hiddenSelections, ...visibleSelectedValues]);
+            this.valueChanged.emit([...hiddenSelections, ...visibleSelectedValues].map(v => this.toEmitValue(v)));
             // Fluent's selectOption overwrites control.value with displayValue — restore filter text.
             if (this.filterText && this.dropdownRef.control) {
                 requestAnimationFrame(() => {
@@ -455,6 +475,17 @@ export class UdpAutocomplete {
         const searchArray = this.datasource || this.searchFunction ? this.fetchedOptions : this.options;
         return searchArray.find(opt => this.getOptionValue(opt) === value);
     }
+    /**
+     * Maps a single internal selection entry (option object or primitive) to the
+     * shape `valueChanged` should emit, per `valueAs`. In `'value'` mode this
+     * resolves the scalar via `optionValue`; in `'option'` mode it passes the
+     * entry through unchanged. Callers map this over the array in multi-select.
+     * Internal `value` round-tripping keeps working in either mode because every
+     * read goes through `getOptionValue` (primitives resolve to themselves).
+     */
+    toEmitValue(selection) {
+        return this.valueAs === 'value' ? this.getOptionValue(selection) : selection;
+    }
     getDisplayOptions() {
         if (this.datasource || this.searchFunction) {
             return this.fetchedOptions;
@@ -557,20 +588,27 @@ export class UdpAutocomplete {
             ? this.resolveProp(overlayOption, this.optionLabel, true)
             : null;
         const overlayBadges = overlayOption ? this.getOptionBadges(overlayOption) : [];
-        return (h(Host, { key: 'c9b2c93ba3b25184923590f9d24fc7e4810d48b5', class: { 'has-error': hasError } }, h("fluent-field", { key: 'd56d34fe6ce07399582f4ea97387628bd86422c6', class: {
+        return (h(Host, { key: '89b86c15abd8134b91fc35a7353aee0f2e74a7d5', class: { 'has-error': hasError } }, h("fluent-field", { key: '5f5094ebeaacb6731f9fcfd1567b047d6119e5c3', class: {
                 'no-label': !this.label && !this.multiple,
                 'no-message': !message && !this.includeErrorPadding,
-            } }, h("div", { key: '8efbd0cab91921b0d53aacbf287bce45c3ac73f5', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (h("fluent-label", { key: '8d601f926907f2fa650bb511c857abb113458c87', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a3c0b095653147f7705e0c6abda375e789e2170d', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'b0884de4d2912f2a61467013514000e19315f9fb', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (h("div", { key: '00662b7ca5c43501fa80c5b003c98f3c445085f1', class: {
+            } }, h("div", { key: 'bd965e08439f6189afe88746a9ec3dff662dc52d', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (h("fluent-label", { key: '113b4736d2454475400846aeda6978d823fa05c0', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: '80777babf581444f7c8c38bf20873c95db15fc97', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'ff00357dea7aba684a6237c0db60a8856328325c', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (h("div", { key: '5d5ae469fbc8ef62c6646d176306f267036e6812', class: {
                 'selected-items': true,
                 'has-items': selectedItems.length > 0,
-            } }, selectedItems.map(item => (h("udp-fluent-badge", { color: "brand", shape: "circular", dismissible: !this.disabled, onDismiss: () => this.handleChipDelete(item) }, this.resolveProp(item, this.optionLabel, true))))))), h("div", { key: '5e6e1676eaf11e5f973f4ca642a15dc09c21b5ad', slot: "input", class: {
+            } }, selectedItems.map(item => {
+            var _a;
+            // Resolve to the source option so chips show the label even
+            // when `value` holds scalars (valueAs="value"). In 'option'
+            // mode `item` is already the object, so this is a no-op.
+            const opt = (_a = this.findOptionByValue(this.getOptionValue(item))) !== null && _a !== void 0 ? _a : item;
+            return (h("udp-fluent-badge", { color: "brand", shape: "circular", dismissible: !this.disabled, onDismiss: () => this.handleChipDelete(item) }, this.resolveProp(opt, this.optionLabel, true)));
+        })))), h("div", { key: '1060be0738eeecfe900006dc1ecf0f99ea9c02d8', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': !!overlayOption,
-            } }, h("fluent-dropdown", { key: '28eaa5cc744f8e2b7b8494e5f77e7ec74e52b1cc', type: "combobox", name: this.name, appearance: mappedAppearance, size: this.controlSize, disabled: this.disabled, required: this.required, placeholder: this.placeholder, multiple: this.multiple,
+            } }, h("fluent-dropdown", { key: '5cd147fda5cf701f9f420aa413954e4bde3481e4', type: "combobox", name: this.name, appearance: mappedAppearance, size: this.controlSize, disabled: this.disabled, required: this.required, placeholder: this.placeholder, multiple: this.multiple,
             // Events
             onInput: this.handleInput, onChange: this.handleChange, onFocusout: this.handleBlur, onFocusin: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault(), exportparts: "control, listbox", ref: el => (this.dropdownRef = el) }, h("fluent-listbox", { key: '5c548e12e8c5e71ef6ec80c86744626159225d66' }, (this.loading || this.internalLoading) && (h("fluent-option", { key: '5b3c776f18a0a98e5e56b64590264fd146b8e2f2', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: 'cfc3d0993f2f07243404bcafc123ff4729919347' }, "Loading..."), h("span", { key: 'ef8c4cb3c4b1991749664d5613e94cab04c362ca', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (h("fluent-option", { key: 'c8c6a313a7f508263bdfeef6df92d3156586826e', disabled: true, value: "empty", ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, "No options available")), !this.loading &&
+            onInvalid: (e) => e.preventDefault(), exportparts: "control, listbox", ref: el => (this.dropdownRef = el) }, h("fluent-listbox", { key: '1712ef4796ed9118725f9749ecbb4f056a2c3828' }, (this.loading || this.internalLoading) && (h("fluent-option", { key: 'd05adea606a5ab51263c523071e0a500b84a26a3', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: '93f78e1d2018e9ecd68424283a6b606f7d5fcafd' }, "Loading..."), h("span", { key: '65c89d6f7e04f382487d2d38b970f510e1d9bc65', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (h("fluent-option", { key: '691c2087c550379c915d6009a649e16aaf831b7a', disabled: true, value: "empty", ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, "No options available")), !this.loading &&
             !this.internalLoading &&
             (displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.length) > 0 &&
             (() => {
@@ -601,7 +639,7 @@ export class UdpAutocomplete {
                         } }, optIcon && this.iconPosition === 'start' && (h("span", { slot: "start", class: "option-icon-slot" }, h("udp-fluent-icon", { name: optIcon, size: "sm" }))), optLabel, optIcon && this.iconPosition === 'end' && (h("span", { class: "option-icon-end", style: { pointerEvents: 'none', marginLeft: '4px' } }, h("udp-fluent-icon", { name: optIcon, size: "sm" }))), this.renderBadges(optBadges)));
                 });
                 return nodes;
-            })(), this.freeForm && (h("fluent-option", { key: 'b0c22312ce12546d9cacb142ad5ef297494fa593', freeform: true }, h("output", { key: 'afb20d072f2449d0926aab9118e187cd14ec8e4b' })))), h("div", { key: '373053510bd09d31cd16125673a9e5c742ea8ff7', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '84f2f81128fb8c6ea30d65a641797a0c3f7322ba', class: {
+            })(), this.freeForm && (h("fluent-option", { key: '0d8d62ae5341831f3d305ea7cb91c8286dfa0ca0', freeform: true }, h("output", { key: 'bba3b3fb94850b416a1ea4aafdd6eb75b60f9fbc' })))), h("div", { key: '58331076d6c4db30d1cd0d7e22819bda247f6de9', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '9347ee56ea89f8e1c9be5fcb6a13a5aa3bc6a3f2', class: {
                 'clear-button': true,
                 'is-visible': !this.disabled &&
                     (this.filterText !== '' ||
@@ -609,10 +647,10 @@ export class UdpAutocomplete {
                         (this.multiple &&
                             Array.isArray(this.value) &&
                             this.value.length > 0)),
-            }, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), h("udp-fluent-icon", { key: '6037bc6e2205cd70d6e7401cc627e165ad4be3ab', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (h("div", { key: 'afd3a07d75a72184fd4016f81094e87535e7ea2d', class: "selected-overlay", "aria-hidden": "true" }, h("span", { key: '723ce95ef8734d8e1c41f9436839fc5ee2931ef8', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), h("div", { key: 'c9ec62d1ebbd78e1cc85f5fb6d94539f760a045d', class: {
+            }, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), h("udp-fluent-icon", { key: '662df827d72ee3fd5b879db45c2115779f69a895', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (h("div", { key: '04885cd3a7ca59c5efa9c3caf307d957deb96877', class: "selected-overlay", "aria-hidden": "true" }, h("span", { key: '1ba24d42ac8dfe6a1a8f6390d4a68bf5288558ac', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), h("div", { key: 'd956cc5bb911be2b84fcc8baaadc03f50cba20f1', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '4ae19c3b007177911df8c5c095aa207f091ac90b', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '9d10de86797308fd9b9b7598a9f9aa3523b7ad17', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -1135,6 +1173,29 @@ export class UdpAutocomplete {
                 "reflect": false,
                 "attribute": "free-form",
                 "defaultValue": "false"
+            },
+            "valueAs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'option' | 'value'",
+                    "resolved": "\"option\" | \"value\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "remarks",
+                            "text": "Default is `'option'` to preserve existing behavior. A future\nmajor version is expected to flip the default to `'value'`, since emitting\nthe scalar matches the convention of most component libraries (MUI, Ant\nDesign, Vuetify, Element) and avoids the \"[object Object]\" / stale-option\nclass of bug in form contexts."
+                        }],
+                    "text": "Controls the shape of the `valueChanged` payload (see that event's docs):\n- `'option'` (default): emit the matched option **object** from the source\n  list (legacy behavior). Convenient when the consumer wants the full option\n  (label, metadata) on change.\n- `'value'`: emit the scalar resolved via `optionValue` (a `string`, or\n  `string[]` in `multiple` mode). This is what form bindings want \u2014 the\n  stored value is the option's id, not the object. Set this when wiring the\n  autocomplete into a form (Final Form / react-hook-form / `udp-field`).\n  Feed the emitted scalar(s) back into `value`; label resolution still works\n  because every internal read goes through `optionValue`. With `freeForm`,\n  an unmatched typed entry emits its raw string in either mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-as",
+                "defaultValue": "'option'"
             }
         };
     }
@@ -1155,7 +1216,7 @@ export class UdpAutocomplete {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the selection changes (option chosen, chip removed, or clear).\nThe payload mirrors the items in `options`/fetched results:\n- Single-select: the matched option (the original object from the source list,\n  or the primitive value when options are primitives). With `freeForm`, an\n  unmatched typed entry emits the raw string. Emits `''` when cleared or the\n  input is backspaced empty.\n- Multi-select (`multiple`): an array of the matched options (objects or\n  primitives), including any currently-selected items hidden by the filter.\n  Emits `[]` when cleared."
+                    "text": "Fires when the selection changes (option chosen, chip removed, or clear).\nThe payload mirrors the items in `options`/fetched results:\nThe payload shape is governed by the `valueAs` prop:\n- `valueAs=\"option\"` (default): the matched option (the original object from\n  the source list, or the primitive value when options are primitives) in\n  single-select; an array of those in `multiple` mode (including any\n  currently-selected items hidden by the filter).\n- `valueAs=\"value\"`: the scalar value resolved via `optionValue` \u2014 a `string`\n  in single-select, `string[]` in `multiple` mode.\nWith `freeForm`, an unmatched typed entry emits its raw string in either\nmode. Clearing (or backspacing the input empty) emits `''` (single) or `[]`\n(multi)."
                 },
                 "complexType": {
                     "original": "any",

package/dist/collection/components/fluent-ui/avatar/udp-fluent-avatar.js

@@ -39,7 +39,7 @@ export class UdpFluentAvatar {
     }
     render() {
         const imgBorderRadius = this.getImageBorderRadius();
-        return (h(Host, { key: 'abf27d51c287160b6b0bdb173e74690b645396a1' }, h("fluent-avatar", { key: 'e49684fdb503718f033121e30be931093908653a', active: this.active, shape: this.shape, appearance: this.appearance, size: this.size, color: this.color, name: this.name, initials: this.initials }, this.src ? (h("img", { src: this.src, alt: this.alt, style: Object.assign({ objectFit: 'cover' }, (imgBorderRadius ? { borderRadius: imgBorderRadius } : {})) })) : this.iconName ? (h("udp-fluent-icon", { name: this.iconName, variant: this.iconVariant, size: this.getIconSize() })) : null, h("slot", { key: '41a132d8da795fb2ad30c4fdb8f88d4bd3d95745', name: "badge", slot: "badge" }))));
+        return (h(Host, { key: 'ea07d2bf001f6ece0690b2ea03cf70a57a29623d' }, h("fluent-avatar", { key: '068a2fc78714e7ae28c9598e84ab845c5cc8f18d', active: this.active, shape: this.shape, appearance: this.appearance, size: this.size, color: this.color, name: this.name, initials: this.initials }, this.src ? (h("img", { src: this.src, alt: this.alt, style: Object.assign({ objectFit: 'cover' }, (imgBorderRadius ? { borderRadius: imgBorderRadius } : {})) })) : this.iconName ? (h("udp-fluent-icon", { name: this.iconName, variant: this.iconVariant, size: this.getIconSize() })) : null, h("slot", { key: 'bb0408b42e6464c6f035afdfacf5e449d36d1500', name: "badge", slot: "badge" }))));
     }
     static get is() { return "udp-fluent-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/badge/udp-fluent-badge.js

@@ -35,7 +35,7 @@ export class UdpFluentBadge {
         this.ready = true;
     }
     render() {
-        return (h(Host, { key: 'a2e43f6c52bb7ddc56e6e9a181f86c132f86ab99', class: { ready: this.ready } }, h("fluent-badge", { key: 'a807d377792bfafd5415f8cf0320db603fdb91f7', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '4c30be18073fd6d65cf50d43c944a1c4f1932723', class: "slot-wrapper", slot: "start" }, h("slot", { key: '8073ea47ae01b98505d8b5c954b685227ba0de45', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: 'd41c4fdc7f4e64eb6b14fa4b530abe5e9449353f', name: this.startIconName, size: getBadgeIconSize(this.size) }))))), h("span", { key: '954b408cfb2c78598102516857eefdae5e5c2493', class: "default-slot" }, h("slot", { key: '6a1e3bf584d15eba16c781504599b4c70bf86525' })), this.dismissible ? (h("button", { type: "button", class: "dismiss-button", slot: "end", "aria-label": this.dismissLabel, onClick: this.handleDismiss, onMouseDown: (e) => e.preventDefault() }, h("udp-fluent-icon", { name: "dismiss", size: getBadgeIconSize(this.size) }))) : ((this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { class: "slot-wrapper", slot: "end" }, h("slot", { name: "end" }, this.endIconName && (h("udp-fluent-icon", { name: this.endIconName, size: getBadgeIconSize(this.size) })))))))));
+        return (h(Host, { key: 'f106363d80eaee1e89bed50a3526d1134b82346f', class: { ready: this.ready } }, h("fluent-badge", { key: 'f7e59d650b21359f37e9fee7327e28b5928f3864', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '7e100952cd282baa92c4982d58b66d700f16eebf', class: "slot-wrapper", slot: "start" }, h("slot", { key: '60ce857b7854957204e7eae34934493cda344f86', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '77a62d832aa73d390a289720e435fd282a089825', name: this.startIconName, size: getBadgeIconSize(this.size) }))))), h("span", { key: '64edd1b1c3f4ee318867c9a18ee22fb9b3b3f814', class: "default-slot" }, h("slot", { key: '8d24330a18c5284a1555f4911b31ce306e90b070' })), this.dismissible ? (h("button", { type: "button", class: "dismiss-button", slot: "end", "aria-label": this.dismissLabel, onClick: this.handleDismiss, onMouseDown: (e) => e.preventDefault() }, h("udp-fluent-icon", { name: "dismiss", size: getBadgeIconSize(this.size) }))) : ((this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { class: "slot-wrapper", slot: "end" }, h("slot", { name: "end" }, this.endIconName && (h("udp-fluent-icon", { name: this.endIconName, size: getBadgeIconSize(this.size) })))))))));
     }
     static get is() { return "udp-fluent-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/button/udp-fluent-button.js

@@ -86,7 +86,7 @@ export class UdpFluentButton {
         const iconSize = getIconSize(this.size);
         const isDisabled = this.disabled || this.loading;
         const isLoading = this.loading;
-        return (h(Host, { key: 'ff156dcc42911dd10beed56d4453b5531a8cda09' }, h("fluent-button", { key: '327b2b95d88ab219fd5c6eb4436dfb3655fc4265', appearance: this.appearance, disabled: isDisabled, "disabled-focusable": this.disabledFocusable, shape: this.shape, size: this.size, "icon-only": this.iconOnly, type: this.type, form: this.form, onClick: this.handleClick, tabindex: this.tabIndex, part: "button", exportparts: "content" }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: 'e9b301ffaee43f6596bfab4df72b2a99c6574d33', class: "slot-wrapper", slot: "start" }, h("slot", { key: '5586d08f5c95edbf83d70b99301b2047d78660c8', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '21dd9b8a0dc94555ed99d78c1fec99ce31d60180', name: this.startIconName, size: iconSize }))))), h("slot", { key: '3dd9c466af6219b42bc0af1d1560dfc59d15f409' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: '47d2390fa0590d85d27a9eec96e66d42bf29bf95', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'd45c415bc34566885f199ab3d5e9f773481ab455', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '9c7db08568e1dec792451a030d682890be22d51b', name: this.endIconName, size: iconSize }))))), isLoading && (h("div", { key: '295d81252b9dd07950c67e305b70db7535bbe416', class: "loading-overlay" }, h("udp-spinner", { key: '3c2738a3108256510336d4cbff5665602d847cd5', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
+        return (h(Host, { key: '90f25d959e28de4dbfe1c327c7be676281efdd9e' }, h("fluent-button", { key: 'a7f2c909ae7e4c62980dc368ff526715df9c1bb3', appearance: this.appearance, disabled: isDisabled, "disabled-focusable": this.disabledFocusable, shape: this.shape, size: this.size, "icon-only": this.iconOnly, type: this.type, form: this.form, onClick: this.handleClick, tabindex: this.tabIndex, part: "button", exportparts: "content" }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '8e27b98fa219865d093a20d1a7acd2edc63ac18d', class: "slot-wrapper", slot: "start" }, h("slot", { key: '1dfaf4c088cef572412b6a994966c6a119c3f638', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: 'f7fd479646258446d1073f8788f1325b96e00102', name: this.startIconName, size: iconSize }))))), h("slot", { key: '5cabc194a63ff1ee32702a18b74d030fe928688e' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'd54b3794e0e5ba112d36cfd488d1a2cbc33dd6ca', class: "slot-wrapper", slot: "end" }, h("slot", { key: '4967bb4f4517352fcd91c45df2709113153d39fb', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'b44ea8c06021c2fa9372d1e5f46e22426cc3535b', name: this.endIconName, size: iconSize }))))), isLoading && (h("div", { key: 'f01bd40fab37e673c1ddef97f946ed359cd761ae', class: "loading-overlay" }, h("udp-spinner", { key: '5b7da1b3503cb520ec2703f4c3e0235753a1b780', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
     }
     static get is() { return "udp-fluent-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/card/udp-fluent-card.js

@@ -58,21 +58,21 @@ export class UdpFluentCard {
         }
     }
     render() {
-        return (h(Host, { key: '2292c5312a295009149ca5c2456a8072e034dee1', class: {
+        return (h(Host, { key: 'f4673f365aaa3754f7a5ab3625e09ed37b3c3b83', class: {
                 [`appearance-${this.appearance}`]: true,
                 [`orientation-${this.orientation}`]: true,
                 interactive: this.interactive,
             }, style: {
                 width: this.width,
                 height: this.height,
-            }, tabIndex: this.interactive ? 0 : undefined }, h("div", { key: '46d981214fc354463640eb7c7cd867f7d9094e38', class: { 'card-preview': true, 'hidden': !this.hasPreview } }, h("slot", { key: '247f215de49aee8d64f7b247018136ed503dccf3', name: "preview", onSlotchange: this.handleSlotChange })), h("div", { key: '2318b59b7c7ba5a0ab5b56b3b28a2363417b8dfa', class: {
+            }, tabIndex: this.interactive ? 0 : undefined }, h("div", { key: '6ada15fb6e6db1f5a3bf1fcf9732b4f165353f5c', class: { 'card-preview': true, 'hidden': !this.hasPreview } }, h("slot", { key: '5bc565785eae0fa6d51aadaf4dd9a5d09c25b95e', name: "preview", onSlotchange: this.handleSlotChange })), h("div", { key: '06a886a5c8a5724d01b849cce30e8a43343e9a5a', class: {
                 'card-header': true,
                 'hidden': !(this.hasHeader ||
                     this.hasHeaderStart ||
                     this.label ||
                     this.subtitle ||
                     this.hasHeaderAction),
-            } }, h("div", { key: '3304dc7d50a07824f7891750dadc3b946bea8cf8', class: { 'card-header-start': true, 'hidden': !this.hasHeaderStart } }, h("slot", { key: '59d5d0213b53a53d7800f675e8938e4fd6248a8c', name: "header-start", onSlotchange: this.handleSlotChange })), h("div", { key: '817ea88676180044450ae2afff9e815d9fe2768f', class: "card-header-content" }, h("slot", { key: '7ecdf69858a5ae90df06ea151ce39db938e77569', name: "header", onSlotchange: this.handleSlotChange }, (this.label || this.subtitle) && (h("div", { key: '4d11a4bd3ed1e2626c1923af90364b2695fd371a', class: "header-content-wrapper" }, this.label && h("udp-text", { key: '29c105697fe26453d0ea227dbdd997fc6cacedcf', variant: "subtitle2" }, this.label), this.subtitle && (h("udp-text", { key: '4b447fe116f9d0ef33e26ac48275610ba2a676bd', variant: "caption1", class: "header-subtitle" }, this.subtitle)))))), h("udp-flexbox", { key: '0814680f2a74808ee6c5e59c022867233426e825', class: { hidden: !this.hasHeaderAction }, direction: "row" }, h("slot", { key: 'ac190251b00e26f2e50649cd4cfd3f7b69add6f2', name: "header-action", onSlotchange: this.handleSlotChange }))), h("div", { key: '6169e8d4a2018a7efbe6e6529c4e5617392869a4', class: { 'card-body': true, 'no-padding': !this.bodyPadding } }, h("slot", { key: '11916ce68bed14ec248639ac93770d3e8fa3d6d2' })), h("udp-flexbox", { key: 'f0adf0c0ae4e44c59d054032274721ace08a7232', class: { 'card-footer': true, 'hidden': !this.hasFooter }, direction: "row" }, h("slot", { key: 'ada8eb323b528fb05caf1834275bdddabece88c9', name: "footer", onSlotchange: this.handleSlotChange }))));
+            } }, h("div", { key: '137791edcc47f51450bbe773d208a4d7faf9879f', class: { 'card-header-start': true, 'hidden': !this.hasHeaderStart } }, h("slot", { key: '7bf3fafc41b70124bb66032c072063b184b35791', name: "header-start", onSlotchange: this.handleSlotChange })), h("div", { key: '7e1853490e0d80fa9f1f9b956b61242dd302e0e4', class: "card-header-content" }, h("slot", { key: '3caefe16048c6eb164dfa7781b25317863588c73', name: "header", onSlotchange: this.handleSlotChange }, (this.label || this.subtitle) && (h("div", { key: 'f30637632f9f6ac6e3d2098095a6327b88ed4610', class: "header-content-wrapper" }, this.label && h("udp-text", { key: 'fe9d5ba8574c1e6cc863145292ed356b58832fa3', variant: "subtitle2" }, this.label), this.subtitle && (h("udp-text", { key: '2540c4bd163231c5b14f416bf1e40ab058b31fe8', variant: "caption1", class: "header-subtitle" }, this.subtitle)))))), h("udp-flexbox", { key: 'a68c0340da8d1d8df5d59f1bfbe5fa6deb0de8c6', class: { hidden: !this.hasHeaderAction }, direction: "row" }, h("slot", { key: '48515b7125c4c0bd7f1fbfa5af0e63dfa868ce06', name: "header-action", onSlotchange: this.handleSlotChange }))), h("div", { key: '3ce3091c57d5514d4291b3a574d254678fe66605', class: { 'card-body': true, 'no-padding': !this.bodyPadding } }, h("slot", { key: '55ed56e28753ec208356f90646ad91b808815bda' })), h("udp-flexbox", { key: '31a4a538ac81822e34539834e51257de6a7592d3', class: { 'card-footer': true, 'hidden': !this.hasFooter }, direction: "row" }, h("slot", { key: '58203616e83c77ca159aa871175e54f03fa19ef5', name: "footer", onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "udp-fluent-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/checkbox/udp-fluent-checkbox.js

@@ -59,7 +59,7 @@ export class UdpFluentCheckbox {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'f19bd3b1948a8ab4c8fc87a111d285477cadf4ed' }, h("fluent-field", { key: '3a0eb5e458773f305cbecdbd094bf770d229de99', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '311f30e2fb4b3b27d7a2f0999cc43b132bd743df', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: 'c737cd8eaaa4f128f9a33ffe306f7edae5691d3a', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '6b33e231331977265a92dae76140b09dd158a500', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-checkbox", { key: '95d02cc6ae7c2b0865ba51f57290b5f7bfb15721', ref: (el) => (this.internalCheckbox = el), slot: "input", name: this.name, checked: this.checked, indeterminate: this.indeterminate, disabled: this.disabled, shape: this.shape, size: this.controlSize, autofocus: this.autofocus, onChange: this.handleChange }), h("udp-text", { key: '241bdd41dfcb6dd236c098afde18b3236d895f1c', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '555c6212a5afb2d42e070801f4e59f22edd2777c' }, h("fluent-field", { key: 'ff43d164636d41b2802c4a4b0df306f9ef04e105', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'ef7f13da0b46f7e492de09101a1366a1b86a29be', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '971fbb4c6fe5ea4954440c8550d7104455291da5', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '84dc5caf9af0db0bc7de5cba520fd8d67a9023a7', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-checkbox", { key: '69fe6dfaf9df48aa71cc5573c46d12a5c413b03a', ref: (el) => (this.internalCheckbox = el), slot: "input", name: this.name, checked: this.checked, indeterminate: this.indeterminate, disabled: this.disabled, shape: this.shape, size: this.controlSize, autofocus: this.autofocus, onChange: this.handleChange }), h("udp-text", { key: '58bab00d4eccf1b3b801090a4f64821811544f97', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/compound-button/udp-compound-button.js

@@ -46,7 +46,7 @@ export class UdpCompoundButton {
         const showEnd = hasSlotContent(this.el, 'end') || !!this.endIconName;
         const showDescription = hasSlotContent(this.el, 'description') || !!this.description;
         const iconSize = getIconSize(this.size, 'prominent');
-        return (h(Host, { key: 'b594d9f3eab4b2b44200b5f1d72e3f1a360b87b6' }, h("fluent-compound-button", { key: '8c68f91a6c118954581516adfd19a57b806b6dd0', appearance: this.appearance, disabled: this.disabled || this.loading, "disabled-focusable": this.disabledFocusable, shape: this.shape, size: this.size, "icon-only": this.iconOnly }, showStart && (h("span", { key: '85120dd6f0431a2b7ec6c9032f8fea3edadbb627', class: "slot-wrapper", slot: "start" }, h("slot", { key: '0246914d42ea6f41474ec11da129456844f0b5cc', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '6666e859db77801342cbffbc65ca062697eb107f', name: this.startIconName, size: iconSize }))))), showDescription && (h("span", { key: '7717ccda2b968f3e018053e6f66f99f7d4df7e55', slot: "description", class: "description-wrapper" }, h("slot", { key: '848a439cfbc29de48f18f8f877d37af32559db8e', name: "description" }, this.description))), h("slot", { key: '987d56d141c06bbd74d271cd79b3f2510baddf56' }), showEnd && (h("span", { key: '2c7bc8516f60957ed6196fd0d46c1da29fbc08e2', class: "slot-wrapper", slot: "end" }, h("slot", { key: '3c1636aedb96772b812002165e99f33dd6b5d250', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'b8c48cf019f09213c777fe4d41e46851a821c6aa', name: this.endIconName, size: iconSize }))))), this.loading && (h("div", { key: '534d50359f8a236b0516b8dbf1b60333b5b4f8e3', class: "loading-overlay" }, h("udp-spinner", { key: 'f78162794258c30af3b48b39b2677625255cc11b', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
+        return (h(Host, { key: '31ace477600d0a0601300fb7554e981fab5efcf6' }, h("fluent-compound-button", { key: 'fb687d99efd21363b556885d550919180ba11b12', appearance: this.appearance, disabled: this.disabled || this.loading, "disabled-focusable": this.disabledFocusable, shape: this.shape, size: this.size, "icon-only": this.iconOnly }, showStart && (h("span", { key: 'd532d28690aeee18aad88f4f312446bff96c9272', class: "slot-wrapper", slot: "start" }, h("slot", { key: '1bd2f13fe4ca7022cc4daf8b0215791625e247c2', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '8388e8a9aae16e13c36d64f0dbb33173d3ea9eb3', name: this.startIconName, size: iconSize }))))), showDescription && (h("span", { key: '31bff98cdff564bcaba3faa671c4bf3b77faa6d3', slot: "description", class: "description-wrapper" }, h("slot", { key: '2cd0e10f2a90a0c6db42e65036eac5b67670a111', name: "description" }, this.description))), h("slot", { key: '36fff7c9f6c2fe80fc6ef9d8bc218fc3185a84d5' }), showEnd && (h("span", { key: 'b2d6cbc7046cd07dd1b2792b86bcf39a144653d4', class: "slot-wrapper", slot: "end" }, h("slot", { key: '2a2d87aae3b9e3e4115826ea904fe9681973317d', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'c99a2eb4d57224301854c3de76064e72391fd7cb', name: this.endIconName, size: iconSize }))))), this.loading && (h("div", { key: '4f01d73f6510fe1b7317a4be289a7e8c93f3ca67', class: "loading-overlay" }, h("udp-spinner", { key: '0c4ad255d65515f6ea375715f5de6dec8fd156fb', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
     }
     static get is() { return "udp-compound-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/counter-badge/udp-fluent-counter-badge.js

@@ -12,7 +12,7 @@ export class UdpFluentCounterBadge {
         this.dot = false;
     }
     render() {
-        return (h(Host, { key: 'd0ce058042387bbb8a93056b736bab466418d6c8' }, h("fluent-counter-badge", { key: '64895692b2100bd7e4f567f0c3b2243a3eea5d2b', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size, count: this.count, "overflow-count": this.overflowCount, "show-zero": this.showZero, dot: this.dot }, h("slot", { key: 'ebd0067c29bc37ffbaff18d39c68bbab24614a14', name: "start", slot: "start" }), this.count === undefined && h("slot", { key: '17ac73d4d9123cd52c0f9d9cd2dae56228d4e569' }), h("slot", { key: 'f541c02e1d6f85736ead9b213308b104adb5d6cb', name: "end", slot: "end" }))));
+        return (h(Host, { key: '6d59bd6cf1513c226d55ac32218fcc1d5e775d2a' }, h("fluent-counter-badge", { key: '66540dc45927980a937002819c592fd01332875c', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size, count: this.count, "overflow-count": this.overflowCount, "show-zero": this.showZero, dot: this.dot }, h("slot", { key: '7fbe6bd20471101e3b3897f3389901972aec71f0', name: "start", slot: "start" }), this.count === undefined && h("slot", { key: '3df44bd9fee4d2ba2537b47f5092facc8827be0d' }), h("slot", { key: 'f1818aedfa302119d6c1d223e00ce8b071910053', name: "end", slot: "end" }))));
     }
     static get is() { return "udp-fluent-counter-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/date-input/udp-date-input.js

@@ -46,7 +46,11 @@ export class UdpDateInput {
          * - 'MM/DD/YYYY' - US format
          * - 'DD/MM/YYYY' - UK/Europe/Canada format
          * - 'YYYY/MM/DD' - ISO/China/Japan format
-         * Defaults to browser locale detection if not specified.
+         *
+         * @deprecated Use `dateFormat` instead. `format` collides with the reserved
+         * `format` prop of form libraries (e.g. react-final-form's `<Field>`), which
+         * treats it as a value-formatter function. Retained as an alias; `dateFormat`
+         * takes precedence when both are set.
          */
         this.format = 'MM/DD/YYYY';
         /**
@@ -184,6 +188,11 @@ export class UdpDateInput {
             this.isPopoverOpen = !this.isPopoverOpen;
         };
     }
+    /** Resolved display format. `dateFormat` wins over the deprecated `format`. */
+    get resolvedFormat() {
+        var _a;
+        return (_a = this.dateFormat) !== null && _a !== void 0 ? _a : this.format;
+    }
     onValueChange(newValue) {
         // Sync external prop to internal state, normalizing through parseDateInput
         if (newValue !== this.internalValue) {
@@ -191,6 +200,13 @@ export class UdpDateInput {
             this.displayValue = this.formatDateForDisplay(this.internalValue);
         }
     }
+    onFormatChange() {
+        // The display string is derived from the format. Props are applied
+        // asynchronously (e.g. via the React wrapper), so the format can land after
+        // the value has already been formatted. Re-derive the display from the
+        // canonical internal value whenever the format changes.
+        this.displayValue = this.formatDateForDisplay(this.internalValue);
+    }
     componentWillLoad() {
         // Initialize internal state from value prop, normalizing through parseDateInput
         if (this.value) {
@@ -231,7 +247,7 @@ export class UdpDateInput {
         if (!match)
             return isoDate; // Return as-is if not valid ISO format
         const [, year, month, day] = match;
-        switch (this.format) {
+        switch (this.resolvedFormat) {
             case 'MM/DD/YYYY':
                 return `${month}/${day}/${year}`;
             case 'DD/MM/YYYY':
@@ -355,12 +371,12 @@ export class UdpDateInput {
         // 4. Current year shorthand: exactly 4 digits (e.g., 0113)
         if (/^\d{4}$/.test(cleaned)) {
             let month, day;
-            if (this.format === 'YYYY/MM/DD') {
+            if (this.resolvedFormat === 'YYYY/MM/DD') {
                 // For ISO format, interpret as MMDD
                 month = parseInt(cleaned.substring(0, 2), 10);
                 day = parseInt(cleaned.substring(2, 4), 10);
             }
-            else if (this.format === 'DD/MM/YYYY') {
+            else if (this.resolvedFormat === 'DD/MM/YYYY') {
                 // Day first
                 day = parseInt(cleaned.substring(0, 2), 10);
                 month = parseInt(cleaned.substring(2, 4), 10);
@@ -379,13 +395,13 @@ export class UdpDateInput {
         if (separatorMatch) {
             const [, part1, part2, part3] = separatorMatch.map(Number);
             let year, month, day;
-            if (this.format === 'YYYY/MM/DD' || part1 > 31) {
+            if (this.resolvedFormat === 'YYYY/MM/DD' || part1 > 31) {
                 // Year first or first part is clearly a year
                 year = part1;
                 month = part2;
                 day = part3;
             }
-            else if (this.format === 'DD/MM/YYYY') {
+            else if (this.resolvedFormat === 'DD/MM/YYYY') {
                 day = part1;
                 month = part2;
                 year = part3;
@@ -414,7 +430,7 @@ export class UdpDateInput {
             const [, part1, part2] = twoPartMatch.map(Number);
             const year = today.getFullYear();
             let month, day;
-            if (this.format === 'DD/MM/YYYY' || this.format === 'YYYY/MM/DD') {
+            if (this.resolvedFormat === 'DD/MM/YYYY' || this.resolvedFormat === 'YYYY/MM/DD') {
                 // For DD/MM and YYYY/MM/DD, when only two parts, assume DD/MM
                 day = part1;
                 month = part2;
@@ -567,14 +583,14 @@ export class UdpDateInput {
     render() {
         const hasError = !!this.error || !!this.internalError;
         const message = this.internalError || this.error || this.hint;
-        return (h(Host, { key: 'ac71c838ad139db1925a16e5b88152f685577682', class: { 'has-error': hasError, 'disabled': this.disabled } }, h("fluent-field", { key: 'feefd9316ce2f601d2a7bc8c1e69ca665be98ac3', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: 'eedbdb5fc16759b9b8649f3c49da0fb01e51112b', slot: "input", open: this.isPopoverOpen, position: "bottom-start", toggleOnTriggerClick: false, onPopoverClose: () => {
+        return (h(Host, { key: '9a0b36661cc0bc79733f5e5166b0237c74b8055a', class: { 'has-error': hasError, 'disabled': this.disabled } }, h("fluent-field", { key: 'fb3070fa56b39354181e4e1df3125a22673e90e4', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: '671bbd0c71a947b916eb6b4d2c90f632344e6284', slot: "input", open: this.isPopoverOpen, position: "bottom-start", toggleOnTriggerClick: false, onPopoverClose: () => {
                 this.isPopoverOpen = false;
                 // Only return focus to input if Escape was pressed (not on click-away)
                 if (this.restoreFocusOnClose) {
                     this.restoreFocusOnClose = false;
                     requestAnimationFrame(() => this.focusInput());
                 }
-            }, trapFocus: false, closeOnBlur: false }, h("fluent-text-input", { key: 'dc575d36fd8139dacf8fc6edef3553295ab50696', slot: "trigger", ref: el => (this.inputRef = el), class: { 'no-label': !this.label }, name: this.name, value: this.displayValue, type: "text", required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onClick: this.handleInputClick, onInvalid: (e) => e.preventDefault() }, h("fluent-label", { key: '24fdc128498e713cb71d1b0647c707e70a17d40e', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: '2aa80b606bcba533d03cedaabb22472eaab7cece', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'd7b49e842930ed6ae31638e9475571b2a9b0b044', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: 'ce0830f9f1fe61b23f4f89363b95f97331c2f2cf', slot: "end" }, h("udp-fluent-icon-button", { key: 'e412d65925057b3a4f7ddf2876cdde9ecd799165', appearance: "transparent", iconName: "calendar", onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick, disabled: this.disabled || this.readonly, tabindex: -1 }))), h("div", { key: 'aed253ee74b5e0f9d116b43470cc453e05649858', slot: "content" }, h("udp-date-range-selector", { key: '245970b9bc37881030d37f1919f942d255b2bd35', ref: el => (this.calendarRef = el), monthsToDisplay: 1, value: this.internalValue, onChange: this.handleDateSelect, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, variant: this.dateSelectionType, size: "sm" }), h("div", { key: 'a6c1873893025688082cf07430179b9036e937eb', class: "footer-buttons" }, h("udp-fluent-button", { key: '3850b26b07974bfb8bdece541d33668817a499b5', appearance: "transparent", size: "small", onClick: this.handleToday }, "Today"), h("udp-fluent-button", { key: 'd981881855642d59afd0be88db9ac69c8465bb5e', appearance: "transparent", size: "small", onClick: this.handleClear }, "Clear")))), h("udp-text", { key: '0cbae8c3c2784d833bd0245799116a1e7917ee90', slot: "message", variant: "caption1", class: {
+            }, trapFocus: false, closeOnBlur: false }, h("fluent-text-input", { key: '2ed5e9fb7e708f42ad4ee35fd51e12fad200b76e', slot: "trigger", ref: el => (this.inputRef = el), class: { 'no-label': !this.label }, name: this.name, value: this.displayValue, type: "text", required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onClick: this.handleInputClick, onInvalid: (e) => e.preventDefault() }, h("fluent-label", { key: '1b52489eca9d175bb163af05831bc8237b6a3ebb', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: 'f09510db0e4ceb3a36d6d136627c3284df4aad97', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '0521edcfb7bfd0d4423977bf5fa84459e73a6a3c', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: '4847d6b093aec40d1997e0a901b30450d1c096de', slot: "end" }, h("udp-fluent-icon-button", { key: '0bad521605aa667ecbe4bc515c59c0a3356bc73a', appearance: "transparent", iconName: "calendar", onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick, disabled: this.disabled || this.readonly, tabindex: -1 }))), h("div", { key: 'd4d7bcf356f63a6e48e2e7a0e729fc1f828fee42', slot: "content" }, h("udp-date-range-selector", { key: '4eeaf2c5b00ba70e28f7a5ea0f9df78ce8141f62', ref: el => (this.calendarRef = el), monthsToDisplay: 1, value: this.internalValue, onChange: this.handleDateSelect, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, variant: this.dateSelectionType, size: "sm" }), h("div", { key: 'e4f15cc0f854b2d3a389202510bb18202a7f236f', class: "footer-buttons" }, h("udp-fluent-button", { key: '6c33fee28a778824bd25f9b6785226a21dee0f18', appearance: "transparent", size: "small", onClick: this.handleToday }, "Today"), h("udp-fluent-button", { key: '5a1076da7d313e7798d5a95ad38ce77171b9d207', appearance: "transparent", size: "small", onClick: this.handleClear }, "Clear")))), h("udp-text", { key: '2291ebb040091ef54a05999d91597967fc6bbbdb', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -886,8 +902,11 @@ export class UdpDateInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Date display format based on locale/region.\n- 'MM/DD/YYYY' - US format\n- 'DD/MM/YYYY' - UK/Europe/Canada format\n- 'YYYY/MM/DD' - ISO/China/Japan format\nDefaults to browser locale detection if not specified."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `dateFormat` instead. `format` collides with the reserved\n`format` prop of form libraries (e.g. react-final-form's `<Field>`), which\ntreats it as a value-formatter function. Retained as an alias; `dateFormat`\ntakes precedence when both are set."
+                        }],
+                    "text": "Date display format based on locale/region.\n- 'MM/DD/YYYY' - US format\n- 'DD/MM/YYYY' - UK/Europe/Canada format\n- 'YYYY/MM/DD' - ISO/China/Japan format"
                 },
                 "getter": false,
                 "setter": false,
@@ -895,6 +914,31 @@ export class UdpDateInput {
                 "attribute": "format",
                 "defaultValue": "'MM/DD/YYYY'"
             },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DateFormat",
+                    "resolved": "\"DD/MM/YYYY\" | \"MM/DD/YYYY\" | \"YYYY/MM/DD\"",
+                    "references": {
+                        "DateFormat": {
+                            "location": "local",
+                            "path": "/home/runner/work/udp-monorepo/udp-monorepo/packages/udp-stencil-component-library/src/components/fluent-ui/date-input/udp-date-input.tsx",
+                            "id": "src/components/fluent-ui/date-input/udp-date-input.tsx::DateFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date display format based on locale/region. Preferred over `format`.\n- 'MM/DD/YYYY' - US format\n- 'DD/MM/YYYY' - UK/Europe/Canada format\n- 'YYYY/MM/DD' - ISO/China/Japan format"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-format"
+            },
             "minDate": {
                 "type": "string",
                 "mutable": false,
@@ -1061,6 +1105,12 @@ export class UdpDateInput {
         return [{
                 "propName": "value",
                 "methodName": "onValueChange"
+            }, {
+                "propName": "format",
+                "methodName": "onFormatChange"
+            }, {
+                "propName": "dateFormat",
+                "methodName": "onFormatChange"
             }];
     }
 }