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

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

@@ -18,6 +18,7 @@ import '@fluentui/web-components/option.js';
 import '@fluentui/web-components/listbox.js';
 import '@fluentui/web-components/button.js';
 import '@fluentui/web-components/compound-button.js';
+import { h as hasSlotContent } from './slot-helpers-Dx6EW-PP.js';
 import '@fluentui/web-components/text-input.js';
 import 'cally';
 import '@fluentui/web-components/avatar.js';
@@ -167,7 +168,7 @@ function createAgGridTheme() {
         wrapperBorderRadius: 0,
         wrapperBorder: false,
         headerCellHoverBackgroundColor: 'var(--udp-grid-column-header-bg-hover)',
-        borderColor: 'var(--divider-color)',
+        borderColor: '#E9ECEF',
         accentColor: 'var(--primary-color)',
         browserColorScheme: 'light',
     }, 'light')
@@ -1068,9 +1069,37 @@ class BulkActions {
         this.onRowSelectionChanged = () => {
             var _a;
             startGuardedTransition(() => {
-                const rows = this.api.getSelectedRows();
-                this.selectedRows = rows;
-                this.selectedRowCount = rows.length;
+                var _a, _b, _c, _d;
+                if (this.api.getGridOption('rowModelType') === 'serverSide') {
+                    // SSRM: selection is a rule, not a row list. Derive the count from the
+                    // rule. getSelectedRows() must NOT be called while select-all is active
+                    // (AG Grid warning #199), so only read concrete rows for explicit picks.
+                    const state = this.api.getServerSideSelectionState();
+                    const total = (_b = (_a = this.api.getGridOption('context')) === null || _a === void 0 ? void 0 : _a.rowCount) !== null && _b !== void 0 ? _b : 0;
+                    const toggledNodes = (_c = state === null || state === void 0 ? void 0 : state.toggledNodes) !== null && _c !== void 0 ? _c : [];
+                    const selectAll = (_d = state === null || state === void 0 ? void 0 : state.selectAll) !== null && _d !== void 0 ? _d : false;
+                    this.selectedRows = selectAll ? [] : this.api.getSelectedRows();
+                    this.selectedRowCount = selectAll
+                        ? Math.max(total - toggledNodes.length, 0)
+                        : toggledNodes.length;
+                    this.selectionState = {
+                        rowModelType: 'serverSide',
+                        selectAll,
+                        toggledNodes,
+                        selectedCount: this.selectedRowCount,
+                    };
+                }
+                else {
+                    const rows = this.api.getSelectedRows();
+                    this.selectedRows = rows;
+                    this.selectedRowCount = rows.length;
+                    this.selectionState = {
+                        rowModelType: 'clientSide',
+                        selectAll: false,
+                        toggledNodes: [],
+                        selectedCount: rows.length,
+                    };
+                }
                 this.refresh();
             });
             //Refetch server action if gridId has changed, or fetch has not happened
@@ -1099,13 +1128,13 @@ class BulkActions {
         this.executeLocalFunction = (functionName) => {
             const selectedFunction = this.localFunctions.find(f => f.label === functionName);
             if (selectedFunction) {
-                selectedFunction.callback(this.selectedRows);
+                selectedFunction.callback(this.selectedRows, this.selectionState);
             }
             this.refresh();
         };
         this.executeActionProviderAction = (actionId) => {
             if (this.actionProviderCallback) {
-                this.actionProviderCallback(actionId, this.selectedRows);
+                this.actionProviderCallback(actionId, this.selectedRows, this.selectionState);
             }
             this.refresh();
         };
@@ -1125,11 +1154,22 @@ class BulkActions {
             this.api.setGridOption('rowSelection', { mode: 'multiRow', enableClickSelection: true });
         }
         else {
+            // SSRM: the header checkbox selects ALL matching rows (every page), stored
+            // as a selection rule ({ selectAll, toggledNodes }) — not a row list.
+            // 'currentPage'/'filtered' are invalid for SSRM and silently fall back to
+            // 'all', so we leave selectAll at its default. Selection is read from
+            // getServerSideSelectionState() in onRowSelectionChanged.
             this.api.setGridOption('rowSelection', {
                 mode: 'multiRow',
                 enableClickSelection: true,
-                headerCheckbox: false,
+                headerCheckbox: true,
             });
+            // SSRM row selection requires Row IDs; without getRowId the select-all
+            // state and selection tracking are unreliable.
+            if (!this.api.getGridOption('getRowId')) {
+                console.warn('[bulkActions] Server-side row selection requires `getRowId` in gridOptions. ' +
+                    'Without it the header checkbox select-all and selection state are unreliable.');
+            }
         }
         //Get gridId from context and fetch bulk actions, or set empty server actions if no gridId
         this.gridId = (_b = this.api.getGridOption('context')) === null || _b === void 0 ? void 0 : _b.gridId;
@@ -1697,7 +1737,7 @@ const AgGridBase = class {
         this.updateGridContextValues();
     }
     render() {
-        return (h("div", { key: '9a16d8b90b805ed1451eb48db0ba7df90c714457', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: 'fe0119315b8b73cd3e49f7521f3c794fc1250238' }, h("div", { key: '6a6346c130cc32488ed2e790877e07c1ad5bff89' }, h("udp-dialog", { key: 'cf73e98bda7a6aa8de4d1c9b5a958927ec1f4a84' }), h("udp-list-item", { key: 'd77aa780107896612c5f9f1a07230aa8b1b9b33a' }), h("hint-panel", { key: 'c2050efb63fdba5ecf99842550ae067c1206c6e9' }), h("udp-side-sheet", { key: '0ec1f693d133f81a236719dee3c627926057acbc' }), h("udp-fluent-dialog", { key: 'eea6076a4fdda9606cd6623f4a38ceab61a56171' }), h("udp-fluent-text", { key: 'c12db7b6556f1a8a5972888600deb0d6d09dedc6' }), h("udp-fluent-text-input", { key: '1171561b4331bff6e0e3aea9417e2996ae007811' }), h("udp-fluent-switch", { key: '148678c460ee96cf4015d031241709527490dfc9' }), h("udp-fluent-button", { key: '8e43757246063a8087b362a43004c25c900f8b34' }), h("udp-text", { key: 'd6653a02fe0030e288a564296b2422976d1a34ce' }), h("udp-search-input", { key: '9f50750b415c1501ceecc4c4854660556edcb7de' }), h("udp-fluent-avatar", { key: '559183c3e5a1711a7d0cd65d0f7a87c76b4f2c43' }), h("udp-fluent-icon-button", { key: '77e871ca66f2d4177cbaf5a057f1ff4d5e28f8b2' }), h("udp-fluent-icon", { key: '579b0bec7e771bfe6bac0ae649238cfb8e9c317e' }), h("udp-fluent-badge", { key: '7d5a070cfa141e90b4c593cabcd77c401e0376b3' }))), h("grid-header", { key: '6174b78b2359bd4c1693000e5f9aefc969aac885', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: '26f0e971996dddaf3bbe8bac1c0dda70b6388661', ref: el => (this.gridEl = el) })));
+        return (h("div", { key: '104459ae3bbc35124905c375284deea7fd4a18e2', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: '9246393a0abf0f32551fc7783747328dbba99ec7' }, h("div", { key: 'b8e6d1fdb1ff7884e6723a0ff9421bd12ad63740' }, h("udp-dialog", { key: '4e2de434c26d11fa47104e6c8f06d76d3e617500' }), h("udp-list-item", { key: 'c46d7dec91a2bae694631f095c9904f85d607ba6' }), h("hint-panel", { key: '4177e50ac5fedda3f15de57153de46201f104454' }), h("udp-side-sheet", { key: '2e8914c6d8ea1bb83e48cce4489fd2d636884498' }), h("udp-fluent-dialog", { key: '482719dc0f89bdbe4749d28aa1d2509343de1ca7' }), h("udp-fluent-text", { key: '03a30ea4a724b2d003befd88f4fa8eba27685411' }), h("udp-fluent-text-input", { key: 'a6e25454b5bd17db8ed441363c81b66902987323' }), h("udp-fluent-switch", { key: 'b547bd01dda86ba3b1c94a5973de9b562cf7cb59' }), h("udp-fluent-button", { key: '9d5b809d46caaedf783b42598adb23f2d181a8b8' }), h("udp-text", { key: 'f4ce740ea9998d756f4e9518a1c304dd5e4208a3' }), h("udp-search-input", { key: '8192e2ac08b3ee6052578677c3361e9dc7648ec5' }), h("udp-fluent-avatar", { key: '8e7f9bb0c6e9dee5d50b5740a9599a7a1271f677' }), h("udp-fluent-icon-button", { key: '059f897ae01e52266e938f77c70dd848efd12f43' }), h("udp-fluent-icon", { key: '33b02e8a98bb6fee997ac180942dbb2545ea2c21' }), h("udp-fluent-badge", { key: '5b0ca3ac9944d662c9593602fe8adfd13da4a2b8' }))), h("grid-header", { key: '5a1a52b5e07dd84dbc5f7b0c8d6ac3cca3faa2d9', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: 'ea69fb43b9a875f35ef7851662af90474321ef81', ref: el => (this.gridEl = el) })));
     }
     static get watchers() { return {
         "gridFunctions": [{
@@ -1760,7 +1800,7 @@ const ClientSideGrid = class {
         this.clientSideConfig = Object.assign(Object.assign({}, this.gridOptions), { rowModelType: 'clientSide' });
     }
     render() {
-        return (h("ag-grid-base", { key: '666162b2a5fdc844236ccc9d093d66f3820cd85d', columnDefs: this.columnDefs, gridOptions: this.clientSideConfig, headerConfig: this.gridHeaderConfig, onGridReady: e => this.handleGridReady(e), gridFunctions: this.gridFunctions, gridId: this.gridId, gridApiCallback: this.gridApiCallback, gridHeight: this.gridHeight }));
+        return (h("ag-grid-base", { key: '986f172c2d9f1758548f3f49be1b3cd2c2693b26', columnDefs: this.columnDefs, gridOptions: this.clientSideConfig, headerConfig: this.gridHeaderConfig, onGridReady: e => this.handleGridReady(e), gridFunctions: this.gridFunctions, gridId: this.gridId, gridApiCallback: this.gridApiCallback, gridHeight: this.gridHeight }));
     }
     static get watchers() { return {
         "rowData": [{
@@ -1846,7 +1886,7 @@ const GhostRender = class {
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: 'c72866559dd6aad32d4f453634b047364bc49e91' }, h("slot", { key: '9549af952adb5fb4539901f8a9be68f59618b4ec' })));
+        return (h(Host, { key: 'bec0fa4741a39ce0d804f3f98ce8c211138028d3' }, h("slot", { key: 'f6934523537cde4b6ebc2fe0f8af1a83c3cab2d8' })));
     }
 };
 GhostRender.style = `:host {
@@ -2018,7 +2058,7 @@ const HintPanel = class {
         };
     }
     render() {
-        return (h("div", { key: '30cd51fab775ed49145590f239ac96328833d9ad', class: "hint-container" }, this.showHint && (h("div", { key: '81f8bbd744cad8fe013129aa154d91920da8bcf8', class: "hint-content" }, h("div", { key: '2bd503978249ad020d6e9cb208f71126d236895b' }, h("unity-typography", { key: 'e655fd34d4efd8ed266e24fb4a36fada251c040b', variant: "body" }, " ", this.hint, " ")), this.hideHintText && (h("div", { key: '9071166c6c5fa4faffbc36065ecde0e5bc472e3d', class: "hide-help" }, h("udp-button", { key: 'fbe047ad65a87200d5b3a0051b065b83df981c03', size: "small", color: "info", onClick: this.handleHideHint }, this.hideHintText)))))));
+        return (h("div", { key: '9f3e0a64c558e9640f0452edaf641053460c8a39', class: "hint-container" }, this.showHint && (h("div", { key: '357a51d28445c9ef44d285b90d414adc79a3c0c4', class: "hint-content" }, h("div", { key: '955c8e4bdb80681728a3b1e828eef95c830e0f86' }, h("unity-typography", { key: 'c13886bc1eb7869e3e4c5fccc19a53d559227f9f', variant: "body" }, " ", this.hint, " ")), this.hideHintText && (h("div", { key: 'a17cfbf74ace9228b4633a9ab15b525801bbc552', class: "hide-help" }, h("udp-button", { key: '71c170ce3161e76a96dae07649d72b0598352db4', size: "small", color: "info", onClick: this.handleHideHint }, this.hideHintText)))))));
     }
 };
 HintPanel.style = hintPanelCss();
@@ -2471,51 +2511,51 @@ const TestComponentsPage = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '211f852adbd706cbd11d5950eb7f8bee8f8169a1', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: '94b285a6faa2233f0d19d62f2a0c071b0fed1753', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '88e64c7a58145fe4103d68c6cde4f82b54302b7b', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: 'eceadfdc32623cd3b20395b2011178a5c8e17b2c', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '401f092d799a6714a2d17332913af7d68e0238d9', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '0181472e56ffbb2b8ed92850654a42fe6f88d24e' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '379c20dc169a5542f2883a2df260d3e665fa8980', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: '3bc375d23ac9c90bf91cb02de439bae05a52fa6d', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '4f27e671b280e4286773c6e1311670ca67cf1c09' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: '0d6654ddc61e2d9bcc15fe2a531de2c298da1be1', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '817139f5f7c32c09f0fc0b9a7bb95b324578ed0e', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: '687f4a358460f61f4f18a51f3fb7edaae712f40a', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: '9f19d49b8ebfef24cf23e0849a6c4b2f209946dc', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: 'f2536581e9884c3707f14fc01afc5cf3f8bd3124', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: '377ab2b84c39313c3341e952dfce63539a633619' }, "Buttons & Inputs"), h("div", { key: '5d684dec9c2c8029e425b3beeb819da34b52f368', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: 'bc90dfe124dd5b906d5428d1e75f321ccfc4956d', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '3767fc4a9880a0198dfff096b30ad006150febfa', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: '893cb9ab7ac2b4b0aacda732484e2bd6233c40a0', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: '6cdbb0729252e5766fd4d86642e36fa93b295799' }, h("udp-fluent-button", { key: 'a2daa636da7f7c1b7a00c0bbac4cca56a53191bc', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '920c38c11be16f7a37bcb383293df6ee4fe96999' }, h("h4", { key: '0cb86dec0a4e2b59c108b43efcce1518af8b9ead' }, "New Icon Props"), h("div", { key: '64e58bbbbdfdd0b019ba116f67fc317c784918c4', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: 'e9f3b130144cdedb828b0209820a615592450e29', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: 'c1eaa08283d739c110269a98782385580979534b', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: '70f4d96c1a478ed74012d5e126b98d05c2a7485d', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: 'd7633cdcc38d23a2f977a31543d8a3f162f9537e', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: '5bb7c811578c057ed6263528b66b44e62d35fc9b', slot: "start" }, h("udp-fluent-icon", { key: 'd870c959dea2ecd443c4aa530bf62d85f7b85bf4', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: '00fc80fd525836eefa0603000c72ecbacdf6b23d' }, h("h4", { key: '49c81a480b2ff11e67bf44e76076fe01e4b33e1a' }, "Compound Buttons"), h("div", { key: '1ed1e0726d18ea521db8d226a8bc8c3ca7ebe3ad', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: '002ee8145741dfb66f50b88a32445f247f6ad805', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: '68350550ccd6fe3db5f119a68bfc6b12f1bd38ef', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: 'dd5d8c94646784c8fd4501d0b534a4b2abacd61f', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: 'ea71bef65202e68a27adf93bdf878a77fe0fdb08', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: '4858250de3b3fb4ab30d2ee37dc7767b53478775', style: {
+        return (h("div", { key: 'a9c2322a26615d31613089bc327c27e3ec4917aa', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: 'bf2ba944baa02b50dd338098d9d5c3ed4e92eac9', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '242492378dad7dd52621678294e2647c6dbb499c', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: '66126efb0e275889a5377d0a8b3e4dcd42d4e715', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '919821dfd30a7cf09bad796e7d3b4b5ca3ac8097', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '00e3320913a1c3c53978f2b1b07d78165930214c' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '9ab08dcfddfdbe4d43d22533bb7e91e4eb306b6d', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: 'a70671fda6c6472f7fe8b21800b295ab122a8c7e', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '963ef03978a78e87336b27be5add4c29f5a2efb0' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: 'ea61b3879d3cbbeb9c6618e5858d41c2f836028e', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '72ca1c8badafb439d583d3361492a33c50203d07', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: 'bc463889ac07a431dc87c73f067fb8addbc24cc5', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: 'ac7bcd1e0855661c1b006bdd8d5f25ffd1575743', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: '63b0192e96eb71b182b0707d8db7eeae399ebcef', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: 'e3d5f9758314ab4d5d7cba2cead95d182a143b82' }, "Buttons & Inputs"), h("div", { key: 'd2d95504692b3429c7fb43bc27ae938f4e7626ff', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: 'e9ce5e96a67c67afe668d3bfe1c60cc3fbaeabc2', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '076a4b9c8b3939fca0e5b0fe165f38c1e1478c4f', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: '35c7becc662dd5d891f5aaee818cacb728a9aab5', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: 'c36f993d3d0034655fdea10d24ae114d0fb55fba' }, h("udp-fluent-button", { key: '005f381234113fd751518aadae7dbf5f98b2d60d', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '21a9b646be50f2c9adf88a1cbb7c159e8a3a1708' }, h("h4", { key: '71fb818808575b24d24fdfbe78e23e3fba82f405' }, "New Icon Props"), h("div", { key: '9877970aeb3fd51cb725b7a7423fc0af02c24ee9', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: '926b5e5137ad0533897ab4dd303cb9106eea1f80', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: '92cca95950d0eed95c50a6292564e32a92ced897', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: 'f960cf20882fcd125b7a53c0a2576350d4889347', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: 'c93088bb38d605f6d3d895c4e078366a6b91c396', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: '9caa795afb3ca4f0037bb44c561ea2b4cefe27ef', slot: "start" }, h("udp-fluent-icon", { key: 'cdf66302bae34dad84acdc7e87251c2f9386e336', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: 'd323f8e769102769a062974da71b7eb8d6658f10' }, h("h4", { key: '038bb2e73ad76f03f3e2b8de5359e29b0b319611' }, "Compound Buttons"), h("div", { key: '57dfa5e9eb921e6b2c602098677a4144119b4ca1', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: '99830baa92fae322458cacaf94a554aad816d02c', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: '0e07486eb840a6af2ea73f1cd57f582d2ead0cbb', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: 'bb60625d8140dbc78f1a382381bcb7225b244818', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: '29f365a8cf5a0c3887a47b87faabe40682037408', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: '6d7109606ba0485a72b5152245c97cb8a18844a4', style: {
                 marginTop: '1rem',
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
-            } }, h("udp-fluent-switch", { key: '21bb3826067bff6192ac7fe38627e82443a9d449', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: 'e7ae647fcdc11e418eeb4658a1438c050933556d', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '4bf942ea146eda54e01c65f7e5c94521ec0eb0e6' }, h("h4", { key: '23596bb89957a74843c6a845d7fb11e3205b5ca8' }, "Toggle Buttons"), h("div", { key: '487e8e3191e63c0b11929c46f12e03f28fdf1c6e', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: 'a656be6b3f4786f2db7aa516bdb29f9d769bd510' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: '607972b90159c4518c0e290bc104a70b5871fd80', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '931f0d740dc5345142936827c79a4d3d3175a595' }, h("udp-fluent-icon", { key: '225c78fe23e3275d5b92cedacb12b1d89591a0df', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: 'cb7df6c9cf4e311ae393e754b422f55bf08ca2cc', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '593c1889646c68045572461c83736caae9860b45', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: 'edeb435c52f45fb3ce971b9e7314b8f2357e07e4', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: '6e93570264f27575a52e27ee7ab671ba3a9356eb' }, h("h4", { key: 'c9264b2701340b9a0dd13117260210d133de7685' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: '58228a05b7135ee92fc30f0197d6b5d2fd7aef50', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: '88e9166212dcdd8f5ed5241601c7904a24583319', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '48111d30b127c0e12f5eec73bde592b54e77b915', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: '32d1a164fe6e15be46554c19da6e0809180e370a', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '5a8d96110c502679dc516a984cfd60d2749a02d7', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'c46d0f1541422852ec442cddedc79fae5d42af20', iconName: "settings", size: "medium",
+            } }, h("udp-fluent-switch", { key: '04ebf651f2230fdcc81a7928662cbbb4ae9b9161', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: '0e7638c6075fb794c97e7d2ee59db594e561c2c0', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '244a86372c3cf3d16236c6f0e154b53af3836bbe' }, h("h4", { key: '9b3a0148eb4009f814f1b023b3bb7e4e55312d83' }, "Toggle Buttons"), h("div", { key: '5d2e76afc817c86021017b7b2ad25a0678453906', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: 'aa415541152a25e399d92646448824e9e3c1b444' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: 'f393ebdba5b63d7d45cf02e62b52ddedcfe2d13e', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '5956343beeaa7358a451ad981ff7ee8a8f4ac354' }, h("udp-fluent-icon", { key: 'aa7a3e07e6d9d2686db547fea62ff4340e57ab11', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: 'a6fe9d77dea303d942a68accf448b12d6421ac92', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '3197c1f85d6036e9269f5291d803ae2c588ff97f', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: 'c87a03c8762ea5d6a72e249c4ed5d89431ba3e3d', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: '1342cf8a51ffc4824988f222c16f44faa1bb4288' }, h("h4", { key: '734d04a76b6933f8ed9ef859a8a944d3c1811651' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: 'ba2567c6e53d8a8ff789f28981a3696cf024da39', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: 'bdb25678cde5a8689296ed1410cc44d6445ac720', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '785795590edcbcd3b3c33791c858600491e91fe2', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: '80f869560b0087cbd3f47d382f6a27944d254cb1', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '5bce1bbceb8d92fd34870279d7ed9cadae945a72', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '8b97470503d8d99e0c4eb10c9503170fe9579df5', iconName: "settings", size: "medium",
             //appearance="primary"
-            ariaLabel: "Delete" }), h("span", { key: '71846361be959fb7942f25af3d9a413cd74a0839', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: '2c40b6b19e5adc1cf7606dcef0758a18dbb2dff9', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '53f3ee5fdc41d89d0bbe7cd349267b09490ecf3f', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: '6a7443ce22e2c048d4961762040a0802b2a01c81', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: 'a7f338137f905d957f0d37d7a942c59a6576d497' }, h("udp-loading-spinner", { key: '5e31af9721df95cfd333a5d4eee35a49f1ec1d2e', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '99da32b0f63e38f589e96f45f0fefdee52cf5c22', id: "inputs", activeTabId: this.currentTab }, h("div", { key: '30504ade52136e78def5a00f30d795cd9152593b', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: '19c7b5b4538c488483306bebc11f260d4ba57259', style: {
+            ariaLabel: "Delete" }), h("span", { key: '5e340cabab8b0461ae2b394d63e9b92e70bc520f', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: '2fade4d53bf10e7587db6cec326b2ad5737aabc3', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'c37eb2ac3fbdb5de76487babd3927fdb52adfc25', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: 'ecea0b60ed282a75bb468c53e2e1e31d29c5b5f0', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: '743c684b4f721cedea7f24350be72a95c4094dee' }, h("udp-loading-spinner", { key: '1637fc4d712521bb23fb795917c7f9b6437bfca6', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '972256fea6668009ab1811ff1bff073de2198e45', id: "inputs", activeTabId: this.currentTab }, h("div", { key: 'f03349ae64368fac7a1aedf2adb50cb78043ffe1', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: '9c28839e42105ee9ac55df10299bfe964c65b7f6', style: {
                 padding: '1rem',
                 backgroundColor: 'var(--colorNeutralBackground3, #f5f5f5)',
                 borderRadius: '8px',
                 marginBottom: '1rem',
-            } }, h("h3", { key: 'a544499a651d4b1e4267ca02d5329f199f6c5d24', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: '7660c2bafa11a2c5818e62c97b3dd781afa6f0b6', style: {
+            } }, h("h3", { key: 'ec492fbcc5045a6717e23c54316d6e939b50db63', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: '80207364c26854976d42c08da0ebbc2f4e4ffb7d', style: {
                 display: 'flex',
                 gap: '2rem',
                 flexWrap: 'wrap',
                 alignItems: 'flex-end',
-            } }, h("udp-fluent-dropdown", { key: '6600c6a954552ee136fc7471c2fa49d96597dda6', label: "Appearance", value: this.inputControlAppearance, options: [
+            } }, h("udp-fluent-dropdown", { key: 'f855a9ab7b7bd02d74e781cac1fe7a0b705eacac', label: "Appearance", value: this.inputControlAppearance, options: [
                 { label: 'Outline', value: 'outline' },
                 { label: 'Underline', value: 'underline' },
                 { label: 'Filled Lighter', value: 'filled-lighter' },
                 { label: 'Filled Darker', value: 'filled-darker' },
-            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), h("udp-fluent-dropdown", { key: 'f0b15b1d858e92f77a06d63596a427f9183e62e2', label: "Control Size", value: this.inputControlSize, options: [
+            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), h("udp-fluent-dropdown", { key: 'ba01afa7f9b176741781818ca5e4b3342a9621fb', label: "Control Size", value: this.inputControlSize, options: [
                 { label: 'Small', value: 'small' },
                 { label: 'Medium', value: 'medium' },
                 { label: 'Large', value: 'large' },
-            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: '005c5ffb9ebf721740eaa2673cd845404cc4ee35', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: 'e9ef406856823a172cb63daea3c76277fc5cbce9', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'a1152b15f0dc2b99eca7bdff833477792db7057d', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: 'b92492d470a0977c46ac8644a69a60f89a3ce0d0', style: {
+            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: 'e5732edab996b12c60eaba885c5f2348ce51b2db', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: '1db41ed259be9907ea3a18cf3137eb6811a6b103', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'c2c7ac38c8277ffd3e193576973a2067c8c4d109', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: '2c9bd808f492554642680aba181876402d33399a', style: {
                 margin: '0.75rem 0 0',
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
-            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-fluent-text-input", { key: '3d937d30a764695a8932cedbed9af4e3dd4118cb', label: "Text Input", placeholder: "Enter text...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test" }), h("udp-fluent-text-input", { key: '66d9f414545f2c9992328826b64bf42703f35c33', label: "Email Input", type: "email", placeholder: "Enter email...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test@gmail.com" }), h("udp-fluent-text-input", { key: '8d3b426a56e0a86a0e78a875719a74d7dc7ce43c', label: "Number Input", type: "number", placeholder: "Enter number...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '123' }), h("udp-date-input", { key: '535f4ccd62e3108c9b5bc1da24223405d9e5dcdb', label: "Date Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30' }), h("udp-date-time-input", { key: '34f858ef5a11a4f9ebc4fe65f72c536360d4e743', label: "Date Time Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30T12:00:00' }), h("udp-time-input", { key: 'f0b230d15fb904a1dd3b0f5d876ff51e7ce7763b', label: "Time Input", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '12:00' }), h("udp-textarea", { key: '03fe8ff7eeab6af68f9ff5148839619f34ee4709', label: "Textarea", placeholder: "Tell us about yourself...", autoResize: true, required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: 'test' }), h("udp-fluent-dropdown", { key: 'df359ee3bae82e9a41c5501aae3b372c56316b7c', label: "Dropdown", placeholder: "Select an option...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
+            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-fluent-text-input", { key: '1bcc06ec36215c916ef12f2d5eb6ea660d2b16a2', label: "Text Input", placeholder: "Enter text...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test" }), h("udp-fluent-text-input", { key: '89b772ea4fa4ba00e694790959ff0688ec727bb2', label: "Email Input", type: "email", placeholder: "Enter email...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test@gmail.com" }), h("udp-fluent-text-input", { key: '201d9fe86f4cb25fbbb7a8aa00e5aebc4cfa3de0', label: "Number Input", type: "number", placeholder: "Enter number...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '123' }), h("udp-date-input", { key: '7dd9d1a6fe13c95807c83d0d6cafa630a1a2b9c2', label: "Date Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30' }), h("udp-date-time-input", { key: '836ca8989445f862ec7e4da197ac8f0b7c557c90', label: "Date Time Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30T12:00:00' }), h("udp-time-input", { key: 'b6c349af19bf76dacae9fd2eb03cf493b2e6fb6d', label: "Time Input", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '12:00' }), h("udp-textarea", { key: 'b8cf77007b6ed7ea0f4903ca9789d6f75fb6c588', label: "Textarea", placeholder: "Tell us about yourself...", autoResize: true, required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: 'test' }), h("udp-fluent-dropdown", { key: 'e215c9f73c96f9d04b9e58242e06af0763b50a06', label: "Dropdown", placeholder: "Select an option...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
                 { label: 'Option 1', value: 'option1' },
                 { label: 'Option 2', value: 'option2' },
                 { label: 'Option 3', value: 'option3' },
-            ], controlSize: this.inputControlSize, multiple: true }), h("udp-autocomplete", { key: '3eb2ced72076501dea8b74a41845c4a16d6ba617', label: "Autocomplete", placeholder: "Type to search...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
+            ], controlSize: this.inputControlSize, multiple: true }), h("udp-autocomplete", { key: '4dd6158d4eb44f8573fe1a89813c0778d2a4b0c4', label: "Autocomplete", placeholder: "Type to search...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
                 { label: 'Apple', value: 'apple' },
                 { label: 'Banana', value: 'banana' },
                 { label: 'Cherry', value: 'cherry' },
                 { label: 'Date', value: 'date' },
                 { label: 'Elderberry', value: 'elderberry' },
-            ], controlSize: this.inputControlSize }), h("udp-fluent-checkbox", { key: '9308fbce7b00a4c89a3c7bb0c801cd80501c478a', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '657deb6c8cd263c2fffd90399e7656b91a2fd89f', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '26a07b571029c841b70cb0ee5446cfc7f09a9c04', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: '309f41bef2e8585adeac9e52553cf6fae7e33b39', label: "Radio Group", disabled: this.inputControlDisabled, items: [
+            ], controlSize: this.inputControlSize }), h("udp-fluent-checkbox", { key: 'bc4ee065153d67b6eb67074e5447e1c49c305cac', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '80ec3e6a600fb60d89511355c8932eef6be076fc', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '6e367840c051db800dd02c0ad71655fe7a18fed7', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: '42c1ce960ddc437c35c3335eea46a6108e4dd69e', label: "Radio Group", disabled: this.inputControlDisabled, items: [
                 { label: 'Option A', value: 'a' },
                 { label: 'Option B', value: 'b' },
                 { label: 'Option C', value: 'c' },
-            ], value: "a" }))), h("udp-tab-panel", { key: 'f1ecf23f87041001da0021f437f18e03f0bb85db', id: "data-display", activeTabId: this.currentTab }, h("div", { key: '2dd83171c820be3ed99863be569fd1c5ba3ea7f3', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: 'a2663c456df3d68add0e02fff7892f16116c80a0' }, h("h3", { key: '3a16270d16641ff0cc31ae3d2452a97107b7fdb7' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: 'c1bfc1a8e403da78b525042f648e34f753eb0eaf', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: 'c9ec3ba19a9555b4980faa2e09f8c99cb6da7df1', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: '9d6d7369574b84b8177cfc8e37b393ec12321138' }, h("h3", { key: 'dfd4e57c46dbf3a361d429ee657703d2d923bd68' }, "Accordion Example"), h("udp-accordion", { key: '4d33e3ba2a5622373098c4009b77d9de798c0a00', items: [
+            ], value: "a" }))), h("udp-tab-panel", { key: '77fdaf9cfbc1ecfbe95de9164bcf0decdee4bb12', id: "data-display", activeTabId: this.currentTab }, h("div", { key: '2bf6711e09b598cb7378fddeb54eba1448ef531f', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: '6e32607f36fd0c4172f8c1fbac1c54a45bb92f99' }, h("h3", { key: '3398cc45b6cf68f2aa43a971992a0fcb9ba20b44' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: '8e33b49ba9ec0846e98828c04c0d068e23c69564', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: '40cbeb7889dcf3b85a0152571c9b415bd38b3f22', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: 'c5b9b9ac6697aaec324d3e228cc512446fac2fd3' }, h("h3", { key: '401301b8a2e88501a42f5f00ecdb122de09109c8' }, "Accordion Example"), h("udp-accordion", { key: 'f24bf1be554c94b9f444c9572de8668896d96d60', items: [
                 {
                     id: 'simple',
                     label: 'Simple Item (Default)',
@@ -2550,29 +2590,29 @@ const TestComponentsPage = class {
                     id: 'complex-slotted',
                     // complex content provided via slots below
                 },
-            ] }, h("span", { key: 'e0095d1d5d15c0adef721f2372e5b558a5926906', slot: "complex-slotted-heading" }, h("div", { key: 'c1e733caa4464e785459f69f22db2ebe75accf3e', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: '2f9e4588e86883651361bc39437bce989dddc7ac', name: "star", size: "md" }), h("span", { key: '4542ed5a9ffd9f7bbc1cf542cae5493d31780d9b' }, "Complex Slotted Header"), h("udp-chip", { key: 'fa3e7670727136e2ef43c34f0825ca4cbeae1c23', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: '11b2cf385dea3371195618f9c057a593b266d80c', slot: "complex-slotted-content" }, h("p", { key: '7b13306b153b2f0c0196838c63260992f304c956' }, "This content uses slots for complete control.", h("br", { key: '69cce49d784bd09eebabf0ab6b7bca47fd770d05' }), h("span", { key: 'abc46f5c7f8b7452776d30bcbfe0e2ca7943058b', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: '6f5b91255e2fbbfd8c8b302c21cb7de24fcfd4fa', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: 'f7dd65c2f4536b4e98931f5b592c3a0656d71e13', size: "small" }, "Action A"), h("udp-fluent-button", { key: '8a83eb1c7ccff9909e1b4f3bbc1f2224f5153113', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '939a03ff7e36e3df770a299c4a1a25138cd4f45d' }, h("h3", { key: 'd2e76453bebc0fdd91429da201514e1d56bd20c3' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '8db8298cf510e1a50ea1b67f41e0c23fa458e809', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: 'f4201211c20064c7f22d30e67181e97d1ca3ba9d' }, "Hover me"))), h("div", { key: '52e7dde59c62af7433a5559e129a0fe713aac75a' }, h("h3", { key: 'c1b2d4f6768893d6f84422810b75c15dd98a46d1' }, "Message Bar Example"), h("div", { key: '8a50ac229bf0c5ff1f03860d1a938f5474d7254e', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: '76e2118c45a3a08e800fd408fab363a1c1b6ae18', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: 'e93928dfa59bb8815c3ce703e918ce71f0bf1806', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: '878385a01f2f96ada074b44902266df6a394d33b', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: '02e09d8c7767f5c194d29cc877ddc6ea0554cf22', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: '49510ae2d82cc553c3329864da8775c3d78b168d', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: '37208b185babce242fc5c62e25c5f3044b2e6e54', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '3c558827933be457a0adc20112647f0065caf93d', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: '4f51260283cf1174a60c69ba97ac82a1814bda0d' }, h("h3", { key: 'a6c2bc51972a24fc364c8fc5fbfd5c26bc21394f' }, "Progress Bar Examples"), h("h4", { key: '67a670df625e12a0d2401abd7dae7d41b1830df5' }, "Indeterminate"), h("udp-progress-bar", { key: '2e375f4f5176b42680ec65b637c4ddafc65f53f0', thickness: "large" }), h("h4", { key: '4c59e0479ce239352ab6b10d605d04dd3562b0a8' }, "Determinate (Success)"), h("udp-progress-bar", { key: 'f7cf0e76da3b80b90a5c74400bd3cbf6e4a2e680', value: 75, validationState: "success", shape: "square" }), h("h4", { key: 'd1e5025a5c74b1dbad8de58351926eae9d45d158' }, "Interactive"), h("div", { key: '0a33ed005c6b3089fae5d1642f0590cbbeeeaa03', style: {
+            ] }, h("span", { key: 'ae3f3a9bf405fd5e851debc02f9e76ada576d5b5', slot: "complex-slotted-heading" }, h("div", { key: 'fa1c0adc0c5005ff8acd6b350a03e41883704764', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: 'f97f8e764feb2d77fc79767dcb45d3f0fe2ae9b4', name: "star", size: "md" }), h("span", { key: '6badcee5af6ccaac8e23da312b5141f858eea384' }, "Complex Slotted Header"), h("udp-chip", { key: '74328823d59e5508a11bf2fddaf91ee640c01817', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: 'e816c8ea48e64c3d21f17dd16d3b887f5d8f4690', slot: "complex-slotted-content" }, h("p", { key: '82709cbd97bfc95cff776dec0f34defbb842f30b' }, "This content uses slots for complete control.", h("br", { key: 'a164b912bb1fdf8e4c90a8fa9b9d0efb1b520387' }), h("span", { key: 'd3974ad2398721510eda3be33991eeaab4b10a89', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: '019147e252c0d8a78cbb8c755aa3983eab72ae98', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: 'dcb6c913ce3a460cfabfd30ce221a0f16c08185e', size: "small" }, "Action A"), h("udp-fluent-button", { key: 'cbb8b41e5c020c1339c23b03369d5863f0504628', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '6a1ff2d1e1b7df9fc7581bec977e48d39ca70c88' }, h("h3", { key: '22ce55c72c726aa45e60f12da34ae3a56f62c297' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '135947f4097c79cfc6b548d2cd263533c2640e05', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: '46d2dfd14852bf3f6223f15f85b5601d8e87caeb' }, "Hover me"))), h("div", { key: '6709b19d3c5d890829b91c9acca6ee68c208884a' }, h("h3", { key: '28bd6a5155973ee5a918789563e637e4d69ccc64' }, "Message Bar Example"), h("div", { key: '52cf20b28a27d8068370ee82d49c89299bc39195', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: '7e9e931d762b851a4ccb2fbeb9d417e64d0720f3', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: '2f9be85b01d731556fa9d756ddb2f260fd17e982', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: '3ec65b1bb0f04447033c63dbbcd9f1074e6ed066', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: 'ee74859f779e23707a1113a0d38e594846ba9cde', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: 'f5af3b8d64e49f51f6a4041091bddbb7d4000f45', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: 'dc1d5a7e89796415354c0fb3188be90300571227', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '7c2b86365dbc0999822dc5b25c4312287748b449', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: 'ad70349e1a5cbc2c345871c7f993870d155c5fb2' }, h("h3", { key: '8d761f238da5f183af39d5133b421742863f4842' }, "Progress Bar Examples"), h("h4", { key: 'd6ef6d3eded2d0d7332bd382bb7647c38ee212b9' }, "Indeterminate"), h("udp-progress-bar", { key: '85c12d201fe8b96b4ce5893e0bdfb1fada820f6c', thickness: "large" }), h("h4", { key: '07d84941bd21e6cf5c6c0235fd2ab15c505c5e0c' }, "Determinate (Success)"), h("udp-progress-bar", { key: 'e4b8a2973657ff90e0be96720d8b8cd3cc446793', value: 75, validationState: "success", shape: "square" }), h("h4", { key: '846cff45e7b69fe8eeae43b79c3ededce2005c8c' }, "Interactive"), h("div", { key: 'e73b5c33064a47a278f3238100996e7960c5038e', style: {
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
                 marginBottom: '1rem',
-            } }, h("udp-fluent-text-input", { key: 'ca5e4881e71d4a18b22cba6aa9c8e22e4a4fded4', label: "Set Progress", type: "number", value: (_a = this.progressValue) === null || _a === void 0 ? void 0 : _a.toString(), onValueChanged: e => (this.progressValue = parseInt(e.detail)) })), h("udp-progress-bar", { key: 'd868205951df4e6860c19d0182e2a9f10cccbc97', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: 'a2788315bdaf10be38463dea43cfabca25a9418a' }, h("h3", { key: '50f1386cc287e0667ca8421727476ef1f4dd45d2' }, "Divider Examples"), h("p", { key: 'ccf33ddc6c896cdf5bcbd08ac8f54166f027e367' }, "Default Divider:"), h("udp-fluent-divider", { key: 'ac5cdbdfff8f1a649783714f74a8b5ff177b9f93' }), h("p", { key: '3e59d4272fa7b7b876759b5f860db8c304a3f113' }, "Align Content:"), h("udp-fluent-divider", { key: '6925c8e565161500f7df2f7555b2602a38f90604', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: '584a0d2284075ab5a07910d7ec61c4cc79315585', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: '6e6b0254dcb64585981a14c7bc1b807fb4251ce8', "align-content": "end" }, "End"), h("p", { key: 'e0389d14de774a268b3a50062d354ee87bc805eb' }, "Appearance:"), h("udp-fluent-divider", { key: 'e173c248b31c2e1e91cbf20dd7a38b489a1510af', appearance: "strong" }, h("udp-icon", { key: '569e5d02ca5d955acc228b82a4953bea767f6240', iconName: "add" })), h("div", { key: '33ea1433d1ef48663db1daa38d8d9a507a980fb5', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'c5806cc0d65b76dc3cf1d3d2cc25a26331370102', appearance: "brand" }, "Brand"), h("div", { key: 'eccef1e18ce5afcee8910abce71d4708afc10fd8', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'a9e475250065e5fc6346be0bf805d336ad368d21', appearance: "subtle" }, "Subtle"), h("p", { key: 'ec7747c9ee1d65905a535404165960033bbc9fce' }, "Vertical Divider (inside flex container):"), h("div", { key: '2bc2f4bf5bc7adc4374e19b62df34f004a1a555d', style: {
+            } }, h("udp-fluent-text-input", { key: '740dd2da608e8b6af3f2107602ac3857db4b5af4', label: "Set Progress", type: "number", value: (_a = this.progressValue) === null || _a === void 0 ? void 0 : _a.toString(), onValueChanged: e => (this.progressValue = parseInt(e.detail)) })), h("udp-progress-bar", { key: 'b2dda92b20fcfeade5aa48926e486bbdfc6156b7', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: 'c1b029c3d0d676c8b87e11e25e0b5e1e3bb4c662' }, h("h3", { key: 'ce0ce2425846b779ad62f913726011df4d24aa38' }, "Divider Examples"), h("p", { key: '23bc63207378d6578e9c9409b3bf3755a421b27b' }, "Default Divider:"), h("udp-fluent-divider", { key: '9e4c3ae8be07c5b6c426bb329264770156dc9116' }), h("p", { key: '990820751b2c9dc457dd995742ab6aaef75c20cc' }, "Align Content:"), h("udp-fluent-divider", { key: 'ccac08a2a35b75b56bee460abdb28c10f5686694', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: 'e58ecd7c9ab898dc891a397aa3050d0268d3c2e0', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: 'cb5dede99f948589591e9a38636c0368c20fb9f0', "align-content": "end" }, "End"), h("p", { key: 'b31a3bcd204dc33f88930a75c0b4f78d36a6a6b4' }, "Appearance:"), h("udp-fluent-divider", { key: 'b109e20f375e9c7c1582d2a87b44b91fdae86867', appearance: "strong" }, h("udp-icon", { key: '8c674e724aa6b996c171f865a5bbf28c9b6350e1', iconName: "add" })), h("div", { key: '149502fc02f6bd96a335b433745b7b184b689f90', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'd807ac65751e7278c340a15967946cc8df6d8b8e', appearance: "brand" }, "Brand"), h("div", { key: 'd98881c01cfbd4d736b26942ca18a0fee698d65f', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'da12ebc90414cb2db322e36dae167a2a7e1292e1', appearance: "subtle" }, "Subtle"), h("p", { key: '7130f6f91e9f8f1443d1dffec3c4f32cf9b9a67f' }, "Vertical Divider (inside flex container):"), h("div", { key: '5c2b2bb4db35c6396171cdf4c5b9232c9f288d57', style: {
                 display: 'flex',
                 height: '50px',
                 alignItems: 'center',
                 border: '1px solid #ccc',
                 padding: '10px',
-            } }, h("span", { key: '333244c443e04fe684c9e3c9301042bcccf4cbaf' }, "Item 1"), h("udp-fluent-divider", { key: '3d5579d1647af12b6d21eceaac68b58a12f1dcad', orientation: "vertical" }), h("span", { key: '256a9111d76dcc7dba202c240c5287a01b62a10d' }, "Item 2"), h("udp-fluent-divider", { key: 'af3455b99d29ac67e1040616ff37675cd3c0b78a', orientation: "vertical", appearance: "brand" }), h("span", { key: '805e66f370a4dd2a19e63b54a3e1623433674306' }, "Item 3"))), h("div", { key: 'e94ac056e8a7308f4c7d5bed1cb7dc97f47c0460' }, h("h3", { key: '38a7857c73ebfcc141a79b07f29f3ee9e28973f2' }, "Fluent Icon Examples"), h("p", { key: 'd08ecc4ed38eb7e35f9e19547dd63a41434df78c' }, "Basic usage (new simplified API):"), h("div", { key: '5001e48a61e5ec5ca8848066ce9b736633e2f0d8', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '13161f20c4c1aee65bf917cc75af9ff2c26fdcb9', name: "add" }), h("udp-fluent-icon", { key: '9341532c7e670248e874822ac19aeeb1cae58a72', name: "home" }), h("udp-fluent-icon", { key: '5155515f81ca248dc30ad0c533036883e47be5a3', name: "settings" })), h("p", { key: '819e70763a2371b2f9eaa8177868735ac7a8855f' }, "Colored:"), h("div", { key: '537e6ccbc81061d515f5f3150bc63982579d0da9', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '0ca369a1a17e13cb39433b1a2c77d31dd00e87f9', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: '4ecd0d2071ca6f3bad36b4a9569ffeee66fd13c6', name: "delete", color: "red" })), h("p", { key: 'ad2d75ebfae5854ff09cf2af522172b294998953' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: 'b7835777ff815d941a77ac5f0983f26ebe7ac652', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'ba09140d10a02f62eb813d9da88748b815ffa664', name: "home", size: "xs" }), h("udp-fluent-icon", { key: '351ee06fb8894f14f9d5960634bd4076321f385a', name: "home", size: "sm" }), h("udp-fluent-icon", { key: 'e6e0a670dd30d7e3629a406e137912658d432b33', name: "home", size: "md" }), h("udp-fluent-icon", { key: '5e6cbd7a3e03a06144c64035a1c39d41a82cb7af', name: "home", size: "lg" })), h("p", { key: 'c7ecefd4f36deedbe329e66f0a81d0365c3d639a' }, "Variants (regular vs filled):"), h("div", { key: '801197df75e2f40179e73f83d79086606e66f334', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'aa8355a86481bdd99ba74ea2eeeb3408736212d0', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '7298e568df494b18530b5a5dfc7753b1e4a66e05', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: '471a56a7d6c01a2690f4d445768856f2b1e30d04', id: "text", activeTabId: this.currentTab }, h("div", { key: '1e633f39b3e1dcc414d7f3d3b525b9160db2cffa', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '5de23485afe65df129274898174363501e42bacf' }, "Text Component - All Variants"), h("div", { key: '4ff6cc7eb098dd90150cebed4ddea92d3013212c' }, h("h4", { key: '6a902e48f73f6fd2ec319814ec743db7b340a782' }, "Display Variant"), h("udp-text", { key: 'acef62c4fda7db942504ecb2e884ddc7d7eb22ff', variant: "display" }, "Display Text (h1)")), h("div", { key: '61eadcedee69c40b819826a4e4a92e03dfd2449f' }, h("h4", { key: 'f590ade708fb42d017046e2118aa799eb51a5691' }, "Large Title Variant"), h("udp-text", { key: 'b532f6d0aaf49db7aa0a3789813d6a296d0a5401', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: 'fd6dccfbffbf3175044542481a99696573c98f55' }, h("h4", { key: '1b1e2a101ef12ad43b2d53c7ea95516e5a830845' }, "Title Variants"), h("udp-text", { key: '3240124338197c4ded60512513ba6bd6fa68686e', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: '44dce98a19cc404762f78181483f80039e60d9ec', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: 'abdc383cd4be36ad9eb5c040438c221e199de3ba', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: '41771c664381345589ea21105b290ba2b3a09404' }, h("h4", { key: 'd28fc88db883a181e7d2a165c68944fe322cc97b' }, "Subtitle Variants"), h("udp-text", { key: 'ba46a5e1064677c2f5300fd75ba8c45adf9bee99', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: '0bc952ab545b33354642e5cd9af2d83fac31cb12', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: '4c95eba2483b636fa3e11fd11186a69a2f4174a7' }, h("h4", { key: '8aabec17542a60378eebe4f92f0cbde10d5bc4b1' }, "Body Variants"), h("udp-text", { key: '07ac26bb90ffd8c589eeed2c4f3f3b92953e1cba', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: '413f05881746ce9f46cd6556e0d796e0e9452576', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: '45e302e95c492ec4db14f2c4bc57a67be8331731', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: '60891ea2f4bdd3140d976678a793f7f64a137863', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: 'c2254624baf7ff5f52f035e1f077cfe23fc1d5c5' }, h("h4", { key: 'af7e6cc35c37420e821ec8cb900884d9429fa44e' }, "Caption Variants"), h("udp-text", { key: '29097b5ad8aeacf7fca44a9d701ce644f9bcb5ba', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: '58e4525489bd8a6daf94b1cc935347cedb612111' }), h("udp-text", { key: '81daeb313d62c34225e4ce29d1701800cfd3c05a', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: 'd9b683d01870f2f11ddde6ec6aff6be7436a64f7' }), h("udp-text", { key: 'c0867df8e47aa0d43a84c924cafddd2051f58d3d', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: '99a9dbbd754d53f93a3f615876fc6c24cd3b4dfd' }), h("udp-text", { key: '8dddbbe824472dec44bfa4d9009c5725bbad342a', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: 'ea90994227bfdc4fad84e6ac12333700808a357c' }), h("udp-text", { key: '47084c2285fffe3f5a9de53f2db5c7b54459d2ec', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: '59bdddec5575a63ccdbbbdaf8f70b9252755c98c' }, h("h4", { key: '9e0734307e09a4085c647337b4d5c173c3817b40' }, "Text Alignment"), h("udp-text", { key: '29aea473bff9cfee154a36744ecf0a375c0d19e2', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: '2d87e540a75ef43e752aa1066ec94fb523c50188', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: '54e3d78cf5e5fefad49775c083debd94e75ed89c', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: 'aa2394c29efc6d5ec11d6db2e829e68cc4cd4851' }, h("h4", { key: '9d2028fc32c998fffc3b1ff9011869dc77f5ead5' }, "Text Styling"), h("udp-text", { key: '235c1501afd71ed2dca479d19dd0fa0e55b9ef26', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '28a3cdff1c88252a3fd6b44587967d1c11596fa6', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: 'd9eea48e8c60c7d7744231da7ecaeac283223dc5', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: 'f3514a2f671c3edace30a6d712052237a19a0a32', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: '281306d725bf18e5aa11f14662feb75aad9721e0' }, h("h4", { key: '23f3c8e2eac16d5a9bb43fb1792963946e2be22b' }, "Custom Semantic Tags"), h("udp-text", { key: 'e5ef7c2a3c1355556e2a51abf1f094f26bc2e462', as: "h1" }, "text as h1 element"), h("udp-text", { key: 'c4f2df5862bdbbcd91cfb6a8a623c28525bd0957', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: '0a1ebbd5a0961885b543f12d487a5ca52cac57e0' }, h("h4", { key: 'b289f4567b7f99a913f4c1949de4aee1f88dbba1' }, "Font Variants"), h("udp-text", { key: '135e5d9d20806c7d280b0eba2108776b04aed0b2', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: '48906e8aa6d9ea2f10efc722a3b12b1cc5951505', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: '8a79dbe8fcc8c80002c99d3e201bcb8a7279116e', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: 'd25677b707f4c0a49012f00d6111786167f8f5be' }, h("h4", { key: 'f2ecbc915ba2445b9816657572558032ef85b5c6' }, "Size Override"), h("udp-text", { key: '2a508d8ddf7b2c968e4e405999b23cd129cee2cc', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: 'eb37e0dec4fd6d66da85f06a87a271729750fdd7', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '2462846ea539b4f1ec06e41e6c7e896967ca8d4e', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: '55a5b70a842b2ac38b74b3982a7d6eeae2fa29f7' }, h("h4", { key: '97f984363429aea12b614e740a6225a97cb438c7' }, "Lists"), h("udp-text", { key: 'a229c279bab6b11d969ad97276fa6ce1c4591832', variant: "body1", as: "ul" }, h("li", { key: 'bc878ae9b273a672ab561a858cf47013fd4c6c4f' }, "First list item"), h("li", { key: '24db49505571ef816c51305fdca0c3c5d8ade7bb' }, "Second list item"), h("li", { key: 'cb9021a8bb3c036e8fe264375271a8587c164bd3' }, "Third list item")), h("udp-text", { key: '01836f6efcae5a35a2ead4b59fb399c487268217', variant: "body1", as: "ol" }, h("li", { key: 'fc184bdf81d7cd33aee1617a4b300a254601e39b' }, "First ordered item"), h("li", { key: '7a03ba1729a89c51274ea683617bfa8347929d94' }, "Second ordered item"), h("li", { key: 'd55e0124eeeaa0dd5d2d725d004ff35436627efb' }, "Third ordered item"))))), h("udp-tab-panel", { key: '00aa0d4e2c042bbf12fa4eb9a745c4794954c1e6', id: "menus", activeTabId: this.currentTab }, h("div", { key: '811cc275049f45ab679f64998720e89e8264896d', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: 'd6f5ca6e7afe5f1985fbdd231448c3ae663d0013' }, h("udp-fluent-menu", { key: 'a9d41b1041d1f2a48f06da5b92cc9c34825dfc12', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: '097ca2e38c7da71d98f048c019c55491ab695a8f' }, h("udp-fluent-menu", { key: '29598112299fc3de48842c32ff411d9ebd4e934b', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: '0afa3ae23f102753411af589148e3abdc17d46f5' }, h("udp-fluent-menu", { key: '88563137aba8c16cc406090fc3c8bb417064c0f2', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: '9f86d8231f2ceac2b29292d8082d6a3deaa3b9ed', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: 'ffde4c595153b108773f080e8742b041c42d26a4', slot: "slot-test-end", style: {
+            } }, h("span", { key: '949c3f42383aeb454af50263566939746ae02bfe' }, "Item 1"), h("udp-fluent-divider", { key: '32501ff8f93a48e9bcb3da217283698e421e162e', orientation: "vertical" }), h("span", { key: 'e59aea9c027fec6cb4fec15f5a65162f5e0555a3' }, "Item 2"), h("udp-fluent-divider", { key: 'b7f357dc17bf5debb609a3c5cd5532cef0859d26', orientation: "vertical", appearance: "brand" }), h("span", { key: 'd0a6b9254ae004e7f137dc569b653f12039d2d51' }, "Item 3"))), h("div", { key: 'afb0078edd8f1fa66461dbe778614ef6b409ed8d' }, h("h3", { key: '8065dbf16dd3114762ddbefbc443937bfd7602d9' }, "Fluent Icon Examples"), h("p", { key: '51044c3113f5291337d2010de72d64841028fe83' }, "Basic usage (new simplified API):"), h("div", { key: '8bc7c0797842640871e7d031f5a5372f1ed152a6', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '9ee788cbb5cd10e59965f8b963c1f5ea0204d041', name: "add" }), h("udp-fluent-icon", { key: '8901e7b5a636b00df07065e78b17b5e7f70c923f', name: "home" }), h("udp-fluent-icon", { key: '6f3b282efe40abe6ea726d432a649c8296e0bda9', name: "settings" })), h("p", { key: '52ef93c801604ef54a0f3a1c4df63da18394e133' }, "Colored:"), h("div", { key: 'b1c65ab33791399c5315a477db9ef727e65038df', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'f5f6b380d9ee2d12ddfed4ecd3877c8abb024fbc', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: 'c3208182c81fc385e901caf2661480a17e18227b', name: "delete", color: "red" })), h("p", { key: '1f6c84b57822e26d98e217d895cb7400beea9b7f' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: '46ef5ec269427ff516300029a19dd340584dfd71', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'd4dd1aa55b8e5be00a30294e74114c297b68b14c', name: "home", size: "xs" }), h("udp-fluent-icon", { key: 'ef7a5fed6b38072b4ed7af72c54a3fd9c630f6d4', name: "home", size: "sm" }), h("udp-fluent-icon", { key: '703428e322d4690b431f7702b262ecb9a39d668c', name: "home", size: "md" }), h("udp-fluent-icon", { key: '3b0260ec7ff93e5f6fb759c3b8bf5dd2ead5f536', name: "home", size: "lg" })), h("p", { key: 'c6305854d59e3379ee3d1941b9426eaba1eea838' }, "Variants (regular vs filled):"), h("div", { key: 'a3e344ba6f6c0e2d131e8714f2fb68c5349f84b0', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '634d1679ff10b3fc68885ccb6e82ecbae533d9f3', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '1808ffc37a71b6ec3e21d8061aa22b8f767606c3', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: '9061491c7408ef518c93e4510c0342f4196b00a5', id: "text", activeTabId: this.currentTab }, h("div", { key: '42158fd01324be5ac6580d127e3cf517db55800b', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '19955508b8ce1e974f2718b3f368ff2249563e76' }, "Text Component - All Variants"), h("div", { key: 'cd20ac11a81b0a18840a65fb25776ca7ba9ba8f0' }, h("h4", { key: 'fc43111ddef3bf567c20b4f60843144abdbc73cd' }, "Display Variant"), h("udp-text", { key: '815fc4167ae4cb1855db99460af931c54428c422', variant: "display" }, "Display Text (h1)")), h("div", { key: 'b4b2b4052cc782e20d0c7ed4bfc53661c7e8067b' }, h("h4", { key: '208f0f42c37d1da8798bb1abeec4d9312ed9e7e1' }, "Large Title Variant"), h("udp-text", { key: 'f90529216b82c76cc2fd883cc3788c01f12a1fcd', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: '5953ab7ce98fc9ede62e35266b58a7fefc055531' }, h("h4", { key: '6f89ce02716c6f55724907fb150a2fed11d0da1b' }, "Title Variants"), h("udp-text", { key: '6becaa1002625599a274c54fef2a8d7392836aaf', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: '26107029e3ff5f2f3324080cfcbc4f927f7cab17', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: '8efa0ccb5fe059e835f1249dcad355921a5d7d64', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: '82102e3003627b38457b6080657f0d1df1bf6d40' }, h("h4", { key: 'ff3e79501db293156d8cf8df92d27c2acd4d657b' }, "Subtitle Variants"), h("udp-text", { key: '174c06c8299b92577a434ffb93f0944cdcbcc8a7', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: '7de1a0ca543e14f9eef0856750c5cb3b6b09bd24', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: '39fe2b088383f16fa2af20ea26fd2f67af619176' }, h("h4", { key: '472e5693b40fec8fae2dd5b75ab59ac2f8fe7e95' }, "Body Variants"), h("udp-text", { key: '2aee779b847fea987a9cd08035c240ceed7d85be', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: 'a2729ead635e58a09332ed8e11e7c6aa057b6d8c', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: 'cbadb54e7c02a661dffa6eec403bc30978bf73e8', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: 'df56890ce3b82fbaf497ad094cf86a3a8b7771e0', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: '4d3e11a28bc6981e5d1438d4aff3f6ef570af346' }, h("h4", { key: 'e55f6012ac4b09ddf2a961768e6c3326c719f409' }, "Caption Variants"), h("udp-text", { key: '101f698517f16e40f1bc5a9426d3d595ed6e0a9d', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: 'c82297bb0390e94c31e560a7b6435504ff25abe9' }), h("udp-text", { key: '892f817148acb710d89167bb7e86a447993f6ee6', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: '49cc7284229bbe1bc365188e358e3835fbd38cee' }), h("udp-text", { key: '76414d1d212289c51723a55d97a5d3da6668112e', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: 'f2d4edd51aceba3c1b5797c0df6c44c73130614c' }), h("udp-text", { key: '9b87b6b4b833a6b70fca0d0391b1366a879b0b6f', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: '75910dcc73dae664d7f82ee2ffc92c8c86adf812' }), h("udp-text", { key: '4ac1b89267ba36e4b85b0479a68b979523e51e1a', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: '33d91d6bc2df8df1cdafa8708cb69eae03f5d680' }, h("h4", { key: '00cfc23ea8e5032482e0d659d47f876e28f5f014' }, "Text Alignment"), h("udp-text", { key: '52850e1292d7986ca7161904bc09135d453d9c20', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: 'c41f33e30c168e4cb5f802753605c94b410481d2', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: 'b7c0fabbf8587e0ab2f73d827bc3f829b2147576', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: '703ee79f1eaae0231ac61c266c615f5ea5fec6d5' }, h("h4", { key: '1054bde800cf17649dbecb1c81a879e0b697e335' }, "Text Styling"), h("udp-text", { key: '7821df898438bf0702d039787ad00b0be9eca6aa', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '3bc080c0ee2267c0c1339136e0020cbd91571b17', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: '4caebcfd35cc80f55158258daf79aa407633fc4a', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: '9e7073072d1d5680d7d388215d0ee1102cad78f6', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: '77d272c771c34dba5f6f99fb7ee720d74c58c743' }, h("h4", { key: '17ece7137fe4f964d94e3c483fb84ca4d7f32ded' }, "Custom Semantic Tags"), h("udp-text", { key: '39755ecf77e42c99174074ae7b4eab2fe751177b', as: "h1" }, "text as h1 element"), h("udp-text", { key: '673b2f4bff5af8c2c0c56845805bf68dbda8b956', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: 'e8323a13cf76eda241134f81f886459d3ad01d6e' }, h("h4", { key: 'd9ab19fbfe1098b9fca8a08ddfa26753548eaa2b' }, "Font Variants"), h("udp-text", { key: 'e8664100b4ae37e4e9e69af3778c0bf45d0fbafc', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: '38e11a31a0d8bbf35264aa4861fc4afac36f2e8e', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: '52a7644e31499d395237032bf032f9ab6481977e', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: 'cdc154b83212b95e06c8ea2de0ba37154e1dabe7' }, h("h4", { key: 'd44a775577d89517f846c64f0feb89f3c2257e75' }, "Size Override"), h("udp-text", { key: '575308b06fdf994e4b7449fa3f5971d821a58d20', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: 'e596a8db486ef37988b2f2f51a6838faba14dc5d', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '65e1308031cdebe08a72f7793e87fc9906de4690', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: 'b83b0c0d342a0840bd810dd64cac688aa7b88160' }, h("h4", { key: '0be4f9b3587be6d6fcc2245a0f15bb6db5d3da4d' }, "Lists"), h("udp-text", { key: 'b14c6454f28ce670231b6e1844ed3be18d9f453b', variant: "body1", as: "ul" }, h("li", { key: '43d751fe5a10ec5f47fa4c5dc353b16c5255d86c' }, "First list item"), h("li", { key: 'f54de0ea90e30bda8134965448c15fed9d7c2d4c' }, "Second list item"), h("li", { key: '06cc15e35287b6974cb963c3e59e1ede8e52f30d' }, "Third list item")), h("udp-text", { key: 'f2178019b003d4567ae6b093f323ad8c190f57f3', variant: "body1", as: "ol" }, h("li", { key: '7c0b27016a2e2e8c100a4c2c6e2adf9e7b5994dc' }, "First ordered item"), h("li", { key: '4157bc9ebebde329fe1a819f79646dda4646c189' }, "Second ordered item"), h("li", { key: 'b5bd89272c56938cb2402ff4bdafd57939a399bb' }, "Third ordered item"))))), h("udp-tab-panel", { key: 'e09ec247aee6bbc0c14af4b2b88a3748f282635e', id: "menus", activeTabId: this.currentTab }, h("div", { key: '528334b1baaf0100c2e802bd3f68a454a81af316', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: '38b76ef11eba3a3df0e85f9079b5506f75b0acf4' }, h("udp-fluent-menu", { key: '1768f62fa29af9d8ca8ff6a4ea3231ecd6068b2d', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: 'd4f4c26e153846cc898a85c9bfe67eb749a8c1e8' }, h("udp-fluent-menu", { key: 'ec8fe2cfe87e2e07873915c8a9dacf75597fb72d', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: 'bee5317fe4aa275a5dc99d2657d68da2aef53034' }, h("udp-fluent-menu", { key: '8785cdb3add784ad2914ea3cbe33bee14de9c7ac', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: 'db4b00a2e2ca38188b624bbc1057c3c1c8e26a48', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: 'd8da4b6bdd4c55ff0d5868e1dac87d588046dc96', slot: "slot-test-end", style: {
                 backgroundColor: 'red',
                 color: 'white',
                 borderRadius: '4px',
                 padding: '2px 6px',
                 fontSize: '10px',
-            } }, "NEW"), h("span", { key: 'c18208462cb7bd71063159ad646caf9c565101cd', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: '30e7587aee8cfd03becc6d514691aace0f1c2376', style: {
+            } }, "NEW"), h("span", { key: 'fe2933edadf9522cbeb3f82b8d9a44557bfdf50f', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: 'eeb74aef44dccdf1f150a27aa700d80a9d5df277', style: {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 border: '1px dashed #ccc',
                 padding: '1rem',
-            } }, h("span", { key: '762ca1d47a2db2448a9089bdc469ca436c72933f', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: '4fe9598983700ab1143a77ff4ad1b4ce78b33bb7', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: 'd7337245b13d8fa5ae9554fafe06f63c801a4e5f', items: this.radioMenuItems, onCheckedChange: e => console.log('Radio item changed:', e.detail), label: "Radio Groups", buttonType: "icon", endIconName: "more_horizontal_20_regular", shape: "circular", appearance: "transparent", openOnContext: true }))), h("div", { key: 'ddc135648c7f8b71c7a9fbbe6cf2cf3a224f823b' }, h("h3", { key: '8a418188d541ab87c59300c1d2179564996a508a' }, "New Radio Group Example"), h("udp-fluent-menu", { key: '4a39541816cf1638fdfffb4ad187c9d379cdceb0', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '1557c0ab16fac836450687ccc2834614bf185137', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: '40455541289bfbfef536605de4eb303bb0f9ffda' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '9991dbf2551f8bdb408e5c1a47c8eb07e6e872dd', items: this.checkboxMenuItems, onCheckedChange: e => console.log('Checked changed:', e.detail), label: "Checkbox Groups", buttonType: "split", onPrimaryClick: () => console.log('Primary clicked'), shape: "circular" }, h("udp-icon", { key: 'f7dc12040b1ab6e1802fd21d6c3f038285b9425a', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: '3d86c0dd6c19e3cc668d1d84d07b60e04ecd04bb', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: '2538d05bffe48b2b3dbb6f620529267502cf97c7', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
+            } }, h("span", { key: 'a5bd09fbb99708406bb2e8e5089abc1c3f775b7b', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: 'ad2726ab98706cf206102bbd2015da142906f64d', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: 'ebd2f0e804f6dfe0ae8a4c2de4f1f54b5de746a4', items: this.radioMenuItems, onCheckedChange: e => console.log('Radio item changed:', e.detail), label: "Radio Groups", buttonType: "icon", endIconName: "more_horizontal_20_regular", shape: "circular", appearance: "transparent", openOnContext: true }))), h("div", { key: 'ad74c9b25c3cbb2205120c0140c520008c8467cc' }, h("h3", { key: 'ba375eaddee10a6e45af3800be15f72349808d36' }, "New Radio Group Example"), h("udp-fluent-menu", { key: '00bc97736e57296a4324b616dc46febbb0269a68', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '7e5a52bb673728dbfca40aec7dc932605269d0d4', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: '8f44971154efa9b004f15a34d854205d98babfdf' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '5561e2582c59b337c5519bd9aa65d7c5c68d84a3', items: this.checkboxMenuItems, onCheckedChange: e => console.log('Checked changed:', e.detail), label: "Checkbox Groups", buttonType: "split", onPrimaryClick: () => console.log('Primary clicked'), shape: "circular" }, h("udp-icon", { key: '8b1486b295de9e7685f42d4eace70ec408294201', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: 'b961a0a978e6d7d40b1837e91087b6061dc42af0', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: '207ddc9a9f3be697c933bf9cc6c6eaa37c21ab5c', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
                     { field: 'make' },
                     { field: 'model' },
                     { field: 'price' },
@@ -2583,7 +2623,7 @@ const TestComponentsPage = class {
                     { make: 'Toyota', model: 'Celica', price: 35000 },
                     { make: 'Ford', model: 'Mondeo', price: 32000 },
                     { make: 'Porsche', model: 'Boxster', price: 72000 },
-                ] })) })), h("udp-tab-panel", { key: '51242bef07ce5451b17f62bce5cc9d3b80abf50b', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: '725905abb2a3c7ed23e7d26036a208fada26ce3d' }, h("udp-fluent-button", { key: '63eefcb0a4f62c09989969eefdf5b7bf0e4e058f', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: 'ac8cb9c6d1db4c5a7c4210b45bb4de74fc81420b', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: '8b6afd18ab356bef42452d13414e59f7e48298eb' }, "This is a simple dialog example."), h("udp-fluent-button", { key: '51503ca5fe199aa362536c9130fef008de1c109d', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: '4b294c9a5607cf14df8903de901b7cff9339d682', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: 'dc7f6af08ab6da691afcf82ebc9dce5512eb9ddd', id: "cards", activeTabId: this.currentTab }, h("div", { key: '0a55a6c9498ed775ea709eae969594c6f4fa7e82', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '2595568dac2b549f8dd6137abeba2cdf16c297ee' }, "Cards"), h("h4", { key: '56b0092f6d9a7b6da5ed0e6eec087e559948c3e9' }, "Basic & Outlined (Default)"), h("div", { key: '21bebe2f6506edd17bfb3dad9976bdc78e488d3a', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6108171065bb5c15827aa0a3477119a57f55fbe3', appearance: "filled" }, h("div", { key: '4f086ca9005f1859df75c4f48f52e4480a3d0b5e', slot: "header" }, h("h3", { key: '8927c10308bb804ef48c97463d7f5339bfd4567a', style: { margin: '0' } }, "Basic Card"), h("span", { key: 'e988fa7d31762fd614b14fe99b6ec043d183751d', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: 'b7b01fbd8664204a902f9928b0211761a8158d0e' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: 'b150152d08e9a9e81cd6c2a6355bfe8ba6faf2af' }, "Elevated & Media"), h("div", { key: 'c7a7cd272f5f583c7cd2499cdaa68c53dbdf97f8', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6b368fdedf42fb39a7e8eb3124cdeb1fa3d3ca2b', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '753b9c7c4e65b6203053160ffd3b4ab9b998f822', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '83a5a539fea21401b7178454c71d26593ac4694c' }, "Card content"), h("div", { key: '794dddb085167b652a610481301fc3f44aabff89', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '4ec6cfaff63546f8d6d5ac02777eba7be0c34117', size: "small" }, "Action 1"), h("udp-fluent-button", { key: 'e79faa72b5e7bfbdd45c29bb47ff148328b5df9d', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: '1ea2a0741dd7d71cd351ead42755cbbdf7234cdf', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: '7ea870fffa152b84e5988fc27c41d28dc13660a6' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: '794f1b2ab96289083b8ef8319b03cc3f1f68f8ba', slot: "footer" }, h("udp-fluent-button", { key: '77661994153e89ceca4c29e4a2139665cd67d28a', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: 'c788c938e639a6159810d04a37a0b91835878fc7', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: 'b12ffb2a599acf4fe359afc97a25489273116050', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: '333e446b8be61229e08826199143071088e21010' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: '9ca29399787df637641f0e6c708d3ecd608f7aeb', appearance: "muted" }, h("h4", { key: '29f46d1b38921246004ac2dcf90bde0c9a1162c9', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: '83621f85fda9e172a80eaa1a37896a7cc1054f13' }, "Flat with subtle grey shading."))), h("h4", { key: '1355a4872433b49f73a70dbddcb925d95b79f185' }, "Horizontal & Sized"), h("div", { key: '92a9983cb7d2ad2c4c98d988fc42682fb1c10c2d', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: 'b39b6d3d70974d82a4fc5b340ce4174e8af98d52', orientation: "horizontal", width: "400px" }, h("div", { key: '09c86e6317d5ad50a53a237685b89ae2b22ef45c', slot: "preview", style: {
+                ] })) })), h("udp-tab-panel", { key: '611f7081c5f5a5e944bd3d61b2b0f7783090c7f9', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: '98e221d954d163cbb8f9e1daee827936088f1192' }, h("udp-fluent-button", { key: '8ea4674f753f07f7003bb54ede8beb21fba87221', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: 'fd736dbb071b2dbbacf85a7710ffacdebc662afc', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: '81228808f36ed196e99c3dc42cb4fb2dc630ec41' }, "This is a simple dialog example."), h("udp-fluent-button", { key: '9d97aa4e3e028b03642953654d844dd9d6c74c46', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: 'adfd1d446af0eb2598c1df104a2da110f920e40d', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: 'b9fb3c07db15a11f001351c324949ede16f207b2', id: "cards", activeTabId: this.currentTab }, h("div", { key: '6d1818cad04a021d24a118847515f7aa319726f2', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '9d156fb3b4b73423b94673335938d84e0cb7c211' }, "Cards"), h("h4", { key: 'a2ffc49ed0848d086ca9e2e2b38bdb5ce176300f' }, "Basic & Outlined (Default)"), h("div", { key: '2ef335dd7d90637cb6c8fc05b7301f42cfde1a70', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '70829bee58c2ec8285a44a444d53fbce8751b376', appearance: "filled" }, h("div", { key: 'dfcb7b7f222eaf8e77f245b51c94255130dd9012', slot: "header" }, h("h3", { key: 'f6b00b7fa2ec7a5891c9a7861181fae72a8c0173', style: { margin: '0' } }, "Basic Card"), h("span", { key: 'c8d30963ccf89f556d606123649c356e7c61425a', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: 'd05b6fe416a7c7357becd7e25c881c25c922afbd' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: '6d2e56c8b2d5767810f31f3a9d89e6060cabd8bc' }, "Elevated & Media"), h("div", { key: '5ba088c7b7269a07d8b3eab80de07d25efdd35a5', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'aeb986059cf19e9e6d1123938f9bf64da08019cb', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '9801355d1a8068a994c3452a7f9a26f91ee9d488', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '335ce1eab18d86a827cecdef09299272b73c1b9d' }, "Card content"), h("div", { key: '51d47a4d29bd753e77f190a338edd12c78ae4548', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '1641ee437373db6d6d538097c7db6f89837db400', size: "small" }, "Action 1"), h("udp-fluent-button", { key: 'bb33a0b8c4a57490ef6398bf2cda70af2a67f789', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: 'ba1f891b2aa1abf587f77c8f76d037f7cb0ee5f0', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: 'ad929628071f1322c5618228cc91f04960e70860' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: '12eff546d98f7a685bf418bf1c8d261e268d12ad', slot: "footer" }, h("udp-fluent-button", { key: '38d4bdec852840c087c23791896a098997c2ed04', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: '38034b70915f98fe91c225b6a064669e04c8f655', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: 'b594a04bcc7488d4e88b7f4c22983b2be5f56159', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: '8b9c1fbf27a737f16f1090e8acbca4d04e7b060b' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: 'c9f7c868be35f782de8dcf063990a59f17dd7b00', appearance: "muted" }, h("h4", { key: '1a85d7b49b40edae1a63ead9bd953f064a174111', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: 'fa980e6c65a542b828db0aee4c6186534c167bb9' }, "Flat with subtle grey shading."))), h("h4", { key: 'f4df5b5d26cc98354243b5478cc95dfba2e2c2ca' }, "Horizontal & Sized"), h("div", { key: '4f949b219111544edf3d675cb2711d11147b6c58', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: '0c0e1a5ff93e8cd224c471eeb47e7ef317e9bc47', orientation: "horizontal", width: "400px" }, h("div", { key: '6ce20fb5151344423e3da874db695454b1390bd0', slot: "preview", style: {
                 width: '80px',
                 height: '100%',
                 backgroundColor: 'var(--colorNeutralBackground3)',
@@ -2591,7 +2631,7 @@ const TestComponentsPage = class {
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontSize: '24px',
-            } }, "\uD83D\uDCF7"), h("div", { key: '523ff32c37911b7d94aec06b3ca3b580f255350d', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: '84383ac693ce128e671054a5b83d95ed2dbccdd7', slot: "header" }, h("h4", { key: 'd6afc4579edc9b0235f917c418ae01e2e215a80b', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: '4b922e7c902907c87caffd8ec9a20a5a4b7e7f37' }, "Fixed 400px width."))), h("udp-fluent-card", { key: '1300596ff7cd5f7cdf1bf9b7909095f7c03b547c', width: "300px", appearance: "filled" }, h("div", { key: 'be7a8e1212f90788d03d0e14cb78d6e3566926ef', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'a60d78a29413cabba2e8dc5c5e18769e1f686c2d', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: '06e487b2bc9ed448121958e77e342f42f3ea50e6', name: "person_20_regular" })), h("span", { key: 'f51901590639419d21783b77d81c436baad95b2f' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: '2571095067154e0ad53c27c4b01fea370c1ce809' }, "Complex Interaction"), h("div", { key: '1bc2a80c22ef1e47139a17c2071d91c5503eacd4', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '8c59fa896755469fcd140c534988d7e3515ba161', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '39f25edd39d129952a41f6b6c905f02b5a560981', style: {
+            } }, "\uD83D\uDCF7"), h("div", { key: '51b50fb75f90fadd2837918012372dbfd6ab14d1', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: 'fdf7b30429d6a89ccc4c1bd0ac56bac95185e718', slot: "header" }, h("h4", { key: '6e157a9fcd5a0ec43a3094b6aa0db68e6f753929', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: '14d33efeeacb3578cf14c28b18c07c694ee6cd42' }, "Fixed 400px width."))), h("udp-fluent-card", { key: 'd7950aa84eaa206c74ffa019c0a3e3e07a37cf5e', width: "300px", appearance: "filled" }, h("div", { key: '69a0f6c5261327d8416f3ea2272e5b7fa57d6c62', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'b4d4436867f934db8f56afe3ec858017d8303f72', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: 'c9037b4b1eae9c93e6b402c03a6c0d3cc32eab01', name: "person_20_regular" })), h("span", { key: 'f9e486ae96bd6e1bfc09e418125128d33966d8a0' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: '97414297ba0b8d6b5be4e784c36a2ccc92b86d67' }, "Complex Interaction"), h("div", { key: 'e3809ba88425145900456a1c2067cebb3ee0145d', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6078b9865ca44f56e4f8d00b71f566e20cdef4d9', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '2d6742805d89224d04c9c628056fee2e802dd464', style: {
                 width: '32px',
                 height: '32px',
                 borderRadius: '50%',
@@ -2600,39 +2640,39 @@ const TestComponentsPage = class {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: '7d1d02d5716589b4d23fb4d9da35b60987f4ebe1', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: '178e360a683605c216ccb6134349be3f16f5fc82', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: '7bfff0201fc4b7189b318e704744e100a887bc12' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '7dd77b5d5610246219a70cbeb2787e86db31c319', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '24154f6f130e4a88caa215c60aaa508048affae3', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: '256b2eb0f470e6be00108569847184da4fb10926', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: '276c5a37bbe1eee0152a63038d8853021c699b5f', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: '7fb679f743c43c1f6f5eb3a0cab3e4620d958841' }, "Flex Layout (Grid System)"), h("div", { key: 'd09f350f46719ed74bbb29d5410d40c86d943769', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: '9a4b53827f20f4e7727afe613821881258ecf5df', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '5087ba37f7b427d5e27ce3815d32cfcea73fdda9', style: { flex: '1' } }, h("udp-fluent-card", { key: '999a31706413774f46ee8d84eef89efd766963c1', width: "100%" }, h("div", { key: '36e567e92ad32937ee2f6d81827be5453ead04f3', slot: "header" }, h("h3", { key: 'da8ad1597f89061b501f8c75c70142e086af826b' }, "Card 1 (50%)")), h("span", { key: '3c5683fbe18544fa0a276325f2f3a89985713b81' }, "Flex item 1"))), h("div", { key: '33f4d9d1d6572183cbfa262416f70b730a04116f', style: { flex: '1' } }, h("udp-fluent-card", { key: 'e0fd48da7f1fcc40c048788bf1c377d0fa687fdb', width: "100%" }, h("div", { key: '67fc16262e5e33265c137411ef2c3828571d14c2', slot: "header" }, h("h3", { key: 'bc0785e87a8dab84fc8dbe9ad128449a80bfac46' }, "Card 2 (50%)")), h("span", { key: '620a8db35513e472f237bd016bdf4a614f4d3b56' }, "Flex item 2")))), h("div", { key: '4cdcc44dfbf5673d9d9d7665120abceafc451d08', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '49b8283a73fb7ec5d97d0297decdfaffa529bf57', style: { flex: '1' } }, h("udp-fluent-card", { key: '1b1e4e15bf4208a284948eb0c911ef2df48061c0', width: "100%" }, h("div", { key: 'c65051082f6b49f33f5eb10f8d8d2713ba8e573c', slot: "header" }, h("h3", { key: '920589078aa2d01f7f6ab311527a2f7b3abada7e' }, "Card 3 (33%)")), h("span", { key: 'cca6c7694c55e8e90a5e1496242d4a6964ac8e78' }, "Flex item 3"))), h("div", { key: '68831e10df853a158f664aa7fee3087169d7a3ae', style: { flex: '1' } }, h("udp-fluent-card", { key: 'd54be26b74b0fbc34cfc9d55e53194c12b17407f', width: "100%" }, h("div", { key: '78e0be3d1634804a22fba85bb4d0864d66f6b8d2', slot: "header" }, h("h3", { key: '3c5074904a12c7db3de49067a7472c89bffb693a' }, "Card 4 (33%)")), h("span", { key: '35a273d40345f4ce907f8363d3ed2ae5195cfbd5' }, "Flex item 4"))), h("div", { key: '72f6b587d3118dfb29b58a3ce9f400c0195827d1', style: { flex: '1' } }, h("udp-fluent-card", { key: '15910a63f60e5168273fdb652781dafc919bc148', width: "100%" }, h("div", { key: 'b9aec09e7606026dc0ef8e3971165066231b2878', slot: "header" }, h("h3", { key: '62ab73898a9145b72dea617baaeb1fac43d48fbc' }, "Card 5 (33%)")), h("span", { key: 'ff83cf070e83d0ba017a19ed7c90b35b4bccdd1d' }, "Flex item 5"))))))), h("udp-tab-panel", { key: 'c83c84b00e7f6859677366909e124416f5d75780', id: "chips", activeTabId: this.currentTab }, h("div", { key: '9d764da04f16fa4e99d486b7a7376a843afb60b6', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: '66cd71e4bc49b9fbc7abb7ee5446c0f5da46292d' }, "Filled Chips"), h("div", { key: '33f70cd71a3d68a1d5a0de47e9add95d41a0c727', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '2f0e3a95889cf0d07aeb9e1a4aa3491e79d445be', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: '6e42307ea053171b250a515e70a1eed3fd8243f2', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: 'a1464a099862fc5ce68e9ef32ca708a7574b4016', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: 'db786080322180e7e80b6e578ca483030eed0ccd', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: 'e27fe085fd94d496b2bb12ec8fc94aaa74a81bb0', label: "Error", variant: "filled", color: "error" })), h("h4", { key: '18200481df81a659e6036eca14c735934267a216' }, "Outlined Chips"), h("div", { key: 'b3ca785718f415a209025d802059a21c7ca90cc3', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '1a8826dfe8425e504962d5bcc799393c13870a69', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: '14d626118c70c96e3187ac3eaa00449eb4e02586', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: '4e2e400c6febf3b5c21d972b8d63eccc5591ddfc', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: 'f6d9ec075b7bbf707bd9e3c99975ae6bf592cdcc', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: '6325d228daf9c7f777dd51472dbe3640e7719391', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: '3a693d5725ae00050a2e6229533271773d622ee4' }, "With Icons & Deletable"), h("div", { key: 'df5f00a9c5390ff61a801675f8e1c51baaa41fcb', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '99471c776f30b22b4b867056a00d908d9b41c9aa', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: 'e234f741fc59c7d17a0ec55a988f3bbd3927ae15', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: '068d34fdba279d202cfdceb632381184309f16c1' }, "Sizes"), h("div", { key: '045a120603d52676dbf13e647388ff0d2d36ba5f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '1389cdad67ac0bb207ea18c1ec56e6ae1ee0d3da', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: '4794469a5e5c18240b0bf192e69efeb260b11a4d', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '93ce4dca7cdd5702314d9abdf966b85352f7dc05', id: "forms", activeTabId: this.currentTab }, h("div", { key: '25a88487d305507df5b14ad59b895ca29089d78b', style: {
+            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: '4db66fa4e7495b02e9eb344746dca88cf08c4006', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: '00ccae5c21a5e63a9a8be2d3942b5cc83c7c132a', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: '1f41bbf20173c61b387cf9c841c5afb0c2aab509' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '43cd1d08d5ff0d181a72360813e15ec0ab3c96f1', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '0693a1dd4cc8e9f801453c5567c3765fe49b1034', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: '78e4b10feb952643aa1d9e9b5cfc8870e93f0c92', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: '1b55a80c412ace704016945d7e7754a2c30ce02c', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: '92695342613fa80150a47949a9decc5a9de768ff' }, "Flex Layout (Grid System)"), h("div", { key: '74b2cf35e7d4273c01a51b9a0434be304c499b33', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: '7ccce1e2ec6cffdb14f5da5403bd02a833799695', style: { display: 'flex', gap: '1rem' } }, h("div", { key: 'c54f057f09461122bf8df32ec41c30fa0ce3710e', style: { flex: '1' } }, h("udp-fluent-card", { key: '77a8cff7730a3406e6a9310fad104e0c44c45d02', width: "100%" }, h("div", { key: 'a624d19751e9080670e2a58c1550388f0b232c83', slot: "header" }, h("h3", { key: '3de162c68af8128fd9bf9eedf5d1f31652c29624' }, "Card 1 (50%)")), h("span", { key: 'eeb79fb1288fb75ae095a92cc3c4baee9753a4a3' }, "Flex item 1"))), h("div", { key: '1ea1bf23f48b77b49a454878e056bc0c2e6cee4a', style: { flex: '1' } }, h("udp-fluent-card", { key: '78def1ef68ea9d2cb28d6cbb03b068586ed9bde8', width: "100%" }, h("div", { key: '37c24dbe2b807fb8d8c342480e59fac7380b9ac8', slot: "header" }, h("h3", { key: '4451a1fb49bdf86da969dc7e36ec36fd9d052d4e' }, "Card 2 (50%)")), h("span", { key: '6f7555032ebb12c868940dbbf72d0eb9ef1580de' }, "Flex item 2")))), h("div", { key: 'af0b1bfa1411a7ac4125ece9864fed2156044274', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '1084f82b5f6c3a1da18ebc04523400adc5ed9a3c', style: { flex: '1' } }, h("udp-fluent-card", { key: '30bdd8486e8e8f1fd644a8d2fa8506d86d2301e6', width: "100%" }, h("div", { key: '4ca3b4efa5c5dea6a9853aa9445dd0f10e02d27e', slot: "header" }, h("h3", { key: '5b98a820eaafbc574616dc8f914a945dc617eb32' }, "Card 3 (33%)")), h("span", { key: 'bbd4769778ecad1f73ec23dfcbba236d9a615980' }, "Flex item 3"))), h("div", { key: 'c14f814fd247ef8aa57c0326d2fb03a7a57c98d1', style: { flex: '1' } }, h("udp-fluent-card", { key: '146de00db7e14b8f193eb17c5c98737bba778d32', width: "100%" }, h("div", { key: '117354ab3b00e49d78b271675786564d4635b7af', slot: "header" }, h("h3", { key: '5b4898b6ff436bc0bce2fe5c3ec28c84623596c7' }, "Card 4 (33%)")), h("span", { key: '9c6bcb4fa1cbf6cde21dcfcd5f90f176cf2f4748' }, "Flex item 4"))), h("div", { key: '84538a75637a02ce2437f00947064f892cf7c88b', style: { flex: '1' } }, h("udp-fluent-card", { key: '56b8204956fbcf209987ff16de132ca2528ea508', width: "100%" }, h("div", { key: 'fe1e8148e4b8665c6d71ae0718347853232418a3', slot: "header" }, h("h3", { key: 'f690fd59b8dc4be8b1ffcc008d2a0dd6bd42bb16' }, "Card 5 (33%)")), h("span", { key: '932bda158a38e14dfe48811d46df57309f8991c0' }, "Flex item 5"))))))), h("udp-tab-panel", { key: '88ed75229aabbcaa6a1022887ef52dbc19c91e1e', id: "chips", activeTabId: this.currentTab }, h("div", { key: '8af5fcc4bdc5d5eae25eb3d1c1d43cb621c98dc0', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: '7e2cebdf3abb636484b8c2c1903f5f1d80e815b4' }, "Filled Chips"), h("div", { key: '633e81f8161f15130a99fc9cfaebdbb71e291261', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'f393337049dfd1c98f6ded1481b521761835b3f8', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: 'f6c85f01147ced201eed3d4594c8249e0fd3d5d8', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: '53222a89e6f6b31120c478b6fd9c35ed73a90bb2', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: 'f6c47b7cfa85bc3c612e3414bca5bff185e9982f', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: '8380869d2869997550cd58f60e05d03bac09a7d9', label: "Error", variant: "filled", color: "error" })), h("h4", { key: 'f1239966cc07bf73587bbbdb23626ba04381c44f' }, "Outlined Chips"), h("div", { key: '6685b6c1529075c94b5e19374eb0bd01fd7f4981', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '1ee60acbab2184408cd382da4889bef128e826bd', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: 'f237d938668b58d3ff944593aff68733b25207c3', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: '00f74d9971532b06192c01f8b517fe8680d69848', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: '797e8dcb81f81c894156e21524a3c6f1e3f99d0a', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: 'f64ca7451d70878bb7378b47f7c9ac12014087ec', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: 'a9756e7283d6a3a4074ebc4c4669ca2d7e04a2c9' }, "With Icons & Deletable"), h("div", { key: 'ef6a7ccb28fde281283867185e53e811706a5857', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'dba7238bd1f43866f95a44ee3577c0acbeffe1b4', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: '93a0048a47e0a137dc236552f9ad2f029ac348d5', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: '254c629d89e9ef1a3912868c5c0e7b2c48f22788' }, "Sizes"), h("div", { key: '8207bab587da5149b8c96ce2a2d1157f8446d637', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '8f44326a0fbe430ac27f7b72c85cfc29db68da8c', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: '3e057b9f323a86b73b20c513a552ac30d1e0f887', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '9f89a0da047922c50cf76d799d1625a2f949dfa2', id: "forms", activeTabId: this.currentTab }, h("div", { key: 'd213943d5d985c7fdf8a1c6f9883d2a5550ac97e', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '40px',
-            } }, h("div", { key: '563c0a80407a8a19cf56d801845926cf9319b418' }, h("h3", { key: 'e84c438dcba52b3712cc915560668a1835d958f7' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: 'd9b12b84dea0dd4fd194155774673482f2359102' }, "Button in drawer footer auto-connects to form via ", h("code", { key: 'cf89ec3f3e9eac6714e12b5748bce8022f0eca55' }, "formId"), "."), h("div", { key: 'e412d748183de2907d7d4e74ca918f6477cd00c7', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'bd15ebeea2258b28b2a822a8e33440691e4231b8', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: '30bab92c428cd6f8dac812f230bb655749992e08', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: '7afb400d1331621fe2896d888bd6b7aba5941501' }, h("h3", { key: '14bfdf7c0498726e38525e9e4034f35b03c2d393' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: '5ad3be3b3343ab94edc9df983eb93fc3c65bdbc9' }, "Parent component manually listens to ", h("code", { key: '554ccc9071a86efcfa93b8e29e3857ea5b66d4f2' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: 'fd9eb84d4fdf5b2e698fc2ad42045e2b9d6f1a5d' }, "submit()"), "."), h("div", { key: 'fb71876302f459d98cd0ec14a6cab284af6158dc', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'daef7bc0c66cee7b7717535c48effc410c3b0934', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: '231e5f84db607ce934b386c6ebc0443e4f58a2e8', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'a63dfff9f5095b64ec4a1deb4875be4bc28a497c' }, h("h3", { key: '4c87d77d111407efce449f73c3419d4e2f848716' }, "3. Inline Form"), h("p", { key: '74c1949b283ba152d6e7762f11fb85224fde3a9a' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: 'b47a18972e8365ab53894e3ee9d3f536d476f51a', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'fc62bdbc4b4c98395328fcb608a68ab30503bd37', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: 'fb1b33467762690084fb89c940cef18296078f08', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: '61e89686634fe76e9350632013937d737208077f', id: "calendar", activeTabId: this.currentTab }, h("div", { key: '49704f993fc2fc06ce92db321ebacf5dfc1693ce', style: {
+            } }, h("div", { key: 'b80261a9bf86cdf12849ad404d4c3197f67c8d5c' }, h("h3", { key: 'f3a79b73737877d76f2694d8cfca3ab3c2a07183' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: 'de7aae22952fe113d571d75a9a7f750e33339cfb' }, "Button in drawer footer auto-connects to form via ", h("code", { key: 'f8ab264a55aba2a386a6e78589470750ee2070b6' }, "formId"), "."), h("div", { key: '337d7bbab8bb985bbd52b8f755c744145fcd0873', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '2f097e68139e611cf630ed252f84d324102d20f9', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: '7d5568120b9d60a8557dcedbb5ca568c679bf8d7', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'df0cd61b04418f570c065db4f0ba78c28a265417' }, h("h3", { key: '7508a1d1b3b1efd24e8448e38fde36fa5d712dc1' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: 'dc6e333bfb52cd3d3c0f9b3d0a7b9ea74886e700' }, "Parent component manually listens to ", h("code", { key: '95dc4b57526933ce8a4f6231ffc1a3c8567a15e5' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: '5f1c2b8eaff919de930c94ad5cf221ab78d700dd' }, "submit()"), "."), h("div", { key: 'f38c9d920d0f6874f3be0490adb9bc944c7a13df', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '24ef0443a16a240122f68b50cf41efd8b388bd36', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: 'b1dfe7a753fd8df429888eb29dad1b6a424d37bd', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: '18e9d2eedc2a2586f20679d9d351583f8294b4fc' }, h("h3", { key: '50aec36cdac2d136692a737986b0b35208518c1a' }, "3. Inline Form"), h("p", { key: 'fc4801b61a1a0136f70e5aa720e2a1c2d50b7e9b' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: '6ad1d54a4cb971d665b4af6a3bc230635730aa7b', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'd9d0a17af517f258c74eb439b479079a19e7c9df', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: 'e34b1f0c704b93fbf67fd8bed3de2ad6fdb5bf48', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: '9b38be482e3a8faa5c1a81f5ca7d83336c9caebd', id: "calendar", activeTabId: this.currentTab }, h("div", { key: 'f5b1b4344fd1737af514dd40968b21bff35121a4', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: '26ab6757383d77674a37ecf8b8cc70bdb8909c5d' }, h("h3", { key: '50359a57f8ffc3b5542c8daa3e707efc7779e105' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: '819ff05f5ed48735cb225ec262fdd7f882a24a4e', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: '5be49864f0da152a0aa13655a175f8df10515bd3', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: '8331dbf3d5243cf65b89352ac1e9dccd7e4c9a7f' }, h("h4", { key: '0a4567db569b2f64e591c3e3d6ec3f04bad61e0c', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: '1ffe7b59f29b96b16f1080d5ec210a1b17afed1f', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '9a79abef6b2cbd876f4a1796d9f70c4f26354de8', style: {
+            } }, h("div", { key: '6988993fd53d16ceba30defe24935fe8058bb3b0' }, h("h3", { key: '871db8c584562bf096ac93f0a0e048ce5ef4bc43' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: 'f048857420af064c334122db02071be519372660', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: 'a3e5190d29006a28b204f7ef56fcff976fe9edf3', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: 'e904a9ca74a364727106bbaca92933e1d83d4543' }, h("h4", { key: '2dbc91365b6f27b163dd8cf4e768c17ac5f593d8', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: '69d2f581d4fbba74fc40f5483cf58e3f623427c6', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '4f6a4e436a9d49c879ec40c5fedb74b4a4737957', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: 'ba17be496aca143e1f7909e2cbe8d9140c97c0bf' }, this.singleDateValue || '(none)'))), h("div", { key: 'e5740190143ed4a7e99323ba551175580f3db7ba' }, h("h4", { key: '9ee922a42dbf1f6c7daf05ad4a437c63d3bde49e', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: '8f7268dfedc24418e3be00184ee4f419f2ebcd6a', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: 'f402cb1fcec98bbc7136f2151b986f79bedf0233', style: {
+            } }, "Value: ", h("code", { key: '96b9e90d465820739f85e314b91895b5ed147c7b' }, this.singleDateValue || '(none)'))), h("div", { key: '78670ee359abf290ba8d94b58fe71c60aad1ad1b' }, h("h4", { key: '45b6ade6c4808b011184e0ff34433233d66abba6', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: '5d4ae298f2bb6f7d9defed5716b96c7c67015af7', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: 'a556aa32e975a1a7f9b8e8e072e9b90398b02ca4', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '2372bd6f684c3564cddab0869246521460b58a77' }, this.multiDateValue || '(none)')))), h("div", { key: 'e7e402f05eb8c0ed5f0a51db54b416354407f1f5' }, h("h4", { key: 'a86039086489fbf3b9bd978ddd397f98a47d0e11', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: '11c20cb966cb31a77b072ad797ce5e6259104077', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: '6869b15724417c91d4dc1f924d84a8cd867ddc5b', style: {
+            } }, "Value: ", h("code", { key: 'ece61d000ccf09db5813bd6ec11853a67696988c' }, this.multiDateValue || '(none)')))), h("div", { key: '9b18249409730967a04c0598584d2f3c5d5f977f' }, h("h4", { key: 'c34dab89630d11b37870d70602f4d61657487b3d', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: '8aa2b984755b84499c1265a3582f5dba0e9e5352', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: '937653dd99a2da0b6828d442014865a2b6c5c6e2', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '6dd57cd5898842d4477dcb4e91ad336f54e371e6' }, this.rangeDateValue || '(none)'))), h("div", { key: '9feff639a5332138cd796d350ed6a3fb5708054c' }, h("h3", { key: 'bf46d5c832b554d6e5b9ad2bf582f8872c7a8b46', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: 'bea185821776af8dd3be6e84b981406ad9cd926d', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: 'f9345778523c6b9aedfcf17351d9da9629268e8b', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: 'aff5ff6dd3db6a62bf77074561b558ebbc8bf0e3', label: "Date", appearance: "outline" }), h("udp-date-input", { key: '393030f81ef27f1d45d2d3e36e90da895b34d4d5', label: "Date & Time", appearance: "outline" }))), h("div", { key: 'cd364363a855743baaecfcad08251581733dbced' }, h("h3", { key: 'b582dab5e47b6641c57dc1d17c38d9befc642d7c', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: '18dc0b1b855fd8bcda569aa90c51b11c0278d716', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: '11db1169f312e258ad23c65c47a5d64238c5a994', style: {
+            } }, "Value: ", h("code", { key: '75a1420a86b75f8990401bcf9cc5764b8a4d94dd' }, this.rangeDateValue || '(none)'))), h("div", { key: '40685d4b580a6d5e9c9eb6cf35d63cee6e6ba75b' }, h("h3", { key: '756e063c4b011fc9b6f13280b6ad92598a01e0bd', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: '8845e45d2612f1c6c8b70d2f8ebee56bf9e4ab16', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: 'f07a0c05f653d0e6df9416d2849bd83e958bf343', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: '5052a4abe2e19d8e30616f55358907c0f475af95', label: "Date", appearance: "outline" }), h("udp-date-input", { key: 'dd6f2d6ee001f7eda5ff2135d8012305e5a5b744', label: "Date & Time", appearance: "outline" }))), h("div", { key: '3dc32f5693540dbb0830c8a7fdfaa3457655dba8' }, h("h3", { key: 'a1e77bf974467b23afe5d7c3336f3e5d1dadc4b3', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: '9547fccb75a7ebb41cb8a070d6eea193a269f26f', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: 'dcec04de0ae8c08248864097715591f83666572b', style: {
                 display: 'flex',
                 gap: '24px',
                 flexWrap: 'wrap',
                 alignItems: 'flex-start',
-            } }, h("udp-popover", { key: '8c98c9b3181201ac94c5f36d93bec10a2a290d31', position: "bottom-start" }, h("udp-fluent-button", { key: '15ac1e47ef454dd885d93b1529cc304fbf36c3bd', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: '46ab7f7326402ebdb7261db318a9cb986debe1ea', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '36d2b9dd8dac25e3f87e3679724d2a6adee754d2', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: 'b7658dbc7ab1d569f0a439224fd4b9958437f20f', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: 'ed8f7bad51ad45253d133b65b68d42cec3193e9c', position: "bottom-start" }, h("udp-fluent-button", { key: '1175020edc0282321cce9c26141c3b86a839a10e', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: '258e8ad14deda563edb4e3ce70050a377a8e7cfc', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '9683d7d0564786fcbf20b41ea6be2cbd6850c231', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: 'ce0a4b2a3d1ace61dff29a602981b5b3518b66ec', position: "right" }, h("udp-fluent-button", { key: '53fe67d3b383acad747218d73a3c4ff257c9a11c', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: 'c74c4d8de02bcc745ccede3fbf4262315feab808', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: 'e4f5157eb6e8ff9668f127e81f7358fbee2506cd', id: "popover", activeTabId: this.currentTab }, h("div", { key: '0790f3bcd82f87a21c64054337e4b8e071a0c66c', style: {
+            } }, h("udp-popover", { key: 'c2e8567daf2364615279149938fd5d9ae521c82d', position: "bottom-start" }, h("udp-fluent-button", { key: '333b902b5ae1739f2f19f229ae39897a8fd9cf90', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: '013a5caa6382d517c8cb9d31f2fe12e981b76e37', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '9522caade1a6b9ce160b8981886f96cc28094843', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: '03c459807a1ae04aeae39b419807e99b3e2c53cc', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '74bbf26ffb077df6d7758aa7e5f692453fe5374d', position: "bottom-start" }, h("udp-fluent-button", { key: 'a16178fe00e238d6e9c113868188c743b64c1882', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: '258720ea1e6355a23158e23c9cc641e1102898ae', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '3332f6f66b3a124e339270ebfec9f92214528d5e', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '396da41f51568d6a67f5dc4229fe97a9c89f3a76', position: "right" }, h("udp-fluent-button", { key: '567e0b5bcc102642f2312ac1e91d7a08732052a7', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '0aff1512e968f34db5d5ff93f23e18710d76c1c4', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: '6c40f823edc3f25250d2614efe19e4568ae4fa8b', id: "popover", activeTabId: this.currentTab }, h("div", { key: 'be820146db93e489f8188211992ac4e01646f0c0', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: 'fae5fee6838abbf7feb31e3e31c22dbd2bc47862' }, h("h3", { key: '902bdfc44622fcc730cb4045a4de850f2e48c824' }, "Popover Component"), h("p", { key: '37cc9952de48816764b37e2fca496889d47850c8', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '83069ec9d611a0add25c83df47eb5ddb3a3f3ada' }, h("h4", { key: 'ec3bc512ca7c699204787b8ff82d31c6febb1033' }, "Basic Usage"), h("div", { key: '931c76864583362b5dbc9cceb7938be0a31e7ce2', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '9f2f5eedcdf222c9f0f9e6a05e30c4689abdf6dc' }, h("udp-fluent-button", { key: 'e09829dcfa3c7856f8170c9b3a7f22c466a517b0', slot: "trigger" }, "Default Popover"), h("div", { key: '69c389a4877028a0a59a18f14ba6fcf130b9c3dc', slot: "content" }, h("h4", { key: 'b7eb0dd899f8f672e5f44a57efbeea24473a64e6', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: '3e56a7f7c8c6583b5f289f141cbf855414e082e6', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '29c53e399dc79389f2f8bc5bae5196ee48f32896', position: "top" }, h("udp-fluent-button", { key: '1a0e6b7169200b8fc8f4d7869b64c148af3cc110', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '8624ebd63f689cc5fb4f3acec323f4958289ab7a', slot: "content" }, h("p", { key: '47319bf4c85d0fa78b03aa350171a30d789562e3', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: '038f0fb75dcd33c4c833cd992a97edfac4845862', position: "right" }, h("udp-fluent-button", { key: 'd56d0aa2e7e3d2ed951c9c3cf2910305e185a274', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '0b5c4d242ad57687e2be3fd91376df4b420e9032', slot: "content" }, h("p", { key: '14119b5e9ac8d53afa6898786e1951ef8edc8461', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: 'a14cc950f54fb1c3988374547b13b8e274971bba' }, h("h4", { key: 'd20264be3da6484394970b191ece9ae94dccac52' }, "With Arrow"), h("p", { key: 'fbb156ffef71d2d84c67b8da8101845df8b43290', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '27b295af57675a85f2baab3411e589918427c4c6', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'fd8af2dd5c1b8615816fd088754e785e7548b417', "with-arrow": true }, h("udp-fluent-button", { key: '7493d1bb8db7cab27abf4ca2e1caec47288c2703', slot: "trigger" }, "Default Arrow"), h("div", { key: '07e3fc5e1fc297eb4db8e14cdce0e09d16195860', slot: "content" }, h("p", { key: '6528cffe6e0b6326564c331d7fa1f8e8c71bc44e', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: 'f8ad54b9e03a02d5496878580dc7391c0587a130', "with-arrow": true }, h("udp-fluent-button", { key: '15b61f01b62a6cfff686cf75972a7f03f6f2b795', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: '3b68c7785a9a83481b455072858e845e547d8991', slot: "content" }, h("p", { key: 'c8ed278e15671af6d42a2881585e05d5d9f8e868', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: '8508556c3ec46164738962d9e19967e891742a74', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: '575fda41f01ec13245f1e6f6dc96edd27954cc71', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'b76ee96f677046a69e64338eb854226cd75ef649', slot: "content" }, h("p", { key: '6ad8b241d1806d55fbe80cda290814c14ce96a3f', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: 'a995e01d346098aff0ea4da8e985b81d01709a18' }, h("h4", { key: '24569c43eb3547871a76cadc7dd1b7db1e8d65e9' }, "Size Constraints"), h("p", { key: 'df9f5e5e3ab9d85b5126f6a4e4707d6450475153', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: '058cab97656ef6d008d0fcf352da7ad4ee895758', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'c76eec4eb38c02463d9d91a8c40a13bfe90fb3dc', size: "small" }, h("udp-fluent-button", { key: 'bbe3661c263bf8b56e801a7cb18ee8c9c79866e7', slot: "trigger" }, "Small (320px)"), h("div", { key: 'ff518658eb7e2804ba4d1ab1f0db1e1061cf928c', slot: "content" }, h("p", { key: 'e52e930eb6fda8444f576b7626640a8e0c6344af', style: { margin: '0px' } }, "This is a small popover with max-width of 320px. The content will wrap if it exceeds this width."))), h("udp-popover", { key: 'a1809fe516b8f6eac2b10bb5d0b5fb9ab15d693d', size: "medium" }, h("udp-fluent-button", { key: '978c7c7b0caf1d284aa6221bd5696b1614639ceb', slot: "trigger" }, "Medium (480px)"), h("div", { key: '9726b56eedf7c273dd190b6dcd5d6a023ac7d4d8', slot: "content" }, h("p", { key: '9024a90179d963de5f27ff6170841c0685957be7', style: { margin: '0px' } }, "This is a medium popover with max-width of 480px. The content will wrap if it exceeds this width. This gives you more room for content."))), h("udp-popover", { key: '12539d539f1ae37218ab0ca203ff23f31dcac266', size: "large" }, h("udp-fluent-button", { key: 'ad800a181358fd75fa4131108a2c6adc85744663', slot: "trigger" }, "Large (640px)"), h("div", { key: '1daec25ea4fea5cd7659150f6c492cb156607af4', slot: "content" }, h("p", { key: 'dfd408bf27b29206c582afba19e9a56bd5612cec', style: { margin: '0px' } }, "This is a large popover with max-width of 640px. This size is suitable for more complex content that needs additional space while still maintaining good readability and layout."))))), h("div", { key: 'd6c9e911925445901897174c3ffc6bc68b7137e3' }, h("h4", { key: '96beeeb7e0a3d9cb6842c4fbfff9fca54d0fb55c' }, "Trap Focus (Accessibility)"), h("p", { key: '317cdff948817702ffad570d0ae302b36363d6f5', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: '71c801dee731e5a0ce6ec4cda6c977e695d1ccbb', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '042208da25a9af2efa791e799ff5d232ba159474', trapFocus: true }, h("udp-fluent-button", { key: '457fcf45360710ff812ad0e51850bc5be843ddf0', slot: "trigger" }, "Trap Focus"), h("div", { key: '371205b9c43fdf0c3d402af1ffa7db8dc3a536db', slot: "content" }, h("h4", { key: 'df919d8d45e8f5a38077281ab4b48b75149e3f3f', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '0ba6d6d73efccb08ae2cdd052d55c675f266ad1f' }, "This popover traps focus. Press Escape to close."), h("div", { key: 'a860d51d751775ddd8fc5b3503362e2f069f5c52', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '8410ca23c2dbaf87e7ef2aa7068a4fe2c9cb2e2e', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '268d7602f036ec22f0b71e9ae6a18aba3d305000', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '6078c1c812d4ba2cbaa6a0d91273dc1f9caff529' }, h("h4", { key: '9490cfa81d01ea1fad516e2f9688b59be4464017' }, "Advanced Examples"), h("div", { key: '6a20d1a1632b55e1da0b2e20bd87aaa6e459a947', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '7c36c26e7370322ad9aa2293a4c7f17e5d46a156', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: 'f6ee5481d2461a1b5c08e656e0749d8a9b2edc98', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: '1b825d40bd47fdfb8aa5a388a9a7e62379321f96', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: 'e091fb5c908deb5f5beae484f13bb6e717e0f8e9', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '29a36bdfe2804f43f31e143f7f7b254df97f0c39', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: 'bda0a0ca7829640a8abac677f1b1df326091d0b0', slot: "trigger" }, "Rich Content"), h("div", { key: 'a3cf9b20d7157115ddc497ec38a64532ea11adfd', slot: "content" }, h("h4", { key: '78decf58ba187d3e440ce9a1b80a72a593729a90', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '6f64e6015aafa3e9fded28008986a06eb6db40f0', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '221db8b4a9fa6cda03dfe1ba787417416eab317c', size: "small" }, "Learn More"))), h("udp-popover", { key: '61b85f5f65ce2b883d7b64963be7cb17c89309d9', "close-on-scroll": true }, h("udp-fluent-button", { key: 'a3f4648ddc3353ed1763ab8eb0384284a7b7b634', slot: "trigger" }, "Closes on Scroll"), h("div", { key: '788efbf17e6408a700d587ebe5f1368a144c6c5e', slot: "content" }, h("p", { key: '5c4f8d1c85be5ca3ab4a7327526c8d28ee22ff0f', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '6ecdb86841649b2634f493db3c68484e1a6afb25', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: 'ec642c7e70f95e9c10aadbd1b1fdc567e8b8b60e', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
+            } }, h("div", { key: '1edd32650b2f9fe5b9437b53e6e8fdb51e9b3d44' }, h("h3", { key: '34760034aa8712347e339fad984e5be07e7f7fd7' }, "Popover Component"), h("p", { key: 'ec233c0396eb1cf41f715ad3fe93c431ba5c714e', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '6db4188136ba096cb10952265a4ffcc03070f066' }, h("h4", { key: '4c87f6463690fca22ab587af82baef1e89c2f234' }, "Basic Usage"), h("div", { key: 'd282d8af07b7c95d0f57eb147577febeaa7a6adf', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'b609a230383ea24ebcfeae60ebc72cde757252e4' }, h("udp-fluent-button", { key: 'd2cc5601ff33d84f9c26d21597aa35fa31b52440', slot: "trigger" }, "Default Popover"), h("div", { key: '602a6e1823fb09889c1cc9da1ba31e65726adc43', slot: "content" }, h("h4", { key: '991998c6139d745c100268dc47e190ac79f7d443', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: 'b47c75bf0ebe2157579198373a34ef613f421f5f', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '98047aa0559df389081553fa7a4cf0d4d5b819db', position: "top" }, h("udp-fluent-button", { key: '43ae296c17a63b3ed0eab1e165af967c84e77d25', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '92bcebb1e78d2dc6c5095c1dd36e849b292de345', slot: "content" }, h("p", { key: '03d68b100200eaab5526eb0c0f45f1ea1b7e423c', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: 'c34d53dfd4c8eabbd8f17e7a268d1c67b884002d', position: "right" }, h("udp-fluent-button", { key: '9826db5ba78847dfed3467cdf290efd571ff4953', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: 'fa64043d534caa73b7d25149ca84892213a59d05', slot: "content" }, h("p", { key: 'a37b82cbc77993555f1e0197e04694d832ebeda2', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: '44e826d09aecf9bf0a77825c321b4c85e4f59eef' }, h("h4", { key: '7e7d0b18e60114e601894281301b6d377a27f330' }, "With Arrow"), h("p", { key: 'f507d037e4c44ed5eb80b2334f832c1bd01a4c1e', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '96dc49c80faae587c8d126182582264967e31e68', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '55d9b77ecdfc523f08cd74dad2770ce99026939c', "with-arrow": true }, h("udp-fluent-button", { key: '6d06d24e8a5a5ee6ef5009b0a2b65353f5053e55', slot: "trigger" }, "Default Arrow"), h("div", { key: '6542230c89fda24441e8b3003c6c5a48b115336b', slot: "content" }, h("p", { key: 'e77ab6763e3bfddbae740a09924560416904b434', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: 'e3797e4e6c17ef617bdb500aed63402e86ff6a6d', "with-arrow": true }, h("udp-fluent-button", { key: '14a59e2062abdea1f1654375d23da5412b35134f', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: 'cf61ff06c1889d60aa4c72d7cfd40d5049303e23', slot: "content" }, h("p", { key: '60f875a43880c87cf934086fa378f29a981303bd', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: 'ea336b5d007e4167ba9b27793ab4e11ae8440fe8', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: '27aa56f8b8b0b3fd2b41e6494fdafd2f96e50b86', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'b2d3434f23a6796ea619a995b4feab2fa60fe5af', slot: "content" }, h("p", { key: '9cc01d5a3d0ce76521972f4de056b4be4436f302', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: 'a11338014ef13d8cf4b4be3a91780135d498a3fa' }, h("h4", { key: '7b42d95ea0e420f5dbbf2864c8410ac4cf328985' }, "Size Constraints"), h("p", { key: '3ee49f3397565b3d2ebf0de2eff599a148cb4406', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: '6b0a06a74cf60ee78d2d413df14ad5790d1f41de', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '801d24cc5179ff65cf636e66efb1a1cd4eeaebcb', size: "small" }, h("udp-fluent-button", { key: '87fb0d5f80a2fddb1cefa178e31701e6666a8b32', slot: "trigger" }, "Small (320px)"), h("div", { key: 'ca277e1fcfc1b36133f8d14494b3d22711d652a8', slot: "content" }, h("p", { key: '96c7af5f090b0832ca375fb2fb58580ab93ccedb', style: { margin: '0px' } }, "This is a small popover with max-width of 320px. The content will wrap if it exceeds this width."))), h("udp-popover", { key: 'e669a24d1aac72abd66ae5e26414afa4917681b4', size: "medium" }, h("udp-fluent-button", { key: 'ec45babf503c3fc5c4d810bdffe4b492685e82f2', slot: "trigger" }, "Medium (480px)"), h("div", { key: '1498db4073e24e965d36be124e9478be13db2660', slot: "content" }, h("p", { key: '3c6f5e5d6194a66099c66c7405a3093f07501313', style: { margin: '0px' } }, "This is a medium popover with max-width of 480px. The content will wrap if it exceeds this width. This gives you more room for content."))), h("udp-popover", { key: 'a091bee3b9a3a290de176f09cc2b7d9840690970', size: "large" }, h("udp-fluent-button", { key: 'd4c680f0e62cbdec56a8e55a1114c37e8c69c9c7', slot: "trigger" }, "Large (640px)"), h("div", { key: '212dfab8173befd065b55b9e2e353b4362a8b41f', slot: "content" }, h("p", { key: 'a35df83cb6ac72c91ae00f47def4639cd706c9bc', style: { margin: '0px' } }, "This is a large popover with max-width of 640px. This size is suitable for more complex content that needs additional space while still maintaining good readability and layout."))))), h("div", { key: '4ff95eadd0af3f4679b4c9438a0fb5654e4a2898' }, h("h4", { key: 'cdc79da26b6f885eab5067b90bcffd35796646bb' }, "Trap Focus (Accessibility)"), h("p", { key: 'c91c9b51bbc03809d3df53d4b286d0bbaef7e151', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: 'dedcad5b844014a107799854c8d3edaf4a4a76c6', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '10ffcd589dd605355cbfa5d9e2fb98da7c5237b2', trapFocus: true }, h("udp-fluent-button", { key: 'd3fc9b7baad7dc7a30063a75d2a30db966af3046', slot: "trigger" }, "Trap Focus"), h("div", { key: '36b1a13a772ee0de7fb9474ca62a2d9a2c534efa', slot: "content" }, h("h4", { key: '4347f0527d8cd9f37b90c495c8fc5f399ea7b406', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '870d9fad03d2d7d3064e54609c8d08acfc20f5ef' }, "This popover traps focus. Press Escape to close."), h("div", { key: '30d72421b1cda4a9e56e07eeeff613a7aedfba8f', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '9902ed1f75c927276fea5f8eee5e7fe7f6657831', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '2ede35579061b2d47a317fe176e6e77ea02e10d7', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '417db415c76410afdc930056abad7f8760511f3d' }, h("h4", { key: '7fdf2c595251f4e8d6d71b681ee70c1649ee089a' }, "Advanced Examples"), h("div", { key: '44e48b144e7732676bd8232503868e91a36f1206', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '1afe18b6973d97cdbab3b8b2bc82cb6ea36a4083', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: 'fb8afde54173be626b374de5815117b285c32fa5', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: '86c751e087bb1e9dacc1c61b3301e8e03d37a192', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '4720012a3765869aeb3e34246568f2d43ac67b02', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '8a5a81bb641e66de6528f796a3cd049fba6c6b4a', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: '2d5c4c27fe3022ddd095a63b588efee855209d1c', slot: "trigger" }, "Rich Content"), h("div", { key: 'e7082d15a2f09ffce34802df69c6c896c17f8b04', slot: "content" }, h("h4", { key: '5b83ad04dbe20a509c89689ab6133c5cbbb7fe80', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '3bbce4ea891cf9988e0646d566265a84b651c8e5', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '5ad055447c46054dab2ce8706cbd048a0812179f', size: "small" }, "Learn More"))), h("udp-popover", { key: '65ac8bc7e0c3d076f5b8823306917d073163df70', "close-on-scroll": true }, h("udp-fluent-button", { key: 'af2bbd466a6475d16e9ffe1141912fb115897439', slot: "trigger" }, "Closes on Scroll"), h("div", { key: 'c256bc2841d210480d088bd44c4867717fe3f7a1', slot: "content" }, h("p", { key: 'dba086fc8582f001e21e7ffb218780a4af8ff01d', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '7d9b5e2729991738b91654daaeaec6293732de22', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: 'fda21dd13e4c9db7caf26adbb7edec4cd4ca233c', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
                     { field: 'name' },
                     { field: 'age' },
                     { field: 'name' },
@@ -2643,10 +2683,10 @@ const TestComponentsPage = class {
                 ], rowData: [
                     { name: 'John', age: 30 },
                     { name: 'Jane', age: 25 },
-                ] }), h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), h("udp-fluent-drawer", { key: 'f322c55a40076aab178eea5785e3a8f89e80a9d3', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: 'db095a1edf2b9d96f90d23bac537d27e1fa15c6a', if: this.formDrawerOpen, content: () => (h("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { appearance: "outline", onClick: () => (this.secondDrawerOpen = true) }, "Open Second Drawer")), h("test-form", { handleSubmit: this.handleSubmit, formId: "registry-drawer-form" }))) }), h("udp-fluent-button", { key: 'f15f61f3567ff6dc8d5d95372ed18064e6a82473', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: '6336a877c5573b9f74377ed04d63eeda9b77a452', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: '8144a51ef212b4de0834d8e39aa5ab98ebadd567', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: '3d6b8930fa2f66ee7da3716e8eea9739ccc1ce94', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '07b4a0dd52f742aa3d5ab502b812dbde644f2a04', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
+                ] }), h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), h("udp-fluent-drawer", { key: 'aa303a377d4aaa20473976dca42b16d3e253ab6d', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: '85a6cc60167f024d1e68c64a80db28d701cba51d', if: this.formDrawerOpen, content: () => (h("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { appearance: "outline", onClick: () => (this.secondDrawerOpen = true) }, "Open Second Drawer")), h("test-form", { handleSubmit: this.handleSubmit, formId: "registry-drawer-form" }))) }), h("udp-fluent-button", { key: '636725804c2c6541dd375b6b6745a533a5933e6d', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: 'b9d26d098aba2a8d86420851fa4cd8c94ef99c92', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: 'b591dbad939aaacfc2b07f761d1c5574ec632672', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: 'bb9a236daf20c79b5628f98511f18dc004bde157', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '4868f7758a3c5fb1baa801351e21226939f642a1', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
                 var _a;
                 void ((_a = this.manualFormInstance) === null || _a === void 0 ? void 0 : _a.submit());
-            } }, "Submit (Manual)")), h("udp-fluent-dialog", { key: 'd49d81a77336a937ae737243fade81c91a692a75', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: 'be85b912b653656c3deb6a6a008b698788b1d264' }, "This dialog was opened from inside the drawer!"), h("div", { key: '226c017a93e0da8f4893059eeef2fd1ed441daa1' }, h("p", { key: '99f7f7bed3024e4fba883e01cc07585e208a9c31' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '744bb09155ae63446d72b59f849e18c338eb30fd' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'f2828044200ba3cf8f2fc719ec5f8811cc54f6dd' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), h("udp-fluent-button", { key: '1e2e6f52a0739446dd3fa314ef7d7b35046e3f27', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'e2837943d9918bdfa016a609823250adfd0e94cc', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '671165fe9ca8af35d26aacbc8ef8fa994834f8a6', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: 'aae8fd0b613469f9b5ee3edc8f4532aabc3dee2b', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: 'c2699ba856ea6b5b42c763643573e4864c680914' }, "This is the second drawer opened from within the first drawer."), h("div", { key: '8eb4a76293cf590d0aae1b73362b9da0ef8e235f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: '3f631e6f4d8f25929d7b340c57dfd76e8b5824d7', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: '386b7e6f8eb5c9b21e19deb86226a357fdb8c8ac', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: 'fa4b0ea7fd56f38a1c7c554b8f282075bb2aceb5' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'fa4511d7ed24b65534c81cb7ea39a01f9059f354' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'f3227905a61113a1ffcf684cc403c49c727789e7' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("p", { key: '3a22d6acff8e3d659780a4d6c60737bd224834a2' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), h("p", { key: 'aa727f7ef1076a84cc0027b304aa0f776b26a0e7' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), h("udp-fluent-button", { key: 'e92e241234b7f87a5ee20842549f7f153fe0a973', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: 'b156a016bee30cb3482582b896b375723de717cd', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: '4225d763b8d8423d742cd9bb8d7244589f4291de', style: { padding: '16px' } }, h("p", { key: '5dc33a244057589e3727f28042ef156223e86e5e' }, "This is the third drawer! Three levels deep."), h("p", { key: '41c02615fb6c1a565a051836886175a6f22d49a1', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: 'cecf2b0fb5ce3c2c971bdec99e4a47c2b974e2be' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '01d310de5496eb58817e47480b9fe9dbfe8ced28' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), h("p", { key: '1c4174e92c66f10338b8d96b9c7e63efa65e8cf7' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), h("p", { key: '270d3de261d06e3aaa9bacb89fb5d2cc8879cb52' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), h("p", { key: '43d1a028934c5501f710355c7e5338119ddf496d' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), h("udp-fluent-button", { key: 'e467504fda19d0e85041d8300cc970c5dccc970d', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: '01112cb144df8ea78d76098e71caa206ad9d3954', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: '444b505efe77b882d9159ed62ee4b6fefdcdfc7b' }, "This dialog was opened from the second drawer!"), h("p", { key: 'db5c1b0af0cdcd87ca7d540a63ede5d6c8493442' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '41c486e46bff47d23db86113c58edd1e85c2fbb3' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: '2cc8f8196054e826fd5539e38bd9229987f4c123' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("udp-fluent-button", { key: 'cfeab7536777e88636e24d322d1a3d1cf72ef6e0', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '76cdbd3b247fc9cace656080dd3cccf6fd3ec9a2', appearance: "primary", slot: "action" }, "Confirm"))));
+            } }, "Submit (Manual)")), h("udp-fluent-dialog", { key: '85f2b641cc9f0ecaa327da056cd9a52e270912e3', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: 'e3bf597e4dacdf1e34c8dfdf63c65bc9e3e7a482' }, "This dialog was opened from inside the drawer!"), h("div", { key: '9c17eee8d9ab701c15635272326efa2122f63f0c' }, h("p", { key: '24f3c246adec7d822bf173185ce3a99384627527' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'cb494e999d170265608078b3a27e7db7f873e51a' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: '3374084f9b619e4ece2740899dc4182f8f59595e' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), h("udp-fluent-button", { key: '7cbe9d22b1c4567b05b0f024ea9fe9fb84a918cd', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '6593fa9478602571627c3694ca1832a30976fb6b', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '790e2ba054f94c62c9d796f377c6169067540a93', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: 'd1b8b5de6636906ebd9a90839b9cebcda84a2348', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: '572f5051af669e4ba4eee3213179440ebb709b9c' }, "This is the second drawer opened from within the first drawer."), h("div", { key: '369218231794b928d71436b8c485b6ccceade3a7', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: 'a9dac02d2735f1c9f45d870556c7aa19fffedf4b', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: '5ac90eff5ac462a03f5fd8356312daa801db8087', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: '14d78095ab4e7206ac6134c03a71977d337a882b' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '1c3f3d7fa0796680baedee05327c212e8171a3e1' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'e25f5a441ce0f5a7b9560b59b9549672f7c197d0' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("p", { key: 'fab1cc9450f5cf226178fc4734848c3e3837156b' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), h("p", { key: '3afe2eda21c841bfd9a5509b34e6943ed7e695e7' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), h("udp-fluent-button", { key: '73cb8d42a6e2ca8da6600a00a2c52c4050934fc4', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: 'e6988e2de64a1a14a5ed85a5afa83c2add46e493', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: '62348c97061715dabfc70a1aca8012a2aad0c63c', style: { padding: '16px' } }, h("p", { key: '5f3c0df123e2972d797637171afa36e315135f6d' }, "This is the third drawer! Three levels deep."), h("p", { key: 'eac31168ea71b9404b2b8f85ed7df3ba7e589260', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: '6ae4321c62ed498241b6102d4d2f331235b7f50d' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '73b8ea6208a950c2cf2dee064b26199f0774c3bb' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), h("p", { key: 'f6e290a4be14b777037b9fecc6d9fb410c3bf783' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), h("p", { key: '1daebc59739f4cadc1cdb772e77be7a1761c8a17' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), h("p", { key: 'fde52e84d6ac74dc882f421d4ea27803d4d3eb73' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), h("udp-fluent-button", { key: '24147fbe1ae6d2341ba61442ec61c070de51100a', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: 'ec067f433388c06cd1b73807429ff951c92813f3', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: 'aa08e40a57a62398d1faf514d2a0e09b50170ffc' }, "This dialog was opened from the second drawer!"), h("p", { key: 'e4a021b7057c9945658e0bf35ddf3f065a049fcc' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'b5104a7ec49333cf1750f228e81f0b47c7e0a0d9' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'dfb26ae04becff477de1d1bd4b6b5648918644da' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("udp-fluent-button", { key: 'eddcd6ff3b9ec7ab9de1ef1db575d583a7c002ba', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'c1b38551c76d49c97b28f9adfa43f9bcaa799a60', appearance: "primary", slot: "action" }, "Confirm"))));
     }
 };
 
@@ -2765,17 +2805,17 @@ const TestForm = class {
             { label: 'Medium', value: 'medium' },
             { label: 'Large', value: 'large' },
         ];
-        return (h("div", { key: '90391ce20d206b061c9aed4ed44e0045cc519f4c' }, h("udp-form-component", { key: '966158e7b0e782ff2cdad1971364f4358ebef3f9', formId: this.formId, validate: this.validateForm, onFormReady: this.handleFormReady, onSubmit: this.handleFormSubmit, initialValues: this.formData }, h("udp-flexbox", { key: '9750369ab5fc9bf62aa2837c0d4719fc581cea6a' }, h("udp-flexbox", { key: '2e14bce7852757cd370d87cbc318cc55b2d367fd', style: { display: 'none' } }, h("h3", { key: '42c7937c6504044bd7cb95df967cc2ba2bb340b7', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("udp-flexbox", { key: 'e1b83db9e20abdd80a529f8f2ea583831af27fda' }, h("udp-fluent-dropdown", { key: '1122133a7b35c165b59a707cace17288d47b4540', label: "Appearance", value: this.controlAppearance, options: appearanceOptions, optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.controlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); } }), h("udp-fluent-dropdown", { key: '476776105d13367ca4da663e6f014b6bef74d977', label: "Control Size", value: this.controlSize, options: sizeOptions, optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.controlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: '5f5d69c80cf12a42ac608e3c5d0cd4aa2d461633', label: "Required", labelPosition: "after", checked: this.controlRequired, onValueChanged: (e) => (this.controlRequired = e.detail) }), h("udp-fluent-switch", { key: '1e4c4bab9ab64cf8debff816a1b23fcb790bc64c', label: "Disabled", labelPosition: "after", checked: this.controlDisabled, onValueChanged: (e) => (this.controlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'dba8f803f092a7e67d14f624681eb54675c998e6', label: "Readonly", labelPosition: "after", checked: this.controlReadonly, onValueChanged: (e) => (this.controlReadonly = e.detail) })), h("p", { key: '56c2a9cfc24c23b0f9fafba885e103205552aecf', style: {
+        return (h("div", { key: '78b78911bd056a508320960916f7b0104e9f7dcf' }, h("udp-form-component", { key: 'a99232c1c4b9e84b941d2fcaf595032236b24b77', formId: this.formId, validate: this.validateForm, onFormReady: this.handleFormReady, onSubmit: this.handleFormSubmit, initialValues: this.formData }, h("udp-flexbox", { key: '3a45771136231dc99d00880c852d782062d70a4d' }, h("udp-flexbox", { key: '1777ecd1e444cf3be936b517270cb87a508c216a', style: { display: 'none' } }, h("h3", { key: '5ae9fff156c7465cdcb0a58cb1a5606e274e45e4', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("udp-flexbox", { key: 'f85125e69d026ece32ba64997d75b31a928e7ad5' }, h("udp-fluent-dropdown", { key: 'e3e098aff935d9ef58f53f74a334954a3c38f9ab', label: "Appearance", value: this.controlAppearance, options: appearanceOptions, optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.controlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); } }), h("udp-fluent-dropdown", { key: 'ab1baea650adf9acd9fff5a52d1a909ae011264b', label: "Control Size", value: this.controlSize, options: sizeOptions, optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.controlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: '3e219e40ac6d247d2f5405e260837aee884208da', label: "Required", labelPosition: "after", checked: this.controlRequired, onValueChanged: (e) => (this.controlRequired = e.detail) }), h("udp-fluent-switch", { key: '0c0b16c3430b03f9243181f25bf27fc6008be2d9', label: "Disabled", labelPosition: "after", checked: this.controlDisabled, onValueChanged: (e) => (this.controlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'f7ec67444927b64a393cc8588938c96d6c8b7d15', label: "Readonly", labelPosition: "after", checked: this.controlReadonly, onValueChanged: (e) => (this.controlReadonly = e.detail) })), h("p", { key: '1c9094a5b717b06f9b8e2fa529bdce379ee8c927', style: {
                 margin: '0.75rem 0 0',
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
-            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-field", { key: '9d0adee1a1b4e390fb390aac5dab4345bc915b0a', name: "searchText" }, h("udp-search-input", { key: 'edf5cbc9df90d0d696f206044b74053d673ce7a2', disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Search for something...", includeErrorPadding: false })), h("udp-field", { key: '5106ee14dc81f6623d4a8bedecdab36956b9028f', name: "firstName" }, h("udp-fluent-text-input", { key: 'e18a9f664e288cd5b9793dcc49ada51221e6ef53', label: "First Name", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Enter your first name", popupHint: "Enter your first name, this should appear above the input" })), h("div", { key: '5558b1d613c96d4d4a4f582030fe2932b6324f36', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: '869dfecdc31fc8d040bc83f8f9eaec1a104b3742', name: "email" }, h("udp-fluent-text-input", { key: '9cabdd41d05a6ac545531e8e954029e2d5656053', label: "Email Address", type: "email", value: "jordanatchison@univerus.com", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '39beae52238517b5af0318303cd52504b8fad2e9', name: "age" }, h("udp-fluent-text-input", { key: '8b924842d5cd64a9d7436e1e25bcd37004f10b5a', label: "Age", type: "number", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: 'd99e8ae2a9cb6bf4818a7ef6e2b7f779db03a06d', name: "birthday" }, h("udp-date-input", { key: 'e01f7f51ce699eaadbd5cd48750f3bbad18dff44', label: "Birthday", minDate: "2026-01-11", maxDate: "2026-01-22", dateSelectionType: "range", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: 'c5c5e30c28597dd17ee90c7e77bcf2ce0693e596', name: "appointment" }, h("udp-date-time-input", { key: '6c60357d55106c17d6c6c1e90789d70b77f96f2c', label: "Appointment (Combined Date/Time)", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("div", { key: 'f5564675f6161e678555b32b334d4914982f0e8d', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: '9fb5b7e2478736a5e802feba23f6740747007611', name: "startTime" }, h("udp-time-input", { key: '22ca80c085d11224fb9e21f2d11097c2e9745854', label: "Start Time (Freeform)", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '312062f3194b1c9926a8d13c9f49aecb9521fc27', name: "endTime", validate: () => 'always invalid' }, h("udp-time-input", { key: '01685e84c9b5441de23cb327f4e0d75b46338060', label: "End Time", placeholder: "e.g. 5:30pm", minuteStep: 30, hint: "Type any time or select from list", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: '09734acbc8da82e9dd10ecf1ffe950b08cb7ac8b', name: "bio" }, h("udp-textarea", { key: 'c4353710bea39b7f3cc614a5b48731a695daa732', label: "Bio", placeholder: "Tell us about yourself", autoResize: true, required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: 'd3fea9ca39ffbe2d118b74dc09c92b23c970461c', name: "exclamation", validate: mustHaveExclamation }, h("udp-fluent-text-input", { key: '4c34bb77f672803850835acf2ff4c5b9e0fbb54f', label: "Exclamation", hint: "exclamation mark please", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '4411687ae430049c2efbca70c695dc7e0a7eaa19', name: "favoriteAnimal" }, h("udp-fluent-dropdown", { key: 'a8da2e7cd2305ab3d632a39d0232c268c2fa3093', placeholder: "Select an animal", label: "Favorite Animal (Dropdown)", appearance: this.controlAppearance, disabled: this.controlDisabled, required: true, optionValue: 'value', optionLabel: (data) => data.label, options: animals, controlSize: this.controlSize })), h("udp-field", { key: 'a272da91ac489c39a70b69a2595e2bfb55b1174f', name: "favoriteAnimalAutoComplete" }, h("udp-autocomplete", { key: 'e124d5ed4b9f017efe642dd2509339bffbe98fee', placeholder: "Select an animal", label: "Favorite Animal", appearance: this.controlAppearance, disabled: this.controlDisabled, required: true, optionValue: 'value', optionLabel: (data) => data.label,
+            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-field", { key: '1f3218930f463504e4d3e78d5544d5af0308dfad', name: "searchText" }, h("udp-search-input", { key: '32f52709af9f8ed6c3f0ad906faef97b3a356d3a', disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Search for something...", includeErrorPadding: false })), h("udp-field", { key: 'f3302fdbb91f87aa886ab48b68fb4dad9c814d6c', name: "firstName" }, h("udp-fluent-text-input", { key: '657eda1498334fb13e5ca7aeac8a48b0ace97c97', label: "First Name", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Enter your first name", popupHint: "Enter your first name, this should appear above the input" })), h("div", { key: '63d0a3a79bda4e19c1c42489c1511f409e9d71c8', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: '9217aaa885ce4b3f0bc351be85e407b3daa640bc', name: "email" }, h("udp-fluent-text-input", { key: '55d6986faa45e32c5c7d3a9b1d2e53f6e145f172', label: "Email Address", type: "email", value: "jordanatchison@univerus.com", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '30b3bc790e61e9e50242f7ff97ceeccd11b30478', name: "age" }, h("udp-fluent-text-input", { key: '2e1cfc9bab2c0d7309efcaa78f2c6a52a454fb02', label: "Age", type: "number", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: 'c47f175c6d7ce797b5b74fe250a05dc9708e56c5', name: "birthday" }, h("udp-date-input", { key: '8613ffa0b043d04dcc15e8a2d902b0aadb4ce5fc', label: "Birthday", minDate: "2026-01-11", maxDate: "2026-01-22", dateSelectionType: "range", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '26be842252a2a196af372b07fef6c78e4f100b63', name: "appointment" }, h("udp-date-time-input", { key: 'd745a121bf64e22c7ebf4eabcb3fc283373dc686', label: "Appointment (Combined Date/Time)", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("div", { key: 'fefbc37f981f26a6de2dbc2a16802cdbc0642081', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: '5456c7f8483217141fe30058c8518d650f917cc0', name: "startTime" }, h("udp-time-input", { key: 'f87512e4632ecc791befbe826d4a6d49960e9de8', label: "Start Time (Freeform)", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '1e1e1077fe91ff91ebe4e065a658ed82a204fbff', name: "endTime", validate: () => 'always invalid' }, h("udp-time-input", { key: 'a6624072c283569c1b75a1c03eb910353535807f', label: "End Time", placeholder: "e.g. 5:30pm", minuteStep: 30, hint: "Type any time or select from list", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: '5e18d1e10ef2e3e768dedf7429d09b3471df24aa', name: "bio" }, h("udp-textarea", { key: 'd7ec1c9e85fa855c9d74ce9669f26c7ea747608a', label: "Bio", placeholder: "Tell us about yourself", autoResize: true, required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '3b4f342a8a25afdb40b75d9a23122813b60321ca', name: "exclamation", validate: mustHaveExclamation }, h("udp-fluent-text-input", { key: '7a186300a8cf4096e5199418c0c4189de86ac7e4', label: "Exclamation", hint: "exclamation mark please", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '83b4e0e693a03f6aacab33ae50535bc0e5051217', name: "favoriteAnimal" }, h("udp-fluent-dropdown", { key: 'd0c6d51ed8e0997f15ce363f0ad0734423c8c5ee', placeholder: "Select an animal", label: "Favorite Animal (Dropdown)", appearance: this.controlAppearance, disabled: this.controlDisabled, required: true, optionValue: 'value', optionLabel: (data) => data.label, options: animals, controlSize: this.controlSize })), h("udp-field", { key: '0e87635dc8f2cf870aad4f6afa5ef23849b5921b', name: "favoriteAnimalAutoComplete" }, h("udp-autocomplete", { key: 'feb02ef8eb4b8913de0e9411331e1624c6cfb5cc', placeholder: "Select an animal", label: "Favorite Animal", appearance: this.controlAppearance, disabled: this.controlDisabled, required: true, optionValue: 'value', optionLabel: (data) => data.label,
             // multiple={true}
-            options: animals, controlSize: this.controlSize, popupHint: "Select an animal" })), h("udp-field", { key: '2c366d44a9c63b56559611d373b8ceeebbde42e1', name: "serverSideUser" }, h("udp-autocomplete", { key: '73cc4a4bbb304d22b7d23f4413167cf3492150be', required: true, placeholder: "Search for an actor...", label: "Server Side Actor", appearance: this.controlAppearance, disabled: this.controlDisabled, optionValue: "id", optionLabel: (option) => option.firstName + ' ' + option.lastName, searchFunction: this.searchFunction, controlSize: this.controlSize, multiple: true })), h("udp-field", { key: '7f08f76a0d494d7130ccfc89f3366153740fe157', name: "newsletter" }, h("udp-fluent-checkbox", { key: 'dbe4f84da05d0115937a06a6522bbcfde971511a', label: "Subscribe to newsletter", hint: "We will only send you emails about important updates", disabled: this.controlDisabled, controlSize: this.controlSize })), h("udp-field", { key: 'd8de1af92eff04488fe9428f9170186cc15f1ae2', name: "commitment" }, h("udp-slider", { key: 'ea04f66918ef172550a11b6927353dcc9d3e3b23', label: "Commitment Level", disabled: this.controlDisabled })), h("udp-field", { key: '36bbdfde9f86b40683771b5e8ed0c0c41ae57614', name: "active" }, h("udp-fluent-switch", { key: '7bb796511487f899e8ff6b74f481a2c6e7aa4d53', label: "Active", labelPosition: "after", disabled: this.controlDisabled })), h("udp-field", { key: '3b4e6b8a136e3133997a9d432eeb53d22aff6f73', name: "favoriteColor" }, h("udp-fluent-radio-group", { key: '900f2dda2755a9529a86ec780a7bfd7e9256a6a5', label: "Favorite Colo", disabled: this.controlDisabled, hint: "Favorite Color", items: [
+            options: animals, controlSize: this.controlSize, popupHint: "Select an animal" })), h("udp-field", { key: 'a80552ad161ff4133059afa6ae0d58287e3ff570', name: "serverSideUser" }, h("udp-autocomplete", { key: '73d97143d7ecf82659b8641321e2207a99a94006', required: true, placeholder: "Search for an actor...", label: "Server Side Actor", appearance: this.controlAppearance, disabled: this.controlDisabled, optionValue: "id", optionLabel: (option) => option.firstName + ' ' + option.lastName, searchFunction: this.searchFunction, controlSize: this.controlSize, multiple: true })), h("udp-field", { key: '474418370a9404b1361866a533df9ce7f3725a91', name: "newsletter" }, h("udp-fluent-checkbox", { key: '37ef0b9b1e50fb8445e438e0eea16a9028618406', label: "Subscribe to newsletter", hint: "We will only send you emails about important updates", disabled: this.controlDisabled, controlSize: this.controlSize })), h("udp-field", { key: 'fd904a841f78761100a63ba5e744f02886599300', name: "commitment" }, h("udp-slider", { key: '75586c644a239954779b34ccf8f60ea3c2b06549', label: "Commitment Level", disabled: this.controlDisabled })), h("udp-field", { key: 'f30242266279384e87a9b59eb8209cda57dbf0d5', name: "active" }, h("udp-fluent-switch", { key: 'e5d342187efa24a5cc8dad1daec88dfab9490667', label: "Active", labelPosition: "after", disabled: this.controlDisabled })), h("udp-field", { key: '55f3ef27debb9b35367fb71eea0d0b9870231082', name: "favoriteColor" }, h("udp-fluent-radio-group", { key: '7714e7558cf305d0570af651f2e8724a83b26808', label: "Favorite Colo", disabled: this.controlDisabled, hint: "Favorite Color", items: [
                 { label: 'Red', value: 'red' },
                 { label: 'Green', value: 'green' },
                 { label: 'Blue', value: 'blue' },
-            ] })), h("udp-field", { key: '804b8d8a03d97787c677b39e185c3521ada50132', name: "swatchColor" }, h("udp-swatch-picker", { key: '5f582e1a8ab98d69a1b754c33a810a6d6aabb163', label: "Pick a Color (Swatch)", hint: "Pick a color", swatches: colorSwatches, layout: "row", shape: "square", size: this.controlSize === 'small'
+            ] })), h("udp-field", { key: '4f4cc14c8aaf6ed456ca5931b56448f67f7e84cc', name: "swatchColor" }, h("udp-swatch-picker", { key: '2ef8f017b1f2d60ff9268fc4b0fb5ba440a8049f', label: "Pick a Color (Swatch)", hint: "Pick a color", swatches: colorSwatches, layout: "row", shape: "square", size: this.controlSize === 'small'
                 ? 'small'
                 : this.controlSize === 'large'
                     ? 'large'
@@ -2894,9 +2934,9 @@ const UdpAmbientToolTip = class {
     render() {
         // Check if content is provided before rendering the tooltip content.
         const shouldDisplayTooltip = !!this.isVisible && !!this.content && this.content.trim() !== '';
-        return (h("div", { key: '213f2dd7bcd6470d4a5bf6ae953fbcdd2ec775dc', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '9088f10428a250bd218c8429722b2395927d5b11' }), shouldDisplayTooltip && (
+        return (h("div", { key: '6df05e15a1d6a5a449074b5906fd8305a1112743', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '9003fc54fcef34b9edc8006a8fed7900923f8b4a' }), shouldDisplayTooltip && (
         // STEP 4: Use the global class name we defined in our style string.
-        h("div", { key: '235f0deab48ed2764980d391bd12781be7778183', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '6c068bf0a81a9e754afc7c19ceb86bb1f348b839', variant: "caption-text" }, this.content)))));
+        h("div", { key: 'a54c034523dcf8104c1515aad1102f166d61f510', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '700d713e32d7a9e03546a6df4834633d9c6acfca', variant: "caption-text" }, this.content)))));
     }
 };
 UdpAmbientToolTip.style = udpAmbientToolTipCss();
@@ -3014,6 +3054,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 = '';
@@ -3137,7 +3197,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 {
@@ -3193,7 +3253,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;
@@ -3221,7 +3281,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) {
@@ -3249,7 +3309,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(() => {
@@ -3380,6 +3440,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;
@@ -3482,20 +3553,27 @@ const UdpAutocomplete = class {
             ? 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 &&
             (() => {
@@ -3526,7 +3604,7 @@ const UdpAutocomplete = class {
                         } }, 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 !== '' ||
@@ -3534,10 +3612,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 }), 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)))));
@@ -3603,7 +3681,7 @@ const UdpAvatar = class {
         else {
             style['background-color'] = this.getColorForUsername();
         }
-        return (h("div", { key: '39efa3768058fc1fe61ee05d6f0e2ee2ff6ecd0e', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
+        return (h("div", { key: '3b327dcb6724cd0239fdc774d61bca2bcbaa8118', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
     }
 };
 UdpAvatar.style = udpAvatarCss();
@@ -3618,7 +3696,7 @@ const UdpBadge = class {
     }
     render() {
         const displayContent = this.content > this.max ? `${this.max}+` : this.content;
-        return (h("div", { key: '8ea9bc9322ebac426b9e18d102ead3b3ba1f23bc', class: "badge-wrapper" }, h("slot", { key: '33c953a1bd684afccdd5a8a3bdee2394e7fac3d3' }), h("span", { key: '603510a8e83bc99cac926edb5722a35bc00a9216', class: "badge-content" }, h("unity-typography", { key: '6c1f298f078a12798cc3526b40791f73b4135d16', variant: 'caption-text' }, " ", displayContent, " "))));
+        return (h("div", { key: '6342e2b951c3cdb08266639c4591d8e0b5e41025', class: "badge-wrapper" }, h("slot", { key: '20ecbfe2c069919e57c49e290b5873eeaf2cd7b5' }), h("span", { key: '7a8b8a8dd5a05ff6f37b751365dfcefb33facaf1', class: "badge-content" }, h("unity-typography", { key: 'ab34efc8406ac5340702898532bd9f8995201ccc', variant: 'caption-text' }, " ", displayContent, " "))));
     }
 };
 UdpBadge.style = udpBadgeCss();
@@ -3775,7 +3853,7 @@ const UdpChip = class {
             [`chip--size-${this.size}`]: true,
             'chip--clickable': this.clickable,
         };
-        return (h("div", { key: 'e3036bebafa8a895511685cf60ccee315b41d726', class: chipClasses, onClick: this.handleChipClick }, this.startIcon && (h("span", { key: 'd6fa723b3eecb37d34fd37aa580f3f7a818e2a3c', class: "chip__icon chip__icon--start" }, h("udp-icon", { key: '1201723d3f71018d31dcc7ef2d1b534c1ce991ce', iconName: this.startIcon, color: 'inherit' }))), h("span", { key: '24ad52a73cc845da2f233c8d282c91f8472dea0d', class: "chip__label" }, this.label), this.deleteButton && (h("span", { key: 'a387b0b65b2db68f654c8e6efd7b599e0d96dbc4', class: "chip__delete-icon", onClick: this.handleDeleteClick, title: "Remove" }, h("svg", { key: 'cdc4f032fab2c0d4f0e2ba99dc9fd6446d312545', width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { key: '51900fa01135c7a0eea28ac412cf6f9c82169a15', d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z" }))))));
+        return (h("div", { key: '32876751f5611b1facc9b1ee9a0ba6380e558d1a', class: chipClasses, onClick: this.handleChipClick }, this.startIcon && (h("span", { key: '2aeb3f4152d1010ccd7af3a8ed5ac535d24dfec0', class: "chip__icon chip__icon--start" }, h("udp-icon", { key: '3cfb645e5e73d909a04032076eaaa4cefbc5ed75', iconName: this.startIcon, color: 'inherit' }))), h("span", { key: '27c7b73be43aeabd3a656099ecc02203adf789f8', class: "chip__label" }, this.label), this.deleteButton && (h("span", { key: '0ce21e782d0e6be1ce4206a7f7947f7926841e41', class: "chip__delete-icon", onClick: this.handleDeleteClick, title: "Remove" }, h("svg", { key: 'f34e2335e97fc0a6219a59f84ad10bdb60cb2d1d', width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { key: '31337b47abb0541240dd68dda92211f6976d5cb2', d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z" }))))));
     }
 };
 UdpChip.style = udpChipCss();
@@ -3805,14 +3883,6 @@ function getBadgeIconSize(size) {
     return BADGE_ICON_SIZE_MAP[size];
 }
 
-/**
- * Returns true if the host element has any light-DOM child assigned to the given named slot.
- * Works correctly with web component children (which have no light-DOM children or text of their own).
- */
-function hasSlotContent(hostEl, slotName) {
-    return !!hostEl.querySelector(`[slot="${slotName}"]`);
-}
-
 const udpCompoundButtonCss = () => `:host{display:inline-block;position:relative;width:fit-content}:host([loading]) fluent-compound-button{color:transparent !important}:host([loading]) ::slotted(*){visibility:hidden !important}:host([loading]) .slot-wrapper,:host([loading]) .description-wrapper{visibility:hidden}.loading-overlay{position:absolute;top:55%;left:50%;transform:translate(-50%, -50%);z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}`;
 
 const UdpCompoundButton = class {
@@ -3852,7 +3922,7 @@ const UdpCompoundButton = class {
         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' })))));
     }
     get el() { return getElement(this); }
 };
@@ -3896,7 +3966,11 @@ const UdpDateInput = class {
          * - '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';
         /**
@@ -4034,6 +4108,11 @@ const UdpDateInput = class {
             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) {
@@ -4041,6 +4120,13 @@ const UdpDateInput = class {
             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) {
@@ -4081,7 +4167,7 @@ const UdpDateInput = class {
         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':
@@ -4205,12 +4291,12 @@ const UdpDateInput = class {
         // 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);
@@ -4229,13 +4315,13 @@ const UdpDateInput = class {
         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;
@@ -4264,7 +4350,7 @@ const UdpDateInput = class {
             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;
@@ -4417,14 +4503,14 @@ const UdpDateInput = class {
     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,
@@ -4435,6 +4521,12 @@ const UdpDateInput = class {
     static get watchers() { return {
         "value": [{
                 "onValueChange": 0
+            }],
+        "format": [{
+                "onFormatChange": 0
+            }],
+        "dateFormat": [{
+                "onFormatChange": 0
             }]
     }; }
 };
@@ -4911,10 +5003,10 @@ const UdpDateRangeSelector = class {
                 : 'calendar-range';
         const containerWidth = this.getContainerWidth();
         const monthWidth = this.getMonthWidth();
-        return (h(Host, { key: '7f3b47433cfeb11958f4a795ab543e7ec0f13570', style: {
+        return (h(Host, { key: '2c96970f661cbad7b66974124e973671d642d7de', style: {
                 '--calendar-width': monthWidth,
                 '--container-width': containerWidth,
-            }, class: `size-${this.size}`, onClick: e => e.stopPropagation() }, h("div", { key: '107351ca36776ebf443311793313843a9d383973', class: "calendar-header" }, h("udp-fluent-icon-button", { key: 'b91e4f0d1a54344dfaa3d5ded9f0d5f8e4f8d699', iconName: "chevron-left", onClick: this.handlePrevious, disabled: this.isPrevDisabled(), appearance: "transparent", ariaLabel: "Previous" }), h("udp-fluent-button", { key: 'a445fde9eb3ae9ff7753c00dc21ac45cd0a1658a', appearance: "transparent", onClick: this.handleHeaderClick, ariaLabel: this.viewMode === 'year' ? undefined : 'Change view', disabled: this.viewMode === 'year' }, this.getHeaderText()), h("udp-fluent-icon-button", { key: '9b791afd007615ebb8c9b8aabffff47921173d39', iconName: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabled(), appearance: "transparent", ariaLabel: "Next" })), this.viewMode === 'day' && (h(CalendarTag, { key: '4711ddf5156e315c6eefbb6fb18a79015d4a2939', ref: el => (this.calendarRef = el), value: this.value, min: this.minDate, max: this.maxDate, firstDayOfWeek: 0, months: this.monthsToDisplay, showOutsideDays: true, pageBy: "single", isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, onChange: this.handleChange, onFocusday: this.handleFocusChange }, h("span", { key: '990acbf0b90edc532f37dbb57741690da8183bfc', slot: "previous", style: { display: 'none' } }), h("span", { key: 'edcf80e6ec99d7f3639f6c5ee8c0025acb49c731', slot: "next", style: { display: 'none' } }), h("div", { key: '1232ad593e810386f48443e7117587b9e33d3106', class: "grid" }, Array.from({ length: this.monthsToDisplay }).map((_, index) => (h("calendar-month", { offset: index })))))), this.viewMode === 'month' && this.renderMonthGrid(), this.viewMode === 'year' && this.renderYearGrid()));
+            }, class: `size-${this.size}`, onClick: e => e.stopPropagation() }, h("div", { key: '084e12c39bb72e4d1ce3c8414fbbea4afe191ca9', class: "calendar-header" }, h("udp-fluent-icon-button", { key: 'fbee6a6fc28c57c57a0b03608ac52d65de2e8e27', iconName: "chevron-left", onClick: this.handlePrevious, disabled: this.isPrevDisabled(), appearance: "transparent", ariaLabel: "Previous" }), h("udp-fluent-button", { key: 'a87df68ad340f894967e885373da7e41ee8a9f26', appearance: "transparent", onClick: this.handleHeaderClick, ariaLabel: this.viewMode === 'year' ? undefined : 'Change view', disabled: this.viewMode === 'year' }, this.getHeaderText()), h("udp-fluent-icon-button", { key: 'fa625115fe2dc34de19cdc97d1ca33a5985805a2', iconName: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabled(), appearance: "transparent", ariaLabel: "Next" })), this.viewMode === 'day' && (h(CalendarTag, { key: '15f4e9fe38ac1daa8b1af228a9f950e538590e56', ref: el => (this.calendarRef = el), value: this.value, min: this.minDate, max: this.maxDate, firstDayOfWeek: 0, months: this.monthsToDisplay, showOutsideDays: true, pageBy: "single", isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, onChange: this.handleChange, onFocusday: this.handleFocusChange }, h("span", { key: '292296bc516a3edf9865fb6fd76b9165ff56ce53', slot: "previous", style: { display: 'none' } }), h("span", { key: '7f846eb148e7bf1d22c3cfae742f82650f8c3a74', slot: "next", style: { display: 'none' } }), h("div", { key: 'df1eda552a64637b8515b282f719d3e2d2f9f0a7', class: "grid" }, Array.from({ length: this.monthsToDisplay }).map((_, index) => (h("calendar-month", { offset: index })))))), this.viewMode === 'month' && this.renderMonthGrid(), this.viewMode === 'year' && this.renderYearGrid()));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -4943,7 +5035,14 @@ const UdpDateTimeInput = class {
         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;
@@ -5009,10 +5108,11 @@ const UdpDateTimeInput = class {
         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 watchers() { return {
         "value": [{
@@ -5075,7 +5175,7 @@ const UdpDialog = class {
         document.removeEventListener('keydown', this.handleKeyDown);
     }
     render() {
-        return (h(Host, { key: '4adbe541f2902a9d92c243a40388bdc3b121b645', onClick: this.handleOverlayClick }, h("div", { key: '9614c5df4fbe7e94c73b5aacc37174d6b16555c9', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: 'adb9fc377065a01d3b3266d99f3ffe640058fa73', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'e03c5fc91c29a384eabab75c1509488eac44d6f0', variant: "h3" }, this.title)), h("div", { key: 'e0f011fb41be303e8779e128e02c2b9aed43e645', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: 'fef802596e0859df5774da1497eb91e4f2a6d193', variant: "body" }, this.message), h("slot", { key: '1cb32eb5d979ad00ed1e9fa9e284e46562defb05' })), h("div", { key: '1b1043c981af31c3b3e51f61017e09e856da5f71', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: '3dced852ea4bb0741eb0de0809f8e75b3b3b4c30', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: 'ca50eec078c3f5a3947d5377547fc2c689d7cc33', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: 'ab4c062175324d22f85900dd7713df93624dd7ef', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
+        return (h(Host, { key: 'ebd57020d1445185156758ba5b4c58912e37ff60', onClick: this.handleOverlayClick }, h("div", { key: '697ac1a1b4bea0b750757ab0bc67ed4e95e49b0b', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: '0c15bc8eb8163197d27c071614f8ebba35b23b7a', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'de5509f0b795d780477da91a0652b1af9e97b99f', variant: "h3" }, this.title)), h("div", { key: '7f1f33a03fbbb9747a0753f25b26ee6f99b41f58', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: '1be061beec7f3b146a2d9be5fa856731afa7a538', variant: "body" }, this.message), h("slot", { key: '264cbeffac8277fa43d7bd8c358bdd63b6ce7fb8' })), h("div", { key: 'b93585af45896c7eff9e9a7f3b75fcacb2a621fb', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: '64db3289e7ceb16fb309f467e2a72d91a114efdf', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: '1b13d2ad75de0d9103fd65dc4a8f40c7bdf34414', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: '0fb08c9b1bd7c9dfe4b9146e97b93f63b55184ce', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -5310,7 +5410,7 @@ const UdpField = class {
         }
     }
     render() {
-        return h("slot", { key: 'c6c1b28a30a6a3c3d41c404f0f59fe47f8e8f79d' });
+        return h("slot", { key: 'c0c41371f917711db207012183ccf41a9332cc7f' });
     }
     get el() { return getElement(this); }
 };
@@ -5458,7 +5558,7 @@ const UdpFluentAvatar = class {
     }
     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" }))));
     }
 };
 UdpFluentAvatar.style = udpFluentAvatarCss();
@@ -5500,7 +5600,7 @@ const UdpFluentBadge = class {
         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) })))))))));
     }
     get el() { return getElement(this); }
 };
@@ -5583,7 +5683,7 @@ const UdpFluentButton = class {
         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' })))));
     }
     get el() { return getElement(this); }
 };
@@ -5640,21 +5740,21 @@ const UdpFluentCard = class {
         }
     }
     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 }))));
     }
     get el() { return getElement(this); }
 };
@@ -5718,7 +5818,7 @@ const UdpFluentCheckbox = class {
     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,
@@ -5744,7 +5844,7 @@ const UdpFluentCounterBadge = class {
         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" }))));
     }
 };
 UdpFluentCounterBadge.style = udpFluentCounterBadgeCss();
@@ -5808,7 +5908,7 @@ const UdpFluentDialog = class {
         }
     }
     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" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5832,7 +5932,7 @@ const UdpFluentDivider = class {
         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' }))));
     }
 };
 
@@ -6171,7 +6271,7 @@ const UdpFluentDrawer = class {
         }
     }
     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" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6273,6 +6373,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.
@@ -6347,7 +6464,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();
                     }
@@ -6402,7 +6519,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;
             }
@@ -6410,7 +6527,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;
             }
@@ -6511,6 +6628,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))
@@ -6568,15 +6696,15 @@ const UdpFluentDropdown = class {
         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 = [];
@@ -6596,17 +6724,17 @@ const UdpFluentDropdown = class {
                     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)))));
@@ -6895,7 +7023,7 @@ const UdpFluentIconButton = class {
         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 }))));
     }
 };
 UdpFluentIconButton.style = udpFluentIconButtonCss();
@@ -7154,7 +7282,7 @@ const UdpFluentRadioGroup = class {
         var _a;
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'd362c805087543ed3781aaec4ce39faf1311af70' }, h("fluent-field", { key: 'e647409f786e725a45ead081a86164fb51616756', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '5480bdd2fcbfb0e248a5e65cb11c5e7f204c0827', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'd962af5d2625c558c20ad9e5e5e9da83a896503d', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'ca29d2ead9264be5bfd22d3acde71f9b19e3cfb7', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: '14a43823ad8f347082d2ba6e645a6c06c6cd6fcf', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (h("fluent-field", { "label-position": "after" }, h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), h("udp-text", { key: '6adbc14b96274ccba3d0d916f600b588dcf4e005', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '310105e91fd86663ac9db8daa7305f8c6dff9c27' }, h("fluent-field", { key: '88ac237d7e1f5700dec8be7f18ef057bc611f7db', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '1911ee90e0bf02780ddeb1ceec4d57d7c7c03170', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a917bcd2e9b5c583dfc1c2f582b21966dc1da1ff', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '149612a75db4b940228b65a45fcb398fe388dade', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: '4b7608cb7452a5a195c1e2b07e0b215899308d1c', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (h("fluent-field", { "label-position": "after" }, h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), h("udp-text", { key: '2902bac054f7096a946566bc494ef7783a958406', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -7207,7 +7335,7 @@ const UdpFluentSwitch = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'd23d1970c531de2cd9af431b36688bf472e7c4d7' }, h("fluent-field", { key: '103772e929b2ac39f0b1d97cec84865dfc26d194', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '35465dd8e502e91e96e6a928bba716ff2d5f7785', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '9719fef772ce35acfb7f23578d822a52e7df88e3', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '70280f2cffb0fbf2d25455b8857b45a6936705b5', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '5708b772cdb2b82c943bcacfce8aef3faa2b4cfa', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: 'd2482d8bfec01d5d27b8a9ad384a16aa1d85bab1', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '91c654669e6e08d366b438d82ce2f56e7c56fdce' }, h("fluent-field", { key: '65cbfc5e391cc5c7fbce3eabd4e3ec2d5fe89f18', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'e6668f04f88cbcb7c5bb4b7073b00adfb0acc74e', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '1978ceaaab8a8306f8a81a01d55445dd6f8c8652', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'd3e7c25477403f90921af5f0e0e4ee48f093af01', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '9b006bf50ce4589b4a7bc3703d347cb000a8ce34', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: '2968daf18e49a4c1fb62beee787371afd05440cd', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -7217,7 +7345,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) {
@@ -7577,11 +7705,11 @@ const UdpFluentTextInput = class {
         const hasError = !!this.error;
         const message = this.error || this.hint;
         const noMessage = !message && !this.includeErrorPadding;
-        return (h(Host, { key: '1fd3fdd78008ce6181db58ac3ff661c564d93603', class: { 'has-error': hasError } }, h("fluent-field", { key: 'b294c1e2a1c660a266eee2ba21f330f6e036e887', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '33fedbd5df4933d04aa47ca27b3a7a1a39314f9d', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize, maxlength: this.maxLength,
+        return (h(Host, { key: '83e92ed8f16c3051a0ca726e81ff4a51550984ad', class: { 'has-error': hasError } }, h("fluent-field", { key: '9fbcdf450ab82e2850f31e1f4660b56f9d7fce5a', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '22017a3dc277acd03dbc7b021381ea3a7b0afdf1', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize, maxlength: this.maxLength,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }, h("slot", { key: '1d8a799cc01ecda7695b4d56d647602542c627fa', slot: "start", name: "start" }), h("slot", { key: 'd2855135bd92677434b370ac58081cd238c23235', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: '108ecfa2d4e21dfb8706990b27117021ba501f14', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a54f646b778ef44266879f420c0454a5cb80d90c', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '2e621dee84a11efca26bb2f14997cebead8f77ed', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '00bb84dc0c030c5d3f1cb53c3f89c8af763fddc0', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: '06db34c98acda08ce3bbc6069d9b00c345c665fb', slot: "start", name: "start" }), h("slot", { key: '3ca5e0ed49dc7f92bc0a1b22795982f6d3d2059c', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: 'ce228830fc9a6bb7e2143c585e98a829dbc6fc9e', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e806bdc4d058a67039c649e5a65b47c41f46e23e', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'bee18eb447ee5a2c9348e26df0f8885114d0f300', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '695e97d2aa86e70d8b188a26285bff1deb69d2fc', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -7623,7 +7751,7 @@ const UdpFluentToggleButton = class {
     }
     render() {
         const iconSize = getIconSize(this.size);
-        return (h(Host, { key: '80044ea150644619562d7197c7fe62a111e14581' }, h("fluent-toggle-button", { key: 'bd3b9ecf9bcd984812bd9b4b25d247b357a55046', pressed: this.pressed, mixed: this.mixed, disabled: this.disabled, size: this.size, appearance: this.appearance, shape: this.shape }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '41ffe50c8efe4722c745cc636d145166d0e62ba3', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'b37adc51343974319744be0bce3f5acb9f3d021c', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '6657439c96f0b8c514e36d8760c83804a1538eca', name: this.startIconName, size: iconSize }))))), h("slot", { key: '2cb8775acde3ce78b4879aa823221d5bb8dabe0e' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'b6e4638009b32809204198758d6ec6fc944c1afb', class: "slot-wrapper", slot: "end" }, h("slot", { key: '4f4477d732753cd754671fdacefdbe76dfaf6507', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'bbf369485c835bcc168af01321a002be22a32ad6', name: this.endIconName, size: iconSize })))))));
+        return (h(Host, { key: '7063ff374b0be78469d61a5cd0702a763b2226a9' }, h("fluent-toggle-button", { key: 'f29f372892205ae54829b2ab8791652360769c56', pressed: this.pressed, mixed: this.mixed, disabled: this.disabled, size: this.size, appearance: this.appearance, shape: this.shape }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '4977733f57427a16f67a6930cd60ed6da765e84e', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'adda33214afc7987dd9a26b521a23945a52b71fb', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '3a1458c1e97f523f915d0dbb382468d0450809fd', name: this.startIconName, size: iconSize }))))), h("slot", { key: 'bf0d94afe5284b9604fcdb6b76ded71cf54566e0' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: '2b1de85e37bb2afca1e11d55e3142d75052c5eef', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'd0e28a78465274173dfbbc48626236008e612d32', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '311410f9cef7ccffb1af50bfe994e87297e2c25d', name: this.endIconName, size: iconSize })))))));
     }
     get el() { return getElement(this); }
 };
@@ -7725,10 +7853,10 @@ const UdpFormComponent = class {
         }
     }
     render() {
-        return (h("form", { key: '69ffca913ec791d27500380f261f3bda5d77b467', id: this.formId, noValidate: true, onSubmit: e => {
+        return (h("form", { key: '7aa36000dfbc6b70f9e47a7d5767c134364995db', id: this.formId, noValidate: true, onSubmit: e => {
                 e.preventDefault();
                 void this.form.submit();
-            } }, h("slot", { key: 'f51833b55f933842152e2d33508f1f61dedacc50' })));
+            } }, h("slot", { key: '3a84c27a4b9b0b277cb722c509010d2c886ca52c' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7836,7 +7964,7 @@ const UdpLazyLoader = class {
         }
     }
     render() {
-        return h(Host, { key: '51c2ecd5c4207d5a4943fb9d8384bcdbe6236e3f' }, this.shouldRender && this.content ? this.content() : null);
+        return h(Host, { key: 'd93d224698a89a86e2ab1778bdabe82925428f2b' }, this.shouldRender && this.content ? this.content() : null);
     }
     static get watchers() { return {
         "if": [{
@@ -7860,7 +7988,7 @@ const UdpLinearLoader = class {
             loader: true,
             [`loader--color-${this.color}`]: true,
         };
-        return (h(Host, { key: '0fd64084709c21d5dbff37f24ce0d033894e5608' }, h("div", { key: 'ef2348baa898412b92955ab1d0306a885a4ca925', class: loaderClasses }, h("div", { key: 'c402cbba913c4efb4343a08ac94a87666845a0a2', class: "indeterminate" }))));
+        return (h(Host, { key: '761a94eebc2e9c8805fa82cc61c4a76668f5015b' }, h("div", { key: 'ab746cfda51c4c64191a91cf9ac7e54dd27b3a2e', class: loaderClasses }, h("div", { key: '4c08ea0a28de807b3836b832bcca9f0557db3804', class: "indeterminate" }))));
     }
 };
 UdpLinearLoader.style = udpLinearLoaderCss();
@@ -7919,11 +8047,11 @@ const UdpListRenderer = class {
     render() {
         const showPrimaryText = this.primaryText || this.hasPrimaryTextSlot;
         const showSecondaryText = this.secondaryText || this.hasSecondaryTextSlot;
-        return (h(Host, { key: 'a7fdc84e454e4415e41b494b874c5cd58093781b' }, h("div", { key: 'b708146bf6886d5822cc3784c1b1dde0a41531a8', class: {
+        return (h(Host, { key: '38b8402037018050b955dfdd1b10d8dc050db57a' }, h("div", { key: 'db06e7c9c2404c512dab266f00cf20ff4cbdca64', class: {
                 'list-item': true,
                 'clickable': this.clickable,
                 'variant-compact': this.variant === 'compact',
-            }, onClick: this.handleClick, onKeyPress: this.handleKeyPress, role: this.clickable ? 'button' : undefined, tabindex: this.clickable ? 0 : -1 }, this.iconName && (h("div", { key: 'bf2122fa1d51b1ad1e4d1248b863b2971459a67e', class: "avatar-container" }, h("udp-avatar", { key: '32d1956f5cf2e506bfcd7f5c85862349d1b394d2', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: '238cf5b9acc5504e56d8ed7c652e00f94ff75716', class: "text-container" }, showPrimaryText && (h("div", { key: 'ae15ea2fcd67fbd01f9eaf997acc5a21089cd6d2', class: "primary-text" }, h("slot", { key: '1a629990a4721c7281b5f1dd1c3db680b29a3e72', name: "primary-text" }, h("unity-typography", { key: 'ac76e535367c2a00ac1ae5ffd0fb08671a37c61f', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: 'a48a9103abd12c8a2c5cdd36f5bdf720ebd9731f', class: "secondary-text" }, h("slot", { key: '1ac630c59426e4b6ecb9c3b891d9731cbcff3384', name: "secondary-text" }, h("unity-typography", { key: '6da8fd733530cddb27e5588ecdfa6f4d288d9c50', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: '3987c5c8b83c77990706d376714444aae78ae7b9', class: "status-chip-container" }, h("slot", { key: '485ef815359ed98fd4269e1748ab25fd67f2119c', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: '3c34b44562e3077eba9e824e1a581aabb6662684', class: "actions-container" }, h("slot", { key: '011c682eb2fa5c1e7f730b028252489f24056e5c', name: "actions" }))))));
+            }, onClick: this.handleClick, onKeyPress: this.handleKeyPress, role: this.clickable ? 'button' : undefined, tabindex: this.clickable ? 0 : -1 }, this.iconName && (h("div", { key: '5638e84985d9f200e7f69d918ea10b14f88eaec6', class: "avatar-container" }, h("udp-avatar", { key: '6d51c030025482eeeaa269eca7938f7ffa406d93', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: '799b85e83c00ab20c4d1ee186aa6ce831c818d27', class: "text-container" }, showPrimaryText && (h("div", { key: 'b98a0096aba1767d4775f377cef302583d980cc9', class: "primary-text" }, h("slot", { key: '212d09710969f9bb35d0d464a5fb7059aa6a651e', name: "primary-text" }, h("unity-typography", { key: 'a8232e206e5d720e97779f150c39ca068c456ec7', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: 'e9f2a85b108cc2cbbcae8be90a18bf41a8ab177f', class: "secondary-text" }, h("slot", { key: '4fad8114d2af181df09f111fbebfc3a9f8c3ae0e', name: "secondary-text" }, h("unity-typography", { key: '04c8bbfba3705679dcf08962737b8726a182c890', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: '85c7190bebe53677d9cbe0eb9d529e50e0a9586c', class: "status-chip-container" }, h("slot", { key: 'e04bc7b9fc83f88910a8d87b2c0982021dd88cf2', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: '94c532b6238ed87709069828e9800fab2230918c', class: "actions-container" }, h("slot", { key: '80fe2b1653b00ed5061c1c13e861bc0fa1b96f74', name: "actions" }))))));
     }
     get hostEl() { return getElement(this); }
 };
@@ -7945,7 +8073,7 @@ const UdpMenuItem = class {
         };
     }
     render() {
-        return (h("button", { key: 'db279be465c17a5b8b08583a0b6565672d40a086', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '23dfb0bc79337e99882758a087c5cc6bb2147ea9', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '130cacd260ebd312e6ff60c15e0c2f3760917146', class: "menu-item-label" }, h("unity-typography", { key: 'fb1efefe5614d24934a6c5b9149471d9b02a2e11', variant: 'body1' }, this.label))));
+        return (h("button", { key: 'b26afc2ab755b1b71822b89208e5d45f0733787f', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '214be4eabb71a7cf8d3eeec8151ae381012a8e79', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '8604d5cc4d0f3cb5233c06a8408beaf1da98c590', class: "menu-item-label" }, h("unity-typography", { key: '6f9352bd35d5cb919968ac7836b77f52b5de0f82', variant: 'body1' }, this.label))));
     }
 };
 UdpMenuItem.style = udpMenuItemCss();
@@ -7975,7 +8103,7 @@ const UdpMessageBar = class {
         };
     }
     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' }))));
     }
 };
 
@@ -8095,7 +8223,7 @@ const UdpPopOver = class {
             maxHeight: this.popoverMaxHeight,
             overflow: this.overflow
         };
-        return (h(Host, { key: '5c088fd433163c11cc9af440ddbde003d95a0f96' }, h("div", { key: '37774fc4c4f7484e23bf848e58adee84a47f5d6c', class: "popover", style: style }, h("slot", { key: 'f479cfe2f59c6ddded24909b26f7f7a6aeba5d59' }))));
+        return (h(Host, { key: 'd1dcfc4885536250c52af3e6b05371a7a9fd24d0' }, h("div", { key: 'c4a0946facfb54a99974e74fb70935ccdcc4fba9', class: "popover", style: style }, h("slot", { key: '8b76a9950358a1e5305af4aded8e29b0a927223f' }))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -8729,7 +8857,7 @@ const UdpProgressBar = class {
         this.validationState = 'info';
     }
     render() {
-        return (h(Host, { key: 'ed081305f42309a9078c45f9b22e6c49e0a1a548' }, h("fluent-progress-bar", { key: 'f02abe008130ae9a1b8b1e35817ad64bd1243bf7', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
+        return (h(Host, { key: '0948de54e61747c0fc87ad8467391d475a8937b8' }, h("fluent-progress-bar", { key: '78cf79e927b60e3f1eb8bf165e490045da03a62f', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
     }
 };
 
@@ -8805,14 +8933,14 @@ const UdpSearchInput = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '1283f99650dac71eaca68e07328317218d4a6706', class: { 'has-error': hasError } }, h("fluent-field", { key: '4c19532ddfb0e4c302b60131e01f8b1754f464ed', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: '1aea377062cbd2460a5631aff912eb77931c2b82', ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, slot: "input", name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize,
+        return (h(Host, { key: 'c0ad7e57ba5f4a9eda2ce854c778ba559a0ab4c6', class: { 'has-error': hasError } }, h("fluent-field", { key: 'e8b058e088387a5c1b970d2a0c37515829c29789', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: 'a80688686d5a642472aeb5edc64e059efe823d35', ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, slot: "input", name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'aeb7a77828c641c6250f1083365c8dbce921d504', slot: "start", name: "start" }, h("udp-fluent-icon", { key: '1a6fd88be4feb32e9edbff5af35858bde1850e06', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '505a648b0d4a8a248541b4ae94babf4137eb7808', class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'e286143785d07aed1ecbb7ae7aacc6185f3967da', slot: "start", name: "start" }, h("udp-fluent-icon", { key: '4ffcfbb08de2f19e78efa2b2654ea74ebf401a2a', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '6271fb0be37b314c2a7ef01777e790cdfde4aafd', class: {
                 'clear-button': true,
                 'is-visible': !!this.internalValue && !this.disabled && !this.readonly,
-            }, slot: "end", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), this.label && (h("fluent-label", { key: 'c6ca422da68bc799733ac9a0e431125b21347647', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'b75b100acfdae25f5b0c589fd1d65ea0fb75e06c', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'eb813886f547c03d32d50ad714920213cb8fe048', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: '54526ac7342d3c9dcc40a7ba6cae3c980fb45934', slot: "message", variant: "caption1", class: {
+            }, slot: "end", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), this.label && (h("fluent-label", { key: '76c6d879ab5081ebb682fb673ae4cc17cfed843d', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e9458ccc073f21a35e708913d01247b1cde0b4f7', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e01470ae5dd057c2fd3f327269a8434669af0027', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: '04724c87df263e121eca183b1c3b4f15a9e7c34e', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -9054,27 +9182,27 @@ const UdpSideSheet = class {
         // 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)))))))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -9121,7 +9249,7 @@ const UdpSlider = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'cef8f14efca54b344bc573fb1f1a8c811ec1af4a' }, h("fluent-field", { key: '761880c96ef07fbeb57bd361836e9705bcffffa8', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '2db8d5b6a0af53c9639e799c218e1971c2f496c8', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'b00ca64c1def208c4272d2c872d7ee667a0fd145', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '50bfaa9ea09908d10e06cadf31867c3fe5e700a4', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: 'f71c30167f7c937e28a2d7999de6a57a28cf6b37', slot: "input", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, orientation: this.orientation, value: this.value, onChange: this.handleChange }), h("udp-text", { key: '4ba35ba746eebbf4bd4cba13bc9130feec8a4273', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '968e919a567381345434edbf781862a31dc91af3' }, h("fluent-field", { key: 'e86bf259ec53806c62aa0a0dcd61088088a80d91', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'e22647bd497fe52f2e393969e1443c20ea0f3a38', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e9814f13f25e7c0a4aad486bf3b01dbae3a6453e', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'bc4ca6609a1cb4e245d2e80f1ef664bf0f885be7', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: '921ee04d6b373be00cb96eda57c3c4bef4766c78', slot: "input", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, orientation: this.orientation, value: this.value, onChange: this.handleChange }), h("udp-text", { key: 'f16788b1ce17b13b2c98194324d66174d92b7369', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -9135,7 +9263,7 @@ const UdpSpinner = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a06546f301afdf9c10f6e3b12830e311842d68c4' }, h("fluent-spinner", { key: '0de1b3aaba7bd65d4282dae0ab773a4dbbbc1176', size: this.size, appearance: this.appearance })));
+        return (h(Host, { key: 'b2ebebedd1f2d8dc407f468ed5be898f18be92c4' }, h("fluent-spinner", { key: 'd5ffa74b2face2f7ccba2cda261bee48abbbceb6', size: this.size, appearance: this.appearance })));
     }
 };
 
@@ -9401,7 +9529,7 @@ const UdpTabPanel = class {
     }
     render() {
         const isActive = this.activeTabId === this.id;
-        return (h(Host, { key: 'cf56739c139547adc2177ba689af14576b83f288', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: '3d9370e3a2083a987212519284a8c57240c39986' })));
+        return (h(Host, { key: '067b209fb2c85ef835fb236e1964f019e0c1266d', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: 'a3c13914b547903978700e6304f68fa406190e3d' })));
     }
     static get delegatesFocus() { return true; }
 };
@@ -9526,11 +9654,11 @@ const UdpTextarea = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'ce219e684e74eeedae71b6bd74bb5d018c4b4a4a', class: { 'has-error': hasError } }, h("fluent-field", { key: 'fd19793a3d39147a4078a6b03a15f4701acd40d9', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: '01e4224cbb7df7a29a2846ffc4d49b87e973906c', ref: el => (this.internalInput = el), slot: "input", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, resize: this.resize, maxlength: this.maxLength, autoResize: this.autoResize, size: this.controlSize, displayShadow: true,
+        return (h(Host, { key: '77859e24a772df8c9be07c9b06b0cdd2515e0f7b', class: { 'has-error': hasError } }, h("fluent-field", { key: 'fa47373ad6ab9e226b98f2ff4353ef5dbf2e0b53', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: '749fec0b2025ce254760de7ae4db8b7254d0e5de', ref: el => (this.internalInput = el), slot: "input", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, resize: this.resize, maxlength: this.maxLength, autoResize: this.autoResize, size: this.controlSize, displayShadow: true,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }), h("fluent-label", { key: 'f946f0a4015f1a6b2b026441baa98321b914d802', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'f029ccf9f63b92fbb4657bd3cf02ca36057c93c5', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '24d4806271f964b9e07ed7c3347f8d240a7e2a17', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'f66ba1b67c27434789d7c19d23b6b27ba286528e', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }), h("fluent-label", { key: '60dd872557b36cee9345bb9a5d7b823f613a156c', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a6e9e0a150bf5c329338ac3036b654e43ec15960', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '6c415371038d73c8c8f77db341b5b65484c69acf', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'e7da461e4f27239319db9f2d62b2b4d00de9eb46', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -10010,7 +10138,7 @@ const UdpTimeInput = class {
         const effectiveError = this.internalError || this.error;
         const hasError = !!effectiveError;
         const message = effectiveError || this.hint;
-        return (h(Host, { key: '1e3c67f0494eebeef619470431dd61f20c812dc2', class: { 'has-error': hasError } }, h("fluent-field", { key: 'bd0eeb86777cafe6967f0209743ebce6da298ced', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: '1f8c29d8e15bc689707f34197cfa02ed82d17716', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: '3bf52c9a96705e52c2d5916c3c0d23faa7526fbd', slot: "trigger", ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, value: this.inputValue, name: this.name, autocomplete: "off", placeholder: this.placeholder, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onClick: this.handleInputClick }, h("fluent-label", { key: 'e11cff02441ac6cdd06b043867ce4e78bf77a61b', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e7b9c453fcdc80e8d015977098385ff14daa7fa7', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '5029d6d74fba64cd9ba5f17118b1997efd6763a1', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: '160e9198fabd32b8c0f5d69ebb4aaa14f16ff4ac', slot: "end" }, h("udp-fluent-icon-button", { key: '5fd57970ef38f441e68bfdc2b8175d69325da974', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '2cbd269385c66ad1771479ea9df1e50fd10a178e', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: 'b433d9275f9403ad30f731806d31beacf6dc9aeb' }, this.timeOptions.map((option, index) => (h("fluent-option", { key: option.value, value: option.value, class: { active: index === this.activeIndex }, onClick: () => this.handleOptionClick(option) }, h("span", { slot: "checked-indicator" }), option.label)))))), h("udp-text", { key: '36a23e55d3dc1c126c58e82d4571148e7b2384c8', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '44d0689e7988d9a72fc1a9e322d348bcdac7bbed', class: { 'has-error': hasError } }, h("fluent-field", { key: 'deb61a054545c8fefe432414c3ee53979704cf35', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: 'b83cfbd2db1c0454c6fa066f7f75e95143271a5c', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: 'b7aa35470775979cfdbb7eb3a3f51735637b1682', slot: "trigger", ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, value: this.inputValue, name: this.name, autocomplete: "off", placeholder: this.placeholder, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onClick: this.handleInputClick }, h("fluent-label", { key: 'f3dc0195ce785fc62bb35723c619a8996803e7cb', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: '03b5638ac5a585f976e94e36b6b59f42c16812b2', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '4e7f21d6b631214930e9aba8fb0ec46eb117d050', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: 'bbe3485bf19a013b1ac9ae93a9528da270a4b5e2', slot: "end" }, h("udp-fluent-icon-button", { key: '46663269176388b61a586aa68bf237d3d74ac1d5', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '55509c3c56fff966a1fc709e82f7788fd88659ea', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: '9afbeb89265f4a34fed387aaaa9a0b071341e3fc' }, this.timeOptions.map((option, index) => (h("fluent-option", { key: option.value, value: option.value, class: { active: index === this.activeIndex }, onClick: () => this.handleOptionClick(option) }, h("span", { slot: "checked-indicator" }), option.label)))))), h("udp-text", { key: '7aa55e4723dffd30df6b256e00496a1936fd6ce6', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -10058,18 +10186,18 @@ const UdpTooltip = class {
     render() {
         // A stable, internal ID is safe because it is scoped to this Shadow Root
         const anchorId = 'internal-anchor';
-        return (h(Host, { key: 'b8678d9abbe1c393f7905b1e8f90e3443a4b8427' }, h("div", { key: '6c47dbca33e00d5657b8c3d8a8625eff7efe6c4b', id: anchorId, onFocusin: (e) => {
+        return (h(Host, { key: '0067d7a56b24d183eb0b91f931f2d19d01f2e5d6' }, h("div", { key: '60e0ce5333db01759dfc0fd7b56ce7b5dd4d9a29', id: anchorId, onFocusin: (e) => {
                 var _a, _b;
                 // Only show on keyboard-driven focus, not pointer clicks or programmatic focus restoration
                 if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) {
                     (_b = this.tooltipRef) === null || _b === void 0 ? void 0 : _b.showTooltip(0);
                 }
-            }, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: '9a0c1631d607bed4983e9fb4e5b545cd52e94109' })), h("fluent-tooltip", { key: 'c4ee67560abc78f347dc7e5da364aad4bda2d565', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
+            }, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: 'b6be513e4eb69604e26ddec26fdf4329164d21d8' })), h("fluent-tooltip", { key: '52c743de0edb443bea54e174cd76858777a9adce', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
     }
 };
 UdpTooltip.style = udpTooltipCss();
 
-const udpTreeCss = () => `:host{display:block}`;
+const udpTreeCss = () => `:host{display:block}.interaction-button fluent-tree-item::part(chevron){display:none}.interaction-button.collapsible fluent-tree-item::part(chevron){display:inline-flex;cursor:pointer;border-radius:var(--borderRadiusSmall)}.interaction-button.collapsible fluent-tree-item::part(chevron):hover{background-color:var(--colorSubtleBackgroundHover)}.interaction-button fluent-tree-item::part(positioning-region){height:auto;min-height:32px;margin:1px var(--spacingHorizontalS);padding-block:var(--spacingVerticalXXS);border-radius:var(--borderRadiusMedium);transition:background-color var(--durationFaster, 0.1s) ease}.interaction-button fluent-tree-item::part(positioning-region):hover{background-color:var(--colorSubtleBackgroundHover)}.interaction-button fluent-tree-item[selected]::part(positioning-region){background-color:var(--colorBrandBackground2)}.interaction-button fluent-tree-item[selected]::part(positioning-region):hover{background-color:var(--colorBrandBackground2Hover, var(--colorBrandBackground2))}.interaction-button fluent-tree-item::part(content){gap:var(--spacingHorizontalXS)}`;
 
 const UdpTree = class {
     constructor(hostRef) {
@@ -10099,6 +10227,49 @@ const UdpTree = class {
          * Path to the content property, or a function to generate the content (default slot).
          */
         this.itemContent = 'label';
+        /**
+         * How a row click behaves:
+         *  - `'tree'` (default): native Fluent tree behavior — clicking a row toggles
+         *    its expansion and selects it; `itemClick` fires for the directly-clicked
+         *    row. Selection is managed internally by Fluent.
+         *  - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,
+         *    aside) emits `itemClick` exactly once and stops there — no built-in
+         *    expand toggle and no internal selection. Pair with `selectedId` (for the
+         *    highlight) and `itemExpanded` (to control which parents are open).
+         */
+        this.interaction = 'tree';
+        /**
+         * When `true`, parent rows get a disclosure chevron that toggles their
+         * expansion, while the rest of the row keeps its normal click behavior.
+         * Designed to pair with `interaction="button"`: clicking a row body still
+         * emits `itemClick` (open details), but clicking the chevron only
+         * expands/collapses that group — it neither selects the row nor emits
+         * `itemClick`. Initial open/closed state is seeded from `itemExpanded`
+         * (so a tree can render fully expanded on load); the user's subsequent
+         * collapse/expand choices are owned internally and persist by id across
+         * re-renders. No effect in `interaction="tree"` mode, where Fluent's native
+         * row-click already toggles expansion.
+         */
+        this.collapsible = false;
+        /**
+         * Per-id expansion overrides applied on top of the `itemExpanded` seed.
+         * Empty until the user clicks a chevron; an entry means "the user set this
+         * row's expansion explicitly." Keyed by resolved item id so the choice
+         * survives `treeItems` edits (e.g. the builder re-flattening the form).
+         */
+        this.expandedOverrides = {};
+    }
+    /** True when the click landed on a row's disclosure chevron `::part`. */
+    isChevronClick(e) {
+        return e.composedPath().some(el => el instanceof Element &&
+            (el.getAttribute('part') === 'chevron' ||
+                el.classList.contains('chevron') ||
+                el.getAttribute('slot') === 'chevron'));
+    }
+    /** Flip the stored expansion for one row, seeding from its initial state. */
+    toggleExpanded(id, initialExpanded) {
+        const current = id in this.expandedOverrides ? this.expandedOverrides[id] : initialExpanded;
+        this.expandedOverrides = Object.assign(Object.assign({}, this.expandedOverrides), { [id]: !current });
     }
     /**
      * Flexible resolver to get data from the item
@@ -10121,6 +10292,38 @@ const UdpTree = class {
         }
         return undefined;
     }
+    /** Icon size that pairs with the tree's row size. */
+    iconSizeForTree() {
+        return this.size === 'small' ? 'sm' : 'md';
+    }
+    /** Start-slot icon from `itemIcon` (string name or `{ name, color?, size? }`). */
+    renderItemIcon(item) {
+        var _a;
+        const resolved = this.resolveProp(item, this.itemIcon);
+        if (!resolved)
+            return null;
+        const d = typeof resolved === 'string' ? { name: resolved } : resolved;
+        if (!d || !d.name)
+            return null;
+        return h("udp-fluent-icon", { name: d.name, size: (_a = d.size) !== null && _a !== void 0 ? _a : this.iconSizeForTree(), color: d.color });
+    }
+    /** Start-slot avatar from `itemAvatar`. Wins over `itemIcon` when both resolve. */
+    renderItemAvatar(item) {
+        var _a, _b;
+        const d = this.resolveProp(item, this.itemAvatar);
+        if (!d || typeof d !== 'object')
+            return null;
+        return (h("udp-fluent-avatar", { name: d.name, initials: d.initials, src: d.src, color: d.color, shape: (_a = d.shape) !== null && _a !== void 0 ? _a : 'circular', size: (_b = d.size) !== null && _b !== void 0 ? _b : (this.size === 'small' ? 24 : 28), iconName: d.iconName }));
+    }
+    /** End-slot badge from `itemBadge` (scalar content, or a descriptor object). */
+    renderItemBadge(item) {
+        var _a, _b, _c;
+        const resolved = this.resolveProp(item, this.itemBadge);
+        if (resolved === null || resolved === undefined || resolved === '')
+            return null;
+        const d = typeof resolved === 'object' ? resolved : { content: resolved };
+        return (h("udp-fluent-badge", { color: d.color, appearance: (_a = d.appearance) !== null && _a !== void 0 ? _a : 'tint', shape: (_b = d.shape) !== null && _b !== void 0 ? _b : 'rounded', size: (_c = d.size) !== null && _c !== void 0 ? _c : 'small', startIconName: d.startIconName, endIconName: d.endIconName }, d.content));
+    }
     /**
      * Recursively renders tree items and their children
      */
@@ -10133,20 +10336,57 @@ const UdpTree = class {
         return itemsAtLevel.map(item => {
             const id = this.resolveProp(item, this.itemId);
             const content = this.resolveProp(item, this.itemContent);
-            const start = this.resolveProp(item, this.itemStart);
-            const end = this.resolveProp(item, this.itemEnd);
             const aside = this.resolveProp(item, this.itemAside);
+            const selected = this.selectedId !== undefined && id === this.selectedId;
+            // Start slot: avatar wins over icon, which wins over plain itemStart text.
+            const avatar = this.renderItemAvatar(item);
+            const icon = avatar ? null : this.renderItemIcon(item);
+            const startText = this.resolveProp(item, this.itemStart);
+            const start = avatar || icon || (startText != null ? startText : null);
+            // End slot: plain itemEnd content plus an optional declarative badge.
+            const endContent = this.resolveProp(item, this.itemEnd);
+            const badge = this.renderItemBadge(item);
+            const end = endContent != null || badge ? [endContent, badge] : null;
             // Find children of this item
             const children = items.filter(child => this.resolveProp(child, this.itemParentId) === id);
             const hasChildren = children.length > 0;
-            return (h("fluent-tree-item", { key: id, size: this.size, appearance: this.appearance, onClick: (e) => {
+            // Seed expansion from `itemExpanded`; once the user toggles a chevron in
+            // `collapsible` mode, the stored override wins so the choice sticks.
+            const seedExpanded = this.itemExpanded !== undefined
+                ? !!this.resolveProp(item, this.itemExpanded)
+                : undefined;
+            const expanded = this.collapsible && id in this.expandedOverrides
+                ? this.expandedOverrides[id]
+                : seedExpanded;
+            return (h("fluent-tree-item", { key: id, size: this.size, appearance: this.appearance, expanded: expanded, selected: selected, onClick: (e) => {
+                    // Chevron in collapsible mode: toggle this group's expansion only —
+                    // no selection, no `itemClick`. Stop here so the click never reaches
+                    // Fluent's tree handler (which would also select the row).
+                    if (this.collapsible && hasChildren && this.isChevronClick(e)) {
+                        e.stopPropagation();
+                        this.toggleExpanded(id, !!seedExpanded);
+                        return;
+                    }
+                    if (this.interaction === 'button') {
+                        // Whole row is a button: emit once for this row and stop, so the
+                        // click never bubbles to ancestor items or to Fluent's tree
+                        // click handler (which would toggle expansion / auto-select).
+                        e.stopPropagation();
+                        this.itemClick.emit(item);
+                        return;
+                    }
+                    // 'tree' mode — preserve native behavior: only the directly-clicked
+                    // row emits; Fluent's tree handler manages toggle + selection.
                     if (e.target === e.currentTarget)
                         this.itemClick.emit(item);
                 } }, start && h("div", { slot: "start" }, start), content, end && h("div", { slot: "end" }, end), aside && h("div", { slot: "aside" }, aside), hasChildren && this.renderTreeItems(items, id)));
         });
     }
     render() {
-        return (h(Host, { key: '065fa53d724ab1be457dfe424e68e20fe34bb7d7' }, h("fluent-tree", { key: '0f8c933e33ad80253e01c87e175bda96d99cc991', size: this.size, appearance: this.appearance }, this.treeItems.length > 0 ? this.renderTreeItems(this.treeItems) : h("slot", null))));
+        return (h(Host, { key: '60890c72952a6f5cff22c20e40afc2fece25a464' }, h("fluent-tree", { key: 'b22362f90a108f7342c7b9f56a3d5cdaa8129fbc', class: {
+                'interaction-button': this.interaction === 'button',
+                collapsible: this.collapsible,
+            }, size: this.size, appearance: this.appearance }, this.treeItems.length > 0 ? this.renderTreeItems(this.treeItems) : h("slot", null))));
     }
 };
 UdpTree.style = udpTreeCss();