udp-stencil-component-library 26.3.0-beta.11 → 26.3.0-beta.12

package/dist/cjs/ag-grid-base_63.cjs.entry.js

@@ -3020,6 +3020,26 @@ const UdpAutocomplete = class {
          * @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 = '';
@@ -3143,7 +3163,7 @@ const UdpAutocomplete = class {
                                 ? 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 {
@@ -3199,7 +3219,7 @@ const UdpAutocomplete = class {
                 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;
@@ -3227,7 +3247,7 @@ const UdpAutocomplete = class {
                 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) {
@@ -3255,7 +3275,7 @@ const UdpAutocomplete = class {
                     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(() => {
@@ -3386,6 +3406,17 @@ const UdpAutocomplete = class {
         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;
@@ -3488,20 +3519,27 @@ const UdpAutocomplete = class {
             ? this.resolveProp(overlayOption, this.optionLabel, true)
             : null;
         const overlayBadges = overlayOption ? this.getOptionBadges(overlayOption) : [];
-        return (index.h(index.Host, { key: '7a22b88ed5af1695124498bbecf3916f4a755c37', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '5da97b2bd5d07296fc348b69f8dfeb967c9c2415', class: {
+        return (index.h(index.Host, { key: '89b86c15abd8134b91fc35a7353aee0f2e74a7d5', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '5f5094ebeaacb6731f9fcfd1567b047d6119e5c3', class: {
                 'no-label': !this.label && !this.multiple,
                 'no-message': !message && !this.includeErrorPadding,
-            } }, index.h("div", { key: '75af3a30be97a1360099334fd3d7016ae8665366', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (index.h("fluent-label", { key: '8364d30d016490241b339a7893a819be85d840c7', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '8046a9b22c55f88fb9489030752728c6853a7eba', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'bec46f48d4bdf284ffee8c609820409ed817fff4', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (index.h("div", { key: '8154ee373fde6618cf4269834f01fab56a370e86', class: {
+            } }, index.h("div", { key: 'bd965e08439f6189afe88746a9ec3dff662dc52d', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (index.h("fluent-label", { key: '113b4736d2454475400846aeda6978d823fa05c0', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '80777babf581444f7c8c38bf20873c95db15fc97', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'ff00357dea7aba684a6237c0db60a8856328325c', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (index.h("div", { key: '5d5ae469fbc8ef62c6646d176306f267036e6812', class: {
                 'selected-items': true,
                 'has-items': selectedItems.length > 0,
-            } }, selectedItems.map(item => (index.h("udp-fluent-badge", { color: "brand", shape: "circular", dismissible: !this.disabled, onDismiss: () => this.handleChipDelete(item) }, this.resolveProp(item, this.optionLabel, true))))))), index.h("div", { key: '41f7a2d014fe06d8b8e60c490e3062ffbca05db0', 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 (index.h("udp-fluent-badge", { color: "brand", shape: "circular", dismissible: !this.disabled, onDismiss: () => this.handleChipDelete(item) }, this.resolveProp(opt, this.optionLabel, true)));
+        })))), index.h("div", { key: '1060be0738eeecfe900006dc1ecf0f99ea9c02d8', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': !!overlayOption,
-            } }, index.h("fluent-dropdown", { key: '0ce12ae9cf2234586578928240c3288c0d5046f7', type: "combobox", name: this.name, appearance: mappedAppearance, size: this.controlSize, disabled: this.disabled, required: this.required, placeholder: this.placeholder, multiple: this.multiple,
+            } }, index.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) }, index.h("fluent-listbox", { key: '4d90d5eba9aad4010d4eed09ef0ad92ea259fae5' }, (this.loading || this.internalLoading) && (index.h("fluent-option", { key: '856951a11b15fb0046e5a39c5e1430ce5419a098', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: '46c90311617e70dda52ff5a51665501361ad83c2' }, "Loading..."), index.h("span", { key: '83d0a55f97af99117b1caf339db52c7b2203bb2f', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (index.h("fluent-option", { key: 'ff0c4352c530b58eb9ae799495e3d48fecd082f1', 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) }, index.h("fluent-listbox", { key: '1712ef4796ed9118725f9749ecbb4f056a2c3828' }, (this.loading || this.internalLoading) && (index.h("fluent-option", { key: 'd05adea606a5ab51263c523071e0a500b84a26a3', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: '93f78e1d2018e9ecd68424283a6b606f7d5fcafd' }, "Loading..."), index.h("span", { key: '65c89d6f7e04f382487d2d38b970f510e1d9bc65', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (index.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 &&
             (() => {
@@ -3532,7 +3570,7 @@ const UdpAutocomplete = class {
                         } }, optIcon && this.iconPosition === 'start' && (index.h("span", { slot: "start", class: "option-icon-slot" }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), optLabel, optIcon && this.iconPosition === 'end' && (index.h("span", { class: "option-icon-end", style: { pointerEvents: 'none', marginLeft: '4px' } }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), this.renderBadges(optBadges)));
                 });
                 return nodes;
-            })(), this.freeForm && (index.h("fluent-option", { key: 'ab0cc89c228fb19b16de2fc3f7336a213ba85d18', freeform: true }, index.h("output", { key: '108cd94ff2e8315274543b1fb8cf273534a8df97' })))), index.h("div", { key: '5b40b8e17ff3c14b02e48eab4a67cc521a798a57', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: '85846ee6d8e0b65e51b565b5fad027c0aebd8fec', class: {
+            })(), this.freeForm && (index.h("fluent-option", { key: '0d8d62ae5341831f3d305ea7cb91c8286dfa0ca0', freeform: true }, index.h("output", { key: 'bba3b3fb94850b416a1ea4aafdd6eb75b60f9fbc' })))), index.h("div", { key: '58331076d6c4db30d1cd0d7e22819bda247f6de9', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: '9347ee56ea89f8e1c9be5fcb6a13a5aa3bc6a3f2', class: {
                 'clear-button': true,
                 'is-visible': !this.disabled &&
                     (this.filterText !== '' ||
@@ -3540,10 +3578,10 @@ const UdpAutocomplete = class {
                         (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 }), index.h("udp-fluent-icon", { key: '6374418cd8d3a58d31d1e09bae8ffef9b26b854f', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (index.h("div", { key: 'a103edba26a752de8c6574c3815626a4f1967fb9', class: "selected-overlay", "aria-hidden": "true" }, index.h("span", { key: '5d40561e9dc3d0ff1e26d00ebeb4bfa90f9f214f', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), index.h("div", { key: '4a3a0a248413e0a9557ee35d893dbec509290421', class: {
+            }, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: '662df827d72ee3fd5b879db45c2115779f69a895', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (index.h("div", { key: '04885cd3a7ca59c5efa9c3caf307d957deb96877', class: "selected-overlay", "aria-hidden": "true" }, index.h("span", { key: '1ba24d42ac8dfe6a1a8f6390d4a68bf5288558ac', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), index.h("div", { key: 'd956cc5bb911be2b84fcc8baaadc03f50cba20f1', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '21935a8f93b678e920a46a03ae25ef62bdb8d9b2', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '9d10de86797308fd9b9b7598a9f9aa3523b7ad17', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -6309,6 +6347,23 @@ const UdpFluentDropdown = class {
          * Whether the dropdown shows a clear button when a value is selected.
          */
         this.clearable = false;
+        /**
+         * Controls the shape of the `valueChanged` payload (see that event's docs):
+         * - `'option'` (default): emit the matched option **object** from `options`
+         *   (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
+         *   dropdown into a form (Final Form / react-hook-form / `udp-field`).
+         *
+         * @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';
         this.showClearButton = false;
         /**
          * Tracks the current selection so the overlay works uncontrolled.
@@ -6383,7 +6438,7 @@ const UdpFluentDropdown = class {
                         }
                         this.selectionForOverlay = currentValues;
                         this.showClearButton = currentValues.length > 0;
-                        this.valueChanged.emit(currentValues);
+                        this.valueChanged.emit(currentValues.map(v => this.toEmitValue(v)));
                         ev.preventDefault();
                         ev.stopPropagation();
                     }
@@ -6438,7 +6493,7 @@ const UdpFluentDropdown = class {
                     const originalOption = this.findOptionByValue(option.value);
                     return originalOption !== undefined ? originalOption : option.value;
                 });
-                this.valueChanged.emit(values);
+                this.valueChanged.emit(values.map(v => this.toEmitValue(v)));
                 this.showClearButton = values.length > 0;
                 this.selectionForOverlay = values;
             }
@@ -6446,7 +6501,7 @@ const UdpFluentDropdown = class {
                 const val = this.dropdownRef.value;
                 const originalOption = this.findOptionByValue(val);
                 const emitValue = originalOption !== undefined ? originalOption : val;
-                this.valueChanged.emit(emitValue);
+                this.valueChanged.emit(this.toEmitValue(emitValue));
                 this.showClearButton = val != null;
                 this.selectionForOverlay = emitValue;
             }
@@ -6547,6 +6602,17 @@ const UdpFluentDropdown = class {
         var _a;
         return (_a = this.options) === null || _a === void 0 ? void 0 : _a.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 state (`selectionForOverlay`) keeps the option objects regardless,
+     * so the selected-value overlay renders the same in both modes.
+     */
+    toEmitValue(selection) {
+        return this.valueAs === 'value' ? this.getOptionValue(selection) : selection;
+    }
     getValuesAsArray() {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         if (Array.isArray(this.value))
@@ -6604,15 +6670,15 @@ const UdpFluentDropdown = class {
         const overlayOptions = this.getSelectedOverlayOptions();
         const hasOverlay = overlayOptions.length > 0;
         const mappedAppearance = this.appearance === 'underline' ? 'transparent' : this.appearance;
-        return (index.h(index.Host, { key: '88dd5dce56829cff0ec9829279449ab33458dd21', class: { 'has-error': hasError } }, index.h("fluent-field", { key: 'aa7e6d595c2acb911c4cf0a5ac3494ae54a4211e', class: {
+        return (index.h(index.Host, { key: '2739e491826ba8d094f3ecc454c888d4815f0bc9', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '49d9f2af0b1b490ba19cb8ffd76f9e81d80d40e4', class: {
                 'no-message': !message && !this.includeErrorPadding,
                 'no-label': !this.label,
-            } }, this.label && (index.h("fluent-label", { key: 'c3778f06a8596e8ac6f2a7e0562aa31cbb8bcedc', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '231486109e38b2686eb7d8f04fe4f257f54e6c73', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'ded6a62317ecadacaeae0aed981f5e2de329ced6', name: "info", size: "xs", class: "popup-hint-icon" }))))), index.h("div", { key: 'df9fcf91f0a5762f53023021f2b573e7f3766420', slot: "input", class: {
+            } }, this.label && (index.h("fluent-label", { key: 'db3f23065b207e958f1885a93f3f9c3607c32c18', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (index.h("udp-tooltip", { key: 'cd9957075c3688082d4b21046b77265bbe8e77b3', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '0198aed441b9c9a1776f0fa3d6d8c4c56b08fe37', name: "info", size: "xs", class: "popup-hint-icon" }))))), index.h("div", { key: 'c2ada338eda46b6c44d3c8bd03e370e08d79df1c', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': hasOverlay,
-            } }, index.h("fluent-dropdown", { key: '6e2b2f125feed8f6ba616dcf7a717bbec25bd319', type: "dropdown", name: this.name, appearance: mappedAppearance, size: this.controlSize, required: this.required, disabled: this.disabled, placeholder: this.placeholder, multiple: this.multiple, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onFocusout: () => this.inputBlur.emit(), onFocusin: () => this.inputFocus.emit(),
+            } }, index.h("fluent-dropdown", { key: 'edbb729b64ca2d23160a9b094ae3e15aee5fad49', type: "dropdown", name: this.name, appearance: mappedAppearance, size: this.controlSize, required: this.required, disabled: this.disabled, placeholder: this.placeholder, multiple: this.multiple, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onFocusout: () => this.inputBlur.emit(), onFocusin: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault(), ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '8bb3ece75e6c3d305625caa6090c815dc917f8d0' }, this.loading && (index.h("fluent-option", { key: 'fb540948af221fa8fc8c1eae79bdd2acf1d92d5a', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: 'd1f1bf2a6faa45d17b892788bc808287265b7279' }, "Loading..."), index.h("span", { key: '8496485ad3547d5435ed7379adba210150e0b86a', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (index.h("fluent-option", { key: '07638b3fb7aab35047b1fd53f0578c2e2d82c301', 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(), ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '648c741cf3f5676f0048e22afe355626cf8f0cb4' }, this.loading && (index.h("fluent-option", { key: '1dd8f2d7b137c0921bb6393489604fef65b88b63', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: '1cd40a943df80a3e4e32279939451f2a884fa611' }, "Loading..."), index.h("span", { key: 'b00ec9c25a83e8ca28c4a7c350750e07cc323d00', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (index.h("fluent-option", { key: '9e459a8416fe0e063196c47ddbca0b2c16859c9e', disabled: true, value: "empty", ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, "No options available")), !this.loading &&
             ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
             (() => {
                 const nodes = [];
@@ -6632,17 +6698,17 @@ const UdpFluentDropdown = class {
                     nodes.push(index.h("fluent-option", { key: index$1, disabled: !!optDisabled, value: safeValue, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', !!optDisabled) }, optIcon && this.iconPosition === 'start' && (index.h("span", { slot: "start", class: "option-icon-slot" }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), optLabel, optIcon && this.iconPosition === 'end' && (index.h("span", { class: "option-icon-end", style: { pointerEvents: 'none', marginLeft: '4px' } }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), this.renderBadges(optBadges)));
                 });
                 return nodes;
-            })()), index.h("div", { key: 'ef538939ef7766f249d3c085949ffd1550eb2638', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: 'ed99ba12781b37b555579a3490ab1cf0c292b051', class: {
+            })()), index.h("div", { key: '759461d74da6528e4b33be11cc4a3b80c8f80789', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: '7f43ab70441f994632c89fec4f42772a679fe423', class: {
                 'clear-button': true,
                 'is-visible': this.showClearButton && !this.disabled && this.clearable,
-            }, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: 'baefa8cc5b5c26480059631884557e87f5e402fc', name: "chevron-down", size: "sm", class: "chevron-down", onClick: (ev) => {
+            }, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: '59f53079ac480470026413b158154e5e3e4ca505', name: "chevron-down", size: "sm", class: "chevron-down", onClick: (ev) => {
                 // stopPropagation: fluent's clickHandler would re-open via its `!this.open → showPopover` branch.
                 ev.stopPropagation();
                 this.handleTogglePopover(false);
-            } }))), hasOverlay && (index.h("div", { key: 'db85503a8d98fc0cf9c000c9f62a40583f534173', class: { 'selected-overlay': true, 'multi': overlayOptions.length > 1 }, "aria-hidden": "true" }, overlayOptions.map((opt, i) => (index.h("span", { class: "selected-item", key: this.getOptionValue(opt) || i }, i > 0 && index.h("span", { class: "selected-separator" }, ", "), index.h("span", { class: "selected-label" }, this.resolveProp(opt, this.optionLabel, true)), this.renderBadges(this.getOptionBadges(opt)))))))), index.h("div", { key: '60390af60c28be076678d841609067f3ab7aaea4', class: {
+            } }))), hasOverlay && (index.h("div", { key: '9f2c12555d194f036e0a81618cb2ae77a595eac0', class: { 'selected-overlay': true, 'multi': overlayOptions.length > 1 }, "aria-hidden": "true" }, overlayOptions.map((opt, i) => (index.h("span", { class: "selected-item", key: this.getOptionValue(opt) || i }, i > 0 && index.h("span", { class: "selected-separator" }, ", "), index.h("span", { class: "selected-label" }, this.resolveProp(opt, this.optionLabel, true)), this.renderBadges(this.getOptionBadges(opt)))))))), index.h("div", { key: 'f336e3cc721c256dae4de0da6e05f87ca3455c43', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '6574bc6adfffeed48ec74125a7d5c1eff07c9e5e', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: 'bf2bc3358bee4302fc663d0a06edf61eb4a11f13', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -7253,7 +7319,7 @@ const UdpFluentSwitch = class {
 };
 UdpFluentSwitch.style = udpFluentSwitchCss();
 
-const udpFluentTablistCss = () => `.slot-wrapper{display:inline-flex;align-items:center}.tablist-scroll-wrapper{position:relative;display:flex;align-items:center;width:100%;overflow:hidden}.tablist-scroll-container{display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.tablist-scroll-container::-webkit-scrollbar{display:none}.tablist-inner{display:flex;flex:0 0 auto;padding:3px;border-radius:var(--borderRadiusLarge)}.tablist-scroll-container.collapse-mode{overflow-x:hidden}.scroll-shadow-start,.scroll-shadow-end{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:2;display:flex;align-items:center;justify-content:center}.scroll-shadow-start{left:0;background:linear-gradient(to right, var(--colorNeutralBackground1) 40%, transparent);justify-content:flex-start;padding-left:4px;z-index:5}.scroll-shadow-end{right:0;background:linear-gradient(to left, var(--colorNeutralBackground1) 40%, transparent);justify-content:flex-end;padding-right:4px;z-index:5}.scroll-shadow-start.is-visible,.scroll-shadow-end.is-visible{opacity:1}.scroll-button-container{pointer-events:auto;display:flex;align-items:center;justify-content:center}.is-overflow{display:none !important}.is-hidden{visibility:hidden;pointer-events:none}fluent-tab[aria-selected="true"]{z-index:3;}.overflow-menu-container{display:flex;align-items:center;border-radius:0 var(--borderRadiusLarge) var(--borderRadiusLarge) 0;padding-right:var(--spacingHorizontalM);margin-left:-4px}.overflow-menu-container udp-fluent-menu{anchor-name:--menu-anchor;margin-left:var(--spacingHorizontalM)}.overflow-menu-container udp-fluent-counter-badge{position:absolute;position-anchor:--menu-anchor;top:anchor(top);right:anchor(right);margin-top:-6px;margin-right:-6px}.contained-variant .tablist-inner{background-color:var(--colorNeutralBackground3)}.contained-variant fluent-tab[aria-selected="true"]{color:var(--colorNeutralForeground1)}.contained-variant fluent-tab:hover{background-color:var(--colorNeutralBackground2)}.contained-variant .overflow-menu-container{background-color:var(--colorNeutralBackground3)}`;
+const udpFluentTablistCss = () => `.slot-wrapper{display:inline-flex;align-items:center}.tablist-scroll-wrapper{position:relative;display:flex;align-items:center;width:100%;overflow:hidden}.tablist-scroll-container{display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.tablist-scroll-container::-webkit-scrollbar{display:none}.tablist-inner{display:flex;flex:0 0 auto;padding:3px;border-radius:var(--borderRadiusLarge)}.tablist-scroll-container.collapse-mode{overflow-x:hidden}.scroll-shadow-start,.scroll-shadow-end{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:2;display:flex;align-items:center;justify-content:center}.scroll-shadow-start{left:0;background:linear-gradient(to right, var(--colorNeutralBackground1) 40%, transparent);justify-content:flex-start;padding-left:4px;z-index:5}.scroll-shadow-end{right:0;background:linear-gradient(to left, var(--colorNeutralBackground1) 40%, transparent);justify-content:flex-end;padding-right:4px;z-index:5}.scroll-shadow-start.is-visible,.scroll-shadow-end.is-visible{opacity:1}.scroll-button-container{pointer-events:none;display:flex;align-items:center;justify-content:center}.scroll-shadow-start.is-visible .scroll-button-container,.scroll-shadow-end.is-visible .scroll-button-container{pointer-events:auto}.is-overflow{display:none !important}.is-hidden{visibility:hidden;pointer-events:none}fluent-tab[aria-selected="true"]{z-index:3;}.overflow-menu-container{display:flex;align-items:center;border-radius:0 var(--borderRadiusLarge) var(--borderRadiusLarge) 0;padding-right:var(--spacingHorizontalM);margin-left:-4px}.overflow-menu-container udp-fluent-menu{anchor-name:--menu-anchor;margin-left:var(--spacingHorizontalM)}.overflow-menu-container udp-fluent-counter-badge{position:absolute;position-anchor:--menu-anchor;top:anchor(top);right:anchor(right);margin-top:-6px;margin-right:-6px}.contained-variant .tablist-inner{background-color:transparent;border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);padding:0}.contained-variant fluent-tab{padding-top:5px;padding-bottom:5px}.contained-variant .tablist-inner[size='small'] fluent-tab{padding-top:1px;padding-bottom:1px}.contained-variant .tablist-inner[size='large'] fluent-tab{padding-top:8px;padding-bottom:8px}.contained-variant fluent-tab[aria-selected="true"]{color:var(--colorNeutralForeground1)}.contained-variant fluent-tab:hover{background-color:var(--colorSubtleBackgroundHover)}.contained-variant .overflow-menu-container{background-color:transparent}`;
 
 const UdpFluentTablist = class {
     constructor(hostRef) {