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

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

@@ -17,7 +17,14 @@ export class UdpDateTimeInput {
         this.controlSize = 'medium';
         /** When true, the date and time inputs stack vertically instead of sitting side-by-side. */
         this.stacked = false;
-        /** Date display format. */
+        /**
+         * Date display format.
+         *
+         * @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';
         /** Whether to reserve space for error/helper text to prevent layout shift. */
         this.includeErrorPadding = true;
@@ -83,10 +90,11 @@ export class UdpDateTimeInput {
         this.valueChanged.emit(newValue);
     }
     render() {
+        var _a;
         // If a main label is provided (for date) but no time label, default time label to a non-breaking space
         // to maintain vertical alignment (ensuring the time input isn't pushed up).
         const effectiveTimeLabel = this.timeLabel === undefined && this.label ? '\u00A0' : this.timeLabel;
-        return (h(Host, { key: '2f593ed0b4de495cab7ee284c13291e998a98281' }, h("div", { key: 'd15f5dfb61ffa25cca1aa12a1b7cf3179b9af516', class: "date-part" }, h("udp-date-input", { key: 'ce201e5f203e698041451fb5ca1ec05ea373fb33', name: `${this.name}-date`, value: this.datePart, required: this.required, disabled: this.disabled, autofocus: this.autofocus, appearance: this.appearance, controlSize: this.controlSize, format: this.format, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, error: this.error, includeErrorPadding: this.includeErrorPadding, onValueChanged: this.handleDateChange, label: this.label, popupHint: this.popupHint })), h("div", { key: '27bdca75aea7869283d63477a59b9218ef9bf5ba', class: "time-part" }, h("udp-time-input", { key: 'f15b29ec0c556777910830408ad96d8ca48e4acb', name: `${this.name}-time`, value: this.timePart, required: false, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, label: effectiveTimeLabel, minuteStep: this.minuteStep, use24Hour: this.use24Hour, onValueChanged: this.handleTimeChange, includeErrorPadding: this.includeErrorPadding, error: this.error ? ' ' : undefined }))));
+        return (h(Host, { key: 'c5f2626be05022bd5b05264a1c0f1a9fe8b81e9a' }, h("div", { key: '336f70d6084846e6a42f73cbb375e7f0a754804c', class: "date-part" }, h("udp-date-input", { key: 'a686ee90c7787b3698dcb2ea901db7789b3bc6f9', name: `${this.name}-date`, value: this.datePart, required: this.required, disabled: this.disabled, autofocus: this.autofocus, appearance: this.appearance, controlSize: this.controlSize, dateFormat: (_a = this.dateFormat) !== null && _a !== void 0 ? _a : this.format, minDate: this.minDate, maxDate: this.maxDate, isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, error: this.error, includeErrorPadding: this.includeErrorPadding, onValueChanged: this.handleDateChange, label: this.label, popupHint: this.popupHint })), h("div", { key: 'a7e909e6b4c4c8cb4393db2bfef4301210056d2e', class: "time-part" }, h("udp-time-input", { key: '27e64a895965012ae06c64e2335fe56aad87c8b1', name: `${this.name}-time`, value: this.timePart, required: false, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, label: effectiveTimeLabel, minuteStep: this.minuteStep, use24Hour: this.use24Hour, onValueChanged: this.handleTimeChange, includeErrorPadding: this.includeErrorPadding, error: this.error ? ' ' : undefined }))));
     }
     static get is() { return "udp-date-time-input"; }
     static get encapsulation() { return "shadow"; }
@@ -297,7 +305,10 @@ export class UdpDateTimeInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "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."
                 },
                 "getter": false,
@@ -306,6 +317,32 @@ export class UdpDateTimeInput {
                 "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": "import",
+                            "path": "../date-input/udp-date-input",
+                            "id": "src/components/fluent-ui/date-input/udp-date-input.tsx::DateFormat",
+                            "referenceLocation": "DateFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date display format. Preferred over `format`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-format"
+            },
             "minDate": {
                 "type": "string",
                 "mutable": false,

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

@@ -63,7 +63,7 @@ export class UdpFluentDialog {
         }
     }
     render() {
-        return (h(Host, { key: '6503e7a76b2bb3b75bac4068ad46f2ed3e92cc5c', style: { '--dialog-max-height': this.maxHeight } }, h("fluent-dialog", { key: '77608ee66ae9ceaeaf5f88a0d40651c649f618cf', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, h("fluent-dialog-body", { key: '097d33707d5e16d3a0363bf887cea69916a4f0c6' }, h("slot", { key: 'fce51a10ea0dc792f6838bab7ac27a1795e149cd', name: "header", slot: "title" }, this.dialogTitle && h("udp-fluent-text", { key: '299c39cdd65a86a8db26e30c3c170209e4eed7e5' }, this.dialogTitle)), this.showHeaderCloseButton && (h("udp-fluent-icon-button", { key: '2d9eca4397404d520bdee128a46d95d2eb040c35', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), h("div", { key: 'dda10b13a75ade0cb16c48a198728c481b2eccdf', class: "dialog-content" }, h("slot", { key: 'd1ef17c1d85c1f3092c40dead5a48de9e7c1cd86' })), h("udp-flexbox", { key: '94d97930eec3d8a72b919fc1fda775da771dd767', slot: "action", direction: "row" }, h("slot", { key: '23eb15c6243e5f28aafa3d7b83ded05b86b33798', name: "action" }))))));
+        return (h(Host, { key: 'bdc6a742e8edd7617221e3455cd4a34bb8c56765', style: { '--dialog-max-height': this.maxHeight } }, h("fluent-dialog", { key: '154d4652d77e56243775e49df95ba2949c387ed6', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, h("fluent-dialog-body", { key: 'c8fb1b45882f05b26929814f4b6857f6a2192254' }, h("slot", { key: '8d4a10893c21404f517d0568c12d0dfab6906322', name: "header", slot: "title" }, this.dialogTitle && h("udp-fluent-text", { key: '1d8c12414b78c0dc9598529e96f5cd1709a9c2d6' }, this.dialogTitle)), this.showHeaderCloseButton && (h("udp-fluent-icon-button", { key: 'f6601c314e32a74a89d603c9ea899c3ea58026d0', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), h("div", { key: 'c317d7af79b48a39308c9778f779e2cc698bc35d', class: "dialog-content" }, h("slot", { key: 'f7f688477f49c2a201ce91f6b8ce02384600d9cf' })), h("udp-flexbox", { key: '57f73d7491219fa5311ac0caaa074b52fa00988a', slot: "action", direction: "row" }, h("slot", { key: 'faad63095de48894e82c9d70c87d3d9730c78ba4', name: "action" }))))));
     }
     static get is() { return "udp-fluent-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class UdpFluentDivider {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '3ad3337f235573394f659a183a7fb0639931c7d4', style: { background: 'transparent' } }, h("fluent-divider", { key: '0d65508604ff3ead42bfd0f87388930ad4854fe3', "align-content": this.alignContent, appearance: this.appearance, inset: this.inset, role: this.role, orientation: this.orientation }, h("slot", { key: 'a993a8486ba0ec0dd0e72c95eab3adb46c09eff0' }))));
+        return (h(Host, { key: 'f85009a84bb481a0ba52fed82c3d26021be81b67', style: { background: 'transparent' } }, h("fluent-divider", { key: 'f237b3c0842bc7ed6ea19343e3dbee2a74b9a74d', "align-content": this.alignContent, appearance: this.appearance, inset: this.inset, role: this.role, orientation: this.orientation }, h("slot", { key: 'f08a91b63a1b88d059ecf6a03688675e8a61f841' }))));
     }
     static get is() { return "udp-fluent-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -340,7 +340,7 @@ export class UdpFluentDrawer {
         }
     }
     render() {
-        return (h(Host, { key: '8cadf705643dc434d09e681d287f355ebd7abfec', class: { 'has-footer': this.hasFooter } }, h("fluent-drawer", { key: '8b8941993ccc2b0f071b70cb63aad5d1be1ac9f7', ref: this.setDrawerRef, onToggle: this.handleToggle, type: "modal", position: this.position, size: this.effectiveSize }, h("fluent-drawer-body", { key: 'ff81cc6c0983789fcef21b951003b88fe9d5ae27' }, h("udp-text", { key: '00eedc037ab82ed21b938a7cfce5cc66c915d112', variant: "subtitle1", slot: "title" }, this.drawerTitle), h("udp-fluent-icon-button", { key: '012b31c2d5872f7d30793f34767538c992eadebb', slot: "close", appearance: "subtle", iconName: "dismiss", "aria-label": "close" }), this.hasToolbar && (h("udp-flexbox", { key: '9a93216871d7d3755653be6ae16ab09c288353ed', class: "drawer-toolbar", direction: "row", width: "100%" }, h("slot", { key: '748b2ebd652cfd81b378387ec1c7a85b19443ace', name: "toolbar" }))), h("div", { key: 'fc1339687085903a01b0ce5afa6adebe62932bf2', class: "drawer-scroll-container", ref: el => (this.contentRef = el), onScroll: this.handleScroll }, h("div", { key: '6750d301a807118b86005208a06e25514bb58b73', class: `scroll-shadow top ${this.showTopShadow ? 'visible' : ''}` }), h("div", { key: '4d4070e6b4aef7e1560f425cac5a9a337f9cf612', class: `drawer-content-inner${this.excludeVerticalPadding ? '' : ' vertical-padding'}` }, h("slot", { key: '250d3a74e4bf3923e234b5f83890812929f58e6c' })), h("div", { key: '9297ccb919031f826ee25f5b655c42acd81db50c', class: `scroll-shadow bottom ${this.showBottomShadow ? 'visible' : ''}` })), this.hasFooter && (h("udp-flexbox", { key: 'a2949f7b7e8abd57c504c74950029d2b54979166', slot: "footer", direction: "row" }, h("slot", { key: '03f9d4541b11a10e3ffaafc5f4ac4a9606cf33e0', name: "footer" })))))));
+        return (h(Host, { key: '45b1f4b2583f7e77fd033c162c15b1115e49ac8f', class: { 'has-footer': this.hasFooter } }, h("fluent-drawer", { key: '63eb8dec0d50001a00f25feb3ba1e0f7b7fdc132', ref: this.setDrawerRef, onToggle: this.handleToggle, type: "modal", position: this.position, size: this.effectiveSize }, h("fluent-drawer-body", { key: '04abd30d742279e395f4271847e8de12c26a5235' }, h("udp-text", { key: 'a9196ab5508a93901ae4a3f674f6a57c8d80f09b', variant: "subtitle1", slot: "title" }, this.drawerTitle), h("udp-fluent-icon-button", { key: '723f3d8af9739883b236d9eaef49fb4d8a9ca97f', slot: "close", appearance: "subtle", iconName: "dismiss", "aria-label": "close" }), this.hasToolbar && (h("udp-flexbox", { key: 'd26a9652357c47d072acd3a2e2d498a3ddc13973', class: "drawer-toolbar", direction: "row", width: "100%" }, h("slot", { key: 'f79e5ebc5c04127907bee559467c69ae97e8b208', name: "toolbar" }))), h("div", { key: '24ff4b4102b64248534fecbed9c8b0583586948e', class: "drawer-scroll-container", ref: el => (this.contentRef = el), onScroll: this.handleScroll }, h("div", { key: 'd563034faa7be9798d629b1300f79780dd0dfd8e', class: `scroll-shadow top ${this.showTopShadow ? 'visible' : ''}` }), h("div", { key: '33411705f0a93d13fe7669ea93bd43b9902ef2f1', class: `drawer-content-inner${this.excludeVerticalPadding ? '' : ' vertical-padding'}` }, h("slot", { key: '59d98bbdc85d325a854f6d17f29f5493356dbf92' })), h("div", { key: '4260000ac7c4cfdb963edb7cd2ecdcd19aff7f2e', class: `scroll-shadow bottom ${this.showBottomShadow ? 'visible' : ''}` })), this.hasFooter && (h("udp-flexbox", { key: '0453a08e0c9a29236a8f3bd8ea49bbb5e2214538', slot: "footer", direction: "row" }, h("slot", { key: '9e7a06250114e7a9a849c67439f35aedf6c5ce8a', name: "footer" })))))));
     }
     static get is() { return "udp-fluent-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,6 +82,23 @@ export class UdpFluentDropdown {
          * 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.
@@ -156,7 +173,7 @@ export class UdpFluentDropdown {
                         }
                         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();
                     }
@@ -211,7 +228,7 @@ export class UdpFluentDropdown {
                     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;
             }
@@ -219,7 +236,7 @@ export class UdpFluentDropdown {
                 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;
             }
@@ -320,6 +337,17 @@ export class UdpFluentDropdown {
         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))
@@ -377,15 +405,15 @@ export class UdpFluentDropdown {
         const overlayOptions = this.getSelectedOverlayOptions();
         const hasOverlay = overlayOptions.length > 0;
         const mappedAppearance = this.appearance === 'underline' ? 'transparent' : this.appearance;
-        return (h(Host, { key: '50df70a796294b82aad1a961cd213bbb4ef0480e', class: { 'has-error': hasError } }, h("fluent-field", { key: 'f424752cc9ed1f5e2c4525e562cee8feaff4e87f', class: {
+        return (h(Host, { key: '2739e491826ba8d094f3ecc454c888d4815f0bc9', class: { 'has-error': hasError } }, h("fluent-field", { key: '49d9f2af0b1b490ba19cb8ffd76f9e81d80d40e4', class: {
                 'no-message': !message && !this.includeErrorPadding,
                 'no-label': !this.label,
-            } }, this.label && (h("fluent-label", { key: '6357f3c97ec8daf3c652a3fd9e67626740b1a034', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: '54bf2223c4813ea0a3b6219dd80192ce335475f3', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'a9adfa504c930c6bd018639098bb5701e01e6626', name: "info", size: "xs", class: "popup-hint-icon" }))))), h("div", { key: 'ee145cd5bd31ca5e110fb65cd2617dd169b42dd6', slot: "input", class: {
+            } }, this.label && (h("fluent-label", { key: 'db3f23065b207e958f1885a93f3f9c3607c32c18', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: 'cd9957075c3688082d4b21046b77265bbe8e77b3', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '0198aed441b9c9a1776f0fa3d6d8c4c56b08fe37', name: "info", size: "xs", class: "popup-hint-icon" }))))), h("div", { key: 'c2ada338eda46b6c44d3c8bd03e370e08d79df1c', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': hasOverlay,
-            } }, h("fluent-dropdown", { key: '20b0f614cb02288f61feac07133f032cd2a4217c', 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(),
+            } }, 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) }, h("fluent-listbox", { key: '0e069f111f08d400ef4ca397d4987488ba624be2' }, this.loading && (h("fluent-option", { key: 'd4b38c16bb861c1991ecd520d9ddc95b6bc711f7', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: 'c8cc2f930af8ca94225ff18417ab1454fc093778' }, "Loading..."), h("span", { key: '905fb8ec9aa854eb3c8483d7168a31a87ce84956', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (h("fluent-option", { key: '7c115d63198f63874ff73e118026f6912f419c90', 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) }, h("fluent-listbox", { key: '648c741cf3f5676f0048e22afe355626cf8f0cb4' }, this.loading && (h("fluent-option", { key: '1dd8f2d7b137c0921bb6393489604fef65b88b63', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: '1cd40a943df80a3e4e32279939451f2a884fa611' }, "Loading..."), h("span", { key: 'b00ec9c25a83e8ca28c4a7c350750e07cc323d00', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (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 = [];
@@ -405,17 +433,17 @@ export class UdpFluentDropdown {
                     nodes.push(h("fluent-option", { key: index, disabled: !!optDisabled, value: safeValue, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', !!optDisabled) }, 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;
-            })()), h("div", { key: '4d73df096ec43408424d04d8a176c19ee0244bd3', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '4a70fa9e3f928417fe9e57b92ca7d11a0b2d99f5', class: {
+            })()), h("div", { key: '759461d74da6528e4b33be11cc4a3b80c8f80789', slot: "indicator", class: "indicator-wrapper" }, 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 }), h("udp-fluent-icon", { key: '4d11b1ed4cc8ffea3a96cb1d5d3d2b22aa022cb0', 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 }), 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 && (h("div", { key: '1fb5c41ad21a75c5b58ac6398f799d0a40f80de5', class: { 'selected-overlay': true, 'multi': overlayOptions.length > 1 }, "aria-hidden": "true" }, overlayOptions.map((opt, i) => (h("span", { class: "selected-item", key: this.getOptionValue(opt) || i }, i > 0 && h("span", { class: "selected-separator" }, ", "), h("span", { class: "selected-label" }, this.resolveProp(opt, this.optionLabel, true)), this.renderBadges(this.getOptionBadges(opt)))))))), h("div", { key: '26f160c5e649f3d7ebb726c92c24511e322b656a', class: {
+            } }))), hasOverlay && (h("div", { key: '9f2c12555d194f036e0a81618cb2ae77a595eac0', class: { 'selected-overlay': true, 'multi': overlayOptions.length > 1 }, "aria-hidden": "true" }, overlayOptions.map((opt, i) => (h("span", { class: "selected-item", key: this.getOptionValue(opt) || i }, i > 0 && h("span", { class: "selected-separator" }, ", "), h("span", { class: "selected-label" }, this.resolveProp(opt, this.optionLabel, true)), this.renderBadges(this.getOptionBadges(opt)))))))), h("div", { key: 'f336e3cc721c256dae4de0da6e05f87ca3455c43', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '69af6f8f00d3703b0d42d93988d0568ee7783967', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: 'bf2bc3358bee4302fc663d0a06edf61eb4a11f13', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -912,6 +940,29 @@ export class UdpFluentDropdown {
                 "reflect": false,
                 "attribute": "clearable",
                 "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 `options`\n  (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  dropdown into a form (Final Form / react-hook-form / `udp-field`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-as",
+                "defaultValue": "'option'"
             }
         };
     }
@@ -930,7 +981,7 @@ export class UdpFluentDropdown {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the selection changes (option chosen, multi-select toggle, or clear).\nThe payload mirrors the items in `options`:\n- Single-select: the matched option (the original object from `options`, or the\n  primitive value when `options` are primitives). Emits `''` when cleared.\n- Multi-select (`multiple`): an array of the matched options (objects or primitives).\n  Emits `[]` when cleared/empty."
+                    "text": "Fires when the selection changes (option chosen, multi-select toggle, or clear).\nThe payload shape is governed by the `valueAs` prop:\n- `valueAs=\"option\"` (default): the matched option (the original object from\n  `options`, or the primitive value when `options` are primitives) in\n  single-select; an array of those in `multiple` mode.\n- `valueAs=\"value\"`: the scalar value resolved via `optionValue` \u2014 a `string`\n  in single-select, `string[]` in `multiple` mode.\nEither way, clearing emits `''` (single) or `[]` (multi)."
                 },
                 "complexType": {
                     "original": "any",

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

@@ -373,21 +373,21 @@ export class UdpFluentFileInput {
         const hasFiles = this.items.length > 0;
         const limitReached = this.maxFiles != null && this.maxFiles !== 1 && this.items.length >= this.maxFiles;
         const showDropZone = !this.readonly && !limitReached;
-        return (h(Host, { key: '72e0adf855126be24a828e5d196e2d8917137b3b', class: {
+        return (h(Host, { key: 'f354dcacff6ea8f24686dfe5930eea1e78ae4d40', class: {
                 'has-error': hasError,
                 [`view-${this.view}`]: true,
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: '3defd0f86d964201f8470bc6ef69c62bce6388e4', class: { 'no-message': noMessage } }, h("div", { key: '4e8f09739d8db8ad756a049838594229e812460a', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: 'b12d4baf70aeeb7530597db4f663b8c8a1b0fd8c', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '6b35002df8db2a1f653f5aac63d3b42ade9a877e', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
+            } }, h("fluent-field", { key: '590e90d7804164a55e975e42d1160d1eb09499d1', class: { 'no-message': noMessage } }, h("div", { key: 'fa2ab44d483a584739ed51c256f250a242766996', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: 'bd9496e2b72d80e9c05cb7549de9e2316d61666f', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '975aeed3eb16151005f0619c2746a6ca93c64551', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
             // Containers like fluent-drawer's <dialog> call preventDefault on
             // every bubbled click. The synthetic click from .click() must not
             // reach them, or the canceled flag suppresses the file picker.
-            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: 'b382f1802365a7330fa284eea8c26c388010ab2a', slot: "message", variant: "caption1", class: {
+            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '2297fe8bb95d794aed9f13fdbac668507d8a21fb', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,
-            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'f50c537ae4a75d6d9e2b56dd8e4cfc41fca05ab0', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
+            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'de9555dc4c4f2348b664a48806f4f8b677a9bf2d', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
     }
     /**
      * Single dropzone container. Layout depends on state:

package/dist/collection/components/fluent-ui/icon/icon-grid/icon-grid.js

@@ -79,7 +79,7 @@ export class IconGrid {
     }
     render() {
         var _a;
-        return (h("div", { key: '2b673e13ae0ea895d0f6ad966f86f9a6f7de564a', class: {
+        return (h("div", { key: 'b9ebed5da227fd91f9b270a02032234e15314e3c', class: {
                 'icon-grid': true,
                 'icon-grid--compact': this.compact,
                 'icon-grid--expanded': !this.compact,

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

@@ -44,7 +44,7 @@ export class UdpFluentIconButton {
         const hoverActive = this.fillOnHover && this.isHovered;
         const effectiveVariant = hoverActive ? 'filled' : this.iconVariant;
         const effectiveColor = hoverActive ? 'var(--colorBrandForeground1)' : this.iconColor;
-        return (h(Host, { key: '51fb3b256f38d5b911a2b811ab952c7e734b5e01', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("udp-fluent-button", { key: '5b6e9ea46f340d9c7b4ac571a5af6c20e5456185', appearance: this.appearance, disabled: this.disabled, "disabled-focusable": this.disabledFocusable, loading: this.loading, shape: this.shape, size: this.size, iconOnly: true, "aria-label": this.ariaLabel, tabIndex: this.tabIndex }, h("udp-fluent-icon", { key: 'fbf26754b80d3f3f8e3c28f10c3b88ba12b22372', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
+        return (h(Host, { key: '0cb2fc447a4c7f3114fed7a760ce398fd067b9b6', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("udp-fluent-button", { key: '527a9b7739a4cb656360e80517e5a50769acd28a', appearance: this.appearance, disabled: this.disabled, "disabled-focusable": this.disabledFocusable, loading: this.loading, shape: this.shape, size: this.size, iconOnly: true, "aria-label": this.ariaLabel, tabIndex: this.tabIndex }, h("udp-fluent-icon", { key: '07f3ba0b0cec8064fc23504d895d0ddad14ae7ba', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
     }
     static get is() { return "udp-fluent-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class UdpFluentImage {
         this.shadow = false;
     }
     render() {
-        return (h(Host, { key: 'e15162e6a2db7cd2adf51c8aaca8ef228125d381' }, h("fluent-image", { key: 'f6023b888997ccee55e0aa822017b38548ba4f8f', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, h("slot", { key: 'ab38d953d04f53cef35ee4edea016c8b0a7ed17d' }))));
+        return (h(Host, { key: 'a9b75daa5afbc90ec287f644d1bb271da9891fb3' }, h("fluent-image", { key: '327669128e7913a1da5b098c479521a05c7c801a', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, h("slot", { key: '6de9e3c57e22656480c064e3bb8054513f210b81' }))));
     }
     static get is() { return "udp-fluent-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/inline-edit/udp-fluent-inline-edit.js

@@ -26,7 +26,7 @@ export class UdpFluentInlineEdit {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '879abc38ee965578e4952a9dd8497bd389e3a447' }, h("input", { key: 'ebf0bf56de88206d6a977461f1109d79e10c31da', ref: el => (this.inputEl = el), class: "inline-edit-input", type: "text", value: this.value, placeholder: this.placeholder, readOnly: this.readonly, maxlength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit() })));
+        return (h(Host, { key: '08168e950fcd3afde547e7fcad5c3fe6154b4a85' }, h("input", { key: 'a3c48452bd044b0ba762d2d20e3ce7ffcd0925a4', ref: el => (this.inputEl = el), class: "inline-edit-input", type: "text", value: this.value, placeholder: this.placeholder, readOnly: this.readonly, maxlength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit() })));
     }
     static get is() { return "udp-fluent-inline-edit"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class UdpFluentLink {
         this.inline = false;
     }
     render() {
-        return (h(Host, { key: '8e4e353fedc29c8959c73e9d98fd953129876a75' }, h("fluent-link", { key: '363d4d097735d66e76428c976fb367e1013bd359', inline: this.inline, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, ping: this.ping, referrerpolicy: this.referrerpolicy, rel: this.rel, type: this.type }, h("slot", { key: '934841452c3a0dc7b04073f72c3e5dda0d0d98b3', name: "start", slot: "start" }), h("slot", { key: '0a8509f81e4c12fdfdfce33930079bdbdd82d70f' }), h("slot", { key: 'a8adc130c3374dd1aae628d79c7ea2a1c18c7fc4', name: "end", slot: "end" }))));
+        return (h(Host, { key: '09291fcdf82c0aeb386323b711198f8e0a3982eb' }, h("fluent-link", { key: '2d9e44fb8b66111f0e08e6a344f744acbe680aaf', inline: this.inline, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, ping: this.ping, referrerpolicy: this.referrerpolicy, rel: this.rel, type: this.type }, h("slot", { key: 'ace22a91cfedd35cd3861928433ce987d3f098dc', name: "start", slot: "start" }), h("slot", { key: 'b1feb5881053d751c03d63e9388a09e87ab63b2f' }), h("slot", { key: 'ec3a5aba47dcc703c327000de5eacd59d25096fb', name: "end", slot: "end" }))));
     }
     static get is() { return "udp-fluent-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -497,16 +497,16 @@ export class UdpFluentLocationInput {
         const showSearch = !this.hideAddressSearch;
         const showGeoButton = this.showGeolocationButton && !this.readonly && !this.disabled;
         const tileUrlMissing = this.showMap && !this.tileUrlTemplate;
-        return (h(Host, { key: '601cd4442b5d5e76e7ef0212a1e85519e4cca2ff', class: {
+        return (h(Host, { key: 'f1647d4aefa6ba6da591eacaddf5543f4c8860ae', class: {
                 'has-error': hasError,
                 [`size-${this.controlSize}`]: true,
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: '70ad6dd2d541b900c377eb4ec526730d4c516db3', class: { 'no-message': noMessage } }, h("div", { key: '72a3bc5ce4421c26bb23b3da1f3ee14a3a16150c', slot: "input", class: "root" }, !showSearch && this.label && (h("fluent-label", { key: '95bd83bcc2e7f3d0e3d6b4b70217864ab475b359', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), showSearch && this.renderSearchPicker(showGeoButton), this.showMap && (h("div", { key: '0792bd7c41542b80c99a84e3963cd938e1dc0986', class: {
+            } }, h("fluent-field", { key: '3f5c9b6c67c34974c259b713bfe9cc8d0df3fac5', class: { 'no-message': noMessage } }, h("div", { key: 'be083a603cadb7a6951d5ee7d270ed7194fedc75', slot: "input", class: "root" }, !showSearch && this.label && (h("fluent-label", { key: '4d757d73ef0ab47cdabd76f78cb987571965f0e8', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), showSearch && this.renderSearchPicker(showGeoButton), this.showMap && (h("div", { key: '01c8b0cc7cb2fe9cbbbd1e52ba424729ba639692', class: {
                 'map-wrap': true,
                 'is-loading': this.isReverseGeocoding,
-            }, style: { height: this.mapHeight } }, tileUrlMissing && (h("div", { key: '4e30328fd6a6681ab04a227f815d89b3436d3bd7', class: "map-empty" }, h("udp-text", { key: 'b988050206716dc513c882555558d1a55922aa15', variant: "caption1", class: "map-empty-text" }, "Map provider not configured."))), h("div", { key: '793021c95121c83745b2ff17f38836e136233078', ref: el => (this.mapEl = el), class: "map", "aria-label": this.label ? `${this.label} map` : 'Location map' }), this.isReverseGeocoding && (h("div", { key: 'd7733cd85c5516a2b3b5b436b0a9b14cca7fb759', class: "map-loading", "aria-hidden": "true" }, h("udp-spinner", { key: '01b866ebd737be06211eb239181557c3e42aff93', size: "small" })))))), h("udp-text", { key: '6976838fbbe6b48f2d22a8d5d53148af448438eb', slot: "message", variant: "caption1", class: {
+            }, style: { height: this.mapHeight } }, tileUrlMissing && (h("div", { key: '138cd191f359f2d4123d6b296a17a64cbdd045a7', class: "map-empty" }, h("udp-text", { key: '4c0d835212cd57c7b9a326ce823d2c294c64abcb', variant: "caption1", class: "map-empty-text" }, "Map provider not configured."))), h("div", { key: '27b6abd55835869484fe06ea3fe3b6f6cc58e4af', ref: el => (this.mapEl = el), class: "map", "aria-label": this.label ? `${this.label} map` : 'Location map' }), this.isReverseGeocoding && (h("div", { key: 'ddbcc61cb0e401e3553c29a184fc188d90a4e94c', class: "map-loading", "aria-hidden": "true" }, h("udp-spinner", { key: '4a2932d0f22c352ddbc4c49f90be693623776fb7', size: "small" })))))), h("udp-text", { key: '6adfe5777d9e8f32a508aa51c6ec1625cfef0adb', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,

package/dist/collection/components/fluent-ui/message-bar/udp-message-bar.js

@@ -31,7 +31,7 @@ export class UdpMessageBar {
         };
     }
     render() {
-        return (h(Host, { key: 'b2843c8b839b1d19d7c4f33c30e742b8e546d111' }, h("fluent-message-bar", { key: '1680448d3f9d7e750b2a66874264ee30429795c5', shape: this.shape, layout: this.layout, intent: this.intent }, h("udp-flexbox", { key: 'fb91f34b81e9c631910ec0d9df22c06ab1a9055e', direction: "row", gap: "sm", slot: "actions" }, h("slot", { key: 'a2ef3de7543997fb99b6858be19c79f3e8a81a3f', name: "actions" })), this.dismissible ? (h("udp-fluent-icon-button", { slot: "dismiss", appearance: "subtle", iconName: "dismiss", "aria-label": "Dismiss", onClick: this.handleDismissClick })) : (h("slot", { name: "dismiss", slot: "dismiss" })), h("slot", { key: '698b337b9a022cfa7dba4d08b2f0e9e27ec5cf26', name: "icon", slot: "icon" }), h("slot", { key: '1a977e191d501ebf00b9fe115d0891440458a53a' }))));
+        return (h(Host, { key: '84eb625214dc77c60004a0a44d4d57242e1f44a9' }, h("fluent-message-bar", { key: '62497532a0ffeff30ce08693b91794ecc09c4dc2', shape: this.shape, layout: this.layout, intent: this.intent }, h("udp-flexbox", { key: '1208b31ee665592212c6cb48410cdbfa798b2455', direction: "row", gap: "sm", slot: "actions" }, h("slot", { key: '257a8c42983d8a12e27cd0deb2634c1f2a0180d2', name: "actions" })), this.dismissible ? (h("udp-fluent-icon-button", { slot: "dismiss", appearance: "subtle", iconName: "dismiss", "aria-label": "Dismiss", onClick: this.handleDismissClick })) : (h("slot", { name: "dismiss", slot: "dismiss" })), h("slot", { key: 'a072d93e6d19f01a44dc62b9024490cb102c749f', name: "icon", slot: "icon" }), h("slot", { key: '55ea279fe5b7d247c9fbe37fe06068a342d6667e' }))));
     }
     static get is() { return "udp-message-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/number-input/udp-fluent-number-input.css

@@ -0,0 +1,68 @@
+fluent-text-input[disabled]::part(control) {
+  color: var(--colorNeutralForegroundDisabled);
+  -webkit-text-fill-color: var(--colorNeutralForegroundDisabled);
+}
+
+fluent-text-input[disabled]::part(root) {
+  background-color: var(--colorNeutralBackgroundDisabled);
+}
+
+fluent-label[disabled] {
+  color: var(--colorNeutralForeground1);
+}
+
+/* Override Chrome's autofill background color */
+fluent-text-input::part(control):-webkit-autofill,
+fluent-text-input::part(control):-webkit-autofill:hover,
+fluent-text-input::part(control):-webkit-autofill:focus,
+fluent-text-input::part(control):-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px var(--colorNeutralBackground1) inset !important;
+  -webkit-text-fill-color: var(--colorNeutralForeground1) !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+fluent-field {
+  width: 100%;
+}
+
+fluent-text-input {
+  width: 100%;
+  max-width: 100%;
+}
+
+.message {
+  color: var(--colorNeutralForeground3);
+}
+
+.message.includeErrorPadding {
+  min-height: var(--lineHeightBase200);
+}
+
+.message.error {
+  color: var(--colorPaletteRedForeground1);
+}
+
+.popup-hint-icon {
+  margin-left: 2px;
+}
+
+fluent-text-input.no-label::part(label) {
+  display: none;
+}
+
+fluent-field.no-message::part(message) {
+  display: none;
+}
+
+:host(.has-error) fluent-text-input::part(root) {
+  border-color: var(--colorPaletteRedBorder2);
+}
+
+:host(.has-error:focus-within) fluent-text-input::part(root) {
+  border-color: var(--colorNeutralStroke1);
+}