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

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

@@ -3,8 +3,8 @@ import { themeQuartz, ModuleRegistry, AllEnterpriseModule, LicenseManager, creat
 import { g as getGridViewsWithConfigurations, d as deleteSelectedView, u as updateViewAndConfigurations, s as saveView, a as updateView, b as getAvailableGridActions, e as executeQueryWithParameters, c as getPromotedMethodEntities, f as executeQueryAdHoc } from './apiUtils-DEqUG_N0.js';
 import { g as getCurrentApiCatalogId } from './lookupHelper-BP4qC8KW.js';
 import { g as getCurrentTenantId } from './tenantUtils-Basdb1b1.js';
-import { a as SearchOperators, L as LogicalSearchOperator, d as SearchConstants } from './searchObject-CDJVsMG_.js';
-import { c as composeSearchFragments } from './searchObjectHelper-CVNJDbDx.js';
+import { a as SearchOperators, L as LogicalSearchOperator, d as SearchConstants } from './searchObject-DpUZkcYC.js';
+import { c as composeSearchFragments } from './searchObjectHelper-BjA6OHxg.js';
 import { S as StatusRenderer, I as IconRenderer, A as ActionsRenderer } from './status-renderer-BoY7sar9.js';
 import { c as configureUdpColumnMods } from './configureUdpColumnMods-CSUDZh9G.js';
 import { isEqual } from 'lodash-es';
@@ -2437,6 +2437,151 @@ class AgGridExpandCollapseAll {
     }
 }
 
+/**
+ * columnSelector — a "Choose Columns" drawer that mirrors AG Grid's native column
+ * chooser but arranges the columns into consumer-defined groups, each with a tri-state
+ * header checkbox that shows/hides the whole group at once. Opened from the toolbar's
+ * Display Settings menu (fires `onAction('columnSelector')`).
+ *
+ * Show/hide only — reorder and pinning are out of scope. Visibility is applied via
+ * `applyColumnState`, so it composes with saved views' existing column-state capture.
+ */
+class ColumnSelector {
+    constructor() {
+        this.groups = [];
+        this.ungroupedLabel = 'Other';
+        this.open = false;
+        this.search = '';
+        /** Accordion item ids the user has expanded. Empty = all collapsed (the default). */
+        this.expandedGroups = new Set();
+        this.close = () => {
+            this.open = false;
+            this.search = '';
+            this.refresh();
+        };
+        // Mirror the accordion's own expand/collapse into our set so it survives re-renders
+        // (a checkbox toggle re-renders the whole drawer). Ignored while searching, when every
+        // matching group is force-expanded.
+        this.handleAccordionChange = (e) => {
+            var _a, _b, _c, _d;
+            if (this.search)
+                return;
+            // udp-accordion re-emits Fluent's change event as the detail; the toggled
+            // accordion-item is its target. `value` is a plain attribute (not a FAST prop), so
+            // read it off the DOM; `expanded` reflects the new state.
+            const item = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.target;
+            const value = (_b = item === null || item === void 0 ? void 0 : item.getAttribute) === null || _b === void 0 ? void 0 : _b.call(item, 'value');
+            if (!value)
+                return;
+            const expanded = (_d = (_c = item === null || item === void 0 ? void 0 : item.expanded) !== null && _c !== void 0 ? _c : item === null || item === void 0 ? void 0 : item.hasAttribute('expanded')) !== null && _d !== void 0 ? _d : false;
+            if (expanded)
+                this.expandedGroups.add(value);
+            else
+                this.expandedGroups.delete(value);
+        };
+    }
+    init(api, refresh, params) {
+        this.api = api;
+        this.refresh = refresh;
+        this.applyParams(params);
+    }
+    update(params) {
+        this.applyParams(params);
+        this.refresh();
+    }
+    applyParams(params) {
+        var _a, _b;
+        this.groups = (_a = params === null || params === void 0 ? void 0 : params.groups) !== null && _a !== void 0 ? _a : [];
+        this.ungroupedLabel = (_b = params === null || params === void 0 ? void 0 : params.ungroupedLabel) !== null && _b !== void 0 ? _b : 'Other';
+    }
+    onAction(name) {
+        if (name === 'columnSelector') {
+            this.open = true;
+            this.refresh();
+        }
+    }
+    // Columns eligible for the chooser: everything except AG Grid's structural columns
+    // (selection checkbox, auto group/detail) and any column the consumer opted out of the
+    // tool panel — mirroring what the native chooser shows.
+    toggleableColumns() {
+        var _a;
+        return ((_a = this.api.getColumns()) !== null && _a !== void 0 ? _a : []).filter(col => !col.getColId().startsWith('ag-Grid-') &&
+            col.getColDef().suppressColumnsToolPanel !== true);
+    }
+    // Partition the toggleable columns into the configured groups (in params order,
+    // preserving each group's column order) plus a trailing "ungrouped" section.
+    buildSections() {
+        const toggleable = this.toggleableColumns();
+        const byId = new Map(toggleable.map(col => [col.getColId(), col]));
+        const used = new Set();
+        const sections = this.groups
+            .map(group => {
+            var _a;
+            const columns = ((_a = group.columns) !== null && _a !== void 0 ? _a : [])
+                .map(id => byId.get(id))
+                .filter((col) => !!col);
+            columns.forEach(col => used.add(col.getColId()));
+            return { label: group.label, columns };
+        })
+            .filter(section => section.columns.length > 0);
+        const ungrouped = toggleable.filter(col => !used.has(col.getColId()));
+        if (ungrouped.length) {
+            sections.push({ label: this.ungroupedLabel, columns: ungrouped });
+        }
+        return sections;
+    }
+    matchesSearch(col) {
+        var _a;
+        if (!this.search)
+            return true;
+        const label = ((_a = col.getColDef().headerName) !== null && _a !== void 0 ? _a : col.getColId()).toLowerCase();
+        return label.includes(this.search.toLowerCase());
+    }
+    setVisible(colIds, visible) {
+        if (!colIds.length)
+            return;
+        this.api.applyColumnState({ state: colIds.map(colId => ({ colId, hide: !visible })) });
+        this.refresh();
+    }
+    render() {
+        if (!this.open)
+            return null;
+        // Sections after search filtering; sections with no matches are dropped.
+        const sections = this.buildSections()
+            .map(section => ({
+            label: section.label,
+            columns: section.columns.filter(col => this.matchesSearch(col)),
+        }))
+            .filter(section => section.columns.length > 0);
+        const shown = sections.flatMap(section => section.columns);
+        const visibleCount = shown.filter(col => col.isVisible()).length;
+        const allVisible = shown.length > 0 && visibleCount === shown.length;
+        const noneVisible = visibleCount === 0;
+        return (h("udp-fluent-drawer", { open: this.open, drawerTitle: "Choose Columns", position: "end",
+            //size="small"
+            onDrawerClose: this.close }, h("udp-flexbox", { direction: "column", gap: "sm" }, h("udp-search-input", { value: this.search, placeholder: "Search columns", onValueChanged: (e) => {
+                var _a;
+                this.search = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
+                this.refresh();
+            } }), shown.length > 0 && (h("udp-fluent-checkbox", { class: "column-selector-select-all", label: "Select all", includeErrorPadding: false, checked: allVisible, indeterminate: !allVisible && !noneVisible, onValueChanged: () => this.setVisible(shown.map(col => col.getColId()), !allVisible) })), h("udp-accordion", { appearance: "contained", expandmode: "multi", items: sections.map((section, i) => ({
+                id: `group-${i}`,
+                label: section.label,
+                // Search force-expands every matching group; otherwise honour the user's
+                // expand/collapse (default collapsed).
+                expanded: this.search ? true : this.expandedGroups.has(`group-${i}`),
+            })), onAccordionChanged: this.handleAccordionChange }, sections.map((section, i) => {
+            const groupVisible = section.columns.filter(col => col.isVisible()).length;
+            const groupAll = groupVisible === section.columns.length;
+            const groupNone = groupVisible === 0;
+            return (h("div", { slot: `group-${i}-content`, key: `group-${i}`, class: "column-selector-items" }, h("udp-fluent-checkbox", { label: "Select all", includeErrorPadding: false, checked: groupAll, indeterminate: !groupAll && !groupNone, onValueChanged: () => this.setVisible(section.columns.map(col => col.getColId()), !groupAll) }), h("div", { class: "column-selector-column-list" }, section.columns.map(col => {
+                var _a;
+                const def = col.getColDef();
+                return (h("udp-fluent-checkbox", { key: col.getColId(), label: (_a = def.headerName) !== null && _a !== void 0 ? _a : col.getColId(), includeErrorPadding: false, checked: col.isVisible(), disabled: def.lockVisible === true, onValueChanged: (e) => this.setVisible([col.getColId()], e.detail) }));
+            }))));
+        })), shown.length === 0 && (h("udp-text", { variant: "body1" }, "No columns match your search.")))));
+    }
+}
+
 const gridFunctionRegistry = {
     agGridExport: AgGridExport,
     agGridExcelExport: AgGridExcelExport,
@@ -2452,6 +2597,7 @@ const gridFunctionRegistry = {
     quickFilterChips: QuickFilterChips,
     agGridRefreshData: agGridRefreshData,
     agGridExpandCollapseAll: AgGridExpandCollapseAll,
+    columnSelector: ColumnSelector,
 };
 
 function createTitleContainer(title, subtitle) {
@@ -2843,6 +2989,7 @@ const AgGridBase = class {
                     forEachNodeAfterFilterAndSort: callback => this.gridApi.forEachNodeAfterFilterAndSort(callback),
                     stopEditing: (cancel) => this.gridApi.stopEditing(cancel),
                     getFocusedCell: () => this.gridApi.getFocusedCell(),
+                    getAllDisplayedColumns: () => this.gridApi.getAllDisplayedColumns(),
                 });
             }
             this.gridReady.emit(this.gridApi);
@@ -2944,7 +3091,7 @@ const AgGridBase = class {
         this.updateGridContextValues();
     }
     render() {
-        return (h("div", { key: '2e324cc05b83eab139272fdf04a3fd0a890e4cfe', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: 'a011d777be765306d27b3b8f0eff95474f233ec4' }, h("div", { key: '9ecdce3c385bdc1195076c33dac16dd1bb103a65' }, h("udp-dialog", { key: '970b5e34f6f3b2a6876a7ed45833e3ea0767556a' }), h("udp-list-item", { key: '99a94e69fff6ccd8d8e08cbb4509136c8ea9a20f' }), h("hint-panel", { key: '6bf962d2ec37c527da7d41e245e5c92b3d7fea6e' }), h("udp-side-sheet", { key: '24d1d842ec3ad7deb95d4425ad4556d856e65840' }), h("udp-fluent-dialog", { key: '9c106585b1cac8aed9e3b737518f33ee0e69c794' }), h("udp-fluent-text", { key: 'b92f039907c91d9c44a29ed12502d0082bbeeec6' }), h("udp-fluent-text-input", { key: '83df88579f4261c12e606e9af60814fe257f4629' }), h("udp-fluent-switch", { key: '3a7215ffa7bbf6611c5d85ca1f41bdc42751a7fc' }), h("udp-fluent-button", { key: 'f6f070fa8f4cc939022fa7ed1351f558038f6919' }), h("udp-text", { key: '83fbf49dc8f401114b94d2fab25ede8372949c9f' }), h("udp-search-input", { key: '482602038657f200908731c96b95197b7e11c6ba' }), h("udp-export-sheet", { key: 'e8f2972003c9120fbee523e2408fe36b8153f17c' }), h("udp-fluent-avatar", { key: '9309f1d989eca7e5eeb2bd3dc86b2cdb5a549dd0' }), h("udp-fluent-icon-button", { key: 'ad251e4b04d599d6798ed5d1e0c630e308072e3c' }), h("udp-fluent-icon", { key: 'de539e8ab0155478fa96ed2db0b1f4d0028c2be7' }), h("udp-fluent-badge", { key: '46076e58fde25a67658a05d2e4ef0615b3f38d5f' }), h("udp-empty-state", { key: '4b7e51348f797d2e1f1193bc6d326bd19db74bd3' }), h("udp-message-bar", { key: '2a64469c727e2e5d993aa50a2eb14cce8292a56d' }))), h("grid-header", { key: 'e817acfcac3f4ad90281b9020be919b3fa85547d', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: 'fcd92a8bea402614bb1a643c5fbe804ac59278f0', ref: el => (this.gridEl = el) })));
+        return (h("div", { key: '8d1e2609edad31f473021b89b14e29629a2c9573', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: 'b2c20a3091265323ce138e79f2b5c8cba1969eb7' }, h("div", { key: '01210fa046859a2f52d6ab636c9b0e7bd4559da4' }, h("udp-dialog", { key: '9a654075e15fd4507b219e556abd04bb16443c34' }), h("udp-list-item", { key: 'ff3ca7dd2ca58922eee4813853863a765cf09a67' }), h("hint-panel", { key: '79093701a783ec49902528273c4894057424a7fb' }), h("udp-side-sheet", { key: '3ea9829fd3d726b60f0cb7b0eedaea5e308ef371' }), h("udp-fluent-dialog", { key: '63a88db71337348a4fa188ae48bacf5cd26601ee' }), h("udp-fluent-text", { key: '37aa26a11e2fbc82e984bfc3693fdc5aa3db6520' }), h("udp-fluent-text-input", { key: 'ff173d0a3dbbde41ecdf1a3b30c37c5eca45c9c1' }), h("udp-fluent-switch", { key: '13bd88ff11b5017e51bf2520000c2df05b288d0c' }), h("udp-fluent-button", { key: 'ae0f2ec0ee6da3a7a2b28175c159d2ef70dc776c' }), h("udp-text", { key: '684c39b1076b37df527229a571a276e22b599fee' }), h("udp-search-input", { key: 'ebedaa5ba2a469cf7cd2b80f10916bb8205053d8' }), h("udp-export-sheet", { key: '3fbc590e9ed8ed7ddc1c9ed66017f85a26af8e74' }), h("udp-fluent-avatar", { key: '5599aee9264abec6591f1e95e845355545cbdeb7' }), h("udp-fluent-icon-button", { key: '6cb17c8b3b3b10ee240054dd1271885d2920e377' }), h("udp-fluent-icon", { key: 'aaf65833610f221e2b93e31358849928859fc7e0' }), h("udp-fluent-badge", { key: 'a889bd42bb90c3399e063d1273d414241c88c249' }), h("udp-empty-state", { key: '1be9cd5618cea184b46194b66975e634fc6d84d5' }), h("udp-message-bar", { key: '80085dd6a91307d10d5f1af60673bb18540c34ea' }))), h("grid-header", { key: '92983d1eecd1f85f190a34ad6436b8d7a6eccf09', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: 'd32ad6f8e6ea7fad36d3521aa4d165df73d26e35', ref: el => (this.gridEl = el) })));
     }
     static get watchers() { return {
         "gridFunctions": [{
@@ -3007,7 +3154,7 @@ const ClientSideGrid = class {
         this.clientSideConfig = Object.assign(Object.assign({}, this.gridOptions), { rowModelType: 'clientSide' });
     }
     render() {
-        return (h("ag-grid-base", { key: 'fefab01e07d981e534c02bb4089d8bb8d38ecebf', 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: 'ed324ffc277177f2866eb8ffb051d5bb4072ad46', 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": [{
@@ -3093,7 +3240,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: '0e19c3c5ccc74ae32f49f68aceb85a561a44ad9b' }, h("slot", { key: 'cbf394dede71d62d448da83b30718223da6359c9' })));
+        return (h(Host, { key: 'aff1f9f2bc44c5dca31e23f8b547045b3406a8dc' }, h("slot", { key: '68c3824e69cea30ab4728fc76616f70cb86a9a21' })));
     }
 };
 GhostRender.style = `:host {
@@ -3118,7 +3265,7 @@ function computeHasScopingTools(gridFunctions) {
     return gridFunctions === null || gridFunctions === void 0 ? void 0 : gridFunctions.some(f => SCOPING_FUNCTIONS.has(f.name));
 }
 
-const gridHeaderCss = () => `.toolbar-content{display:flex;align-items:center;width:100%;min-height:48px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalL);box-sizing:border-box;background-color:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke3)}.bulk-overlay-wrapper{position:relative;width:100%}.bulk-overlay-ghost{visibility:hidden}.bulk-overlay-bar{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--spacingHorizontalL);box-sizing:border-box;background-color:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke3)}.toolbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%}.scoping-zone{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex:1 1 auto;min-width:0}.scoping-zone>*:not(.quick-filter-chips){flex-shrink:0}.toolbar-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:0}.quick-filter-chips{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden}.quick-filter-chips>*{flex-shrink:0}.promoted-utilities{display:flex;align-items:center;gap:var(--spacingHorizontalS)}.view-selector-wrapper{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}.view-dirty-actions{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}@keyframes emerge-from-menu{from{opacity:0;transform:translateX(-10px) scale(0.75)}to{opacity:1;transform:translateX(0) scale(1)}}udp-fluent-icon-button.spin-refresh{--udp-icon-animation:udp-icon-spin 1s linear infinite}.view-dirty-actions>*{animation:emerge-from-menu 180ms cubic-bezier(0.1, 0.9, 0.2, 1) both;transform-origin:left center}.view-dirty-actions>*:nth-child(2){animation-delay:50ms}.bulk-actions-bar{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}.bulk-actions-bar>*{animation:emerge-from-menu 200ms cubic-bezier(0.1, 0.9, 0.2, 1) both;transform-origin:left center;will-change:transform, opacity}udp-fluent-button.bulk-action-danger::part(button){color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}udp-fluent-button.bulk-action-danger::part(button):hover{background-color:var(--colorStatusDangerBackground1);color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}udp-fluent-button.bulk-action-danger::part(button):active{background-color:var(--colorStatusDangerBackground2);color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}.bulk-actions-divider{width:1px;height:12px;background:var(--colorNeutralStroke2);flex-shrink:0;margin:0 var(--spacingHorizontalS)}.view-search-container{padding:var(--spacingVerticalXS) var(--spacingHorizontalS)}.view-slot-action{display:flex;align-items:center}.has-active-view::part(trigger){background-color:var(--colorBrandBackground2Hover);color:var(--colorBrandForeground1);border-color:var(--colorBrandBackground2Hover)}.qf-chip-active::part(trigger),.qf-chip-active::part(button){background-color:var(--colorBrandBackground2Hover);color:var(--colorBrandForeground1);border-color:var(--colorBrandBackground2Hover)}.qf-date-chip{display:inline-flex;align-items:center}.qf-date-footer{display:flex;justify-content:flex-end;gap:var(--spacingHorizontalS);padding:var(--spacingVerticalS) var(--spacingHorizontalM);border-top:1px solid var(--colorNeutralStroke2)}.adv-filter-button{position:relative;display:inline-flex}.adv-filter-badge{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground);box-shadow:0 0 0 1.5px var(--colorNeutralBackground1);pointer-events:none}.scoping-divider{width:1px;height:20px;margin:0 var(--spacingHorizontalS);background:var(--colorNeutralStroke2);flex-shrink:0;align-self:center}`;
+const gridHeaderCss = () => `.toolbar-content{display:flex;align-items:center;width:100%;min-height:48px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalL);box-sizing:border-box;background-color:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke3)}.bulk-overlay-wrapper{position:relative;width:100%}.bulk-overlay-ghost{visibility:hidden}.bulk-overlay-bar{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--spacingHorizontalL);box-sizing:border-box;background-color:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke3)}.toolbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%}.scoping-zone{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex:1 1 auto;min-width:0}.scoping-zone>*:not(.quick-filter-chips){flex-shrink:0}.toolbar-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:0}.quick-filter-chips{display:flex;align-items:center;gap:var(--spacingHorizontalXS);flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden}.quick-filter-chips>*{flex-shrink:0}.promoted-utilities{display:flex;align-items:center;gap:var(--spacingHorizontalS)}.view-selector-wrapper{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}.view-dirty-actions{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}@keyframes emerge-from-menu{from{opacity:0;transform:translateX(-10px) scale(0.75)}to{opacity:1;transform:translateX(0) scale(1)}}udp-fluent-icon-button.spin-refresh{--udp-icon-animation:udp-icon-spin 1s linear infinite}.view-dirty-actions>*{animation:emerge-from-menu 180ms cubic-bezier(0.1, 0.9, 0.2, 1) both;transform-origin:left center}.view-dirty-actions>*:nth-child(2){animation-delay:50ms}.bulk-actions-bar{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}.bulk-actions-bar>*{animation:emerge-from-menu 200ms cubic-bezier(0.1, 0.9, 0.2, 1) both;transform-origin:left center;will-change:transform, opacity}udp-fluent-button.bulk-action-danger::part(button){color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}udp-fluent-button.bulk-action-danger::part(button):hover{background-color:var(--colorStatusDangerBackground1);color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}udp-fluent-button.bulk-action-danger::part(button):active{background-color:var(--colorStatusDangerBackground2);color:var(--colorStatusDangerForeground1);border-color:var(--colorStatusDangerBorder1)}.bulk-actions-divider{width:1px;height:12px;background:var(--colorNeutralStroke2);flex-shrink:0;margin:0 var(--spacingHorizontalS)}.view-search-container{padding:var(--spacingVerticalXS) var(--spacingHorizontalS)}.view-slot-action{display:flex;align-items:center}.has-active-view::part(trigger){background-color:var(--colorBrandBackground2Hover);color:var(--colorBrandForeground1);border-color:var(--colorBrandBackground2Hover)}.qf-chip-active::part(trigger),.qf-chip-active::part(button){background-color:var(--colorBrandBackground2Hover);color:var(--colorBrandForeground1);border-color:var(--colorBrandBackground2Hover)}.qf-date-chip{display:inline-flex;align-items:center}.qf-date-footer{display:flex;justify-content:flex-end;gap:var(--spacingHorizontalS);padding:var(--spacingVerticalS) var(--spacingHorizontalM);border-top:1px solid var(--colorNeutralStroke2)}.adv-filter-button{position:relative;display:inline-flex}.adv-filter-badge{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground);box-shadow:0 0 0 1.5px var(--colorNeutralBackground1);pointer-events:none}.scoping-divider{width:1px;height:20px;margin:0 var(--spacingHorizontalS);background:var(--colorNeutralStroke2);flex-shrink:0;align-self:center}.column-selector-items{display:flex;flex-direction:column;gap:var(--spacingVerticalXS)}.column-selector-column-list{display:flex;flex-direction:column;gap:var(--spacingVerticalXS);padding-left:var(--spacingHorizontalL)}`;
 
 const GridHeader = class {
     constructor(hostRef) {
@@ -3177,6 +3324,7 @@ const GridHeader = class {
         const advancedSearchInstance = instanceByName('advancedSearch');
         const refreshInstance = instanceByName('agGridRefreshData');
         const expandCollapseInstance = instanceByName('agGridExpandCollapseAll');
+        const columnSelectorInstance = instanceByName('columnSelector');
         // ── Zone B: Utilities (Display Settings cog) ──────────────────────────────
         const settingsMenuItems = [
             enabledFunctionNames.has('agGridSizeColumnsToFit') && {
@@ -3212,8 +3360,10 @@ const GridHeader = class {
         ].filter(Boolean);
         const hasUdpExport = enabledFunctionNames.has('udpExport');
         const hasExpandCollapse = enabledFunctionNames.has('agGridExpandCollapseAll');
+        const hasColumnSelector = enabledFunctionNames.has('columnSelector');
         const hasUtilityButtons = hasUdpExport ||
             hasExpandCollapse ||
+            hasColumnSelector ||
             enabledFunctionNames.has('agGridRefreshData') ||
             settingsMenuItems.length > 0;
         // ── Layout rules ──────────────────────────────────────────────────────────
@@ -3230,12 +3380,16 @@ const GridHeader = class {
         const showToolbar = hasGridFunctions && !isPromoted && !isFullyPromoted;
         // ── Zone B renderer (Utilities) ───────────────────────────────────────────
         const renderUtilitiesZone = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             return [
                 hasExpandCollapse && (h("udp-tooltip", { content: ((_a = expandCollapseInstance === null || expandCollapseInstance === void 0 ? void 0 : expandCollapseInstance.isExpanded) === null || _a === void 0 ? void 0 : _a.call(expandCollapseInstance)) ? 'Collapse all' : 'Expand all' }, h("udp-fluent-icon-button", { iconName: ((_b = expandCollapseInstance === null || expandCollapseInstance === void 0 ? void 0 : expandCollapseInstance.isExpanded) === null || _b === void 0 ? void 0 : _b.call(expandCollapseInstance)) ? 'arrow-minimize-vertical' : 'arrow-maximize-vertical', shape: "rounded", onClick: () => this.action('agGridExpandCollapseAll') }))),
                 enabledFunctionNames.has('agGridRefreshData') && (h("udp-tooltip", { content: "Refresh data" }, h("udp-fluent-icon-button", { class: { 'spin-refresh': (_d = (_c = refreshInstance === null || refreshInstance === void 0 ? void 0 : refreshInstance.isRefreshing) === null || _c === void 0 ? void 0 : _c.call(refreshInstance)) !== null && _d !== void 0 ? _d : false }, iconName: "arrow-sync", shape: "rounded", onClick: () => this.action('agGridRefreshData') }))),
                 hasUdpExport && (h("udp-tooltip", { content: "Export" }, h("udp-fluent-icon-button", { iconName: "export", shape: "rounded", onClick: () => this.action('udpExport') }))),
+                hasColumnSelector && (h("udp-tooltip", { content: "Choose columns" }, h("udp-fluent-icon-button", { iconName: "table-settings", shape: "rounded", onClick: () => this.action('columnSelector') }))),
                 settingsMenuItems.length > 0 && (h("udp-fluent-menu", { buttonType: "icon", shape: "rounded", endIconName: "settings", appearance: "secondary", size: "medium", items: settingsMenuItems })),
+                // Column-selector drawer — an overlay, so placement here is incidental; it only
+                // renders content while open (triggered by the "Choose Columns" menu item above).
+                enabledFunctionNames.has('columnSelector') && ((_e = columnSelectorInstance === null || columnSelectorInstance === void 0 ? void 0 : columnSelectorInstance.render) === null || _e === void 0 ? void 0 : _e.call(columnSelectorInstance)),
             ];
         };
         // ── Zone A renderer (Scoping) ─────────────────────────────────────────────
@@ -3281,7 +3435,7 @@ const HintPanel = class {
         };
     }
     render() {
-        return (h("div", { key: 'ddc532446d82bf01d6bdbca13bcd4ccded942f00', class: "hint-container" }, this.showHint && (h("div", { key: '193beca238e210b5d6a102b2efc39c9ce4ef44a0', class: "hint-content" }, h("div", { key: '6e874188bed8d41c865fe3bc5f94335ab2576b09' }, h("unity-typography", { key: '8b358dbe791b3f588586fe9e5c898bc84804a9d1', variant: "body" }, " ", this.hint, " ")), this.hideHintText && (h("div", { key: 'af351ef2e320c3ca8e0aac0aaec25e9f7076a581', class: "hide-help" }, h("udp-button", { key: '84ff381d2f34f611e116ec201a47f38511a2b18b', size: "small", color: "info", onClick: this.handleHideHint }, this.hideHintText)))))));
+        return (h("div", { key: '7dd7cee1b25445515d3e831bedf6b688b5926941', class: "hint-container" }, this.showHint && (h("div", { key: 'b192bfd95cc66e3fe8399261af1364f88fa1635d', class: "hint-content" }, h("div", { key: '129b35433ccf615a5e711194a4bc693bfc371b10' }, h("unity-typography", { key: 'c3fc5998c707c1c4af5912b15f8c0cf603848cc4', variant: "body" }, " ", this.hint, " ")), this.hideHintText && (h("div", { key: '7d56f6543cef450d72ba7fcf43c8a8604f4ca847', class: "hide-help" }, h("udp-button", { key: 'c83b6aa2db427fb241270663cba09645abc3c738', size: "small", color: "info", onClick: this.handleHideHint }, this.hideHintText)))))));
     }
 };
 HintPanel.style = hintPanelCss();
@@ -3734,51 +3888,51 @@ const TestComponentsPage = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'cc3492fffe7f6df6f7fa42245905c8d4155d18b7', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: 'aaded8dee6fa34a9bdd3e3baf39e39edbc050958', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '57921ffd2b146c4e5db541d583d5fa3940f45b66', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: '92a93251e5c7b5fe1c239baae7aab59a5124283e', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '10cd16e0d809997dd398304101da0387d9eb4c21', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '9d5bd2a6e314f98c3f1145fbade40f81605db1b6' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '807935f8659dd4d26f45f8e982727834ebc2b227', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: '96e0eb9986242593b2cad5e47aca298fe337c31d', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '65dfb6a437f8c5b0faecd349f3d3a87d0d7a9604' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: '179ea71e141e4601ab843b36a1995447d4446a52', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '6b12a39d522e9bb862e6dde4a68a3a034ac06756', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: '8d9ccac6c268a817ed7e8fac84ffead18893cfc2', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: '2255c8fd815f8cde411b8b9a54b286055ac96f79', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: '11185c903764ab0e65f5557048898f39847427c9', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: 'd5bdb89e8331eec473818a045920fdc86ef7af5d' }, "Buttons & Inputs"), h("div", { key: 'd33552750b6849228c5c15a06046018a03a899c7', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: 'be1df1bb5dcbafbd699f4155783dd72c41298d65', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '202016898629988139ca23b08a0fa7a986284ed0', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: 'f7625272ffa632575be4a09c34f45a66187be00d', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: '36c2f64bcca1dda5830d37997cdf2f46fb34093a' }, h("udp-fluent-button", { key: 'fe737ce4d6b18ef38a834a7e2b0a881753132fb6', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '875684c368f9bff20fdfd5ffb88d2d99dd79faf0' }, h("h4", { key: '875d2adc248cec08d21e5265ee7324e0b46eaa2c' }, "New Icon Props"), h("div", { key: '6d4a3bb71721a495b1fbdc70ac3c1880d1713a76', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: '8c11f8501d2d0ea4e29d6991d61599bd70784728', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: 'd6c4a4b5fba360b6cc250a704843a5639b1cf5c4', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: 'fe9e4921de4164b4f97c357b73c6527b7f5ac39e', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: '165d55c5cf1d231c39eda57569c522cb48933e79', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: 'd4e850ff78e1af66aa60fc63764c66e503591ab0', slot: "start" }, h("udp-fluent-icon", { key: 'd0a9be36c9f6477eaa696682a6cecb8b8f3129d4', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: '6c30fd5ab5f9e2657b9c2913be6d5b6e75036f15' }, h("h4", { key: '985ac24d234d8c1d81aa3fa4f3b2fa3796e2e207' }, "Compound Buttons"), h("div", { key: 'e931364cc88807c52b4f9a13945bcf193ec603aa', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: 'c412dec749f9ffc51edb18eb938d054b8e78af04', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: 'f3441cf3a4fe053d5d0d39590f5d1c81e25fd9d1', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: 'c31a2620973d9c274f684363a8da36210fa653c2', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: '39600ebc133e27d130b782b036063bb172b759ba', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: 'ea14afc6192187c361ea346dfa37a12447dbce23', style: {
+        return (h("div", { key: '259cb3a8ed21dd8b5209dc68b0fec29bc451a563', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: '8b7ed2c5b31c0140793af38171c12bae3ce305fb', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '4ea0b0c1b469a9f78434c4cc3d0153c16e01674c', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: '1b28be56d4023a4e93e8fa1a79bc67aff7661bbd', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '2703b55f647ce5ac3be1fd076d0c749ce07534c5', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '6aaf56b6dedc63baaf53403dc908d846ef328ad5' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '0e0d33972caefe744e3594f2dcdbe1013021ca5e', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: '937d874b45a4890dc1d5afa7aecf3a089c7de86f', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '13383fe1a055cfe6d9f7b64b2288594321775b7c' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: '71a234c9d6334d72cb60c1a40b650cff0a03384f', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '17a64ccb9ab48aa4397e3e15a2977d20f414c421', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: 'b69f89f64447b3958951acfde36f39e9a2b13540', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: '94563e85c7ce806b4fd232ddb722e0cae36bcacf', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: '3e064b4233b9968eaee3761756f1fb0b6dea38b2', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: 'aebb8b2dfbef6a14b8f1544ccba19eb0f536d083' }, "Buttons & Inputs"), h("div", { key: '97de512c0f547b88579da0364df4edb65c8d9dee', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: '53467ebaee33a63382f54b6093ab8dc3a021db16', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '1fdddc7caae9415a2b5c05e847cab7fa6d8db1a3', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: '5573be6459ec8049daa60fc3da6a5b6329c553c8', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: '05cb331e21a4ae8f9c6d604b39cade1b44894311' }, h("udp-fluent-button", { key: '4f4382c2762856a482a1442da1e3ba616370e024', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '0bbf3a5e769c817006b8a32ad036d83339958d8b' }, h("h4", { key: '12878602332083d4e3298eaef7769178971386d1' }, "New Icon Props"), h("div", { key: 'fbd2d0104208ea6c02f55805d7ffd3aea61d63b9', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: '740514c1483d5afb2bdc4c7849fb9806e8a93c85', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: '79dd2c5b38b86d0cdff21fbd78d8b685ab7d7244', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: '876eb3aa3fc36acad6962394c5ebf2015ddc2003', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: '8712a723e343886eb2c6cc72ee6da0cd682348b9', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: '225487c880b0560c85feedf2a523221c16a060a4', slot: "start" }, h("udp-fluent-icon", { key: '30818b05fea732e0f1b31b80b3e6084cdaa7730b', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: '1e4ff49d242a5004ce0a6a791b87bad29031f41e' }, h("h4", { key: '023fd429281c5a32a8bfc0639c21bd787cac4cec' }, "Compound Buttons"), h("div", { key: '36ed7d755e48da2aed6bc92039bada889c3fe16e', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: 'b77f297405663a619f66720cceffb23f4647d044', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: '6448725f887c31598048c4aeb201691ff265cfb1', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: '0aa8c0f5b5a88e1ccb0e17ac4c81a90a9c1f0148', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: '5b210a97be29245580c06cf65780b772b041e9af', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: '0b043566923a579446dd90494c271e8b3d8d7cb1', style: {
                 marginTop: '1rem',
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
-            } }, h("udp-fluent-switch", { key: 'f0fa7cd4713a58239322af804cdd77b732484748', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: '0bb61eb81d80813ee5eedb56df0fdd7eb9864388', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '2d9e5ea0242535d2761c21de4c876871c704b166' }, h("h4", { key: '6a435b2771a9f115ae029d014aad6a262c05eb43' }, "Toggle Buttons"), h("div", { key: 'cf124400ab9d4a686c72f4c5cc2c666b545115b2', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: '4b01dcf94b60b6832d4110c3df009a1828d2f513' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: 'a080666828c81aacc13212157a098555207e1f46', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '3c19bb1829d77fb681b2595eaa864fd45915dece' }, h("udp-fluent-icon", { key: '1e5b306127915f57faef13f6e3a2b14dd63f78aa', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: '9cf9e929936e5cce6d4ee9f3ae0c011eb92c1411', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '588eb18f7a6c965a988ff97bfcd02181230fc76d', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: 'a750eb403b56d41d3a3dcc73ef460054c1d0cd28', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: 'ca00a47f25e967aa7f16dbfa3f6a88942631ac71' }, h("h4", { key: '96050267e5cc438803dacc7bf20036e16c915458' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: '0dc7dc14386ff0dc74955bc9ea515f20c64c2e6a', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: '7ac09570ebe02bf803de177371071be29c64aa4f', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '7a073723eb7d87af17a361c2a3aa0a7b2d9eb960', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: 'df3f8e5d6a7a6cc00676c027bd61df6c69ff1993', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '5d778e44196f73faa5a35195804ec07ac01508df', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '0d3ecc6727a1b3059494f6c2118b2fc7ac81a9d4', iconName: "settings", size: "medium",
+            } }, h("udp-fluent-switch", { key: '1f9bd9a6f26b91f6f0c202268795e09e2e4085b3', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: 'c2228a6313b6ab1bc67cf918ef5fcc7129518ade', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '83dfe5cedea8571d4d4a4555678eb946826fc9d9' }, h("h4", { key: 'b8ee8f9754b9f05c84e18b9ae0f7bdc1eaaf9d89' }, "Toggle Buttons"), h("div", { key: '0daab9dcbe8bc7f432aa02d29034dba41a915cbe', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: 'd91581c1f2464d7a8783c744d4ba0eca9d20f1ac' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: '9085d33be727cb31ec7f108b31de1fbd99cf0984', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '8399900975e4da964ef1d7f065f2ba502ff91f06' }, h("udp-fluent-icon", { key: '36c707a0784d4a88757e5e70e873ec220e930e89', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: 'b1149df5564afa0725b009781f504dc095553ddb', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '828b9a62c3d08bb9b031d1c89331115a95748b10', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: '104c41a27db9b5c248a5b511f4d4e82e228164bd', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: 'eff1d230b3f2bee9912b00ededc6099c1d8e44c3' }, h("h4", { key: '6828bacec102844aebb46b2ce45a8f03e92e4825' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: 'c0909854029fce0a69d80555e1b5e4bcbe8672a5', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: 'c6dfb90f97d8b348831873df72d3a97b705d3296', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '42b65c8e25c056191f8277ffb757af87f9555693', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: '55853919bf46b833d279f06c75116787c46a9306', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '9a02a59ac9b31c40744d1cbebef26cc6868d9011', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'e593535362c923a89d68752f573a6167164766ee', iconName: "settings", size: "medium",
             //appearance="primary"
-            ariaLabel: "Delete" }), h("span", { key: '7268648e7a39e737a089d7e6168a414a5fc3a6dd', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: 'ae8300d43cdda803970269e496bbedcc8151a910', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '5620e84329effc9295cdf543a960aa3bf69acf69', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: '3adc2bef2cc7b262fd3473fe884328302aebcaeb', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: '484a695dbb8e4833f8e74d3ad65f5b7d973e1076' }, h("udp-loading-spinner", { key: 'cd391b9b2614f8b85ea4d568536643e5c117e104', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '6e4e4418c5316fc53dfc9e1d9cb7966bdb2a38e9', id: "inputs", activeTabId: this.currentTab }, h("div", { key: 'a88b77ed96fe127420e2d1ad2a07e941fb5b9060', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: 'd98c9f45e010b176b05bad64cb19f537e85bdcfa', style: {
+            ariaLabel: "Delete" }), h("span", { key: '62ba6dca8eb4d9cf05cda63202288640f3e8ca03', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: '9b3ea77d5a27f76c0ab3cd889a88ddd5df5670d1', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'becb64bfc00f04641028bd003a2c8d85b4fe45b3', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: '40b066df359d985c3d4cf4d267cc234b7839cccc', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: 'a3d73356c5f6a761b51749ceb0af69ade68c0c0d' }, h("udp-loading-spinner", { key: 'c7b3ef842d657312d9ed54fddc92dbaf2941484e', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '98fe08e5f1c3defe5750fc4ba15d1fec24659948', id: "inputs", activeTabId: this.currentTab }, h("div", { key: 'd93ec35deb139e305e7fefe13d7064482e41503b', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: '2da75c4ab7e4075cb3e814663033357bd066b8fe', style: {
                 padding: '1rem',
                 backgroundColor: 'var(--colorNeutralBackground3, #f5f5f5)',
                 borderRadius: '8px',
                 marginBottom: '1rem',
-            } }, h("h3", { key: '62f2d93485e890cce09f263d27c5f2e25ade1b62', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: '8966f2e656be3af518087c18d07e11d0f4cf3e46', style: {
+            } }, h("h3", { key: 'b4dc898ad916e48c59efb67f3c6907d78307c737', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: 'b841b24ab293d35eed3bae9699b73466ab2bbecf', style: {
                 display: 'flex',
                 gap: '2rem',
                 flexWrap: 'wrap',
                 alignItems: 'flex-end',
-            } }, h("udp-fluent-dropdown", { key: 'f28dc549cd7619ed88ad95344fbc6abfbd8f2c3f', label: "Appearance", value: this.inputControlAppearance, options: [
+            } }, h("udp-fluent-dropdown", { key: 'f9d3a5dac07baad9a80b451b9517e25c8afd088e', 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: '32502fad7f06750134c726c1a51267d1ddd894f0', 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: '63b81d904735f7f9ff50667aa2f09a0693f8033e', 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: '2b19493a782ceb8124023ff189eebcb93e7bbc24', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: '825db201e44002c6a1bc04750d3702e008da94b2', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: '94d04dcb10d043e89fb8a414409ba0aaf2b335ef', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: '0cde819103938ad9702e13d08cb1c89469695455', 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: 'a6576c15b1e73976c3d8169cee3c58d9b2d00d3a', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: '9a66fd143dbc23a39a3a828632f15a370e91119b', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: '0b5a01386d1dd64f1bdc5e1a5e432cc806bf7181', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: '9a34e44de01b56bc9c7493c86b416ccfbbc701cb', 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: '462d8f004d801893f69e58d35db56ad4fed99d20', 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: '26a1a8e1d4fe685b51a94a04fb46713e874e30fc', 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: '5bd41b034befcb17f8486f62881db768f9ac91c0', 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: 'd97709cc10e7e876df6d2877f67c695a3d0f5eb8', 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: '4e53693f0ecece17986e19249614e3e1fc7219d5', 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: '82f5577140814358d8ac35a9f5af86611110b628', 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: '525b79864f91baa08e4db249d8f0f02ca285d64f', 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: 'b25357dffdde18f382fc5d89db51871a6af11925', 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: '0724f922b2b3a6d10114da0c182a9f231db977d7', 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: '525b5a4de7d706871935ba90c77986f59fcf04ea', 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: '1ac123914d9eb385808bcbedf64bcdbd197c549f', 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: 'c1453763513c55df34a03aac2c2a7496706fa652', 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: 'aba83d232b044c7f3f9171ca28ace5abd7233d85', 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: '27bc89b3155696e83b118d2ed8ab61f08b076a96', 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: '641bb42692908269b2cfdc44e1269ed65105e534', 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: '8d0058ad096cae523a5263cee66d57b3b8872c5f', 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: '2781e29822fbe6b2df820e41935ef1bdcb695e75', 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: '894d2e93b16ebed8732d2d4e6a0334e321f995f3', 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: 'c1747c1613f65a0344c97b598ffb88a238077e23', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '173a549b786ed90ecba1ce26ecd1b8429f5cce68', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '8b25e0a7fa519ad4f2ff67256c21245f02d083ab', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: '65c4d09694bd5a2024efd780f55d9d2144c3a9c9', label: "Radio Group", disabled: this.inputControlDisabled, items: [
+            ], controlSize: this.inputControlSize }), h("udp-fluent-checkbox", { key: 'ef6eb3466b1aa1b96ca6cd6189524c27c6e3b706', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '31274a39f0943d490d3860262dbc52b1fe6fbf17', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '7cf01b7cef255b95b90d991f7ceb78a526dfca0d', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: 'fc7ba7593298b271a59003d51913ff5fcd29776b', 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: 'a528e84413fd23808762e67559c8dc3046cc9aad', id: "data-display", activeTabId: this.currentTab }, h("div", { key: '31fc9642469ef208be7d9c5fc95c3c7da76f64b8', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: '30b30354f9cbd41a09d74f273f45b3043e7203dd' }, h("h3", { key: 'c2903edd32762f41e242aabc77903233f9540bd0' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: '7d8c61fdd3d0159dd865973a1edd656916733cc0', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: '1e1a9f70b93602283b20052613f8bba8c1b123a4', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: '552ac45cf231d5ffc4065deb6034ddac30357b78' }, h("h3", { key: 'c1e7d50d8fed5a52631cb7202e3ab6d18cd3c9b5' }, "Accordion Example"), h("udp-accordion", { key: '1f67e4aca9eb971121f1183a783606bb7fa942cb', items: [
+            ], value: "a" }))), h("udp-tab-panel", { key: '427ba740e0bda67ce681f276fff80004e01c7b70', id: "data-display", activeTabId: this.currentTab }, h("div", { key: 'b223f00292acd5e4aa5dc2d2011176e03584ad5f', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: '61acba2c575d4e9ccc6a066c67b2147310d592c9' }, h("h3", { key: '0d4de9c930122b49dc436e0f7f80b650233a57a3' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: '104647a88397d5731898b7f7b9645451361abbe4', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: '4e7eead9bd34ba07dcdb517bf05b215f1cd917f5', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: '541900267da5839636dd3ec7be604c6a6618346a' }, h("h3", { key: '3107ad674ac6ed82c65bff93a1ff25c247561821' }, "Accordion Example"), h("udp-accordion", { key: 'ea848035b2bea574645a79770bfc3b58403ac987', items: [
                 {
                     id: 'simple',
                     label: 'Simple Item (Default)',
@@ -3813,29 +3967,29 @@ const TestComponentsPage = class {
                     id: 'complex-slotted',
                     // complex content provided via slots below
                 },
-            ] }, h("span", { key: 'ffb204014e6786e80d9b14645cdb1fed57e01b0a', slot: "complex-slotted-heading" }, h("div", { key: '08e2d840373f019ef6dae857d3e01c64fad14028', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: '9c1f48ca8e8ded49c16268db0e33ce1d5dd0d600', name: "star", size: "md" }), h("span", { key: 'b7601cf22008c9d83bce92b7c92060ab0f5739f6' }, "Complex Slotted Header"), h("udp-chip", { key: '7366b4dd28f8bf0e770661bcdb7095671465cc2e', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: 'a3f5279d1f4a95befafdba7178dc27393cdfccac', slot: "complex-slotted-content" }, h("p", { key: '951901262af0da3a651a7bc2d7ff4c2fe9830f09' }, "This content uses slots for complete control.", h("br", { key: '614078cb68e3239ba3a3e58c6eacf6b15467875c' }), h("span", { key: '5853d45f5ed6e66f575bb920b37190719e021d69', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: 'c650917b038458d009ddbe602d4ea06f2d5bedbf', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: 'dcdd40be6e4019855c2c9c0ae700178dcf834321', size: "small" }, "Action A"), h("udp-fluent-button", { key: '7eae24a7750d1e5e58a1b0a1e4f1323cf6c786ed', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '35ad658510d914d0cacc7bfd15a6d55d8591d26d' }, h("h3", { key: 'a3849ebc0c81c6eda3e16e430adae90f0f2d03b2' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '886b5b25bd6f2eeaba49da4a424db4c3075ad342', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: 'cd60589897cd01c8b90c381ba9dc6c945d075498' }, "Hover me"))), h("div", { key: '958fe65e53320a8af946197da301542f82aec105' }, h("h3", { key: '2d168d0efa2e807185e069b384e250e01620236b' }, "Message Bar Example"), h("div", { key: '871b072a02e3f4d8bebeaaf0f9204d9ab0c1fdac', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: 'c4b3b53585c8de78e6fa8733385bbbfeeea1244a', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: 'eb327d6c36a746c1f4d52b3b0e34046fe6f4d1b4', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: 'd79095d7d11ef000041e08a63bf20832216eca79', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: 'a3a0377d3e4201ae6f661ec5d54e818f5c8eed8d', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: 'f22c608b8990b9c84f91cc65730d1e94b9d7af57', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: '4ad575eadbe4aae0212bf54f2caa5271acccbe92', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '30b2559553eb9b573a4d217225b3a6a06c9cb82a', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: 'f309e4c1127e3e8f67924aaa30b803ed69d416dd' }, h("h3", { key: '286137dcbab7d4cdb34529cae02fe90368fc5d55' }, "Progress Bar Examples"), h("h4", { key: '0ac5652c26a45c4665d4f30d8719ec29fed259e5' }, "Indeterminate"), h("udp-progress-bar", { key: '94ab7a6a2e139b7125ea3ccef4539bed06e09a25', thickness: "large" }), h("h4", { key: '38818cfc92cd66c6cdc058a6e090e572d4369675' }, "Determinate (Success)"), h("udp-progress-bar", { key: '56a58a119bc94520b32b0c9276a51a27c4d33d0a', value: 75, validationState: "success", shape: "square" }), h("h4", { key: '8241f9334026ea4f3415998b44daa5fb741d7d6c' }, "Interactive"), h("div", { key: '25abd1e911780eeb591457ce819eed0a0d20fc0e', style: {
+            ] }, h("span", { key: 'b293dc5ad22141a17f0daa8d2025b600aaa71219', slot: "complex-slotted-heading" }, h("div", { key: '04ca25db9d1ff6f8f13dd5af98e87e7653e6083d', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: '7c2e8310e4c8ccd8ad386371544bc2ddee4f714a', name: "star", size: "md" }), h("span", { key: '53fcc139f8ee333b92d2c9b110238df3e81af87c' }, "Complex Slotted Header"), h("udp-chip", { key: 'b86d4671321fb3a28f584b99d133f308f07a50e4', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: 'd55166dae52ea555d60219009a3ccf1ee6245b16', slot: "complex-slotted-content" }, h("p", { key: '14a5b1e390fbeb49e0f0d0790db689f98a41ae20' }, "This content uses slots for complete control.", h("br", { key: 'c0c209b1a008ab961b2ab3a1c71589dc8016d76a' }), h("span", { key: 'be0eb22a3d5e045937b2cd964268eab706b55e3e', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: '60145308c39fb2183c89117608d821f2691e97b4', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: '76a450113f06c7692b2e6136b23dbe8dd7ada886', size: "small" }, "Action A"), h("udp-fluent-button", { key: '1455f2b959f9d9bf3ca8e3695941b305bee5af1a', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '4f9e90493f419fdfde7ca055999aef571761a510' }, h("h3", { key: 'd97eb71869e0b11f84e3a8d814002f59b06227c7' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '83c289cc5f36271299ef9d8f61d904be88b5dc1f', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: 'b7c0b32c6521d89fea320f56584c6611e869b5b4' }, "Hover me"))), h("div", { key: 'cf88f8ec5cf2d5c8be2f1e580a426bb9bd67acbe' }, h("h3", { key: '7a03ebf8f41cceea1800a337f995366e72ec0762' }, "Message Bar Example"), h("div", { key: 'a025565aba4d4b55322b22e6ce8f96667570301f', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: '3131b71f9477505cc457e96d30a731367a86b997', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: 'a90c9956ee7d175a49381ee841fdd1a84acae487', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: '71611a976825895891e7f10a83df26a8500e8afe', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: '707fc88a82e3eb2e146a8724c2665194129c661d', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: '602e3e21cb62943ce31519ffcab7f4f54f591908', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: '3897610d71653c6c0a1b6766fadd97a72b0c2fff', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '59f336ff7cb614e6c2b290cedf55e981ffa6662b', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: 'fbfaf82357530e026c4dcd1d952d156aadb87576' }, h("h3", { key: 'f31df8dfc10cd27719f69b8250de352588331099' }, "Progress Bar Examples"), h("h4", { key: '7b1381d8edf48923dd13bc5a3c27dd9f59125815' }, "Indeterminate"), h("udp-progress-bar", { key: 'dd26fff71f944114879b248966ff1516302b6b0d', thickness: "large" }), h("h4", { key: '627a2f929fd6d9fb466d48569016cf2cf886d783' }, "Determinate (Success)"), h("udp-progress-bar", { key: 'e9c4f288dd57d28b24c90bde76bb491a70f4eab9', value: 75, validationState: "success", shape: "square" }), h("h4", { key: '9912afbf4201aece55e0cf0289f66a3ac86aa6eb' }, "Interactive"), h("div", { key: '1938522c06cd5e8f6f552bf13ca8225801723b80', style: {
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
                 marginBottom: '1rem',
-            } }, h("udp-fluent-text-input", { key: '4776d310afb868c746168e1b96138a9fafc61e19', 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: 'e872a461aae63ab1d17aa973850846496050ac55', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: 'f6ae3a8bd3eaf3075b90fcc68f687d8faf193c3a' }, h("h3", { key: '407a877759da0e37ac4a420896c5532d365f6eb8' }, "Divider Examples"), h("p", { key: '7a7c4d498ea59d8d36bf71270a0e0e732267e1a0' }, "Default Divider:"), h("udp-fluent-divider", { key: 'f32f69ce9f097ab2818c936850bc77b91047000c' }), h("p", { key: '98d47992afe93de208e766c655cdbeee8a76d01d' }, "Align Content:"), h("udp-fluent-divider", { key: '8d4d4033c104a2a90f4dbf16ecc6e8d2b07f8969', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: '0e998ed58c3a67d541eaafcb99fb106240b78d6a', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: 'd6ce23cdd078bbe1afbf9402796b4eb05443e16f', "align-content": "end" }, "End"), h("p", { key: 'd61e296fd20810b807f34e4519f58c13f1c274c0' }, "Appearance:"), h("udp-fluent-divider", { key: 'ea6d4b6dae0728744d81f77d3a668ad88dc8a737', appearance: "strong" }, h("udp-icon", { key: 'cec122173349419a0388fd71ec0ebc45e2bb8b86', iconName: "add" })), h("div", { key: '94014e5f250ee2bfbe8f5f69ec75008552624aed', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'cd43a952d082d3c5f5e564822575e84a3cec2dfb', appearance: "brand" }, "Brand"), h("div", { key: 'd8822a48d55bd6eff949a8f8eafcc865f53a32da', style: { height: '10px' } }), h("udp-fluent-divider", { key: '6abc05efa4578947d41df58502e7607911f683bf', appearance: "subtle" }, "Subtle"), h("p", { key: '7b2b41ee1a95f284152e6700c81b5b024e2d502e' }, "Vertical Divider (inside flex container):"), h("div", { key: '9a927e671bc5fe4c59b3fef2237c22f43c3802e4', style: {
+            } }, h("udp-fluent-text-input", { key: '3df4c2623e98df69785d01c265e4de113f20a64a', 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: 'b55a8fd6878a1d03c82d40252d7848a91acac68e', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: '3eff3c881432d18fac497cba8a55f2e8fcb9694e' }, h("h3", { key: 'b66b15e94e91dcce985c3e673496aa94ee289a38' }, "Divider Examples"), h("p", { key: 'f3af1b39de3d0fe9062a3636467502cd5efd5175' }, "Default Divider:"), h("udp-fluent-divider", { key: '1823cd7f805e29631c4361e40017c00d2fde9a8c' }), h("p", { key: 'b6da452ba9f3115fb4fd1bcf9121199365c30a0b' }, "Align Content:"), h("udp-fluent-divider", { key: 'a67064d2b219965afada496cd339f1203bed1f26', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: 'dcab9ac817fb1433fb015f3f2f53626ba17f4a65', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: '8b9a2c753c738dc02c695c4dfc4868cdf9dd5407', "align-content": "end" }, "End"), h("p", { key: 'b5e52009f220cad7778420361515aa4c48d2d3db' }, "Appearance:"), h("udp-fluent-divider", { key: '57de56b4a891adfae107817eb76adcfed1dd212c', appearance: "strong" }, h("udp-icon", { key: '6598ef60c585e7904746afebceb6d62e5e85aa15', iconName: "add" })), h("div", { key: 'a93ed6e22b3fd63d04453709ae483a0b64184328', style: { height: '10px' } }), h("udp-fluent-divider", { key: '2830f3a8b1a63aac9abface10651f9537661dc9b', appearance: "brand" }, "Brand"), h("div", { key: 'e2c0af007c43525cc97673ec4de22e3c9470ac18', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'a3f4906181cd051b7762fd4e4cb5b4838c646b06', appearance: "subtle" }, "Subtle"), h("p", { key: 'a1c4e81fd9f755348a0201e00b4e6d6fc3dea33e' }, "Vertical Divider (inside flex container):"), h("div", { key: 'd0f2fd393428b0aab5f24bc18fbe5e3a01438bce', style: {
                 display: 'flex',
                 height: '50px',
                 alignItems: 'center',
                 border: '1px solid #ccc',
                 padding: '10px',
-            } }, h("span", { key: 'd43cb08c6da292949264383ecef684e32e09912a' }, "Item 1"), h("udp-fluent-divider", { key: '61d4bf2aed17cedb8009a2521a88532c56b64d9d', orientation: "vertical" }), h("span", { key: '24f1059cabfc1f5db7ec2b98e77bab4b04f1fb15' }, "Item 2"), h("udp-fluent-divider", { key: 'c3c18e2b0312d39d8a22549911ad9e2fadc73c13', orientation: "vertical", appearance: "brand" }), h("span", { key: '9f1609256e4597b27924ecb92863eb433d788391' }, "Item 3"))), h("div", { key: 'f68c5a66dc8cf5c2f486d4d0d731357977ce6cd4' }, h("h3", { key: 'debb585aa06d4635e8d1998eb584b5c24ef54c0d' }, "Fluent Icon Examples"), h("p", { key: '975f8989ccb07e415dc2088d769df7b62e3426db' }, "Basic usage (new simplified API):"), h("div", { key: '686f4088d2e9e6503add2109ab1f2df46cb85f21', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'aed56dd499b6d5b6e228e5483703cef231a2ce6f', name: "add" }), h("udp-fluent-icon", { key: 'bfbfdb2e98061097b3df798ddfaa68207a6f6d43', name: "home" }), h("udp-fluent-icon", { key: 'cdd01adfab68495718168d1fe4f6b21bbce29780', name: "settings" })), h("p", { key: '0ba2c1bf006cc7d3be801f2358a62067026b5dce' }, "Colored:"), h("div", { key: '8831ef82381783e4174b39652e771873257fae77', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '659dace3a984ba69aaf0f115a3b6d7ebb0be701c', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: '9c4610e31077186c39c9798ce81785ece9fe9528', name: "delete", color: "red" })), h("p", { key: '71bfae83244e04dff84c478017d726d221475fba' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: '6a6761593b7285871d9209f5cab1efbf09fe557e', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '9e1c86fda60a91e580d59e622d56cd969f071692', name: "home", size: "xs" }), h("udp-fluent-icon", { key: 'cb66c43949304eed5f0ecc0382b107d00a64bfbe', name: "home", size: "sm" }), h("udp-fluent-icon", { key: '0a374f10278333c2afab645e4095de51ed7a8199', name: "home", size: "md" }), h("udp-fluent-icon", { key: '0c4a96c58bf3d577bff9cab4c3cf2b005caa163f', name: "home", size: "lg" })), h("p", { key: '9a80bdf6cc45db3252346b5c27b2b4659e319222' }, "Variants (regular vs filled):"), h("div", { key: '78de773acd96966c89cbf8787e1c4ecb5b89a88a', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '20205dd01a29a528436c89e7059037b815bda7df', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '6cdfca2313d1dba058f8ff00c5a3bf5fa710f611', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: '475fe2dc26401a4ecb387a69d099d2c50894ea1f', id: "text", activeTabId: this.currentTab }, h("div", { key: '7d85cc5f49ce71c18250430fb3eda73c0529badc', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '64d4d42a50970eeebcdc80aa01bdfbb3c1af35c7' }, "Text Component - All Variants"), h("div", { key: 'd40bbb8cfe80a6d4db2944866cca36c0bf45557b' }, h("h4", { key: 'c47d0d44699c82fc1ed10caed452551bb4631be5' }, "Display Variant"), h("udp-text", { key: '7a5cd8eee26f2c5dff0f999c222c112faf3d3e52', variant: "display" }, "Display Text (h1)")), h("div", { key: 'af889b1fd71493188f72139984ff6cd8c39779cd' }, h("h4", { key: '94166fd6578b33e7dbb72a7ca42fbebac4f87b15' }, "Large Title Variant"), h("udp-text", { key: '2348827d025a4fd5bce194216a98d803391e87ba', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: '5c1d5fe010388b1b7e75a002b80226e570a6ae11' }, h("h4", { key: '46130fb2df634bfa36c779c61804f196e2d46da5' }, "Title Variants"), h("udp-text", { key: '7b3720cb8460fb05e8af87ed08a0174ac8de9a74', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: 'e5ddff64adbacc1cc649eb55b247b6ffeae28260', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: '260154266561650fe467e23712b4b5ac3fdd6d41', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: '3256180559438413e6dac7611f1bea8b8dad08c4' }, h("h4", { key: '42ed450dff4b78c5d19b42b6e4bd68b09527092e' }, "Subtitle Variants"), h("udp-text", { key: 'c411d4856d4a954edf03670b1a4818016c7fe6a3', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: '5053869f4bcd663925d186b3d813973395935b4c', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: '851b82add76970bfeebaabd25f8ae41c07fa9183' }, h("h4", { key: '2797c6d5c098c6340cf40141dd65c09cacd49039' }, "Body Variants"), h("udp-text", { key: 'a3b6f23c2bf18a4723482eead9aa56bd2062fcb4', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: '7b6d7a536b6424658c3f7c3b781bc23b48d46405', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: 'f54c031d59a085c144e0405209d403caca3b06c2', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: 'cc5c74594b5c3ac58f29af5bd4702f021d4eaf51', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: '05ee5349c7d65885048deaa71d5e648944c15338' }, h("h4", { key: '8e83f68dee1c82468936f564cc877b3bf7405955' }, "Caption Variants"), h("udp-text", { key: '876e735cc3c4d29da5fd4537183a66e992eaa8dd', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: '7da68d30f3ba6aa382924c55d73272e5094a9f69' }), h("udp-text", { key: '754f1e7298eff32a81c41e1cc80357aa98832305', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: '1824f255860ebc89adf4035235459f0386919a7e' }), h("udp-text", { key: '8f2585fb6758dcc149107b79837e7768320a5e82', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: '6e59cc9b1680709254acba18dfb44c30d09eb4bc' }), h("udp-text", { key: 'dd4c97a854bb106dc0bae28f40edf242846eb4c5', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: '76a214249a05d28b926c35ba62ccece1d9d50690' }), h("udp-text", { key: 'bba4443afab06a62c56614a41fbe54199d1891aa', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: 'b2c568a25d887730bdd23069baf6880a478601de' }, h("h4", { key: '27f78b39e479e5be4dfedd88a51590f2c42ca86c' }, "Text Alignment"), h("udp-text", { key: 'd96ca741cbbb686d10ba7d22f191f77c130c94b8', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: '46198c4dd03b55f9c05efaa59d8ce013964fbf9f', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: 'dfa426894fc0c0729fd87f1348eb0be1c472f37d', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: '3587ced045d4f6e1df0084024142685f7b498342' }, h("h4", { key: '398ec8a524f89839c23e002760778193ecec56e8' }, "Text Styling"), h("udp-text", { key: '9a117a82d99626af8458a77bbb98ec8284fd9dad', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '925545b9dea10888f62ad111ef1c232f9c59abca', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: '2f9392630cca9e6f21c6d4c7a2bb0572422f14bd', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: 'a22b97b2b370d3bb6681c8f0439d007a28f9ecfb', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: '5add46e633102a5e23af6700b5b58e4d552ad7d6' }, h("h4", { key: '2c236e578ababaa0c344d728cfa8aac4fdf87be5' }, "Custom Semantic Tags"), h("udp-text", { key: '2b41beb17675b2d716ade6b1be7e78f59b4289d9', as: "h1" }, "text as h1 element"), h("udp-text", { key: '7642e800b366aabd9fb9edb052c952b8b719572d', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: '566d5bb277050e064e76be97b8d4d65bcc19a943' }, h("h4", { key: '4826e7394d3e41378e970e1827bf0206fcabd228' }, "Font Variants"), h("udp-text", { key: '5d2a05fed4404dc98c3a155293e1af8c124b321f', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: 'e575de350f6a914325d2e264a77beeb3f7290c68', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: '174ddf61c46c5c7c2304d90db115a2f7a34786ac', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: '8a21d3918a494ce94cb23190feba41cb4462d2e2' }, h("h4", { key: 'd604aeb9a422925db5a9cb0840555725113ecc79' }, "Size Override"), h("udp-text", { key: '9c255d15159427aeae519c55a09d0872c27ea91a', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: 'aaec386cc7908157b9fa9c6b2e38bcd32ca6fddb', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '93b436b6c12260fbf0d3cdea6b40458edd9fd1e0', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: 'ec3ea61c3b9afb29aca56476e29672a1efe20c80' }, h("h4", { key: '32f10badc74f8578292b9f3414494a11a701255a' }, "Lists"), h("udp-text", { key: '936485bbc04ee89a963779ea6496e1acbc3addf2', variant: "body1", as: "ul" }, h("li", { key: '1ba15c6cb4683cad4e925ef031fe4caffc895461' }, "First list item"), h("li", { key: 'c29077e74f07b9bd6a33520c57cd7793aecfcc4b' }, "Second list item"), h("li", { key: '56ab6a4c3169d0438934c6a5aee6a8551512cbe9' }, "Third list item")), h("udp-text", { key: 'a42b5f2935887834f39a0493e24eabef97a0f8af', variant: "body1", as: "ol" }, h("li", { key: '801cdd91b75167767efa8f361886ec7bdb890684' }, "First ordered item"), h("li", { key: '7af26f5056b94b578324c87f7e4b2faebf72f828' }, "Second ordered item"), h("li", { key: 'c3e0098aa40ec799dc91e30e0341387a26c0772e' }, "Third ordered item"))))), h("udp-tab-panel", { key: '4de50bb2c797a99840763b31db2d818f8657a218', id: "menus", activeTabId: this.currentTab }, h("div", { key: '4aad42257a9d80063677d75760b977f288280f4f', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: 'c023d0db148a9b6e259e771e9f48a53316c51e24' }, h("udp-fluent-menu", { key: '144617352207b6c142e34dc5ba56fb7c831f94c9', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: 'dff8da22e6f210550c696575716ad38b7d5b75eb' }, h("udp-fluent-menu", { key: '57b8036cb1550b0a0e89087be063b23865dfae34', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: '1221fcd53881d4690436f156db1884a14b06ee55' }, h("udp-fluent-menu", { key: 'fbd2bf5eb57d58fc98777259d305a06099cba190', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: '83806aafbfe3f751056eee0d20775e43301ad343', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: 'f3eddb764c82398e42a0168bd145448dc8fc8287', slot: "slot-test-end", style: {
+            } }, h("span", { key: 'edac259dd066fe189f0b8394931c4b317e972871' }, "Item 1"), h("udp-fluent-divider", { key: '11acefb1586149400aeb334c36df4b9ccd634ed9', orientation: "vertical" }), h("span", { key: '2c6b482cb4ff9afcf2b1ca162882fa62eb6cafa4' }, "Item 2"), h("udp-fluent-divider", { key: 'bf45c415d8c4844551eef05438187b4cfbfd7bfa', orientation: "vertical", appearance: "brand" }), h("span", { key: '8e1c84e0704775fdb7d90350c3ec10de36c3fa7e' }, "Item 3"))), h("div", { key: '5931c9ccb73b391fc9a44863942e7641b401d66d' }, h("h3", { key: '9c4ff2fc026011d75c536902224c606a666507b8' }, "Fluent Icon Examples"), h("p", { key: '1f239fc808ee5b66c8bcd5229b2884615ed4c402' }, "Basic usage (new simplified API):"), h("div", { key: '62cd1b4e61debe779800bfb1421b14f0e2d24556', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'a312bb419b6db066baf76e53f916b8800aa02eb9', name: "add" }), h("udp-fluent-icon", { key: '1872d19602f2bef468f8e66583125d34f8de05fd', name: "home" }), h("udp-fluent-icon", { key: 'a49688aa49d616e946ce446dc5e1ae6ffa56a9fb', name: "settings" })), h("p", { key: '9d576c323c7454ccaddaecdeda60e95ceb46aadd' }, "Colored:"), h("div", { key: 'eae249dae805b3c0c611a0260907e9a47da3d5cc', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '6e02c5a9be36ccb65bbed876f3da7b76bcaf1be0', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: '8763e3caa9c59e60faba05fd18515a46873f586d', name: "delete", color: "red" })), h("p", { key: 'e1e9fcb3fe51dfe46193a99cb3966cd7017fc841' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: '334b1a4ef7035015c3514abb1337c44f15dbc0e4', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '899068fe009da06c3bdbe94d8929e724373eeaeb', name: "home", size: "xs" }), h("udp-fluent-icon", { key: '110c3ab9bb3bf26e1a4ca2fbb7a2d35a92f6152e', name: "home", size: "sm" }), h("udp-fluent-icon", { key: 'a26a486f024e442824a50635cde50d3afbbd7407', name: "home", size: "md" }), h("udp-fluent-icon", { key: 'b3fce7a45257ebd656e8702c1ddad1ab9a9123f1', name: "home", size: "lg" })), h("p", { key: '89e3635b0d4d82e2911e9c2ce4e57d726f617735' }, "Variants (regular vs filled):"), h("div", { key: 'ac530a3609ae377f7a43486daf0098d6066c8c23', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '812f057c5478141143b5550e6c7f18aae811f83f', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '1797928f8e4928d4bce3b092e10427587db78c99', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: 'c814eecbaaf017a2f94763c0b3b6d142df9843ec', id: "text", activeTabId: this.currentTab }, h("div", { key: '9548f33977f37bf739bdfd25efb395f7e5c84e2c', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '287a4919a0206fc50fa64f7f7a0039d16975a3b0' }, "Text Component - All Variants"), h("div", { key: 'dd61c14c355923a1f9f0b8c5d18a713d1a73b506' }, h("h4", { key: '449be2fff598b008064afd6e236cd4e853cc9fc1' }, "Display Variant"), h("udp-text", { key: '648c5323aae383e1c5de4ac88c9b23947692b6fb', variant: "display" }, "Display Text (h1)")), h("div", { key: '2a308e30ad2fd5d21a56706de5ce87548772394c' }, h("h4", { key: '5e2a9b9b0de2d9358d325f9b338d2c18d0105af9' }, "Large Title Variant"), h("udp-text", { key: '218452a3ea54a929e8ebc754ffe00a96f943db5b', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: '847354a7fcf18e96c60bbc03f6e7127866346246' }, h("h4", { key: '3789051ccf70ef9b0bd91db5ac8c5e17a062a904' }, "Title Variants"), h("udp-text", { key: '9df6e84b5ea5c981fc318c412910545c5eb427a1', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: 'f1d1e225662f62c8ddf90c16082ee3170b887c42', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: 'd3ede0c7263ef12e3e9188bbd9237b72bda85ae7', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: 'aeac71b14df38b344b3025e3831d61a1b8aff1d7' }, h("h4", { key: '56170c688648303413b35f6ff672837c8c5ad258' }, "Subtitle Variants"), h("udp-text", { key: '57b4bcac88fb429c2fb84c43dabe9e51d9404a80', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: 'da8e60676ccf61664d3bc559ca6b6b3a37de3ad7', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: 'f90979950200b4953d43af4f83c9f9199ee4caa3' }, h("h4", { key: 'cb33c29b56c1e14a576f120ba5b976e4ba2eb1d2' }, "Body Variants"), h("udp-text", { key: '0a9ceecd82b420f519a889a32037a43e123611f9', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: '9edbbcda01ef9222604368dac4a95f78cce6c3b3', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: '579591d4b135497ae9f5e3624ae4ed1d43c9c4af', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: 'd7564721f590543c2a76f9541f579f0f575de224', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: 'af73b0b0fc9566208873f933f10929ad98fb1a7c' }, h("h4", { key: 'c0491e54a5072ea857ad156bb87193bff6cca3d9' }, "Caption Variants"), h("udp-text", { key: '2dbbf680cc918fa6b0e9a2910d61c4db06982205', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: 'b640560afe9d083d0fdd76f77fd7cda597da341f' }), h("udp-text", { key: 'b6377438aa067b929b0929f8eab4198ee26eee06', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: 'efe45e9e426093d70e817592bc5abb9e81183fc1' }), h("udp-text", { key: '322a1dd73dbf487d82fe3f253cf41b68c5394c3c', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: '6c0d22621d1ff4923c015bca1df1377749618b4d' }), h("udp-text", { key: 'c9bc71957e19d6747678af636743cd0e87a00580', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: 'e7f5d20471a1e270d371a2a3677c8905ff2e8384' }), h("udp-text", { key: '7fdd0528041954e5717188b40695a8f6d98ec42e', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: 'a9d262e2bad3d99835fb8c06670516291f9dfbef' }, h("h4", { key: 'b4b8bfe4966ae9ecff0effa6b4b260ec27df8c06' }, "Text Alignment"), h("udp-text", { key: 'c845a86f4848e343686ae6d0efa8285ed77832c6', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: '9192fd7751fe894b908ed4d07f28b61e56a87648', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: 'c3b732d5f26e525ea2e34f22842f88602e6c64f0', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: 'e038f400bdfd889e546e592b472e0b59d620f241' }, h("h4", { key: '7dcf356649a13309dded5e956928e0ac4acb6e66' }, "Text Styling"), h("udp-text", { key: 'b993d6ba552816744f4b9e172341065141275aa2', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '0ddfce7559ce1c92767bf43c070059a968b57baf', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: 'e06a582f2f93e92b19248aa7c5db6f86e9153ccf', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: 'e18d46babb3f4f1542db636322e19d157e98f1b5', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: 'd80f692ae8ed1beb225d188f1690c6b562f1f55c' }, h("h4", { key: 'e949248811870a1432a99a79b2eb512a83c8dd9e' }, "Custom Semantic Tags"), h("udp-text", { key: '81e10b3f5b1b75c0d2482dd4de3ff8659400f7b8', as: "h1" }, "text as h1 element"), h("udp-text", { key: '0e8612a406c0511ff386a1b4fd413404cbf3eabd', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: '718705df9e77fc85f3ffb1294f83b13e1d088e44' }, h("h4", { key: 'd9f0e5c103e0034096d473ce39356eb77bf9f250' }, "Font Variants"), h("udp-text", { key: '0f3ae3ba5204e49e46a52f1b70b7f3df0de03fb9', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: 'f861f3fbc6410f53cee828b37b87e97eec3e310c', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: 'd6fb4a84fd85170480807b26e812aaf55e323fa2', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: 'f2b17e0b35dbb50494cfbf7d2b5f396c55075368' }, h("h4", { key: 'c11a6c81ae87ce94a7fe53acf4838a3a497985b9' }, "Size Override"), h("udp-text", { key: '6b20805a299f9278ec390ef493b4fde34e8e2b32', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: '9c2bca0ae107e29822f84c82ae309bdce74a4cde', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '81b54060e4406e9066e8e4094812e32733f7fe4c', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: '925c1ef5da7b8d653440677d96094faea5e7bf0f' }, h("h4", { key: 'c2eb6034675dd4087d5bab2b8ba8b5e815d0a116' }, "Lists"), h("udp-text", { key: '6c2e23112f2e2f27adb6671005f8a0701a33ff51', variant: "body1", as: "ul" }, h("li", { key: '8012f87037f6b8b4bb8afa6c77873e94c1950479' }, "First list item"), h("li", { key: '196b86d4dc911d87501ee2495bda2ce3b34206d2' }, "Second list item"), h("li", { key: 'f831813c16cd6983da84a9a69c58aabdc607f31e' }, "Third list item")), h("udp-text", { key: 'b740fda3e771e7d43573960565763c6152333d15', variant: "body1", as: "ol" }, h("li", { key: '002fede92d5eab719f2a3c0f1d666bb27f8b64ff' }, "First ordered item"), h("li", { key: '06967635ce93bf421d88614ffe358400a8cd1ae8' }, "Second ordered item"), h("li", { key: '65ffbe713fce33858a6a3c3587fb294c4b789a6e' }, "Third ordered item"))))), h("udp-tab-panel", { key: '45a8f86297f7746b6435d755ec2c1133a436128b', id: "menus", activeTabId: this.currentTab }, h("div", { key: 'b40f2e023bf3846e8fefbb3592db0fa4d5c6d745', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: '476bbf9e2a4fb3ce10ebe556340d8d4850aee024' }, h("udp-fluent-menu", { key: '1723b4834a9758edbcca81093e6a5cec97e4efe3', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: 'a1c3192768d8058a8a1be1e19b52a18d86381093' }, h("udp-fluent-menu", { key: 'a5d0d6d70526a2a080cfeb2586904048cf6e3360', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: 'b10ebfa8165140c1c380c02362f0f5a3fd793594' }, h("udp-fluent-menu", { key: '591c03942f02cb218ab6f44e067cfafa52d9c6d9', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: '3c92bb02aaa63b4a24759bc9662b2ef2ac7bcf8a', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: '11886300c26eb91fa2797c6553a57a53031e4bd6', slot: "slot-test-end", style: {
                 backgroundColor: 'red',
                 color: 'white',
                 borderRadius: '4px',
                 padding: '2px 6px',
                 fontSize: '10px',
-            } }, "NEW"), h("span", { key: '30ad19954cdc208406e4a37fb5552507034a92e0', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: '9a203fa37d6d7b4288026feb4f7daa0af4870e71', style: {
+            } }, "NEW"), h("span", { key: 'c960fbd09a173d404328e717c42fe5b0a8c46b0d', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: '2da0beeb4a9c68241943fb10ea1c3710826d3f39', style: {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 border: '1px dashed #ccc',
                 padding: '1rem',
-            } }, h("span", { key: '8642c5f815fd4bca84eb9f4cfd104726cb81b1f9', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: '905a1ab00de495d7d7ca5bb469354233e3cec05a', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: '73e90cee599892291fee92a7355adebb0a0613b6', 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: '4ba85da29caf811ff00f377ec3259b82b256e53c' }, h("h3", { key: '31347a712e096ef40b16de817e8bb4403fb756dc' }, "New Radio Group Example"), h("udp-fluent-menu", { key: '5228a94c43cd6509e32a2d42ff69467f1461e330', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '81b3b6ac4a2f5b5ea40b58aa232d5544806f5c91', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: '122bbd7c4c56a18d4b7fdaaca618328d50fb9172' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '9fa7a5febea6580d11ee9a20c9a7cf5d844b7b48', 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: '836eeabf10a0e17b736a5cf9e582d2f16fee118d', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: 'cabe25fe2dfebeb1c242f993c1db1eedcb680287', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: '0dac6c586d46d8de0502cf9701e53bbc6de5c067', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
+            } }, h("span", { key: '1b1e4adc006e01d20a27cac25e6a8b994ba82d9f', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: 'f6df39d6abbdb96ef92c7f0152f9bf38be3e26c0', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: '973a34084b0f4b2254fea30ec4f960359011fcfa', 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: 'dc61a7b7d1616811692a04c5eaf06df4fba4a304' }, h("h3", { key: '3622f32ac45a44cdaef2f78015d196cf0a3ff035' }, "New Radio Group Example"), h("udp-fluent-menu", { key: 'd49ea7dc154f771e110625a9e470b435d6425e2a', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '01a572e7669d29915c2a31646e966a7a632e0f91', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: 'e57d303dcf0d97ee7e1aa14d844cd7009222edb1' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '7f681c90cc0639dd0dd36a2c4bea9b58dc404893', 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: '588c621f188b842489c3b18a31dd6c277ae3af55', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: '21f5071b74f0a8aff41b6d8b9ddd21362b4ad55d', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: 'd59277c8dfcec20c88e80c6f25e935f83aade4de', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
                     { field: 'make' },
                     { field: 'model' },
                     { field: 'price' },
@@ -3846,7 +4000,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: 'd3e84946f00922d9ff9472690379823134e4d479', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: '86aa5037cb09b0107a656d5bf436474ba4b53fad' }, h("udp-fluent-button", { key: 'e5dcfc30f07e9e82b9d3c17631c1ea11fc9a9776', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: '58490b72f7ccee55bda24e1926980768b14ac598', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: 'c10431a1d3147340dfa7d4c0ba597344159827fd' }, "This is a simple dialog example."), h("udp-fluent-button", { key: 'cccd418d072062ffbba6639829f31a54ddb2155d', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: 'ea3cfde7fd7c041b779aee9c291fccb49f0d773d', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: '926afea28a321c8055f1a0a1652e6d3301822c53', id: "cards", activeTabId: this.currentTab }, h("div", { key: '412f689102296f9d894ea452f3a4786a4b2bb369', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '4e7460eafb32f78a9f0de44a76b5be3fe2e8508e' }, "Cards"), h("h4", { key: '0158c6ec80062d0d38093374732f5fb1aa46f6e2' }, "Basic & Outlined (Default)"), h("div", { key: 'fd539e1f1dafa4f26412f377b4d5765eea95a8b5', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'b77b0de294109e56fefaf3ef2f07f99a9f2422a0', appearance: "filled" }, h("div", { key: 'cc9a52f667d9be211e43f7c0696a37adb1319124', slot: "header" }, h("h3", { key: 'c2c408759c167e4b745094b2a2b6342524dad676', style: { margin: '0' } }, "Basic Card"), h("span", { key: '289afbcf179df33d348f639cafaf1db815c108ad', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: 'd9dcd7c38a9166e538755ebe3c7754cb1a0f5d6c' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: '286ee8f4f2ec097ee37b0b8a3d914db005601f03' }, "Elevated & Media"), h("div", { key: '9d4be649b3112a33b68d06972cd2ae57a61f1cd4', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'c33bdc0dab304531122a5095feb203d510bd9b5d', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '91f4310ca68a2623bb3b68a1a2507c5ccfa55896', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '6756437faa0f2a47e91d8d2b0e1cf0d7880c5ba5' }, "Card content"), h("div", { key: '5263999f443acddd62ae8d93a348ae31646cfb4a', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '34d30f88b5e644ed2a80b3d117ba2c5afadd06f8', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '13ca505f2d7f870710a16f224f2a89fb319422b2', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: '12b4863905f2ac644364d8cb715bdc7240750a7e', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: '5c964b20c8e2d8b1eeb91dbeb1a7f0dd068aaff1' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: 'cd65f813782184e436d2d448bcc28d862e1fa8f2', slot: "footer" }, h("udp-fluent-button", { key: '2b4f39e33070e4f300fafb0b81abcf0b00216ac4', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: 'a2b888ccc67e4d82c831591b5d61ce90518ee0d3', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: '7dea81f5d605b3340faf5a5f5a482bfd926e1283', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: '7995c93149c20e1429542830958b7856b55053fc' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: '62c93ead19e4c2c959ee5fa4e9431ba9ecebcadc', appearance: "muted" }, h("h4", { key: 'ffbffd7ae0791bda19543c8f83709cc215e0af23', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: '6d9d2a57bbb37b6e62c4d9aeb7a393b6bf70a4c4' }, "Flat with subtle grey shading."))), h("h4", { key: '0c4f30eaaf02505a864ffd164fd415eefdee719b' }, "Horizontal & Sized"), h("div", { key: '48bbbd3d056c4b25819f2b4214a576fa8a58868a', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: 'da9e885623f8a6ce0f29d22c185a1d38fabd1a5d', orientation: "horizontal", width: "400px" }, h("div", { key: 'ee6bf97e8af9128f355377de2d888ecd2b9d5ccc', slot: "preview", style: {
+                ] })) })), h("udp-tab-panel", { key: 'd072ac55a895d68724cf9c360521cfbdcb8497cd', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: 'f6f8b2c8b226cfae5b375de45b04c06e70fcb299' }, h("udp-fluent-button", { key: '320f3bdf11d5be775c161fdc342021b05ee776de', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: '0d7ee1d853e9fdc8a0ba1a5a42748bb9423e122a', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: '1bbdabce37bcba2a226bff3f330026eb3a399e7d' }, "This is a simple dialog example."), h("udp-fluent-button", { key: 'dd243af764034a07797f45c1b34b9073696cddff', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: 'e3b1c9d1c1799bcbaa5caf46f4b63cf9d5b034f5', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: 'ddcb67e518150d69ac9251871c8b15cb917ff2de', id: "cards", activeTabId: this.currentTab }, h("div", { key: 'a1eb48bfda83a6cfca6e6f4e3cfcf83f18240ca9', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '461169f7cf01ee23606dd2cc44601fabd483b361' }, "Cards"), h("h4", { key: '91aa8e47e36345dc0dc499cfdee6d67fe024ae4a' }, "Basic & Outlined (Default)"), h("div", { key: '3d7854b88801d98cfeadb0f743263f554f2b7455', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'e9f33aeb52b759035043fabebbf3becf814d0b79', appearance: "filled" }, h("div", { key: '6859d2de42d9bf306da61d8f91dfaa542d7c02ee', slot: "header" }, h("h3", { key: '31adc61d6095045bf26116f02d97bde5ace1a3a6', style: { margin: '0' } }, "Basic Card"), h("span", { key: '634a72d5e1ab6b1d17a6f3c5e6efa39c06cc7144', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: '917c4f0d682971a6f5491073d1b5cd8961aa7aaf' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: '890e2e9624d48f9aa02456a4f825e59a12f67d16' }, "Elevated & Media"), h("div", { key: '166377ffd58547343d1bc9e57a77dd27f771d6f3', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '422b7aee00076d78708d84e7dd3d38ebbf223f51', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '180f478de50268687c3f0f77bfe588a6415820bb', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '953f2b2f4fd58f80f1a425c141bb749d930562ee' }, "Card content"), h("div", { key: 'e5fa6fb7027398f96e3d74e146e7ac5e7080d3c4', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '2bf45c4998ecd9c1bd03288b8fe6e08082a69778', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '78c6315ae39d912322db0176b4df98fb5c2a7c1c', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: '0911e2727a512ad10df9b1daa4be3b942b8b0ad7', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: 'b8397d19f2912285333e9c7d72931b61cbf6a097' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: '9629fdd63012d6959e9f7569b27285bcd1df0e24', slot: "footer" }, h("udp-fluent-button", { key: '3b564addf38bd6d47570f097dff2bfcd6752b0b7', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: 'e3ca9abb75034ced782ce5e9a94b71b85e73daa6', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: 'bcf92f6afc07cab0d821bccdc89df9ba31709cad', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: 'cafd863e75fbd41ab5dbe51e17ceaaea3b43a9a6' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: 'ecdc47331393b92a8392d29a1f91b6e348cbabc9', appearance: "muted" }, h("h4", { key: '5b79bac8feff0b4a99d37ccb5fcb5268302e60d4', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: 'e8f470940f5d1389b236b8618fd03fccdaaa4656' }, "Flat with subtle grey shading."))), h("h4", { key: '1a76d4ab9e63ab389deffbddf0279d7ec4b5b387' }, "Horizontal & Sized"), h("div", { key: '5009f9a003c493dbd116ec8e100331b232a581c4', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: 'd5abec3c66873b2c07b046eed5a130e7951cb818', orientation: "horizontal", width: "400px" }, h("div", { key: '54762e2245d60204ffe57661a466870131463c3a', slot: "preview", style: {
                 width: '80px',
                 height: '100%',
                 backgroundColor: 'var(--colorNeutralBackground3)',
@@ -3854,7 +4008,7 @@ const TestComponentsPage = class {
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontSize: '24px',
-            } }, "\uD83D\uDCF7"), h("div", { key: 'a8a3fa8cb2084d84305ffa29228b6ba3e46e0781', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: '4103caac78f62d85ba598ed07b5b79ae8c7e679b', slot: "header" }, h("h4", { key: 'd40a7288301a832a1eb6922961a389de9c125a92', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: '579118059fa2868400cdcf1b25e06c3a32523b7f' }, "Fixed 400px width."))), h("udp-fluent-card", { key: '505eec1072c4e5511c148b4b2561961eae170b26', width: "300px", appearance: "filled" }, h("div", { key: 'e50f97e45ebdd8c0f0a121347d1c6fc152887657', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'c85d615a77e89b48bc152318e6ec20f472baf7f5', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: '532a906c654505f5ebc25165f5bdb740a29251c9', name: "person_20_regular" })), h("span", { key: 'd49340fdca87ad9983a8abf3bb255bf8c6783382' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: '60dc0b0227b781cc9c5c16f0e2360f46efc90fd8' }, "Complex Interaction"), h("div", { key: 'c6074f24f3363c1883a28d006d30120b3570041d', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'af1a3e1fd57d2714a37b7efa7ef9801115823689', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '4b245cb54f8950576638e6895baca69bdc5c1ee5', style: {
+            } }, "\uD83D\uDCF7"), h("div", { key: 'e6417df08f6e797b775f1f826cc301384ba7c5ab', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: 'e446836ef65269e7295c5d4453b4ef807f22784f', slot: "header" }, h("h4", { key: '276430d9fbb2b91c7af80de51a424f2948b97051', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: 'a475cfb8145dcbde666d7998cbea7b2725a17ddb' }, "Fixed 400px width."))), h("udp-fluent-card", { key: 'fb2b9bcb74170c1afbe41c698fa8d34afd8d62b4', width: "300px", appearance: "filled" }, h("div", { key: '391442658e74fc833896eb1a7b9c15f0498c8353', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'cc2870f1a66cdc51872bd09a7d3753e88f289f2f', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: 'cd7fd2869eadbc40affb71e8874ef0b0953a70d0', name: "person_20_regular" })), h("span", { key: '121f3d70203a40547e74fbf5ce51ee74af701800' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: 'e9aa72b490d18f03d2da4db8f5326b94022fcaf5' }, "Complex Interaction"), h("div", { key: '44b51205590ab6e918d6d1335d21f332a9678dc8', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'bcb4676121f0efa8e3fc3bc72fa75528274624da', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '2b21017c6a504a87d8e05d6916467fe78f83e9bc', style: {
                 width: '32px',
                 height: '32px',
                 borderRadius: '50%',
@@ -3863,39 +4017,39 @@ const TestComponentsPage = class {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: 'bb713198e3b3028188802ebab965bb9ed433004d', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: '896da425d5b673abea393534352d874b98f8c39c', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: '70e9ac4731d15774a9901ea305c43e7c2f969bfa' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '09862bf1c6be8486b71f071ad8922e25ca111912', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '07e1d841ea6f891602b48d15d373ab92ce73c8e6', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: '591e6e30e589aa17ebca4f8c6f41d174c7b69414', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: 'd4915d8a11570219ab9ba68b61a55fb6ece6ae32', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: 'c7b3f522c7fb1e27239698a5886e722a987ab383' }, "Flex Layout (Grid System)"), h("div", { key: '454551ca72bf16db155fa8739d26714c5826414a', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: 'f95ff8eb626e449c013d55d40de0e4cdb347084d', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '17081618f9ff427222b3b0fa89c6cb5d6a03c70a', style: { flex: '1' } }, h("udp-fluent-card", { key: '41f9ea20c270e7d91ff9e57ee7329f6c861bd9bd', width: "100%" }, h("div", { key: '3ac020fb3f97b75f55991d4a38388965fd5bcdff', slot: "header" }, h("h3", { key: '88bfb3e4ee5d3956742a97eb3e91d5d325b4353a' }, "Card 1 (50%)")), h("span", { key: 'beb4dec456a984f7af5f6a277904bd41c4628dcb' }, "Flex item 1"))), h("div", { key: 'd7b2e809f8d461c263e3d31654d70d28193e37dc', style: { flex: '1' } }, h("udp-fluent-card", { key: 'd444ca222283f2e08a120294a2ca4a38f7373c20', width: "100%" }, h("div", { key: '39557755b81f40a4761ca197f04c4ba262b84760', slot: "header" }, h("h3", { key: 'd93350270fdef6eed931b9a39ea6372f78dfebd2' }, "Card 2 (50%)")), h("span", { key: '906c6b59e0f8320f2220600495f87ed566e921c8' }, "Flex item 2")))), h("div", { key: '7095a60f99d7373ae7150e4c635f43e0f86c86dc', style: { display: 'flex', gap: '1rem' } }, h("div", { key: 'bbe5fed6e9d97a62b10e0cc11dec5f45f5555a4a', style: { flex: '1' } }, h("udp-fluent-card", { key: 'a7be0c25a5f0b5dadbc2e242cee22b167b7997dd', width: "100%" }, h("div", { key: 'c05050cb237fea03ffafc3d89a1147bce01d9b09', slot: "header" }, h("h3", { key: 'f9436d218785abad2679108bdf913155c8ba1360' }, "Card 3 (33%)")), h("span", { key: 'a112e885da84f47eaf845a4d937d0173348dd2fd' }, "Flex item 3"))), h("div", { key: 'f759b9d682cbe5af25a417acc2dd81dc9e10da1d', style: { flex: '1' } }, h("udp-fluent-card", { key: '858eabd0ac3bff1c10f044e3ab1dbb7a8ceead67', width: "100%" }, h("div", { key: '1a299cdd6150d62648dadbee8b4c4fb880241794', slot: "header" }, h("h3", { key: '9b626ec19ddba5c4e5afeb6d3c9c5911285723f2' }, "Card 4 (33%)")), h("span", { key: 'e18639996cebddde37199d6951c0d0da05d49ffd' }, "Flex item 4"))), h("div", { key: '2c4a06d8bb77cdcba196717de031836ae2dce658', style: { flex: '1' } }, h("udp-fluent-card", { key: '08c80ab9218c419effd58ed9f2d41409edad2f32', width: "100%" }, h("div", { key: '630dd615898e4477f2bf347f0ecd36233cbfc78a', slot: "header" }, h("h3", { key: '502dce5adfcdd0fa798fc8f8868182cc2509c903' }, "Card 5 (33%)")), h("span", { key: '00dc62c1116b736bbb7eae43e9bcb42f8da8f2c9' }, "Flex item 5"))))))), h("udp-tab-panel", { key: 'bdeb8905baf812c218793fb482307568d4215fdb', id: "chips", activeTabId: this.currentTab }, h("div", { key: '000efe2d3456dff700ad46f00e989199176e4184', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: 'fad1be3c73a53077f5268a416b6929aaf5e8927c' }, "Filled Chips"), h("div", { key: 'f5aaa9903825bed402a72a0cc5def686eb703679', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '73c96a0a3d0b91a46888a3bb0a68a7230430d4ac', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: '1cb0c917665525c4950f814c1e1659847af33f86', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: '96a0f126510338faad8f989ee53577cfce1913f8', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: '26b977170d5ccf65912031f9cf2693355d72afd3', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: '40bc5373a34858354da22faedfc45be1c31b4516', label: "Error", variant: "filled", color: "error" })), h("h4", { key: '20484528cf9373b1b5cfa511311a861e3ea07e6d' }, "Outlined Chips"), h("div", { key: '0dde5fd38a7d4e003fdbfda9e5f808add0926c39', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '9f497712a2e7a2afcb088903587147799ecf150e', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: '92036b9650acdb8adad2733d7889cf1e640f198d', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: 'f3863696346150a5b7ff1ac9c4faf5f1742659ca', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: 'd0b9a36dc94b518943e53fd57b2140aa3f52e4a6', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: '016f9c4df14c0d521ee9b6d415786f2847f3c350', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: '7243d0bdb152f252ea4be0fa3da1967675a032a5' }, "With Icons & Deletable"), h("div", { key: 'b73da80882696b5d273f247a6e3e45d10fa1aa43', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '565ad92faff5761c648e62e1a674d714108a3e84', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: 'fe71aab40128954d51137cc1ec7189fcb0cc456e', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: 'a8220cac3c312953585829190928f3d20b57d5a8' }, "Sizes"), h("div", { key: '28667e927b0f5b257032d8d8012fe6327adfa993', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '74995f40d472cb9355e2580e0a38350c963932fe', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: 'afac03e691516cb19ae04198d697a6ca51987b08', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '71ad6049893aa82e99f4adb98d5d22cc9eed0cb3', id: "forms", activeTabId: this.currentTab }, h("div", { key: 'b182d63c5bc6f2bd400d1dd11cf6e7ae2eb1735e', style: {
+            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: 'b6b181737dca9dc355e30118f6bebe3cd39e24df', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: 'fe7f2fcea2442790c8d38432f745cac18a3b3ae7', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: 'fdefa72ea2e21d8d136074eff076ac80e2495f5c' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: 'fe2503439308c8ff6c8b482dfcf7bc2a6ff1f839', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: 'eb6c3a2302c1829bd6a5064b2c761feedcc73e56', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: 'ad400a8b16dcd9afba6101e21f9823e05f84f292', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: '3a376128950ba9f1e903e08cbe2d0b6672c9eed9', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: '62e3cd55c34372b31207849077f68fe52f505d1a' }, "Flex Layout (Grid System)"), h("div", { key: '7b7732b07c560e9c335d37988f629261427060b2', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: 'cf317cf2d46c4913f32b89f6f735626fc86fd9d4', style: { display: 'flex', gap: '1rem' } }, h("div", { key: 'fa2cb998c3af9328f9a4514f14205bc05cc4e10b', style: { flex: '1' } }, h("udp-fluent-card", { key: 'b92d16435bf12dc28a1367b4178a929c2aa93a1d', width: "100%" }, h("div", { key: 'a71e539fb21f9db6926d27ccbc245327bb20209f', slot: "header" }, h("h3", { key: '487932c783e203d9c43faf3c8813c6169ff02c7e' }, "Card 1 (50%)")), h("span", { key: 'fe9785f487744313452a68032cd0532614fe9e8a' }, "Flex item 1"))), h("div", { key: 'eebcc81b1d791df23e5f083c29856b2a2a4577d2', style: { flex: '1' } }, h("udp-fluent-card", { key: 'ff21b574c807048a0528faafb5192474fbc89add', width: "100%" }, h("div", { key: 'bc7fd546fd2096a1b9b6af081802f695e0898e9d', slot: "header" }, h("h3", { key: 'da183cde85fd4594b13701a6f130c2c5d74df17a' }, "Card 2 (50%)")), h("span", { key: '9c6a4691ec6da5bd6ee01d80c74410c1a83c8784' }, "Flex item 2")))), h("div", { key: '9a4440fb03fcf52790890e31f3b9b69918c797f8', style: { display: 'flex', gap: '1rem' } }, h("div", { key: 'e42ef069016f8b9753cb62c1e8b573af206e6cf7', style: { flex: '1' } }, h("udp-fluent-card", { key: '8ab6f7fd934cf244090ba965c6f8bfc781941ee1', width: "100%" }, h("div", { key: 'a2dfabf37bf46d270f4536521f935fbe2847374c', slot: "header" }, h("h3", { key: '883ee64febef7cfc458595f9c0f15f3d65c73cdd' }, "Card 3 (33%)")), h("span", { key: '61710d86a7f61159207473447d272eaa75976d2b' }, "Flex item 3"))), h("div", { key: '24de91a517671c0ac3c4951e14f0fb8fb9cfdbe4', style: { flex: '1' } }, h("udp-fluent-card", { key: '130b5ba19bb9092fd5ae0499b217635be12efcb9', width: "100%" }, h("div", { key: 'b83c7aefaf6c42db9ece9b527887db45bc43ab23', slot: "header" }, h("h3", { key: 'b20663588aee611d4d16ac9218f63aa370fde181' }, "Card 4 (33%)")), h("span", { key: 'a8bd26feb67acdd36a4c67b611d32f00ca47df1e' }, "Flex item 4"))), h("div", { key: '838f03cbb2b945f7ef2df6c31122c563588a9df1', style: { flex: '1' } }, h("udp-fluent-card", { key: '5f595387f21d8d88f206e75e49b77b7ec9955cbb', width: "100%" }, h("div", { key: '807420f3ee09592a934055a28d0db0297d77ff4b', slot: "header" }, h("h3", { key: '1475a642682d98fa63d51fbe367c1ebd4807dc2b' }, "Card 5 (33%)")), h("span", { key: '87f571d9c1af0e93079965f7aeef8ee5ad0e6ad2' }, "Flex item 5"))))))), h("udp-tab-panel", { key: '964842e0b3a4cbd94b4141ffc25193858c50f572', id: "chips", activeTabId: this.currentTab }, h("div", { key: '225a4486d0dbf15cc276fe521329457eef489995', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: '0e053d482db75c08a76942360b442b5cc02e7275' }, "Filled Chips"), h("div", { key: '146273935e944847f61b7f7697242beb81b4ebee', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'e5b26f87b3657073aa8cb05bc1c00a38e507905f', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: 'eb81ec37f130f58205dc39755630be65e377e84d', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: '9297a2d52de343c81f58a05cf200442b686fd861', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: '33561994245752eefa5db500406dcf9e072da9cb', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: '425e2c73aac1ecd247d8bfcc8e8f60ee093872a7', label: "Error", variant: "filled", color: "error" })), h("h4", { key: '1f69ade6d5667c0473c1e4a08ce23a4e34057eea' }, "Outlined Chips"), h("div", { key: 'e7b9b1b0d02ffadda37c8f26b68be0b0cbb7a47f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'fa9956e73eb95865d77e2078a883304a86b0043c', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: '0ccd52c651712ce2118ce45a4c7c8b87df1f797a', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: '8b2cd4958fd6ca16283e3228c8feeacb6cc32749', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: '616ff6bf8d429eba85c9d987346190044f596adc', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: '73d44013707297d0c87183b20ca19af9e2801792', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: '21679eca47c93fcfd82749b6f93c20182c10328d' }, "With Icons & Deletable"), h("div", { key: '8e04eb7665c057e16c077c9266e760416b34e8ae', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '019324e55e95daf7e34b29fe5feaa276ea5ab331', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: 'b290714f8632c7d97b4754f58793dfc555c5d430', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: '2912f871b377eab23093a96d466714e882db71dd' }, "Sizes"), h("div", { key: 'c224045dea9ce3156e5dce880713663ed80ff95a', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '7e7de92373b3e3682a7dffd131ce33f930ccdf6d', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: '134cb42babbb7a188a47f30ab874e59c82dc8127', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '933e752eeb0c36241524250da23506476fa6bb8e', id: "forms", activeTabId: this.currentTab }, h("div", { key: '2ba7bb0419e5c853777e31df6ea97aabe7f1a634', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '40px',
-            } }, h("div", { key: '5b0f2f01774a85947c1963efd2e83406ea5e906f' }, h("h3", { key: 'f51f3ffe28b42aeecd303c3f4896551c4d237929' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: '169c8fc8b8d89e84125fba35bc7462d02935614e' }, "Button in drawer footer auto-connects to form via ", h("code", { key: '58990b4ca0065b15cdd59e32153751f63fd6d66b' }, "formId"), "."), h("div", { key: '1898273f7c0d32872ac3a9690c554a3f5497fda5', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'ffc42e65af4111ec26bffdcafe6827e6f1c91e8f', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: 'b10dfb90317b77212f7b0c67262bdef339579d4b', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'abb63ea3c078d702b444ea4a0d395731c6ffee8d' }, h("h3", { key: 'd06f24b9a8703f895aa9e7e810d4d3dd475da8a3' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: '0b6bba9c9ec64e2674348d018a28e5f163c54b03' }, "Parent component manually listens to ", h("code", { key: 'b39021a64a72dc1347b71112badf7f3875f159c8' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: 'e41e12f7a1f4f077047837c859e3bb5a74027e72' }, "submit()"), "."), h("div", { key: 'ac8a555284d38baa0271237a4832b94ea3ec32a9', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'a0ee68bbb6862d4be0a1b94905edb47db1d20d99', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: 'aac9940cf7b88ace7906ea89efde995002af9f52', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'fa35551054c15310158fb2273c70d1d432620069' }, h("h3", { key: '07afad5944cf4b127f586361cdc2db2f5ce24550' }, "3. Inline Form"), h("p", { key: 'fa482f45ec04b26c4bda934d45af50ac94e5ffe6' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: '6775dab864c7cb68a732c291784538363de15fda', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'b70ba15ffddcf94a48396ab07cb8240f4159ee9f', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: '9f6c46b959e3da50d7d2030d070b9317bccb26b9', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: '76e630926fadc4d200b250b2e8b797bc8ed5e6e1', id: "calendar", activeTabId: this.currentTab }, h("div", { key: '8570ceba899bb714023e0cab1694baf210c56c55', style: {
+            } }, h("div", { key: '51d0c22548068cd16dde401b1dd2985960bcdbf7' }, h("h3", { key: '317a643057a9f7492eaf222d6cdfe2754b7132e9' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: '282ba59c491a7183e404c89b7e75a6627a388ae5' }, "Button in drawer footer auto-connects to form via ", h("code", { key: '688d73aa6abbc304d9d09bbffc3fc4a1801b48ad' }, "formId"), "."), h("div", { key: '4477b466e619006c756bf06dc5700b05fa8b3e67', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '6fdb069619d41d51188d0f9a443a196feda478af', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: 'ab77230af7fae409ee61b02f4076a55d3ea251cf', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'df957357cddcb06ec14059bdc626788c7c5a29a2' }, h("h3", { key: 'b288d29026d5e77818d70efaba78237114d53d1d' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: 'bf0a674213e50d2bb977eb3338ddced5ea0ac02f' }, "Parent component manually listens to ", h("code", { key: '549bad703fc53ee90c8f79a20d17a36152323c75' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: 'db3e33a99e57b9d187ce408a4eac0b1eb1ed36a8' }, "submit()"), "."), h("div", { key: '33bb525f130150e1eb9d020fd47207bcf5f86d34', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '11ebd23529b52a595cc65a73e5905bed1025ef10', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: '4c98e4dfe64624e47ce6af2fbeb68a54f12efc95', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'bdd614c76561a4c1fcbdc1c4179d2d316b0d4653' }, h("h3", { key: '721d5c97dce29b5aaa068bc96a57d070d692887d' }, "3. Inline Form"), h("p", { key: 'fb803bfba8e806b66bdf4bf5b860d2f1497c224c' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: 'e19f7098bff2e118913785b98a1acc35265fa3b7', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'd501a205c2dbe5d1eb422871469333a96c76290e', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: '16389d1465f8f774a86482db476cd01aedb48033', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: 'c4031de01c0230a17465c7a38ed3d4ca5f586157', id: "calendar", activeTabId: this.currentTab }, h("div", { key: 'd57cfb3bd0f74781ed4f457b0ea2e99f871f29d8', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: '0564e81ecf637695b35557a664f4d993d9333f63' }, h("h3", { key: '60005aacdbfc892e69350d36cedd0faf66b3024b' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: 'b4fa4f40fc9570a277acd16ccede1f156835fdbd', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: 'a17aa02311718141547f6fa383227f0272538e65', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: '2b398d1382ed5cb4cf5a0f8a4ee0502647bd711f' }, h("h4", { key: '733eb35d3b15bd6e4bfad259f01b6de0d297423b', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: '1a817b8f30910689a917c134be62f41bcb303df3', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '07f1bd44de2d6cafbd989779fa2d1afe6e456d8e', style: {
+            } }, h("div", { key: 'a76894d0c1a4ab636ac5030a92d0d467ce434ceb' }, h("h3", { key: 'ade00e11965d5bf44d760c61ee1a3866786efaed' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: '8ae9976cebc6f67cc1925dbf382a2af8195b36da', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: '239cf3a6fe6ab428e22b7d23ba812cd0afd6c168', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: '81aca047578c3d01e7223150175013a78b6e8455' }, h("h4", { key: '6c793499baf881f8c94c79515ac56155159b1ec3', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: 'b2086f99773ab591fb18fd010fe6e62cf1d5f77c', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '9eac84f75eeff0b9f72f3771d3d5295d55b824ac', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '99ef545535af42266b99123c4f0857c80e5687e5' }, this.singleDateValue || '(none)'))), h("div", { key: '7110c108bafdd8369bf4e91103a7d46ade57a5c1' }, h("h4", { key: 'a696e12a43554d2a5a0605e091cb296954a569cd', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: 'a040f68482d236102d49e42be2c9113276f668e4', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: '0411bfa5c070667d42a3daa8cfbcf06b4e8b2c55', style: {
+            } }, "Value: ", h("code", { key: '0184d55348988efe295edb8b5dfee5f2d7d672c3' }, this.singleDateValue || '(none)'))), h("div", { key: 'aa95eca16d1aba0e493b7c9041ae495f60bd1d25' }, h("h4", { key: 'e425d6f78306c0fba452f44de5af7a7aa1d330b1', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: 'c6b7b79e3c4e47a66758dab40bb1e99ba6297254', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: '572d9ed1a46ba24ad7ccea2f24e3c0ca49df47ac', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: 'b26aefe12a2ef2a390fd091b8dc819c42dd49eaf' }, this.multiDateValue || '(none)')))), h("div", { key: 'eb86750aeb59a1dc1df433a2573b4fb9a2a6d929' }, h("h4", { key: '0b6a5e9848f28c539161cb02e43081cfd39b6919', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: 'd76649748f31f202fc7d0ae184742475764efa99', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: 'a169672751036dbe4e4b9aac6ecfa9526dd2e4c5', style: {
+            } }, "Value: ", h("code", { key: '7cfe88f218a918facfd8da81c46ec1c7449627c4' }, this.multiDateValue || '(none)')))), h("div", { key: '9476e8b62b7ae1bf4903367d8924cea4e920956d' }, h("h4", { key: '93d113d30b3586a8c37c9076be4389022b851af7', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: '268d3d1dbd6f23d6fb1179991098e36d1d82fb04', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: 'a898c6cf04471f0110dd727580cd46dd279dc31e', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '6c13164cd462dea43d10246057dc4ae84e2a35ba' }, this.rangeDateValue || '(none)'))), h("div", { key: 'b9f0cd38b1be4598b38b223d055cebe7578c9c71' }, h("h3", { key: '026502eff9ee97bbb0eb0b5f5762d9cd2a7e35e8', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: '3c96174d5b165660c7f2b2fc00ace66dc6cb790c', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: 'eb2de3b33004d383739eb6f86cb659a1effdce5f', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: 'c392b7f4f3554888c17936aefcc2e67ad3a274d3', label: "Date", appearance: "outline" }), h("udp-date-input", { key: '0b0921f54f82b6dfc4e13ac3e1933be2ea335da7', label: "Date & Time", appearance: "outline" }))), h("div", { key: '96149e1421c6c1a4496f06eec5d13a7aee17c29a' }, h("h3", { key: '55cabd8a74df2aafb3c8c055f4d36f67085b5211', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: 'f14a774ffd1116c2b35904177d12e8787af38ee4', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: '593f34d7ad3bd58f7f29f7dfc6873d12da5fc4b7', style: {
+            } }, "Value: ", h("code", { key: '11cffef67620b25875d06854923eee4d88b32d85' }, this.rangeDateValue || '(none)'))), h("div", { key: '5d0c40e73a178845e0cfb32cc83b0cc750ea366b' }, h("h3", { key: 'ae8683c4ae2c7477e91777d9f1cbd24da1cfd76e', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: '14136a40f8a4e95ec3e70d9b0c0f8fc784c1bb08', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: '7afa9a2f0132bc34947498e93e56a9f30c7c1ba6', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: '0b279bd4ec5d320aeb903df77a8520b7403aa80d', label: "Date", appearance: "outline" }), h("udp-date-input", { key: '1e703deda9a5fcdabde2f8998349b2d696161c47', label: "Date & Time", appearance: "outline" }))), h("div", { key: 'da8cf4c84ec28c8330898f7b0b366c62a8e961a5' }, h("h3", { key: '13ad57ac22a9b8cbe4a03adc4ca6a77b20a1a59a', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: '090804cb882989f0689ebe86c09f25357549a142', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: 'd514fcb39a2881c35684b03b9c75fd22c7b5a91d', style: {
                 display: 'flex',
                 gap: '24px',
                 flexWrap: 'wrap',
                 alignItems: 'flex-start',
-            } }, h("udp-popover", { key: '7a04d566acb4dea10e7ee03315e78802462ab346', position: "bottom-start" }, h("udp-fluent-button", { key: 'cb24b7820162d673c41dd76acebe6fc3aaae3ef1', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: '5de1d6c521b4a5a8cb5d16fac77a74c3f0107f57', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '1d30e1bb7f3ae6f9a06d482a3c84c2d886b0278f', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: '39ad554db0703e90c338196415c68710531644e8', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '6e055aa48e2b8e546d945323431539215dbf4a96', position: "bottom-start" }, h("udp-fluent-button", { key: 'bd8451bb85c5037e7d8d3c4aaddabcef2f770f9c', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: 'a1b77abb1086c66c2cd6ffba74ae1d7c2e7d18a5', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '03c96293a7c766b719fd5b17347e1fc0b4305bdd', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: 'e0da8f7714c6108658a07ecc336c19df80f0c024', position: "right" }, h("udp-fluent-button", { key: 'cdc29c0a8efb2ce50eb11fd6665cc170e2f26140', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '8f412ca4b9cd91fa2b9afcece7c135da48c853d5', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: '78c1a20a0b39fab98fbcba9b4863f6738d3ca569', id: "popover", activeTabId: this.currentTab }, h("div", { key: 'c40cb26f4f1433077f359fd5e8e300cc7eb09eb7', style: {
+            } }, h("udp-popover", { key: 'baee48c3abd510ff7733b9a78b0821886b4bb93f', position: "bottom-start" }, h("udp-fluent-button", { key: '0c0ada95d79fcaec9e9dde8ced183ccd2bf21a93', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: 'b673b02063a8bcdd0cc04d28325bbff7195cf556', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '7d1025ff5ce06e01432ae6cfbb6d16f1a217b344', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: 'e58314795b4d5f2a0b4aba102291c5139ef19a75', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '61a9929f8362d95205f807aca53fec33c1f9cb50', position: "bottom-start" }, h("udp-fluent-button", { key: 'b74ce625ae37a9ec5f5964097f40bf4e27540229', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: '016fb3bb20c191299f87e964821fa03514aff0c8', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '1044c57d2c60f55c311fd0ec631c82b209e5b1e1', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '1d1bbcf2096e19d550d902a53aee357796c8b7f8', position: "right" }, h("udp-fluent-button", { key: '196c84f90020b37a72829b54f38196c54f60ac0c', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '8652a1b86dbff41cc7f1e0aed16c0247a76759d0', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: '32224be4c12ba503698dfc4299489e1f850f8970', id: "popover", activeTabId: this.currentTab }, h("div", { key: 'df1923bc1f8d87d6d1dbc0e39d7313ade2f442f3', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: '260324f593da0f2e780090539fdad60bc61be73d' }, h("h3", { key: '3fd175de3a1c37de3645c6a08fb39cfe8a170d35' }, "Popover Component"), h("p", { key: '41d1694a49c9838d8cfb5fc67eb76b5b23acf360', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '41cac8650728590c5311be055357427154245a22' }, h("h4", { key: 'b95988acc5bbc83d892afd123914560c96c444b1' }, "Basic Usage"), h("div", { key: '38ce5f4511c73199dbdfc6d04b05a54072dc75f7', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'f5131cd9c3ead4e393081b9c3ccd2a10ddf71ec8' }, h("udp-fluent-button", { key: '02f17de5288fa4103d19296c81dd1d31dacee653', slot: "trigger" }, "Default Popover"), h("div", { key: 'e6ee41db54f6b5cf4300b48c68a4ec497b8bfc11', slot: "content" }, h("h4", { key: 'ea8502d743a3e24a154997be0d67be853ed01802', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: '39333a73ca63974bc60c1e00687d9ff129b15129', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: 'a7d29274ad07e61dc94222cf2303ae1869829551', position: "top" }, h("udp-fluent-button", { key: 'ce50fb35cde83eae161a8d43503fcfa185a2bbdc', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '334842815d1551f400600bbe111ff471f12eba50', slot: "content" }, h("p", { key: '066d66cdf9484255c270a471c878aeeb756d06c0', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: 'fa2bca1139c986029078b8092b4ae797b7e49d1b', position: "right" }, h("udp-fluent-button", { key: '735d1e9e20313f7efa50025ee8e863856d08d26f', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '9e1a590259a8d339e490725741a4c7550ca070ec', slot: "content" }, h("p", { key: '2acb751ca44e1b1ca8a18f943c85b11f0cf3283f', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: 'd5e4cf78bd4014138feb822b06c7aeffe31e819a' }, h("h4", { key: '447eef728eba688407277f1a45592f2eceeb2517' }, "With Arrow"), h("p", { key: 'e531b805d5cb82083f9b01813f73780fe1304288', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '21fe3b895df8007e64d524c1615193484e69c45b', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'b86c50ad9c1810d445eacebdcf92548e5bf59ea1', "with-arrow": true }, h("udp-fluent-button", { key: '017976ea510f6d53aa0b75200c4cd074e40200c0', slot: "trigger" }, "Default Arrow"), h("div", { key: 'e0061952f1091384a36816cff1bf37516743205b', slot: "content" }, h("p", { key: 'de7286cb7c37e8737fbfa9163dc5315272fd36a1', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: '5cbd09973e6ad37f7e7695df8399f0ff54d8c535', "with-arrow": true }, h("udp-fluent-button", { key: '8bd45ab10b6d67b2a77d5aa4ed9e6ca369dc3f61', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: '7c4d21eefd923cf985f5c10867859e6b173355e8', slot: "content" }, h("p", { key: 'bc19481f6d9fd283bbee732b9b3634e36e368312', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: '072da68b3efd2762ca6c10d1c4c1c7bc2d312e24', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: 'bcf36281ebabbdde7ddd6661819a7c98fb57835b', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'f5f98a169ed7045725232ab802408b1eae8366c5', slot: "content" }, h("p", { key: 'a928d9e08767df06d0176088adea5443aa60f6a2', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: '787e6c949a371dd2159f40a9f8e070388f789acf' }, h("h4", { key: '4f9190f84effb74daef176621227fe90258f93ab' }, "Size Constraints"), h("p", { key: '63200b35d50fba4a00c5e6c91a8e0c3b7213784d', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: '79a151fa4e506cc9bb3632fd93924e5ce77bbc40', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'f517624b3bcb8b4866fb6d1ecdab3d87ef87857f', size: "small" }, h("udp-fluent-button", { key: '2e0d4dcf4af85bba5088f9ce79088b11c3e3cbc4', slot: "trigger" }, "Small (320px)"), h("div", { key: 'dd4ed409e8500151911dcc4e43c1b8c89e4d8939', slot: "content" }, h("p", { key: '804c6ca2531042ea1a50b7c93e17083047506887', 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: '306f4a0200d89e89b1402e959fe8606d1d6403ef', size: "medium" }, h("udp-fluent-button", { key: 'c0d03315f67fb45842a132cd5b812117eaa787a3', slot: "trigger" }, "Medium (480px)"), h("div", { key: 'f205db2fe4a9d98225ad944182e7ed04c1e47d87', slot: "content" }, h("p", { key: '90a4f7e1cd0e34b72074f57fa18633156df6d373', 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: '798ff74a31a410bb9c8d8878a68f8f53f64f9632', size: "large" }, h("udp-fluent-button", { key: '8e70342a2ba913209231c363f2160391cdef0890', slot: "trigger" }, "Large (640px)"), h("div", { key: '1b53e890f4e2d9355684da06398bf439f25f9ca6', slot: "content" }, h("p", { key: '0d7e4ea5eccffa3692538412e34ec125d364c428', 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: '0b6333331c1ce038226b3b949cb3722941f84f76' }, h("h4", { key: '88f1205c493ba5e41c860239ff523a577b67d8dc' }, "Trap Focus (Accessibility)"), h("p", { key: 'd93dcacd3c8c65f05c59c03ad37d05d14a448315', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: 'e9fcb062d755c02ada4206145c9bb44fe8452655', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'b1854d27fd11a855699052300b578986f23d5c13', trapFocus: true }, h("udp-fluent-button", { key: 'f851f3584041e5b4d49a432ca2f3e8ee32f07967', slot: "trigger" }, "Trap Focus"), h("div", { key: 'eabf2be2cdf4bc3c8fa99f5b2a8dcad58f036719', slot: "content" }, h("h4", { key: '8245cff1a7579ce2dcd2652b9a584cd8aa8e3183', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '9d1618b5be96d6ad42414e4caf214c462dec8838' }, "This popover traps focus. Press Escape to close."), h("div", { key: '895bd0a74a88a75009d4480cfbecddbd856f3d60', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '0f05930254a744209cab1ab63af3a5221d9fa2eb', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '77c821b49cf480b4b77c90b66440137118848613', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '85428cbf8b1fa4e4e423065a7c452fcbe4ac336b' }, h("h4", { key: '66a577de93b4fc0aefe4ec5dd93dd306e7c9a8f4' }, "Advanced Examples"), h("div", { key: 'b7e05593bbc4a642f461fc0e4945fc62eb9d77ce', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '643a43f9513503a6d9145c87c5effc25d6cd195b', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: 'b5ec6c2824a2f30b91a5ecbe052ca4cbbd80174f', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: '4d81048a5d3c4ff5a1d4a317cfa423e4a8e95fc1', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '49ded8bdb72d68dbbcb4d34c4f4c6c2b70f39d74', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: 'b4bc943e95d0903f30ea4983ba0f4cc1e020fef1', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: '0843fc8c63607e9444e5465eddcb9899fee15296', slot: "trigger" }, "Rich Content"), h("div", { key: '12bf761021d898050681bd78fc392c2ab19d2756', slot: "content" }, h("h4", { key: '97aeb698de3ed86d3e8b14184c6c4f09527ee8be', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '566a1210ec4ff6b5e926e362c85fdd75d9b4817d', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '97f7dadecd3e66b33c6d7eefbd5550684b31c39f', size: "small" }, "Learn More"))), h("udp-popover", { key: '450e2186391f0a92d07e0bd248a686bbd1912f9c', "close-on-scroll": true }, h("udp-fluent-button", { key: 'fa48fce568845eb193ae729daddad3bd23c5a5a5', slot: "trigger" }, "Closes on Scroll"), h("div", { key: '094b8eecf30fb12bfa3d63da555c1b8d054f6141', slot: "content" }, h("p", { key: '78582c18afe233bf3a0425ab2ca58c39d06b29c2', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '2281582c7d28c7941e6a6d9c9bb25610c23da3ac', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: '070a219b2ebfb3aaf1ed5a8d8db44b74f9eedf9e', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
+            } }, h("div", { key: 'de78599b62074890996a9f0b7106a2caf5e0a76b' }, h("h3", { key: 'fa5e1134c795219324a6c18c672ae00b153e8c16' }, "Popover Component"), h("p", { key: '349aab9138858af853addd096cbc0efba1058d02', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '0ec085fd6187abe25ef865493bd0d742860e14fb' }, h("h4", { key: 'abc70a93436f57ade92f1fede7760da9f08b10a6' }, "Basic Usage"), h("div", { key: '309cd090c58e89db45aacd97f45d4be364b71cc8', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '2389e4690bd6d0a5a8a969b701e6960df643abf2' }, h("udp-fluent-button", { key: '215847df3af948b28c26663ee6e8d591ffa721ad', slot: "trigger" }, "Default Popover"), h("div", { key: '15713b88dff46228c61ec60b655fd750cd825555', slot: "content" }, h("h4", { key: 'dc12ab74b240312f0ad4a93e15b6216e0d211d7e', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: 'c40374b77cd3c413c889b11243fff435d79e1410', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '49b591fe69268f355e783e2121ba0700565fbac7', position: "top" }, h("udp-fluent-button", { key: 'bcf771e569a713995342f381ce15d95805da0b31', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '16f881adf8a80464e6493eb001a9b7c8530a598a', slot: "content" }, h("p", { key: 'c56be14ceb4b0b745b3d501828fcf81bb7959845', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: '17429ce24610062761721adba1b0e1360d3435a0', position: "right" }, h("udp-fluent-button", { key: 'ea0c27b5ad3ef80e87b444ee516c1ab78061f7b5', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '0e31b7751096b3c21e1ba742c9128e58e78a977a', slot: "content" }, h("p", { key: '3b28a0e7fd294e958af0ae3f7ae611f6fd40ad39', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: 'f1b870262e56f2b7c0c6b62cad6c4ec1ee6bcea3' }, h("h4", { key: 'd08ed6b40a1a17ad446c5da47235a5a021a0ae87' }, "With Arrow"), h("p", { key: 'b0669021c90234a102a2758e2c85b6cf7d0a40c5', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '148494b3afc0e4a4498e176de2f3f53f120377ab', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '71cd4042402d54503e10a0b3b778273a44708a86', "with-arrow": true }, h("udp-fluent-button", { key: 'afdb81992187c7e90a31775f91dd7c7602626550', slot: "trigger" }, "Default Arrow"), h("div", { key: 'e23966673d45422677b2f9d20e059f3eba15a86f', slot: "content" }, h("p", { key: 'dee67f67e84adb4224962db86eafb13006a73c5b', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: '30397d03de10b21a857bc47bf5caf88349c2fb0a', "with-arrow": true }, h("udp-fluent-button", { key: 'f30d696cae00645eb9559cd199acc3666e51eeab', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: 'cab059aeec07465c05ac1fe3fee9a3556516abb7', slot: "content" }, h("p", { key: '00dd51a1ea338445fa2b927632426e9b1a22af0e', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: '27aca32e7bdbd3a90bd00c826c87ef4c8d0fe047', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: 'e0849cd9bd6b381ea93d1e11c9fae80dba62a394', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'd19a4b3097a7b74ca70522849035b0ff2c301c31', slot: "content" }, h("p", { key: '49c6eef9b0ba971942f85f544f4008262d485453', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: 'a2fba4fe01f12ce3ec791b940789b33fc58d2692' }, h("h4", { key: 'fb5d56e7b993789e46008144fe2408075d874120' }, "Size Constraints"), h("p", { key: 'ec6b9c33685c2c94c572342357e8a805c27c9e0a', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: 'd05cc708230095259f253846cbbac0a940a30160', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '12baa8d16f25afa6c3d28670f83c9eb5121d6c8a', size: "small" }, h("udp-fluent-button", { key: 'ab5016650f2d00ce84f97cf1e200d0615b42b8a0', slot: "trigger" }, "Small (320px)"), h("div", { key: 'c7c816bbe8137bdde9ff705886e0a7d6ee6f2c3c', slot: "content" }, h("p", { key: '79f129f1a55f1ed1f863b9c9b2513bc3bb167a15', 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: 'ee49c32415153273e4fdaa53729c0f5f7a364d84', size: "medium" }, h("udp-fluent-button", { key: '9070dd1f95a829200e6174fc835696bb63bcae29', slot: "trigger" }, "Medium (480px)"), h("div", { key: 'fb780656ef0e681cd2c8abf0ad79c8cb8aabf063', slot: "content" }, h("p", { key: '92109f351fe02b2d9e464119dcf28157d5900b6b', 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: '1312dae79483ae04cfe25cb94fafcb15b8a4ba41', size: "large" }, h("udp-fluent-button", { key: '5af2687fba9b0e61ae9ae9ad7c8c535795f6437f', slot: "trigger" }, "Large (640px)"), h("div", { key: '070844d44ac39ce22328507251a4b270a0402feb', slot: "content" }, h("p", { key: '447edcc4cdd8ea9cb18683cd84e9b4821a43008e', 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: '1106f68b226ad63b7a3205408207cdcb15457812' }, h("h4", { key: '98c88f79d70524359a9b8bf39907ac8c5bb1d5fb' }, "Trap Focus (Accessibility)"), h("p", { key: 'd0fcb4a98269e5db035986f9959807bada8b0bbe', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: '66c307a29bf5b3db9b20aa6d64d1e61e20e22e1b', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '327314e4256e88715247406857c0a3f60933a24f', trapFocus: true }, h("udp-fluent-button", { key: 'fb7482ef7a513c88c7372663aa3f293f729df544', slot: "trigger" }, "Trap Focus"), h("div", { key: '71219e293802ec5f6ea566374589bf6e4c5d26ef', slot: "content" }, h("h4", { key: '9b5e264fa3f88d1442740d1d66cbc1cea27d1717', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '2d156cdfef4194e95738ae4d5dd7777f7dca119a' }, "This popover traps focus. Press Escape to close."), h("div", { key: '828667f0ffcaa14848140c4307e9fffaa2a10c17', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '87f7af81b74a38ea013151f37042159c7ba1ebd6', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '0f94b6cc584004ce1fb5cb06418fab83a9bdf4aa', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '6e46b315c6fc725a62bd77cccbca3b73a4ee981e' }, h("h4", { key: '0e053b34f9ec82147ebb5d3887c891d7ce430a2a' }, "Advanced Examples"), h("div", { key: 'c56987b0cd19ad2186992deb806602ba7445fb45', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '73a88abe2fc9fe39bcbfaef4f9091356a25e0baa', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: '95aa8157bcaf5d4e4676af8df62dd3417b3766cd', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: 'fe3b48bace501833e82f23a98e2ceeff6a8617db', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: 'd24cf7f68d4d3e3eceb5915a170789994e70050b', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: 'adc83170b5fef6161a2b733cbc5a8117f1e4eb73', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: 'b2206fd4150be2f9ba62e821f56dbade81c257f6', slot: "trigger" }, "Rich Content"), h("div", { key: 'a533b23283097f5495d0151ee0f93b6890e21b77', slot: "content" }, h("h4", { key: '167daeb178d8cf35fb63b0f592cf5856667732d2', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '68717bc1995273cb80a46bb080b0c17da85db066', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '384035590f4155351c85acb101db1a32b360a036', size: "small" }, "Learn More"))), h("udp-popover", { key: '8b78209e59153e19061b5aaae79a940b928d9898', "close-on-scroll": true }, h("udp-fluent-button", { key: 'ec078c2a75da1d260a1e0a351770a905a28506d6', slot: "trigger" }, "Closes on Scroll"), h("div", { key: '056b4561b2484838879632e49356dd495c52f089', slot: "content" }, h("p", { key: 'bd8e8442a9fab33b2790e065309cc1ba389e587b', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '5ab4d3eb2cb6adba88ebd6800dd9cee4fad3103c', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: '1b58126c058d478dec5bb7857208a70f201156af', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
                     { field: 'name' },
                     { field: 'age' },
                     { field: 'name' },
@@ -3906,10 +4060,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: '9e1be7ed5fc9d1267a4e23d8314c100bbe7bc036', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: 'dd6aeb64c3099a2cf8e4a035302ca845e29e8320', 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: '996c41bbee3249d0f9d3aa298838efeab0e8f038', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: 'b9ec8f06a3e71ad5e67262896b5a69438524cf3c', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: '2ec908ff87dad1250abf39726381238660818f44', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: '26f06c781a47e18d337e2ce755f9b75c2883a476', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '9e6eb6dec6da0bdeb2bb184dd5b5c5a5725a673f', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
+                ] }), h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), h("udp-fluent-drawer", { key: '16f8cc6b49ca49a6c5fe94d593390bc8dc9e87fb', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: 'bf77fd0dde42b809e56490881d4bc1e19790ab85', 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: 'd40fca17c87c7e852a40037ea8b83d37c59490a9', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: '99d6c6a9bb73b12c91838883c59aa2912f018228', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: 'd70876c7815a09985c6d4631a80269c136d5dff5', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: 'cc72088e57ec6df26ffa5bb4d4f72e85bdcf82d2', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '31c4e117a65db305d61f3ae71e9def3acfc90a9e', 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: '6e91bfbf10a4a59b2402b9f05120660c63c44d90', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: '18fe4caa630af5608b5fe0c0c1906fcb3e8dde21' }, "This dialog was opened from inside the drawer!"), h("div", { key: '06d026bc00f77a39ed56158401c6a3f24a135b43' }, h("p", { key: '948fd274b6ccfc1dd9054ca5fe847c01698aeb08' }, "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: '7c7c6188b1f6b4b369571294a75f50b7144d5bae' }, "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: 'f4d699980a401fedd08a008ccaaa05d7ca75ec77' }, "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: '424fca6eff1e54482d534f79f6275a9ac987e227', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'e3b3a46858fced75ec9d78bc43ba36fe3a7e901b', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '0a71490cb540ddd1522728711dcf5909dd8fb476', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: '02531560c700d6f8237ddcebcdd35ace5d0be980', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: 'c9b78dd51cc3e400b36829c09888ec5407e48c79' }, "This is the second drawer opened from within the first drawer."), h("div", { key: '1748255209ec482caba90cb09d73e639732c03ca', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: '484b21b5decca82831b76372715e3cf27e5630d7', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: '8eb1fa3aa9b4003ddadbe13a09988e1d1ee69c04', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: '4d033f99253052638f864b9e445144c96ba00090' }, "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: 'ab7f32ef65e5cdb8cf66db7cd870fb706a99a359' }, "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: 'ee670f6f8eb81dafa98c852b8a04f7d5836640f0' }, "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: '7965ed05e120de1aa394bf06d0a06f4c26ed7940' }, "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: '59b1f0c03f86820d992912edd9632bc246cb424b' }, "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: 'f0df607d704b6725d1b7d7ae533e6022ffb48030', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: '49ce5bf69407554af0afb54c73a383dcfa8f0ff4', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: 'b8e4a2261454e8925caf9a6018da979289c8b64e', style: { padding: '16px' } }, h("p", { key: '8f2d09363caf7839c22224abc7bc3fd6a7620dd7' }, "This is the third drawer! Three levels deep."), h("p", { key: '4308f9a3dd95c3ddb795a5b280532fad0e6cacc2', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: 'ddd119ec511ba1f8fc4236e0bac17dc25e53ceba' }, "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: '0e986c1c26ed959b8e60ed59459369de3e031637' }, "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: '7bf604344108dd6b2077b86f9a3b925eb207d80a' }, "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: '4e9dc2a920e812fa89301260d87367738a6124d6' }, "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: 'faa92795a3f62e74a5d44e0a2c71d2737b5a7780' }, "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: '557c1a937077116a1cca9f6adf17800ae6241d45', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: '52ac6502288ef85768adab10d51eb2ed57a130b4', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: '9275c8a48f8931050548f59de768b7f7ac31afac' }, "This dialog was opened from the second drawer!"), h("p", { key: '26184721fdc978e13810ac9302d974fee615407d' }, "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: '4f2111db30b582bf0e6bb2e68d63aca0315e7f9f' }, "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: 'ddc8c99053b3d8865469c8dbfacd373c7e1f6d4b' }, "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: '05c9f1ee7f6a06f6ae13a5d2e101fce956555caf', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'e6b0f28d91fd538601a3acb4ccac652bf2439a9e', appearance: "primary", slot: "action" }, "Confirm"))));
+            } }, "Submit (Manual)")), h("udp-fluent-dialog", { key: 'f8c40ae3fe9e603f7b10f7465d071d99db4dd026', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: '0bbfbaea2485b206d0c79ebaaa9b39b2d149d171' }, "This dialog was opened from inside the drawer!"), h("div", { key: 'fa6699d36a79136655fe71da769b6ee63ae5b4cc' }, h("p", { key: '972a6a4a5c3e650fd8fb6f9fd2213e75890f5ff2' }, "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: 'ee0daa3e2f7b9c9b97cb6a1592ba5a6f2337c107' }, "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: '89f1e118e34429c79cea4624c48bf0813dfd7890' }, "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: '7f5bdc86b1d37bb52f343be37bde7c81b547b0ee', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '25be316897d60feedc8c12ff00b21f3adf073d31', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '62be21084f28613fe954ba943a0bb36a137c889c', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: '1923c71e9c7aca3a963d5d86183393c5eee60457', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: 'b13caa017a7f11d4b0a2c1042c47bf69699c950f' }, "This is the second drawer opened from within the first drawer."), h("div", { key: 'c5a39af6039317c3bf671a6ab9d21c7c3c54abfa', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: 'e4ccbe3179d8a26a6f6f169a9107a8924eec3cfc', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: 'ae2cba5361ac6d6240928172a72820e9da986f18', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: '4406f7255aa566c9eda9f3fdee78a1ac36910540' }, "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: '9fc1c451b7f0ab489755c6db43334687a39fb6dd' }, "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: '8fa89a3293677daf7c443584c12a0c793d941547' }, "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: '3b7b60f24933474c2314da540929daf681b4b50e' }, "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: 'ef1228a69bf639931b4e0b5256e2377d7041bef9' }, "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: '55b5f458a18d307a31cbb8ef009e06ff37bca9fe', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: '78cb98deee2f37629a38eb330dfde513eae92524', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: 'a2da7cf7abeeda0dfa00f1a84e1a70d840dfa82e', style: { padding: '16px' } }, h("p", { key: 'bca06e1eff9c54553810d20317c1973355077c32' }, "This is the third drawer! Three levels deep."), h("p", { key: '336986be66d7b3292cef84d186b7da6561badfdc', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: 'bc85d911652d7a31f6982d5e1e2d3bb71efaba07' }, "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: '10c49ea595ad50691241d152f06b2307bf47b2e0' }, "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: 'e441232b860741a3a99c422de55768a4021fb4f0' }, "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: 'bc5f93574f0faf049126ea697b34a513e12c11f4' }, "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: 'a6e02ecb397559113a95ad99ce12966a42184089' }, "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: '375e5901be524643740d386044ed120fd11943e4', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: '6c77457252d669a8ee972e5726948182b95c8c45', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: '76c7000aeba22fdfb8a8f6eaa195527ae2b8630f' }, "This dialog was opened from the second drawer!"), h("p", { key: 'cc87bef32a39e7b8629b50be195f9b4de611ee39' }, "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: 'd18f1e17b73346663c9c985c4b10f8c6c18ab7eb' }, "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: '9e396ec3e757dd9df60d295b353bd55a31b9c83b' }, "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: '29b8576af3600d53647428317c68c500400fc1ec', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '4eff0e187aa08a7be9474c5f1d5a3191fbd5f477', appearance: "primary", slot: "action" }, "Confirm"))));
     }
 };
 
@@ -4028,17 +4182,17 @@ const TestForm = class {
             { label: 'Medium', value: 'medium' },
             { label: 'Large', value: 'large' },
         ];
-        return (h("div", { key: 'a57c46f8b798b741b5ebd8eb135eb6b9960517fd' }, h("udp-form-component", { key: 'b2d93472d191789925b71715090a41ad4d503540', formId: this.formId, validate: this.validateForm, onFormReady: this.handleFormReady, onSubmit: this.handleFormSubmit, initialValues: this.formData }, h("udp-flexbox", { key: '74776440cc735c00b32440ed9ed9e6a8d5bf733e' }, h("udp-flexbox", { key: '2b549d4e07ebbdb697f7f80416e323b5a26031ab', style: { display: 'none' } }, h("h3", { key: '2c47cf693115f8d9b7716607168f074ae690ebaa', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("udp-flexbox", { key: '1739c956d7728ad26b2e45ebb9d0b2574aebc66a' }, h("udp-fluent-dropdown", { key: 'd310106d75c624404a5373fdf69762f87e855d81', 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: '62db26babe038ec261c3f6c4c61b8bd6d48a4a4d', 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: '3ebd458b8592a52baa650e179eacf2430653bc62', label: "Required", labelPosition: "after", checked: this.controlRequired, onValueChanged: (e) => (this.controlRequired = e.detail) }), h("udp-fluent-switch", { key: 'daede134a1d07312feaee584e3f045ab3a0af11b', label: "Disabled", labelPosition: "after", checked: this.controlDisabled, onValueChanged: (e) => (this.controlDisabled = e.detail) }), h("udp-fluent-switch", { key: '54133afaf21ba72e33a65d6e3cd21b1d102c874c', label: "Readonly", labelPosition: "after", checked: this.controlReadonly, onValueChanged: (e) => (this.controlReadonly = e.detail) })), h("p", { key: 'd44e914abf2553b6879a6e20a0c18d51f603b787', style: {
+        return (h("div", { key: 'c6e6d809a4fd13eb7ec368a642357592162c5fa0' }, h("udp-form-component", { key: '424a3cd1640f3708cef96c83ad524877675f7f25', formId: this.formId, validate: this.validateForm, onFormReady: this.handleFormReady, submitHandler: this.handleFormSubmit, initialValues: this.formData }, h("udp-flexbox", { key: '2d599867009ab61e17055ae72dad6e1564f7e640' }, h("udp-flexbox", { key: '8f9bd24d40df0d8276a9e7f46e63cc1e069f38f9', style: { display: 'none' } }, h("h3", { key: '9c97ac8b5c87d23f585da2e12b2a9f3d8b163572', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("udp-flexbox", { key: 'facb3e251a290c9e8f2692eccfe81d33031685db' }, h("udp-fluent-dropdown", { key: 'f45515b120641c778aabfd6a7c3d6da5b5a4186b', 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: 'd9c81f059030f3c98958fba989a60368433f8d24', 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: '387a5b4140ee3d06a5c8c9be36543f8c33fe9bee', label: "Required", labelPosition: "after", checked: this.controlRequired, onValueChanged: (e) => (this.controlRequired = e.detail) }), h("udp-fluent-switch", { key: 'b8f786ba864db234cc7ad4d49cc3e4d109136c79', label: "Disabled", labelPosition: "after", checked: this.controlDisabled, onValueChanged: (e) => (this.controlDisabled = e.detail) }), h("udp-fluent-switch", { key: '00c1255fec440be9960f10bff875472ec8fd56d3', label: "Readonly", labelPosition: "after", checked: this.controlReadonly, onValueChanged: (e) => (this.controlReadonly = e.detail) })), h("p", { key: 'aa934ac3cd01cdc1495d08d9c40eef96ce834b20', 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: 'df61f2920c777deb1ac2870abaf46586e67db4d3', name: "searchText" }, h("udp-search-input", { key: '8c2e4453980119bd3419a690f1a4bdd60073049d', disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Search for something...", includeErrorPadding: false })), h("udp-field", { key: '8ef1274697ba18adf706a7ea5d79bb7c9418d289', name: "firstName" }, h("udp-fluent-text-input", { key: '535723cef8c30d0260696ea5e5770762d079cf3f', 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: 'd0710f63ba6cdc1f97b14066e9b19a08786623cd', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: 'c44643373ab5bf9128cdc9075a40679c05ee6152', name: "email" }, h("udp-fluent-text-input", { key: '21fc7072e419f9d406e706ea9fa36ec39cdf0be3', 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: '2af3a99d1c950cf53f27285cba2d0d2fc81dc271', name: "age" }, h("udp-fluent-text-input", { key: '7ae3c68ae8f59ae3bf1a0f394fc389705b80c1a1', label: "Age", type: "number", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: '54588d8a9451727e34deb060dfcbfd0218149c95', name: "birthday" }, h("udp-date-input", { key: '12a0b283b9b905471e0d62c85848d5fddce0efb7', 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: '8b576520de87fcc76078da49ecf89e8e74fc77c9', name: "appointment" }, h("udp-date-time-input", { key: 'c5d8d362c96d85ed8473ac608681ff385533b7ed', label: "Appointment (Combined Date/Time)", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("div", { key: '986c281814b0429312dd80818782c9fa235b9707', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: 'e8c8e8b84e6cd1a466fef555f73018c9412f73b0', name: "startTime" }, h("udp-time-input", { key: '680bd39b24b370e0dbb645e289d474e2e1195971', 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: 'bf0a6ba17fa15b6ccdf5f24f39c7b1a2b381fbb5', name: "endTime", validate: () => 'always invalid' }, h("udp-time-input", { key: '0e370f50fd59833966374a7be9dcd08ca828128d', 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: 'aa1c2e86425bdf6c7d1c2fe804560ab711d92159', name: "bio" }, h("udp-textarea", { key: '5125848f85b5bb09a18912afb3e0805b25bf4356', 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: 'ae9bec66be00bb40a8cc26386f37e7eee42ba247', name: "exclamation", validate: mustHaveExclamation }, h("udp-fluent-text-input", { key: '74b003b23f31a9f4f730d605c5f43372552f54de', label: "Exclamation", hint: "exclamation mark please", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '9bc2bb37cae10207daeeecd774b3b6296c638d02', name: "favoriteAnimal" }, h("udp-fluent-dropdown", { key: 'e20c4ca6c279dd285a7b350887ac2cde129c32e9', 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: '9a0f52b09e37b11910b94880b47ec6b1e0c1128f', name: "favoriteAnimalAutoComplete" }, h("udp-autocomplete", { key: '005d7246084cfb8c5d36f3ad3194ff6a12eb4a71', 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: 'c17c21fbefe603f36d15d51290ec587523d153d7', name: "searchText" }, h("udp-search-input", { key: '1a8b44c31c6446a93054cfc3b2289d90fa45f65f', disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize, placeholder: "Search for something...", includeErrorPadding: false })), h("udp-field", { key: '4b732d126aaf2a8a88f2a12234ed89c638b2bf46', name: "firstName" }, h("udp-fluent-text-input", { key: '09789e1c2d0d911760b6fd9fcfd3fcefd7a01a58', 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: 'b74ec4d398e603a4639e6f5049d566336741511f', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: 'e70b1c8424dea49214746cd9fa21b07d64f72157', name: "email" }, h("udp-fluent-text-input", { key: 'b407e3e4d28e38004772f93fd2fefb3f67ba4267', 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: '132c98e1351aa76436928979deb0dd1b36051a98', name: "age" }, h("udp-fluent-text-input", { key: 'f5c46e2fa347f7a9f866512b8e3c363c0975c774', label: "Age", type: "number", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize }))), h("udp-field", { key: 'b412fe407b3da67bfacfcd411bacbc31abe519a1', name: "birthday" }, h("udp-date-input", { key: '24a6aae2028a12b6818cbec1450aedaff56f457e', 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: 'f0cbb18c0062dd9a8cd2b8d4f2c1e308ae2e2818', name: "appointment" }, h("udp-date-time-input", { key: 'b80d8e632ba54643dc7483cf914ead91d8ebef0a', label: "Appointment (Combined Date/Time)", required: true, disabled: this.controlDisabled, appearance: this.controlAppearance, controlSize: this.controlSize })), h("div", { key: '267607b2fbb082198c6a197dce8ff15a07eb8062', style: { display: 'flex', gap: '1rem', flexDirection: 'row', flex: '1' } }, h("udp-field", { key: 'f998d23f7fc7d0d06047738699826517ec4472cd', name: "startTime" }, h("udp-time-input", { key: '74f315d29fb7efb3ee15fcd040271cfd31213163', 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: '990714e498d53620f7fca2c521b9475f26afd6db', name: "endTime", validate: () => 'always invalid' }, h("udp-time-input", { key: '31e4bc38e98bb5f24c4eeae00fa113645e1dd15a', 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: '2fc2e23901c42df6070a380494abea6bf8064ebd', name: "bio" }, h("udp-textarea", { key: 'fcc5f40d64de802eb2d7cf0c698a62d24450c0c6', 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: 'ca7537ad348d64a6681b396aa5d9abe0d47724b0', name: "exclamation", validate: mustHaveExclamation }, h("udp-fluent-text-input", { key: 'cd096e3cda6d49d0a4a201c0a929476d958089b8', label: "Exclamation", hint: "exclamation mark please", required: true, disabled: this.controlDisabled, readonly: this.controlReadonly, appearance: this.controlAppearance, controlSize: this.controlSize })), h("udp-field", { key: '02944007b97b580a5c24dc2bc454c9ec189e64c6', name: "favoriteAnimal" }, h("udp-fluent-dropdown", { key: '95131b4299a17a8f1f3cd8bcf511b2d7fc7a0e1f', 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: '5b63c463a16f2f7c5f9fef52b0f753b3271fed98', name: "favoriteAnimalAutoComplete" }, h("udp-autocomplete", { key: 'ea28cd7c71aa9477616c3ed041f2c6512c79a682', 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: '7602195b121bfcc8f5315dbd953328a727f270a9', name: "serverSideUser" }, h("udp-autocomplete", { key: '51de7ce1f5abcd4a660073a7d564839f56d0815b', 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: '87481109b1321e5d5b51b203fd25353e8e5b20f0', name: "newsletter" }, h("udp-fluent-checkbox", { key: 'd0ba74d42f3792bb044fe7ae28569dcbe56fe424', label: "Subscribe to newsletter", hint: "We will only send you emails about important updates", disabled: this.controlDisabled, controlSize: this.controlSize })), h("udp-field", { key: 'e850645848a932678f0de47e88184be6fb0aea75', name: "commitment" }, h("udp-slider", { key: '7ffa874240b644037c00cf53ac382d9afd8b2c65', label: "Commitment Level", disabled: this.controlDisabled })), h("udp-field", { key: '2c5243fe8642c107f781ec82aaf959b8b72bf3e8', name: "active" }, h("udp-fluent-switch", { key: 'bfaa2193f3c3885759fc03050b63bbf75fe30b1c', label: "Active", labelPosition: "after", disabled: this.controlDisabled })), h("udp-field", { key: '949f90d7e7436efbc7d3b70733574b0cb290f46c', name: "favoriteColor" }, h("udp-fluent-radio-group", { key: '292db23bc880e363ce9f49304f57cb868a3f8cab', label: "Favorite Colo", disabled: this.controlDisabled, hint: "Favorite Color", items: [
+            options: animals, controlSize: this.controlSize, popupHint: "Select an animal" })), h("udp-field", { key: 'a749e30627ab697fc70517f9f053b800bab14fe2', name: "serverSideUser" }, h("udp-autocomplete", { key: '6d14b83a9df1bed3bd13ad0dad407a6706f9bf59', 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: 'b8abcc83141d13b34085d46c565b8cbb9e2f5d33', name: "newsletter" }, h("udp-fluent-checkbox", { key: '7c965a5144cc66ac62c9f453d06724f2a6d68d48', label: "Subscribe to newsletter", hint: "We will only send you emails about important updates", disabled: this.controlDisabled, controlSize: this.controlSize })), h("udp-field", { key: '8ee065a692f9230947c61c639acdaae3b1d86487', name: "commitment" }, h("udp-slider", { key: 'd82a4fd9a7e831a6b983c019fbd660db2137b1f7', label: "Commitment Level", disabled: this.controlDisabled })), h("udp-field", { key: '9c01e58c058f16f41a487aba135171cbeb1c45d3', name: "active" }, h("udp-fluent-switch", { key: '2beef446b71cfaec3c5f9316711bf4a890e31dd0', label: "Active", labelPosition: "after", disabled: this.controlDisabled })), h("udp-field", { key: '86bef830811cc3117471a15f96b9b70ad8fc5c6d', name: "favoriteColor" }, h("udp-fluent-radio-group", { key: '799dfdd88cae4864a5af036bb2a3aad3f4c9a7b9', 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: 'd20cce2398a0263f03ae9434230a04ee1fd5eee5', name: "swatchColor" }, h("udp-swatch-picker", { key: 'cf2878d75f67f7eec3b20c4cb5f8cc32fcf9b1f4', label: "Pick a Color (Swatch)", hint: "Pick a color", swatches: colorSwatches, layout: "row", shape: "square", size: this.controlSize === 'small'
+            ] })), h("udp-field", { key: 'cb67abc051814e423cddfeb72ae2cf2ef7a96a3e', name: "swatchColor" }, h("udp-swatch-picker", { key: 'd3faa7b07f5381a126c77788707d2bd4f88ed8fc', label: "Pick a Color (Swatch)", hint: "Pick a color", swatches: colorSwatches, layout: "row", shape: "square", size: this.controlSize === 'small'
                 ? 'small'
                 : this.controlSize === 'large'
                     ? 'large'
@@ -4046,7 +4200,7 @@ const TestForm = class {
     }
 };
 
-const udpAccordionCss = () => `:host{color:var(--colorNeutralForeground1)}`;
+const udpAccordionCss = () => `:host{color:var(--colorNeutralForeground1)}:host(.appearance-contained) fluent-accordion{gap:var(--spacingVerticalS)}:host(.appearance-contained) fluent-accordion-item{display:block;max-width:100%;background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box}:host(.appearance-contained) fluent-accordion-item::part(heading){height:52px;padding-inline:var(--spacingHorizontalM) var(--spacingHorizontalS);font-weight:var(--fontWeightSemibold);border-radius:var(--borderRadiusMedium)}:host(.appearance-contained) fluent-accordion-item::part(button){height:52px;font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}:host(.appearance-contained) fluent-accordion-item::part(content){margin:0;padding:var(--spacingHorizontalM) var(--spacingHorizontalM);border-top:1px solid var(--colorNeutralStroke2)}`;
 
 const UdpAccordion = class {
     constructor(hostRef) {
@@ -4056,6 +4210,12 @@ const UdpAccordion = class {
          * The expand mode of the accordion.
          */
         this.expandmode = 'multi';
+        /**
+         * Visual variant.
+         * - `subtle`: default Fluent appearance, no chrome around items.
+         * - `contained`: each item rendered as a stacked card with a neutral border.
+         */
+        this.appearance = 'subtle';
         /**
          * The list of items to generate accordion items for.
          */
@@ -4066,9 +4226,9 @@ const UdpAccordion = class {
         };
     }
     render() {
-        return (h(Host, { key: 'd73b67053e4fc122dfb6f33a7c73c3796a73a3ce' }, h("fluent-accordion", { key: '4fb48f3b22310fa0bbef6937961479f69bd03b4b', "expand-mode": this.expandmode, onChange: this.handleChange }, this.items
+        return (h(Host, { key: '52d6c8c4724465a67067e28923ae5a5794bf2caf', class: `appearance-${this.appearance}` }, h("fluent-accordion", { key: '1c23f304578f5419696f0cd39ca8d07aedc8e731', "expand-mode": this.expandmode, onChange: this.handleChange }, this.items
             .filter(item => !item.hide)
-            .map(item => (h("fluent-accordion-item", { key: item.id, value: item.id, "heading-level": item.headinglevel, expanded: item.expanded, disabled: item.disabled, size: item.size, block: item.block }, item.label && h("span", { slot: "heading" }, item.label), h("slot", { name: `${item.id}-heading`, slot: "heading" }), item.content && h("div", null, item.content), h("slot", { name: `${item.id}-content` })))))));
+            .map(item => (h("fluent-accordion-item", { key: item.id, value: item.id, "heading-level": item.headinglevel, expanded: item.expanded, disabled: item.disabled, size: item.size, block: item.block }, item.label && (h("udp-text", { slot: "heading", variant: "subtitle2" }, item.label)), h("slot", { name: `${item.id}-heading`, slot: "heading" }), item.content && h("div", null, item.content), h("slot", { name: `${item.id}-content` })))))));
     }
     get el() { return getElement(this); }
 };
@@ -4157,9 +4317,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: '49317bbd9f7712a0068e6e61dd0fcdbda68d9b10', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: 'c50bed2ca50126b78f250a9c7d691a5a95dac035' }), shouldDisplayTooltip && (
+        return (h("div", { key: '76f07afee67d7d07767b854b3e0b468039a34bd1', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '622ab4acb4012503be164ea4ddd213937cbc71e6' }), shouldDisplayTooltip && (
         // STEP 4: Use the global class name we defined in our style string.
-        h("div", { key: '3d4eec2466ef0b18d7b1097ac2ae665c841ac3a6', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '41da5cd61ef057c6b5bc77ecd7c27a310970e27a', variant: "caption-text" }, this.content)))));
+        h("div", { key: '99299569d0be029b26f4ae01cf591a370a0687dd', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '113b439042c660a909bbcbdcc4a6c507d82716d7', variant: "caption-text" }, this.content)))));
     }
 };
 UdpAmbientToolTip.style = udpAmbientToolTipCss();
@@ -4839,10 +4999,10 @@ const UdpAutocomplete = class {
             ? this.resolveProp(overlayOption, this.optionLabel, true)
             : null;
         const overlayBadges = overlayOption ? this.getOptionBadges(overlayOption) : [];
-        return (h(Host, { key: 'bf600310c753d613f5e73c1b9859023017ad2117', class: { 'has-error': hasError } }, h("fluent-field", { key: '4a235e2656ccc6bdd9b1f654d62ca5a17276319d', class: {
+        return (h(Host, { key: 'bdd6e4c3ad961ba652d54dbc00668bee328b0546', class: { 'has-error': hasError } }, h("fluent-field", { key: 'b24aaf3c3005370cb1dd636adb6250d3c333bb97', class: {
                 'no-label': !this.label && !this.multiple,
                 'no-message': !message && !this.includeErrorPadding,
-            } }, h("div", { key: 'ce402780732436555a8da185bee67a429c727be7', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (h("fluent-label", { key: 'ad2edbff54e7c811b2ee55c3b4fdd9bb757b9d5d', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: 'd8502cb1904d44a65db75ed96cfda0f291755771', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '5e8853fd0b5ea0681c21e0f311bbb49b480419e6', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (h("div", { key: 'e7638b16952f0e4cbe4e143d3e9dbd7729222f6c', class: {
+            } }, h("div", { key: '5cd182b709221373a5fa29bdf39d094d56a7ed6f', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (h("fluent-label", { key: 'df28434aea16836eff7b87efecf79b0df221dcd6', disabled: this.disabled, style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: '99a915b4dc310278a4305e1b6d8baa01b20c1e18', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e994589606742b0af14269a83fe5ca7d4184c9e0', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (h("div", { key: 'af3ddbcbdfcc8afd37cb767156c00e12a60851db', class: {
                 'selected-items': true,
                 'has-items': selectedItems.length > 0,
             } }, selectedItems.map(item => {
@@ -4852,14 +5012,14 @@ const UdpAutocomplete = class {
             // 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: '2eef7edd1be9df3a9bd929ecde001044894bf34e', slot: "input", class: {
+        })))), h("div", { key: 'a24ba320fdb1245b2a77220286a3281eee3ff8e1', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': !!overlayOption,
-            } }, h("fluent-dropdown", { key: '80aa48ea49530c0bb4bd02e15204be045b5c0801', 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: '4303d6c002b42f1ac259be9fc969df2d5d159104', 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: 'ad6f270fc5f3cee34e547db9c4cfbf64efff36ea' }, (this.loading || this.internalLoading) && (h("fluent-option", { key: 'b4403900baea07790a6f81f31c22c58a3ae0eabe', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: 'caee15289d2b6c153dcd74cf8cc9365069b6dac3' }, "Loading..."), h("span", { key: 'b7f403dc8e8f7866c034dadd7638c809bc9ed672', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (h("fluent-option", { key: '4956f1c0fc0f968a461b967177aaab0bdba2bbdb', 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: 'd8c75e0c23a3e34d983c3cac2ae3dedd5cc5a34d' }, (this.loading || this.internalLoading) && (h("fluent-option", { key: '4f01650961bae674b1f27355ba21f2cfdb1d1108', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: '4da0bd038f5be0e666ba77e23df3a98f87642e7d' }, "Loading..."), h("span", { key: '99b07dbeedebf7e517ba8f6055c743a05ce64af7', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (h("fluent-option", { key: '0ff899f2c28712a00e92b35ae1e7ff207bce3494', 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 &&
             (() => {
@@ -4890,7 +5050,7 @@ const UdpAutocomplete = class {
                         } }, optIcon && this.iconPosition === 'start' && (h("span", { slot: "start", class: "option-icon-slot" }, h("udp-fluent-icon", { name: optIcon, size: "sm" }))), this.renderOptionContent(optLabel, optIcon, optBadges, this.getOptionSecondaryText(option))));
                 });
                 return nodes;
-            })(), this.freeForm && (h("fluent-option", { key: 'ac5afbebe5e78481812b1383e7c189c2056f1b0c', freeform: true }, h("output", { key: 'beb5e28cbf948c23991b25a5bd928b5222cecfcd' })))), h("div", { key: 'ea21dc25f8ea3ba18fb1619ac7a4a1cf8daa1a6f', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '3ba49da2164fd5d76396be30782272bfd58e1f4c', class: {
+            })(), this.freeForm && (h("fluent-option", { key: '4dd08e2cc985d2a42422faa8ade4b9c5992733c5', freeform: true }, h("output", { key: '916b1af6f3a8797a6fa14fa0ae76a8107716a562' })))), h("div", { key: '5d6227cd27d25c7e4ed04f8299fe8380dd1b2e63', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '4889e140f685aff51cee886d2449f1983acb3c1d', class: {
                 'clear-button': true,
                 'is-visible': !this.disabled &&
                     (this.filterText !== '' ||
@@ -4898,10 +5058,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: '3d7199f1fae82746cec7dc17fb2fd42c415f24ae', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (h("div", { key: '429c3352417084128a12f0c2ee9072838e0d7c45', class: "selected-overlay", "aria-hidden": "true" }, h("span", { key: '4d672b37fe290d128076098628ee4bc97fba1042', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), h("div", { key: 'cf89c9a1ba5eb9cf32907821c4811305dce37c45', 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: '4bed97458a00ab44f0d172b6870c39d030831a41', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), overlayOption && (h("div", { key: '919ea4fc75a2f1e9cf2d9a0dc31fd71bc3a098bd', class: "selected-overlay", "aria-hidden": "true" }, h("span", { key: '7fa6be503afdbaf33238cde8d4618c3c6276cd31', class: "selected-label" }, overlayLabel), this.renderBadges(overlayBadges)))), h("div", { key: '0442762a4fa6f8568eab9052fd1926b5dae58065', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: 'c4a1b7ba9cdc1863c3ea8b2fe83d1d09008df9a4', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '96a77d610bac921bd03d5a81a876be9afc208e6b', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -4967,7 +5127,7 @@ const UdpAvatar = class {
         else {
             style['background-color'] = this.getColorForUsername();
         }
-        return (h("div", { key: '35fb37e1c18498aa68bf1838b6c0a480e3fe5420', 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: 'b45bf523f90254dcd7c5407a06bf99d60402ef9c', 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();
@@ -4982,7 +5142,7 @@ const UdpBadge = class {
     }
     render() {
         const displayContent = this.content > this.max ? `${this.max}+` : this.content;
-        return (h("div", { key: '36726de60aebadce6aeeecaaf61d24c4b3513999', class: "badge-wrapper" }, h("slot", { key: 'bcc6db34e5ae24edd2a9e3d67e8f434957d91a57' }), h("span", { key: 'ee51eb09ed51f706f9b8b305d13a71d04183c1fe', class: "badge-content" }, h("unity-typography", { key: '12199e2016f009bb494357a0c5c5d06c83b865a0', variant: 'caption-text' }, " ", displayContent, " "))));
+        return (h("div", { key: '96bcdee62edfc992431c647ee4bab1caaa758255', class: "badge-wrapper" }, h("slot", { key: '23884cb924e9e9cc0a73b3c7618c92430a04279c' }), h("span", { key: 'd40594141b2949039e961856ebc23cfe00e10d90', class: "badge-content" }, h("unity-typography", { key: '9d4131f5fda849a5cf01b1b892ce2ec8b6c38305', variant: 'caption-text' }, " ", displayContent, " "))));
     }
 };
 UdpBadge.style = udpBadgeCss();
@@ -5088,7 +5248,7 @@ const UdpButton = class {
         else {
             attributes.type = this.type;
         }
-        return (h(TagType, Object.assign({ key: '44557419c6b8bea13ac4b02dd50302f6d4e7c0ba' }, attributes), h("div", { key: 'f26d2977d0bb6d7fb8bf4df317a395a8915ee68a', class: "udp-button__spinner" }), h("span", { key: 'eafcc2bed3899309a85a9298c6591f038c5f706d', class: "udp-button__content-wrapper" }, this.startIcon && (h("span", { key: 'c98220d759d91e4485278975c30bac78e1615fa5', class: "udp-button__icon udp-button__icon--start", "aria-hidden": "true" }, this.startIcon)), h("span", { key: '9421005d26dc30d5da1c6c16462c854fff3f3333', class: "udp-button__text-content" }, h("slot", { key: 'e37cd338e1abcc915f3d43401dba79c69f15dc0d' })), this.endIcon && (h("span", { key: 'a4b8a475fe934a2a067ee9d6cb213a4fec49046e', class: "udp-button__icon udp-button__icon--end", "aria-hidden": "true" }, this.endIcon)))));
+        return (h(TagType, Object.assign({ key: '03e8c38e50dc21b13460af37f0c45acc645b94d1' }, attributes), h("div", { key: 'ef5e69b4bdb9e9d7691501068aa95e2a02dcec35', class: "udp-button__spinner" }), h("span", { key: '66516037091fbf80c0537548bf7ad3ad1397e2a4', class: "udp-button__content-wrapper" }, this.startIcon && (h("span", { key: '90f92dea47f44701993ec9bf44e8656863350a6b', class: "udp-button__icon udp-button__icon--start", "aria-hidden": "true" }, this.startIcon)), h("span", { key: '8219ab673bece049833c7defbfac9f9e3032b4ae', class: "udp-button__text-content" }, h("slot", { key: '2ac43549d447fcd3f4584beec914d48557fe9037' })), this.endIcon && (h("span", { key: '01485d3787ccc42c4fd6e228c03ac51080125659', class: "udp-button__icon udp-button__icon--end", "aria-hidden": "true" }, this.endIcon)))));
     }
     get el() { return getElement(this); }
 };
@@ -5139,7 +5299,7 @@ const UdpChip = class {
             [`chip--size-${this.size}`]: true,
             'chip--clickable': this.clickable,
         };
-        return (h("div", { key: '6f7be967a2f7fd7b77de34f986b670c12357b07d', class: chipClasses, onClick: this.handleChipClick }, this.startIcon && (h("span", { key: '3af7aec42e15512710905f9706662beb2ccb96f8', class: "chip__icon chip__icon--start" }, h("udp-icon", { key: 'f36c7a7c1aaf280c7a54d6a3cc9b904a5a30a89b', iconName: this.startIcon, color: 'inherit' }))), h("span", { key: 'c3179398ad0acdf3f3ea890d32b12a852241fc99', class: "chip__label" }, this.label), this.deleteButton && (h("span", { key: '033152be23aaefb2d36464dbdf5011cad56de294', class: "chip__delete-icon", onClick: this.handleDeleteClick, title: "Remove" }, h("svg", { key: 'fcb015d39f58da00fabc43362ab02ad23152ce0a', width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { key: 'ebc5422d810b4c8d629b565ec0d1627618e9f449', 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: '361854166b47c2faec56bda81a5f3519e3e7bc2e', class: chipClasses, onClick: this.handleChipClick }, this.startIcon && (h("span", { key: '2cb82ff959a3f418676f65ad08a227ed130d281c', class: "chip__icon chip__icon--start" }, h("udp-icon", { key: '4b728fe4c1b7448abbe1a7e888cfc34d98a38aa7', iconName: this.startIcon, color: 'inherit' }))), h("span", { key: '47fba8918f0b9472ddd38121bcdc0136fce69769', class: "chip__label" }, this.label), this.deleteButton && (h("span", { key: '27c9e7b53186d99ac1c5b9c85e9c227eaad8b26d', class: "chip__delete-icon", onClick: this.handleDeleteClick, title: "Remove" }, h("svg", { key: 'dec4211f3f3daaac983a69624fd55769cb156431', width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { key: '9bd1af5220cae817be75dbc64e0f5d6d73bf04f1', 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();
@@ -5208,7 +5368,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: '7cfb9c85448fe45f300c1333b0c26e1aa2d07c41' }, h("fluent-compound-button", { key: '67a34388976cd2d8b08462024ab0179f2ca51f74', 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: 'ef2a49b45204b7330479cf8dd44f8f6822a454f7', class: "slot-wrapper", slot: "start" }, h("slot", { key: '37b4238f543f0d0a0f7acf3fe12b2b295f24d6c4', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '08fc334a00788430199e669608db63a5569af088', name: this.startIconName, size: iconSize }))))), showDescription && (h("span", { key: 'a389e595d2c0fbb642370d4b82c5f220ef29a655', slot: "description", class: "description-wrapper" }, h("slot", { key: '61499b0f71eb6f155f80a8a3f67cde553d0a02b1', name: "description" }, this.description))), h("slot", { key: 'ac1497fc1882a3efe6ef1e839e38b83f4d7de7d9' }), showEnd && (h("span", { key: '4b2c9f8ecab264225a1c3367e87808c71eafb476', class: "slot-wrapper", slot: "end" }, h("slot", { key: '9493eeb58a0a64d67c957136d91780cf76d5ab92', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '56405ee9bf85b5e8fc66c10833d19d10a2f73cfa', name: this.endIconName, size: iconSize }))))), this.loading && (h("div", { key: '1b4da7123649d43eda1d4a167c16d0a171a7f069', class: "loading-overlay" }, h("udp-spinner", { key: '4c0cac4941dc078ec242e305c40455d0cc1b36b9', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
+        return (h(Host, { key: '212b785c591acf67253cb180efb3a032ec60b38e' }, h("fluent-compound-button", { key: '5c98090d79a3087e8b75727003aa2666860a57b1', 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: '979679564974c63e6bffa9d4cdef1851b7487c8f', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'd14bf4f6baecd930a13bad49f61281175812b596', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '7c783a55f0c355d779163d27a7a5e9831238bb14', name: this.startIconName, size: iconSize }))))), showDescription && (h("span", { key: '05775142c1cdbf662c395dc159911d66d2d0253c', slot: "description", class: "description-wrapper" }, h("slot", { key: '4d650275f2037808d6c3ae5b8d87c60a83cf619b', name: "description" }, this.description))), h("slot", { key: '688741673c2e02e122585ddbbea8c1ae57e9590d' }), showEnd && (h("span", { key: '96dd3816da1eb4cae5816f619d938abd2cd4f9da', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'ac28aff0d58792ac45a56a98ed16b968f428ead0', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '808eb095073681b9664775a2b4188a1e84359a62', name: this.endIconName, size: iconSize }))))), this.loading && (h("div", { key: '8fb67bdc557e1b314693fa2bc27578a64bd3c0bd', class: "loading-overlay" }, h("udp-spinner", { key: '934cc5075e0cf2d66b11433676f48550030deca4', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
     }
     get el() { return getElement(this); }
 };
@@ -6289,10 +6449,10 @@ const UdpDateRangeSelector = class {
                 : 'calendar-range';
         const containerWidth = this.getContainerWidth();
         const monthWidth = this.getMonthWidth();
-        return (h(Host, { key: 'a8ae214f84638149614c86582114281a7a3d2865', style: {
+        return (h(Host, { key: '110df5411b1cd697b43b9810c4a51415eac67b65', style: {
                 '--calendar-width': monthWidth,
                 '--container-width': containerWidth,
-            }, class: `size-${this.size}`, onClick: e => e.stopPropagation() }, h("div", { key: 'bd7d3d009c72b4018f625a5367f5b4e705afebd2', class: "calendar-header" }, h("udp-fluent-icon-button", { key: '0a27ae7eefe1e0c44e912f30c8b3c871c3f85073', iconName: "chevron-left", onClick: this.handlePrevious, disabled: this.isPrevDisabled(), appearance: "transparent", ariaLabel: "Previous" }), h("udp-fluent-button", { key: '3a3ee8f825c2b81d60db8f9aa2c8a10977e8f08f', appearance: "transparent", onClick: this.handleHeaderClick, ariaLabel: this.viewMode === 'year' ? undefined : 'Change view', disabled: this.viewMode === 'year' }, this.getHeaderText()), h("udp-fluent-icon-button", { key: '48bd551c0b4fd216529eec99bf962f4918600f7d', iconName: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabled(), appearance: "transparent", ariaLabel: "Next" })), this.viewMode === 'day' && (h(CalendarTag, { key: '8702ac18d3bfc0188ad10630158658c45a43c9bf', 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: '30a102bb1f5c9cf43d3c475cf984c948f04dae6e', slot: "previous", style: { display: 'none' } }), h("span", { key: 'acd87984703be40c08d3465c24dc4e23f66312e1', slot: "next", style: { display: 'none' } }), h("div", { key: 'eb2a0e46f26fa3d22220b5b891980c15e0b02d88', 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: 'd1e4231e4c7f7b0ab09f5c195a2790b8f50fdd4b', class: "calendar-header" }, h("udp-fluent-icon-button", { key: '3bd5baef80592a833cfbdd0da41e4340042352d5', iconName: "chevron-left", onClick: this.handlePrevious, disabled: this.isPrevDisabled(), appearance: "transparent", ariaLabel: "Previous" }), h("udp-fluent-button", { key: '8ae72404f47f5501fcdccb7e76d7c3d44c6a1dd7', appearance: "transparent", onClick: this.handleHeaderClick, ariaLabel: this.viewMode === 'year' ? undefined : 'Change view', disabled: this.viewMode === 'year' }, this.getHeaderText()), h("udp-fluent-icon-button", { key: 'def615278ab504fda892e801c50bbc0757a6fd99', iconName: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabled(), appearance: "transparent", ariaLabel: "Next" })), this.viewMode === 'day' && (h(CalendarTag, { key: '013e560a38275c04b1f783852c8e553f980aade4', 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: 'cd366931a01548c7796cf5bd9a368a659ecf976a', slot: "previous", style: { display: 'none' } }), h("span", { key: 'd7f4a92450d9e458faf26b78f8f2e7bd9e5f6b63', slot: "next", style: { display: 'none' } }), h("div", { key: 'd27db9651f66c9322dc461eff384f5abf8ce0e80', 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 {
@@ -6398,7 +6558,7 @@ const UdpDateTimeInput = class {
         // 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: 'cb793e5cddb02511bea997ff58c7a28be561256a' }, h("div", { key: '189936d2f6a4efce1a1d3caa755271b48dfb3895', class: "date-part" }, h("udp-date-input", { key: 'cbbfebcb02565d03aa61c3d6043c629ececaa24c', 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: '2420f67024e6b3896ba426b0807b7e02722fccb0', class: "time-part" }, h("udp-time-input", { key: 'abfee15b43a7e673d4698d7d237e137fc36b5493', 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: '25a83534d7e1cb0f176fb51ba29d069ccf1a10ce' }, h("div", { key: 'ea940d0130938ec6235ad91909440ab076fe1e70', class: "date-part" }, h("udp-date-input", { key: 'cf4d76c3bad773f234e2df325d2d2bbdcfa21012', 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: 'eec7daa2be271b63233113e9d20d5143cab4f3a3', class: "time-part" }, h("udp-time-input", { key: 'e8bd7882a7e76bb88e1d46b4d8580cb01ccb88ed', 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": [{
@@ -6461,7 +6621,7 @@ const UdpDialog = class {
         document.removeEventListener('keydown', this.handleKeyDown);
     }
     render() {
-        return (h(Host, { key: '2546786ed716a5bc8b6a8fef2656a093d5235a64', onClick: this.handleOverlayClick }, h("div", { key: '3d1ee70b83f144ffa3b3b60a8b9210864b70148f', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: '096a926f6b2379766ae3ff7baef856bdfe238050', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'b413ed62a0844b16297905cf8048796f7ca1875b', variant: "h3" }, this.title)), h("div", { key: '7a43f1717414e68704721b9a61225bbbb2d35d8c', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: '477f344493caac3aea8fbf2aa504a3d739dec9b2', variant: "body" }, this.message), h("slot", { key: '992116be06ef409c6c0a08178bb592cb979294b7' })), h("div", { key: 'fb6cdfb64e775e1c30bfa0a80cd10e0adc2ac4cd', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: 'b1b84c147751c65e2be33838d0b1db3932c699b0', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: 'd8687080205a003c716f397cd55732f8f754a320', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: '4d6af682d17af4957bb3cfe4d4edbaef10bc2f22', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
+        return (h(Host, { key: '79fc54d24cf02d0fd2a0475ecabc13936bfc0b69', onClick: this.handleOverlayClick }, h("div", { key: 'dfe6b5cf42fdc76c3a420f473a2d8542f184cb65', class: "dialog-container", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.descriptionId, onClick: (event) => event.stopPropagation() }, h("div", { key: 'b34c3c283968a1edd0ec07ef312807ef152a9eaf', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: 'd980347009bd75c7591f2fd87a45e1632506c20b', variant: "h3" }, this.title)), h("div", { key: '15bab369202f6498154772767ca299ba700abd21', class: "dialog-content", id: this.descriptionId }, this.message && h("unity-typography", { key: '03c3c6de90201cf40749b3d9b8423d7238167a5b', variant: "body" }, this.message), h("slot", { key: '31ea739b30261e1d0b4a74b82044957b7d86d25c' })), h("div", { key: '438ec5314765aec75f6c3b5557238a8c77fc7cb6', class: "dialog-actions" }, !this.buttonTwoHidden && (h("udp-button", { key: '57da743d785a4c9fd769813145a50376b99c2e25', variant: 'text', disabled: this.disableTwo, onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("udp-button", { key: '1ab3897a4116f80eb681947cce29c78bfb37c34a', variant: 'text', disabled: this.disableThree, onClick: () => this.actionThree() }, this.labelThree)), !this.buttonOneHidden && (h("udp-button", { key: 'd8f9eb335d877687b6766e9f1c1cd71154e1c6a9', variant: 'contained', disabled: this.disableOne, onClick: () => this.actionOne(), loading: !!this.progress }, this.labelOne))))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -6510,7 +6670,7 @@ const UdpEmptyState = class {
     render() {
         const showIconArea = this.loading || this.hasIcon || !!this.iconName;
         const showSecondary = this.hasSecondary || !!this.description;
-        return (h(Host, { key: '5b737f1fd28e6682db15466761d125738c6c2cfd', class: `size-${this.size}` }, h("div", { key: '701b7732f782820fee60784de62281eed940fc63', class: { 'empty-state-icon': true, hidden: !showIconArea } }, h("div", { key: '1412b6950093e756abd66e92d86fc11385558481', class: { 'icon-slot': true, hidden: this.loading } }, h("slot", { key: '7afc5dc4c3530922d69df1d1c78fdf01fa2202ba', name: "icon", onSlotchange: this.handleSlotChange }, this.iconName && h("udp-fluent-icon", { key: '0d828509e868f6bfa32644335aedd8e8dc2628db', name: this.iconName }))), this.loading && h("udp-spinner", { key: '09116d97b72cf8a34f3e53c602e54fb3b813d777', size: SPINNER_SIZE_MAP[this.size] })), h("div", { key: '2e851337857e2f7b5d2f07080d917f47ea1c13c8', class: "empty-state-primary" }, h("slot", { key: '9c002fa928fac3903a3d71f419d4002af9898871', onSlotchange: this.handleSlotChange }, this.heading && h("udp-text", { key: '4f5e1fb4948a15fc5f5460d8a5c3bd6c21d8d4c3', variant: "subtitle2" }, this.heading))), h("div", { key: '8eb81a753bd1f122d03c06c3db0b6322750fc5f5', class: { 'empty-state-secondary': true, hidden: !showSecondary } }, h("slot", { key: '5c4d299fb9b0eb9cb455e4a363e83d010bcbdee6', name: "secondary", onSlotchange: this.handleSlotChange }, this.description && h("udp-text", { key: 'cf5c46da93039dae5fb449cac001fb68cd35eb7c', variant: "body2" }, this.description))), h("div", { key: 'b50c0d2fa8458669a99a72cc62cc9f6d362576b6', class: { 'empty-state-action': true, hidden: !this.hasAction } }, h("slot", { key: '3a0566f1107ed5f23204c07fb7af0f4dca338277', name: "action", onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '19e39a4779f2678b8a2f78f638886b4814688d04', class: `size-${this.size}` }, h("div", { key: '48003c618b26e0be817ac1ff5aee33984cc5e199', class: { 'empty-state-icon': true, hidden: !showIconArea } }, h("div", { key: 'ef3bf32bff28749eda5a9f71fd44669de20879ef', class: { 'icon-slot': true, hidden: this.loading } }, h("slot", { key: '9ed785cae386b42a7de148a4301c26f2eec6b790', name: "icon", onSlotchange: this.handleSlotChange }, this.iconName && h("udp-fluent-icon", { key: '4bf5d48ca0472a1c2ef36f969a6fd0b049918a25', name: this.iconName }))), this.loading && h("udp-spinner", { key: 'd36fab2c7299f48c5a368f05728293e496256b98', size: SPINNER_SIZE_MAP[this.size] })), h("div", { key: 'a2a4e8516917c9101836645e69a132d4ee3801f5', class: "empty-state-primary" }, h("slot", { key: 'd16c123f7ef7932a90be5ad9e1c02b1dcde9d2bc', onSlotchange: this.handleSlotChange }, this.heading && h("udp-text", { key: '9e3d88544450280fbade7c79b9eab423c7ec9b1c', variant: "subtitle2" }, this.heading))), h("div", { key: '846eed0ae360a012833329e68201c04dc0dabb3d', class: { 'empty-state-secondary': true, hidden: !showSecondary } }, h("slot", { key: '38d95b43d0eca4ee69655c20878d31173d768e84', name: "secondary", onSlotchange: this.handleSlotChange }, this.description && h("udp-text", { key: '364e09b9b4031c14a08d621d1441a800baba5d0a', variant: "body2" }, this.description))), h("div", { key: 'a142a76e279da9b60b228dd438a1b0914b074cc2', class: { 'empty-state-action': true, hidden: !this.hasAction } }, h("slot", { key: 'ce829f57d018bc459c636a2af3611b9d77e10833', name: "action", onSlotchange: this.handleSlotChange }))));
     }
     get el() { return getElement(this); }
 };
@@ -6876,12 +7036,20 @@ function getValidatorsFromElement(el) {
     const maxLen = (_b = input.maxlength) !== null && _b !== void 0 ? _b : (input.hasAttribute('maxlength') ? parseInt(input.getAttribute('maxlength'), 10) : null);
     if (maxLen && maxLen > -1)
         validators.push(maxLength(maxLen)); // -1 usually means no limit in some browsers
-    // 4. Min / Max (Numeric)
-    const minVal = (_c = input.min) !== null && _c !== void 0 ? _c : (input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null);
-    if (minVal !== null && !isNaN(minVal))
+    // 4. Min / Max (Numeric only)
+    // HTML `min`/`max` are numeric constraints only for number/range inputs. Time,
+    // date, and datetime inputs expose `min`/`max` as temporal strings ("09:00",
+    // "2024-01-01") — or '' when unset — for their picker bounds. Coercing those
+    // through Number() yields NaN (time/date) or 0 (''), which would attach a
+    // bogus value validator that every entry fails ("Must be at least "). Only
+    // attach when the bound resolves to a finite number.
+    const rawMin = (_c = input.min) !== null && _c !== void 0 ? _c : (input.hasAttribute('min') ? input.getAttribute('min') : null);
+    const minVal = rawMin === null || rawMin === '' ? NaN : Number(rawMin);
+    if (Number.isFinite(minVal))
         validators.push(min(minVal));
-    const maxVal = (_d = input.max) !== null && _d !== void 0 ? _d : (input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null);
-    if (maxVal !== null && !isNaN(maxVal))
+    const rawMax = (_d = input.max) !== null && _d !== void 0 ? _d : (input.hasAttribute('max') ? input.getAttribute('max') : null);
+    const maxVal = rawMax === null || rawMax === '' ? NaN : Number(rawMax);
+    if (Number.isFinite(maxVal))
         validators.push(max(maxVal));
     // 5. Types (Email / URL)
     const type = input.type || input.getAttribute('type');
@@ -6903,21 +7071,36 @@ const udpFieldCss = () => `:host{display:block;width:100%}`;
 const UdpField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Acquired from the parent `<udp-form-component>` at register time. Controls
+         * when the error string is pushed down to the child input — see the form
+         * component's `errorDisplay` prop. Defaults to `'touched'` so any consumer
+         * that hasn't opted in keeps legacy behavior.
+         */
+        this.errorDisplay = 'touched';
+        /**
+         * Acquired from the parent `<udp-form-component>` at register time. When
+         * `false`, this field skips attribute-derived validators
+         * (`getValidatorsFromElement`) so the form-level `validate` is the single
+         * source of truth. The explicit `validate` prop still runs regardless.
+         * Defaults to `true` so consumers that don't opt out keep legacy behavior.
+         */
+        this.deriveFieldValidators = true;
+    }
+    /**
+     * Boolean (checkbox/switch) inputs are detected by interface — the child exposes a
+     * `checked` property. All other inputs use the standard `value` property.
+     */
+    get isBooleanInput() {
+        return !!this.childInput && 'checked' in this.childInput;
     }
-    get inferredType() {
+    /**
+     * Textarea is detected by tag-name. Used to suppress the Enter-to-submit shortcut.
+     */
+    get isTextarea() {
         if (!this.childInput)
-            return 'text';
-        const tagName = this.childInput.tagName.toLowerCase();
-        const typeAttr = this.childInput.getAttribute('type');
-        if (tagName.includes('checkbox') || typeAttr === 'checkbox')
-            return 'checkbox';
-        if (tagName.includes('switch') || typeAttr === 'switch')
-            return 'switch';
-        if (tagName.includes('radio') || typeAttr === 'radio')
-            return 'radio';
-        if (tagName.includes('textarea') || typeAttr === 'textarea')
-            return 'textarea';
-        return 'text';
+            return false;
+        return this.childInput.tagName.toLowerCase().includes('textarea');
     }
     componentDidLoad() {
         this.childInput = this.el.firstElementChild;
@@ -6931,8 +7114,12 @@ const UdpField = class {
         this.el.dispatchEvent(new CustomEvent('fetchFormInstance', {
             bubbles: true,
             composed: true,
-            detail: (form) => {
+            detail: (form, options) => {
                 this.form = form;
+                if (options === null || options === void 0 ? void 0 : options.errorDisplay)
+                    this.errorDisplay = options.errorDisplay;
+                if ((options === null || options === void 0 ? void 0 : options.deriveFieldValidators) === false)
+                    this.deriveFieldValidators = false;
                 this.registerField();
             },
         }));
@@ -6947,7 +7134,12 @@ const UdpField = class {
             console.warn(`[udp-field] Child of ${this.name} does not appear to be a compatible component.`);
         }
         const explicitValidator = this.validate;
-        const htmlValidator = getValidatorsFromElement(this.childInput);
+        // Attribute-derived validators are skipped when the parent form opts out
+        // (`deriveFieldValidators={false}`), making the form-level `validate` the
+        // single source of truth. The explicit `validate` prop always runs.
+        const htmlValidator = this.deriveFieldValidators
+            ? getValidatorsFromElement(this.childInput)
+            : undefined;
         const combinedValidator = composeValidators(explicitValidator, htmlValidator);
         const finalValidator = combinedValidator || ((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.getValidator);
         const finalConfig = Object.assign(Object.assign({}, this.fieldConfig), {
@@ -6955,14 +7147,35 @@ const UdpField = class {
             getValidator: finalValidator ? () => finalValidator : undefined
         });
         this.unsubscribe = this.form.registerField(this.name, (state) => {
-            // Subscriber function, called each time when a value in the subscription changes. Will pass the value, error, loading down to the input
+            // Subscriber function — called when subscribed values change.
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const { touched, value, error } = state;
+            const { touched, value, error, submitting, validating, submitFailed } = state;
+            // Gate the error push to the child input based on the form's
+            // `errorDisplay` mode. The form-level `submitFailed` flag is
+            // propagated to every field's meta state, so all fields reveal at
+            // once when the user clicks Submit on a `'submitFailed'` form.
+            let showError;
+            switch (this.errorDisplay) {
+                case 'always':
+                    showError = true;
+                    break;
+                case 'submitFailed':
+                    showError = !!submitFailed;
+                    break;
+                case 'touched':
+                default:
+                    showError = !!touched;
+            }
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            this.childInput.error = touched ? error : undefined;
+            this.childInput.error = showError ? error : undefined;
+            // Push form-level busy state to the child if it exposes a `loading` property.
+            // Inputs auto-disable / show spinners while form is submitting or async-validating.
+            if ('loading' in this.childInput) {
+                this.childInput.loading = !!(submitting || validating);
+            }
             // --- HANDLING CHECKED vs VALUE ---
-            if (this.inferredType === 'checkbox' || this.inferredType === 'switch') {
-                // Checkbox/Switch: Form state IS the checked state (boolean)
+            if (this.isBooleanInput) {
+                // Boolean inputs (checkbox, switch): form state IS the checked state.
                 if ('checked' in this.childInput) {
                     const newChecked = !!value;
                     // Only update if value actually changed (prevents redundant renders)
@@ -6972,7 +7185,7 @@ const UdpField = class {
                 }
             }
             else {
-                // Standard Inputs (Text, Select, etc)
+                // Standard inputs (text, select, etc): form state is the value.
                 if ('value' in this.childInput) {
                     const newValue = value === undefined || value === null ? '' : value;
                     // Only update if value actually changed (prevents redundant renders)
@@ -6985,7 +7198,14 @@ const UdpField = class {
             if ('name' in this.childInput) {
                 this.childInput.name = this.name;
             }
-        }, { value: true, error: true, touched: true }, finalConfig);
+        }, {
+            value: true,
+            error: true,
+            touched: true,
+            submitting: true,
+            validating: true,
+            submitFailed: true,
+        }, finalConfig);
     }
     /**
      * UNIFIED EVENT HANDLER
@@ -7015,11 +7235,11 @@ const UdpField = class {
             if (ev.defaultPrevented)
                 return;
             ev.stopPropagation();
-            // Don't swallow enter on textareas
-            if (this.inferredType === 'textarea')
+            // Don't swallow Enter on textareas (newline insertion)
+            if (this.isTextarea)
                 return;
-            // Don't submit on Checkboxes usually (Enter toggles them in some contexts, though Space is standard)
-            if (this.inferredType === 'checkbox' || this.inferredType === 'switch')
+            // Don't submit on boolean inputs — Enter toggles them in some contexts.
+            if (this.isBooleanInput)
                 return;
             ev.stopPropagation();
             if (this.form) {
@@ -7028,7 +7248,7 @@ const UdpField = class {
         }
     }
     render() {
-        return h("slot", { key: 'ea2c51097d208fb092431f457d76b1a0fd449962' });
+        return h("slot", { key: 'fb9c4c1174366a4fd3983cf93eea34cd4a1551ad' });
     }
     get el() { return getElement(this); }
 };
@@ -7176,7 +7396,7 @@ const UdpFluentAvatar = class {
     }
     render() {
         const imgBorderRadius = this.getImageBorderRadius();
-        return (h(Host, { key: '1895e4a329b04880f4dfe38da775d4cd0b1f6a29' }, h("fluent-avatar", { key: 'f0d5c79a2f6c325d9bb6b5349c9df37f0343e2ea', 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: 'a824b6bca853529819e10f5d8477d5e6ae17cbbb', name: "badge", slot: "badge" }))));
+        return (h(Host, { key: 'b5d0d691d02ba8cd47c53ec2ce07fedab7d88646' }, h("fluent-avatar", { key: '8b5097669af626b15ab5ba67ab4613843a8dcfe3', 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: '5a8b9fcf0999118a6675f815017e45a46983de33', name: "badge", slot: "badge" }))));
     }
 };
 UdpFluentAvatar.style = udpFluentAvatarCss();
@@ -7218,7 +7438,7 @@ const UdpFluentBadge = class {
         this.ready = true;
     }
     render() {
-        return (h(Host, { key: '057ee6e9865fa1403bdf30865bc9779f22296b4d', class: { ready: this.ready } }, h("fluent-badge", { key: '779aba6f4cf66b5786cb3122fc7604bdf9388486', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: 'f27d1e2d09c314197328084d18bf10fd5ec69ccc', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'b67c89c9c6c58d7ddbac67ef3ef73f43fcd913f1', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: 'b9aed9b6410390a0e0541e8fcc1a49bd8b7ce130', name: this.startIconName, size: getBadgeIconSize(this.size) }))))), h("span", { key: 'a725ba47f021ec2c8e68ef072b865706f819b42b', class: "default-slot" }, h("slot", { key: '88091e338303a16f8512d9e766ff6669f99ffc27' })), 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: 'ca6643618db9e9f0c98f91dc82c849d1237906cd', class: { ready: this.ready } }, h("fluent-badge", { key: '472cc852b7a6c279dbfdf497e8a6518c7e8e5a29', appearance: this.appearance, color: this.color, shape: this.shape, size: this.size }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '4e41131fafb300443ca49a5beaf3f5fd714a75c3', class: "slot-wrapper", slot: "start" }, h("slot", { key: '65ddf7997a9cf3040abc859b8ab53267d024555c', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '9370283d6fb7a51da8ffe31157c0844aaaf67346', name: this.startIconName, size: getBadgeIconSize(this.size) }))))), h("span", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "default-slot" }, h("slot", { key: '3bd8ae70fec03eb6697d1c29090f295fd19ed982' })), 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); }
 };
@@ -7301,7 +7521,7 @@ const UdpFluentButton = class {
         const iconSize = getIconSize(this.size);
         const isDisabled = this.disabled || this.loading;
         const isLoading = this.loading;
-        return (h(Host, { key: '2271129f5460c3ea0dee55121b602fd03367bdab' }, h("fluent-button", { key: '2d2489cc066eaf927f55965983fb617d17772f2c', 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: '3c6c2985e52d1bd561dbd52587de0026a26916fb', class: "slot-wrapper", slot: "start" }, h("slot", { key: '361a92279b1d42e1ac1ac455feff0ca8a8f5c344', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '5654f06ba1b1d0175d28563b83d5c3afd416324a', name: this.startIconName, size: iconSize }))))), h("slot", { key: 'aa852fa4160246122fb6653761521931828bd3fb' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'f844ec5dc6cdda50c51b75d88c04a4e28e31ef78', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'b3b65a5c5be53c28e82e834099dfc5ca094f1f2d', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'b87ada5d3b18c52827d235d219c67e1fd0c4f6a4', name: this.endIconName, size: iconSize }))))), isLoading && (h("div", { key: '28e1783a16340dcee8ca67dbed403e9861486721', class: "loading-overlay" }, h("udp-spinner", { key: '6e2561c69278199d21994e9182d1a98ebdda3f25', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
+        return (h(Host, { key: '0fec578b81f5a6663543938b96556189c214a546' }, h("fluent-button", { key: 'bb7a4753e07f8075d7e47471e8d8a81572b3afa2', 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: '7d634084cf1d544584d79f551f5d558555c1c7bf', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'e6cc6bbeb0d7a0f263ad0a0ab20db9a9a393a356', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: 'c3ed04c6d289855affa86cab832d5f06b062919d', name: this.startIconName, size: iconSize }))))), h("slot", { key: '4e294790c35568c62a90bb4e7ad386d1574e067e' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'cc7e366f42d715dfd0b73b1145816b9add7244de', class: "slot-wrapper", slot: "end" }, h("slot", { key: '80a11fabb5f223a0dc287b4bf9d8f39e1f6ec772', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '33ed5cc6f0e8f4ea2e93bf4d665ee80c66ce7a2f', name: this.endIconName, size: iconSize }))))), isLoading && (h("div", { key: '4291e8b24cf1547b17e2b47c7753ca3197bc3ebe', class: "loading-overlay" }, h("udp-spinner", { key: '534be5bd813b7ce3400a470ba72353c4b5980cb6', size: this.size === 'large' ? 'extra-small' : 'tiny' })))));
     }
     get el() { return getElement(this); }
 };
@@ -7358,21 +7578,21 @@ const UdpFluentCard = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c661a3d3c691dbfd7ef392808246332136c22fd5', class: {
+        return (h(Host, { key: 'c01366f6bc6754a5e802625f08b08c288a8a9b9f', 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: 'a7a71b5afb2fe825030902f348a7766d989ae0e1', class: { 'card-preview': true, 'hidden': !this.hasPreview } }, h("slot", { key: 'dafb5b794e570b0c3aa08ff50de34ca11231957f', name: "preview", onSlotchange: this.handleSlotChange })), h("div", { key: 'b5435cb4541bc11b2bdf12953f4af2938997aa31', class: {
+            }, tabIndex: this.interactive ? 0 : undefined }, h("div", { key: 'ad9964ba2656c613286d670248006cf1897b8644', class: { 'card-preview': true, 'hidden': !this.hasPreview } }, h("slot", { key: 'd9d9f2ed8927d92472d4dd0939ff66908a4d8459', name: "preview", onSlotchange: this.handleSlotChange })), h("div", { key: '706024cd16c7dc6c4e96bdbebc75563be27971f8', class: {
                 'card-header': true,
                 'hidden': !(this.hasHeader ||
                     this.hasHeaderStart ||
                     this.label ||
                     this.subtitle ||
                     this.hasHeaderAction),
-            } }, h("div", { key: '57821278d57ba96afc9ccc86127db60b12416171', class: { 'card-header-start': true, 'hidden': !this.hasHeaderStart } }, h("slot", { key: 'c7e477929261cf0e204fbe45245b59118675928c', name: "header-start", onSlotchange: this.handleSlotChange })), h("div", { key: '019f082f94209dd5ee4d703dcaf1a5d55fa0184b', class: "card-header-content" }, h("slot", { key: 'b7fc27685dc1530363725c58a6d7aa159139d24b', name: "header", onSlotchange: this.handleSlotChange }, (this.label || this.subtitle) && (h("div", { key: '6dc6afe4db9128677c2c53f567bbd87cc7bff905', class: "header-content-wrapper" }, this.label && h("udp-text", { key: '326979874d46af40c789e0f2fca5ad7f1d08bf8a', variant: "subtitle2" }, this.label), this.subtitle && (h("udp-text", { key: '192b9924da32a69768dec26173e503914b6079f2', variant: "caption1", class: "header-subtitle" }, this.subtitle)))))), h("udp-flexbox", { key: '3db275f225838dddffe87132e0055d78d608d210', class: { hidden: !this.hasHeaderAction }, direction: "row" }, h("slot", { key: '4c3fc6cce8ea44ea6f5b8f0837bca5e79ed04478', name: "header-action", onSlotchange: this.handleSlotChange }))), h("div", { key: 'b3eafd429d7884c865124826dbab962547198dd0', class: { 'card-body': true, 'no-padding': !this.bodyPadding } }, h("slot", { key: '54c40213ec6a05386c74df018bc82c57ec047f66' })), h("udp-flexbox", { key: '796d29915ff002d7b78fe2c3dadc40755f7eb1dd', class: { 'card-footer': true, 'hidden': !this.hasFooter }, direction: "row" }, h("slot", { key: 'bf87a7ae31b01da2c13e3bfebe3963c5531042c8', name: "footer", onSlotchange: this.handleSlotChange }))));
+            } }, h("div", { key: '3d881938527ab9b63a22f839056edbc4635f2167', class: { 'card-header-start': true, 'hidden': !this.hasHeaderStart } }, h("slot", { key: '1383f9216f989d77e4e6846e418512b9a34febb6', name: "header-start", onSlotchange: this.handleSlotChange })), h("div", { key: '52e7aa8dcc08fb350f6b2c35d1d3db652cf161ab', class: "card-header-content" }, h("slot", { key: '8a823c46d9e9d5a08edd5bb2189a1bf75a829153', name: "header", onSlotchange: this.handleSlotChange }, (this.label || this.subtitle) && (h("div", { key: '73fc449b414b784651afe24f93050eed3bbb382a', class: "header-content-wrapper" }, this.label && h("udp-text", { key: '0c47b63774c2877761bb3b7054d5d92aba3ab9bd', variant: "subtitle2" }, this.label), this.subtitle && (h("udp-text", { key: '02fe1fb3ab83a176fd62739e16b9bee7fe667248', variant: "caption1", class: "header-subtitle" }, this.subtitle)))))), h("udp-flexbox", { key: 'a30603878b0117cdc5e0f2b87c6bc0a671f5f257', class: { hidden: !this.hasHeaderAction }, direction: "row" }, h("slot", { key: '372260a50044f532b8a28daed08764bdca60db87', name: "header-action", onSlotchange: this.handleSlotChange }))), h("div", { key: '33e817d365fe89d35474fc9128f4850f37b6fd21', class: { 'card-body': true, 'no-padding': !this.bodyPadding } }, h("slot", { key: '21fa507624780f7c8d38d69b0d0eab6c2b4b9eb2' })), h("udp-flexbox", { key: 'dbe40418fb1b64c8d385195dcbae3fa4127ba3d1', class: { 'card-footer': true, 'hidden': !this.hasFooter }, direction: "row" }, h("slot", { key: 'f9362e118a81f16d27d7e53a3219767af9811ad6', name: "footer", onSlotchange: this.handleSlotChange }))));
     }
     get el() { return getElement(this); }
 };
@@ -7436,7 +7656,7 @@ const UdpFluentCheckbox = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'e87a04b41bb32705167003f5bc063d27520889c3' }, h("fluent-field", { key: '3579888f1c379f07d98d8afaa05872eb5754ab8c', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'f0fd1b49d8f3c97f59ebf21163ab01bf6a2be4e7', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '799ae873d31e02898a1b456b8575273b5ca49602', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '77bdae32d78d77ca1129ee1d680679d07fe511c4', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-checkbox", { key: 'f9cf1526f68b8b266dd48137135d81855522183b', 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: '15bdd8994870b932b1254db53ccded576cdaf9d5', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '893cd124b27dc77a8b847aaf4e044292ce850c2e' }, h("fluent-field", { key: '210fd38d62eb76c54dfd9ac7948af3c16359e892', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '9483b3c314d4d7806a835f88f64719493e86d270', slot: "label", disabled: this.disabled, onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '6e4df82c832122b1aee1ca246d7ad871b1df48fc', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '0f3981bf5b485d800c06cf5909ff460e77822a28', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-checkbox", { key: 'adf8d92f03dd3c043676c2c18fe5279dee801da7', 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: 'b6cbb4d338339f2e17f8d61f729f34d9128889c2', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -7462,7 +7682,7 @@ const UdpFluentCounterBadge = class {
         this.dot = false;
     }
     render() {
-        return (h(Host, { key: 'd45c4e300fceba137a7282928bdec230c6d2b621' }, h("fluent-counter-badge", { key: '0f417b227ad674a22de6d403368a6854ccefec83', 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: '71148950805f3ba67bd3dbe02594bb0b7792f8e6', name: "start", slot: "start" }), this.count === undefined && h("slot", { key: '1c9858a7ab6e2d16fc149a40e9263ff6d6237df9' }), h("slot", { key: '8f8bb38c9ed3cc7ad333594a3bf598bd03607d70', name: "end", slot: "end" }))));
+        return (h(Host, { key: '9397c028d5188b1ccd6b4d5bd1895c0a1cf4c551' }, h("fluent-counter-badge", { key: 'e371dcda804d5a7a0b4ad5506f17073760ebce88', 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: 'f220047c9eddceb0efdc6529baa565021d3eb8a2', name: "start", slot: "start" }), this.count === undefined && h("slot", { key: '44791c30fbe61380912b4dc459ded15dee3e12ed' }), h("slot", { key: '64c2c2f1fefaf2513ce4e8b679d7ea31b085286d', name: "end", slot: "end" }))));
     }
 };
 UdpFluentCounterBadge.style = udpFluentCounterBadgeCss();
@@ -7526,7 +7746,7 @@ const UdpFluentDialog = class {
         }
     }
     render() {
-        return (h(Host, { key: '318ab877ba24e98317a20e7a9c214bd515b4e464', style: { '--dialog-max-height': this.maxHeight } }, h("fluent-dialog", { key: '6850164d6edf652af14aa25f77567b51d1049954', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, h("fluent-dialog-body", { key: 'd43635e1b9e5130a3d25137ba955f08f83cadb4c' }, h("slot", { key: 'b303f21b718cd27e05495306ee70a9819a798f65', name: "header", slot: "title" }, this.dialogTitle && h("udp-fluent-text", { key: '8f749a92e759976df45797f12e4afaac70232c93' }, this.dialogTitle)), this.showHeaderCloseButton && (h("udp-fluent-icon-button", { key: '5c08c6198076e9bcc1b59e440c4ff03615c01879', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), h("div", { key: '1f853eada6bc6b95b375bef625662cdb2428eb4d', class: "dialog-content" }, h("slot", { key: '20b93acf9e68a7caa456dd51099fdce7b5f3f818' })), h("udp-flexbox", { key: '6989a3bd2359d5d6767d7ee33e3a6a4617ef0c0c', slot: "action", direction: "row" }, h("slot", { key: 'b8657e71b56511b18065cf691f39134c47895dcc', name: "action" }))))));
+        return (h(Host, { key: '9e11d9ad9c7e5f88585f10b35c3788e6413ffe52', style: { '--dialog-max-height': this.maxHeight } }, h("fluent-dialog", { key: '6fdf81822a4115142a18dd48442d3a84df1c4be9', ref: this.setDialogRef, type: this.type, onToggle: this.handleToggle }, h("fluent-dialog-body", { key: '9dc51c72cfdc8f00b913478c980ceecb2540cef2' }, h("slot", { key: '6933e82c765eec7d94547df9dd3cc6e68fb4046a', name: "header", slot: "title" }, this.dialogTitle && h("udp-fluent-text", { key: 'ff6e277f8547cdaf62c28f958ac41411548485dd' }, this.dialogTitle)), this.showHeaderCloseButton && (h("udp-fluent-icon-button", { key: '86c8ac3c13c3cc28b1565224689ed73bdf0d27e1', slot: "close", appearance: "subtle", iconName: "dismiss", ariaLabel: "Close Dialog" })), h("div", { key: 'ee2182b68b15c14b0d2f4f42de30192a8596d01f', class: "dialog-content" }, h("slot", { key: '9027281184914bba6b3c3e4f08124a5dba52b2f6' })), h("udp-flexbox", { key: '1bfabd174958c1f38f8fdcae79f601439c4ddeb9', slot: "action", direction: "row" }, h("slot", { key: '7af53ca073a2d7cdf1289a081aea8df4a3ec21b0', name: "action" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7550,7 +7770,7 @@ const UdpFluentDivider = class {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: 'a281ce0a9237d500fb7021e278bc67eb10b30173', style: { background: 'transparent' } }, h("fluent-divider", { key: 'ca770be102b768a45ab04c5f147b669515b7f8d3', "align-content": this.alignContent, appearance: this.appearance, inset: this.inset, role: this.role, orientation: this.orientation }, h("slot", { key: '665b41be2ab4a78628b1b6d7f947ae44b22b729d' }))));
+        return (h(Host, { key: '0f340547fdb025611c59531c32e0f0e10076037e', style: { background: 'transparent' } }, h("fluent-divider", { key: 'acd29786ccd7f60d2fa8d88e18f5eb6dd28a89af', "align-content": this.alignContent, appearance: this.appearance, inset: this.inset, role: this.role, orientation: this.orientation }, h("slot", { key: '39d781f43ba0d9357aeb2d859b1a2b59986294b5' }))));
     }
 };
 
@@ -7592,6 +7812,7 @@ const UdpFluentDrawer = class {
          */
         this.hasFooter = false;
         this.hasToolbar = false;
+        this.hasTitle = false;
         this.showTopShadow = false;
         this.showBottomShadow = false;
         this.effectiveSize = 'medium';
@@ -7660,6 +7881,7 @@ const UdpFluentDrawer = class {
     componentWillLoad() {
         this.checkFooter();
         this.checkToolbar();
+        this.checkTitle();
         this.updateDrawerWidth();
     }
     updateDrawerWidth() {
@@ -7687,6 +7909,7 @@ const UdpFluentDrawer = class {
         this.mutationObserver = new MutationObserver(() => {
             this.checkFooter();
             this.checkToolbar();
+            this.checkTitle();
             this.checkScrollShadows();
         });
         this.mutationObserver.observe(this.el, { childList: true, subtree: true });
@@ -7758,6 +7981,10 @@ const UdpFluentDrawer = class {
         const children = Array.from(this.el.children);
         this.hasToolbar = children.some(child => child.getAttribute('slot') === 'toolbar');
     }
+    checkTitle() {
+        const children = Array.from(this.el.children);
+        this.hasTitle = children.some(child => child.getAttribute('slot') === 'title');
+    }
     calculateEffectiveSize() {
         const viewportWidth = window.innerWidth;
         let targetWidth = DRAWER_SIZES.medium; // Default fallback
@@ -7889,7 +8116,7 @@ const UdpFluentDrawer = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c7eae39b70b0ec953e44b29cd60f1a5fdbf54593', class: { 'has-footer': this.hasFooter } }, h("fluent-drawer", { key: '1235784be4e00179b17101394fc161d1254630a4', ref: this.setDrawerRef, onToggle: this.handleToggle, type: "modal", position: this.position, size: this.effectiveSize }, h("fluent-drawer-body", { key: 'a4e59ca1d4e569864d971940c18656975420997e' }, h("udp-text", { key: 'cda55da3b6a6d9737933130e45f81c32d809ec4a', variant: "subtitle1", slot: "title" }, this.drawerTitle), h("udp-fluent-icon-button", { key: '1212cc1b063d5ee4cf44a9b246b1cbe2b3b2f99e', slot: "close", appearance: "subtle", iconName: "dismiss", "aria-label": "close" }), this.hasToolbar && (h("udp-flexbox", { key: 'fb06bc9d8cacc5c234e3ac85786bf2684da4ad8b', class: "drawer-toolbar", direction: "row", width: "100%" }, h("slot", { key: '352a2941479b2bff5d3318645f3396e4fc63ec0c', name: "toolbar" }))), h("div", { key: '23676d944a50aff19176c721f67acb934fe2d4f9', class: "drawer-scroll-container", ref: el => (this.contentRef = el), onScroll: this.handleScroll }, h("div", { key: 'f10311552448f9af70ca530a3ceca0930c7a811a', class: `scroll-shadow top ${this.showTopShadow ? 'visible' : ''}` }), h("div", { key: '4116341608c76ef2a65f9473c9709edf404955f1', class: `drawer-content-inner${this.excludeVerticalPadding ? '' : ' vertical-padding'}` }, h("slot", { key: 'eba4ea4d28e14b45ede654cf3b026064bd08f942' })), h("div", { key: '9cd0192eacfb6fc472a7951eb2eeff9a970df1b3', class: `scroll-shadow bottom ${this.showBottomShadow ? 'visible' : ''}` })), this.hasFooter && (h("udp-flexbox", { key: '3b97bfc92e715ff9eb30c616aa586585f724651d', slot: "footer", direction: "row" }, h("slot", { key: '3661d44ca7d2b3efa8483a57cc1a441a62134823', name: "footer" })))))));
+        return (h(Host, { key: 'e57c61ef6d53bed97d50941c4ebdd082327753f9', class: { 'has-footer': this.hasFooter } }, h("fluent-drawer", { key: '342002046f8b68d22860536e9b46669007cca0e2', ref: this.setDrawerRef, onToggle: this.handleToggle, type: "modal", position: this.position, size: this.effectiveSize }, h("fluent-drawer-body", { key: '876fbbf139cbd3ea52fa2426dab27352cc8b2a86' }, this.hasTitle ? (h("slot", { name: "title", slot: "title" })) : (h("udp-text", { variant: "subtitle1", slot: "title" }, this.drawerTitle)), h("udp-fluent-icon-button", { key: '96c57198e287bbda27eda513035a5b94a592f0e7', slot: "close", appearance: "subtle", iconName: "dismiss", "aria-label": "close" }), this.hasToolbar && (h("udp-flexbox", { key: 'c7aba1b9a62a6e9078d3a91aea255786ea5e19da', class: "drawer-toolbar", direction: "row", width: "100%" }, h("slot", { key: '3fb1fcc5f6100e160961588efa372e7c34d6acd3', name: "toolbar" }))), h("div", { key: '32b349ef70d856d79250d7fc3a6de9c5a1d72339', class: "drawer-scroll-container", ref: el => (this.contentRef = el), onScroll: this.handleScroll }, h("div", { key: '1a11b971887b7b60edc8b401bcd4c102824b2574', class: `scroll-shadow top ${this.showTopShadow ? 'visible' : ''}` }), h("div", { key: 'efdccb9c6ffa8cd822026950de57dbcf94c52b2f', class: `drawer-content-inner${this.excludeVerticalPadding ? '' : ' vertical-padding'}` }, h("slot", { key: '311338b803b2ac3f15bb977409d7f48d9ed2b063' })), h("div", { key: '4aa386c56f747f054d8d2dcfe2af4525176a68fa', class: `scroll-shadow bottom ${this.showBottomShadow ? 'visible' : ''}` })), this.hasFooter && (h("udp-flexbox", { key: 'f18807aee77d86d6d086e7751d01cec87df7517b', slot: "footer", direction: "row" }, h("slot", { key: 'cb0eb13afdbe78bba4f43779d3db2ff1e52a20ca', name: "footer" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8314,15 +8541,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: 'e5a76c4b858e4454bce256f08b00c30079165348', class: { 'has-error': hasError } }, h("fluent-field", { key: '2f11c837ca3a9f29d2087dd62aa272271133b7e7', class: {
+        return (h(Host, { key: '6d1410f1280513ce30884031f3c2b0e739f21aa7', class: { 'has-error': hasError } }, h("fluent-field", { key: 'ee241a4abcbf6c4b530bfaf8f860274492c7936f', class: {
                 'no-message': !message && !this.includeErrorPadding,
                 'no-label': !this.label,
-            } }, this.label && (h("fluent-label", { key: '745db430977377d4bcafa02972e596039b5aa396', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: '5e0e8f84abde732f920d1b6dc756cbe7da8fb230', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '90afda0be4a072bf773b8ead759e2374eee4394a', name: "info", size: "xs", class: "popup-hint-icon" }))))), h("div", { key: 'dfeaffaf378bd07e583d23ff16f90fa5ea46878a', slot: "input", class: {
+            } }, this.label && (h("fluent-label", { key: '5b7f10ed15fa03a1ee213d6e1fc83150200b75ff', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false), style: { paddingTop: '2px', paddingBottom: '2px' } }, this.label, this.popupHint && (h("udp-tooltip", { key: 'b12259e02126200b646bb16f7066ca47e209ea10', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '2227f4d3116d3e06bfa644c1041677121a8baf62', name: "info", size: "xs", class: "popup-hint-icon" }))))), h("div", { key: '67fd988678a418d6f51de059be4f8069e5d61d00', slot: "input", class: {
                 'input-wrapper': true,
                 'has-overlay': hasOverlay,
-            } }, h("fluent-dropdown", { key: '499d4097c5b0396d396fc426b26d11b8b8bc2d27', 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: '7822276fc6568d30dcd341995e4fb32d6c55a9bb', 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: '5119e4373f588b99395090d098acb429d39d7c7f' }, this.loading && (h("fluent-option", { key: '6b183b816085205fb0abc917a6310e44b910473c', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: '1698da6ee530b88caeab4db96f7be2bb575ef722' }, "Loading..."), h("span", { key: 'da0d37ae0840c549056ac52cf7803706b0893f86', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (h("fluent-option", { key: 'a0ec94a5682f69893b3f319571731a029fb78659', 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: '06a593d21710ddf1b6a457cc4e63ac5ba6f0167c' }, this.loading && (h("fluent-option", { key: '1ffd4e948fd85b17096024344ee2e3e6e1ca7e6f', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, h("span", { key: '365b7a9ef672f377ea7e3c42998626f9b7ec42dd' }, "Loading..."), h("span", { key: '3c7ce76b4a0be3efa2766225ec3324f7d7ec3f56', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (h("fluent-option", { key: 'b0fd93bd369ef558f860f1b791709226f447afa9', 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 = [];
@@ -8342,17 +8569,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: 'bd2b69346bca53ff38394fabb584961b16b0fd7d', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '96cfd1298c5c25388ee6c98af19c86de6fbeeaab', class: {
+            })()), h("div", { key: '29403f83ea438b107ef2deb1651cf1ddec1e675a', slot: "indicator", class: "indicator-wrapper" }, h("udp-fluent-icon-button", { key: '1d94d6f84299916fa4e20b07e123d5b1c2d984e1', 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: 'b512a8a0f3d31a33c933b511b83cb2fd08b0e7e0', 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: '3df248e42664fe410c092e93a7d8110101fdc96a', 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: 'ac79748e318e377aa4292f77af6026bfbbddbd2a', 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: '3569aec03a4c7256b5a0b531781f0912095b09a2', class: {
+            } }))), hasOverlay && (h("div", { key: 'a990dbce7c82bf774fdf7f27800c3b3f3f53ca87', 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: 'd9fb1ac61d88303388924b1182a95776d4feb8d2', class: {
                 'message-wrapper': true,
                 'includeErrorPadding': this.includeErrorPadding,
-            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '64aa60a86eae6b28d2d3482fab1493ba51deab17', variant: "caption1", class: {
+            }, slot: "message", onClick: () => this.handleTogglePopover(true) }, h("udp-text", { key: '852605db1e6aa0aaf3c89bbd2c37f36f1f9b57e4', variant: "caption1", class: {
                 message: true,
                 error: hasError,
             } }, message)))));
@@ -8629,7 +8856,7 @@ const UdpFluentIcon = class {
         };
         if (this.color)
             hostStyle.color = this.color;
-        return (h(Host, { key: '75c01dfa56784111c9fa827ec2a7884c4e75a956', style: hostStyle }, this.svgContent && (h("div", { key: '5eceda2f281bebf200ace48e1f17a00ca1d9348e', class: "icon-inner", innerHTML: this.svgContent, role: "img", "aria-label": this.name }))));
+        return (h(Host, { key: '87640e2b6cdfa29ab1a647a9dfaeffcc7f19a193', style: hostStyle }, this.svgContent && (h("div", { key: 'd2fde7cf073e55552eacf8f008a4e6237f045eab', class: "icon-inner", innerHTML: this.svgContent, role: "img", "aria-label": this.name }))));
     }
     static get watchers() { return {
         "name": [{
@@ -8688,7 +8915,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: '41b4c0dfd56957295e65fb4e80aa52060f3a6dbc', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("udp-fluent-button", { key: '0376b44b37e2ce6ce906909d2585314147bff126', 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: '3ad5acf76acbe6e8f10760241a020100967ce098', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
+        return (h(Host, { key: '8d0006399d37cb21d08543cc85bea20312f447c4', exportparts: "button", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("udp-fluent-button", { key: '99d5bdcc50f102716563d9d6b386b3ed3d64a19b', 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: '5844de081f82f05bcd744d2f6476bf2a9654a179', name: this.iconName, size: getIconSize(this.size, 'standard'), variant: effectiveVariant, color: effectiveColor }))));
     }
 };
 UdpFluentIconButton.style = udpFluentIconButtonCss();
@@ -8947,7 +9174,7 @@ const UdpFluentRadioGroup = class {
         var _a;
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'e5db7287213c46effbd2066c39a6b04fbf2ff62e' }, h("fluent-field", { key: '059984e6ce9f561b26b6865e0bc02dec735ef229', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'fb559b38d31409d086f365c2be9e508daeddfd93', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'cb76d636771ee5d8af5b05074d9469afc4f6e7a7', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'f15c31b2bca1d761c08866c527b1abb11a95ad82', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: 'ebe8e8ec5fcea4cf5bfc5400279368150fa6c216', 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: '3af637120d68bcf2a60f946cb82a3871c946ba90', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '302ae95efe36f13811e488b5cc7aaa597557332c' }, h("fluent-field", { key: 'c9b5399235689aaf70ecd8769d473fc4253136eb', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '2d68bdaae186b2258ed3f4f3510c4c12da447f9b', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '6807f3c486b1b5f3bdc223dbd88f241bc242fba6', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '7b36e5b468c836aad3dee5953b14407363965747', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-radio-group", { key: 'a1d62e91503ed4f2bc8ce04c63fecb90487bfec8', 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: '7e72611b27745f4ce91b91ccdb0ee74f89c5c853', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -9000,7 +9227,7 @@ const UdpFluentSwitch = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '06270f2a822f2571a76c30f07a998034c450d8c1' }, h("fluent-field", { key: 'd74952b54d6a3a6c20b76de080b81dad5318d9d8', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '7666bee326b67e5bb706190be5162af4e4c97345', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '8457e86e46f3dffdc24bf836acef1ad904fb7868', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'ac05bfd853d27b024c8cc3a4e8825e9ab09c1953', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '4c303683804360c6f6a701b6ec97cc8295a9898a', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: '8010591834066344a110b5bcbfc8f091057f3a3d', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '8cf91451ad54d26cf33018bc2ef6cf16e7e77bee' }, h("fluent-field", { key: '13afd3936e32d77b1789c351df9994a375164f6d', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'c72276b3e46649b999ad8e61b02884093e0d8a80', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: 'd337f67e539a321eb117a97f63441e9fbe0adb95', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'bc9198da8c962049ed5cee45ea0cd339c8aa4747', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: 'e1d2a55c1adee0aec46032031451dbe52f2f3427', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: '6c9815e59fc67d5c7ed3c2cf0ce178d742d44ad9', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -9370,11 +9597,11 @@ const UdpFluentTextInput = class {
         const hasError = !!this.error;
         const message = this.error || this.hint;
         const noMessage = !message && !this.includeErrorPadding;
-        return (h(Host, { key: 'd99bcea08039461049b0d0ddd5010bba56e755cc', class: { 'has-error': hasError } }, h("fluent-field", { key: 'd868b5ef675692be1c4490ba6f5e1173f2ff2783', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '82624635cead542260dd9fa56e50f49793430daa', 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: 'dc688da75294e9df78967a526ea9fc4b5dcdc50b', class: { 'has-error': hasError } }, h("fluent-field", { key: '3a597110df592e3d09fa0e92cb949b823aa7d290', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '59a111e906d5e9b0660466ce90f94d9c4d69253a', 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: '6e6a304d2145b20816e1a87cdbf78773c6178653', slot: "start", name: "start" }), h("slot", { key: '562f073a0e16252e1b7af0e6295c9b53e2ff70ca', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: 'a823a574fdc822691766f528dfc8679fb3a370ae', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '71363dba6c54b5d15c98296ecb31e7ab2a695f2f', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '07e7c2a1657746b40956604eb4e71a6ea96e1ba5', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '2844261f5c7721a95cefe52ab9588b5e11d9a660', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'fce70a6cf524b968d7333ac78d662594d5ae837e', slot: "start", name: "start" }), h("slot", { key: 'efb15deb5e0d6db1a15f5c068cf30cfe8b73c732', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: 'cd8f666099dc52b2e9222399fbdfe12941a893c4', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '02ddadcacf45ccc7c4155526181500a6356024ba', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '0e42f732309fc829f7ce48fb77485191e7a1ea5d', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '9fb29b3080cd7661a9974b54bd67dc814fe5d7e5', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -9416,7 +9643,7 @@ const UdpFluentToggleButton = class {
     }
     render() {
         const iconSize = getIconSize(this.size);
-        return (h(Host, { key: '5efb16360e88c75af1e7b13a722a0894466e123e' }, h("fluent-toggle-button", { key: '444f51a8093d4ec91a47ec85ddc58e85dba61d20', 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: '26df5be31c52d57218073817da203722137337ac', class: "slot-wrapper", slot: "start" }, h("slot", { key: '67ef5a771bee01671adbb818a0f539bb4451afa1', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '412efff9356c550555577758d42a3b5cb7f724f3', name: this.startIconName, size: iconSize }))))), h("slot", { key: 'f349566cc316616d1c04304a2dca8de0bdcc15ac' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: '19f4777c2fff291953fae0b96a7c855816482935', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'd6880e2b4d182384a19005590ec9fcfe657bc0cd', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '2526f79fae2f86d8bbaab03282c98f16314e0e07', name: this.endIconName, size: iconSize })))))));
+        return (h(Host, { key: 'a6300e28abb2a9870884cf24fad4c92dd6d3072e' }, h("fluent-toggle-button", { key: '1ecb9ee376f18a18b5a96f6c9c7d5644c01f8128', 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: '6c99b808416fc3c2f39de99056edebb456a331f2', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'f51e052b4fa1a47e88bb67ddce8d116b04b67644', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: 'f0963e2862a6f3c1df4dfa64c9c64eaa04ffbc5c', name: this.startIconName, size: iconSize }))))), h("slot", { key: '0998df3bbe939c978df4aa0bc2ee344aaa581b33' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'd00f9aee02777b8321680171c3f43f7b283ea3e4', class: "slot-wrapper", slot: "end" }, h("slot", { key: '5c360a74366fb5b245ffa7fbce989c5e814f6fca', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '7beca8736af1274f945a639991452466f1a10574', name: this.endIconName, size: iconSize })))))));
     }
     get el() { return getElement(this); }
 };
@@ -9433,37 +9660,119 @@ const UdpFormComponent = class {
          * Can be used to populate the form with data from an API.
          */
         this.initialValues = {};
+        /**
+         * If true (default), reinitializing the form (e.g. after a backend save returns the
+         * saved record) will overwrite only pristine values — in-flight edits are preserved.
+         * Recommended for autosave / draft flows.
+         */
+        this.keepDirtyOnReinitialize = true;
+        /**
+         * If true, validation runs only on blur. Default false (validates on every change).
+         */
+        this.validateOnBlur = false;
+        /**
+         * When child `<udp-field>` inputs should reveal their validation error
+         * messages.
+         *
+         *  - `'touched'` (default): show the error once the user has focused
+         *    and blurred the field. Right for authoring drawers where the user
+         *    is editing one field at a time and wants feedback per-field.
+         *  - `'submitFailed'`: hide errors entirely until the user clicks Submit
+         *    and validation fails. After that, all errors are visible and remain
+         *    visible as the user corrects them. Right for end-user form fill-out
+         *    where surfacing errors mid-entry feels noisy. A successful submit
+         *    resets `submitFailed` and fields go pristine again.
+         *  - `'always'`: surface errors as soon as they exist. Useful for
+         *    debugging or for inputs that need live validation feedback.
+         *
+         * `udp-field` receives this mode at register time via the
+         * `fetchFormInstance` callback and gates its own error push to the
+         * child input accordingly.
+         */
+        this.errorDisplay = 'touched';
+        /**
+         * Whether child `<udp-field>` inputs auto-derive Final Form validators from
+         * their HTML-ish attributes (`required`, `minlength`/`maxlength`, `min`/`max`,
+         * `type=email|url`, `pattern`) via `getValidatorsFromElement`.
+         *
+         *  - `true` (default): keep the convenience for forms that have no other
+         *    validation source (hand-built forms, the builder's config drawer).
+         *  - `false`: skip attribute-derived validators entirely, so the form-level
+         *    `validate` prop is the single source of truth. The udp-question-form
+         *    renderer sets this — its schema-driven `buildFinalFormValidator` already
+         *    covers every rule, and the attribute path otherwise double-validates
+         *    `required` (with a different message) and mis-reads temporal `min`/`max`.
+         *
+         * The explicit per-field `validate` prop on `<udp-field>` is unaffected — it
+         * always runs. `udp-field` receives this flag at register time via the
+         * `fetchFormInstance` callback.
+         */
+        this.deriveFieldValidators = true;
+        /**
+         * If true, a field's value is destroyed when the field unregisters.
+         * Default false preserves values so toggling visibility (e.g. via branching) does not
+         * lose user input.
+         */
+        this.destroyOnUnregister = false;
     }
     componentWillLoad() {
         this.form = createForm({
             initialValues: this.initialValues,
-            onSubmit: this.onSubmit,
+            onSubmit: this.submitHandler,
             validate: this.validate,
+            keepDirtyOnReinitialize: this.keepDirtyOnReinitialize,
+            validateOnBlur: this.validateOnBlur,
+            destroyOnUnregister: this.destroyOnUnregister,
+            debug: this.debug,
         });
         this.formReady.emit(this.form);
         this.unsubscribe = this.form.subscribe((state) => {
-            // Broadcast state to the UI
             this.formStateUpdated.emit({
+                // Validity
                 valid: state.valid,
                 invalid: state.invalid,
                 hasValidationErrors: state.hasValidationErrors,
-                // 2. Interaction Status
+                hasSubmitErrors: state.hasSubmitErrors,
+                errors: state.errors,
+                submitErrors: state.submitErrors,
+                submitError: state.submitError,
+                // Interaction
                 dirty: state.dirty,
                 pristine: state.pristine,
+                modified: state.modified,
+                modifiedSinceLastSubmit: state.modifiedSinceLastSubmit,
+                dirtySinceLastSubmit: state.dirtySinceLastSubmit,
+                // Submission
                 submitting: state.submitting,
                 submitSucceeded: state.submitSucceeded,
-                // 3. Server Errors (Crucial for API integration)
-                submitError: state.submitError,
+                submitFailed: state.submitFailed,
+                validating: state.validating,
+                // Values — emitted so the renderer's progress tracker can
+                // recompute "X of Y answered" on every change. Reading from
+                // `formApi.getState().values` inside the listener doesn't work
+                // for all transitions (e.g. clearing a non-required field after
+                // first edit) because neither `errors` nor `modified` fires —
+                // subscribing to `values` is the only reliable signal.
+                values: state.values,
             });
         }, {
             valid: true,
             invalid: true,
             hasValidationErrors: true,
+            hasSubmitErrors: true,
+            errors: true,
+            submitErrors: true,
+            submitError: true,
             dirty: true,
             pristine: true,
+            modified: true,
+            modifiedSinceLastSubmit: true,
+            dirtySinceLastSubmit: true,
             submitting: true,
             submitSucceeded: true,
-            submitError: true,
+            submitFailed: true,
+            validating: true,
+            values: true,
         });
     }
     componentDidLoad() {
@@ -9488,6 +9797,17 @@ const UdpFormComponent = class {
         if (this.form)
             this.form.initialize(newValue);
     }
+    /**
+     * Rebind the validator when the prop changes. Final Form captures `validate`
+     * at `createForm` time and won't pick up a new function reference otherwise.
+     * Schema-driven validators (e.g., the renderer's `buildFinalFormValidator`
+     * rebuilds when the loaded schema changes) need this watcher so newly-added
+     * rules take effect without remounting the form.
+     */
+    handleValidateChanged(newValidate) {
+        if (this.form)
+            this.form.setConfig('validate', newValidate);
+    }
     // --- Public Methods (External Control) ---
     /**
      * Manually submit the form.
@@ -9496,37 +9816,52 @@ const UdpFormComponent = class {
         return this.form.submit();
     }
     /**
-     * Reset the form to its initial state.
+     * Reset the form to its initial values, or to a new set of initial values if provided.
      */
-    reset() {
-        this.form.reset();
-        return Promise.resolve();
+    async reset(initialValues) {
+        this.form.reset(initialValues);
+    }
+    /**
+     * Reset both values AND field state (touched/visited/etc) to fresh. Same as creating
+     * the form anew. Optionally re-initialize with new values.
+     */
+    async restart(initialValues) {
+        this.form.restart(initialValues);
     }
     /**
      * Get the current state of the form (values, errors, etc).
      */
-    getCurrentState() {
-        this.form.getState();
-        return Promise.resolve();
+    async getCurrentState() {
+        return this.form.getState();
     }
     // --- Dependency Injection ---
     handleFetchFormInstance(ev) {
         ev.stopPropagation(); // Stop bubbling to nested forms
         const callback = ev.detail;
         if (typeof callback === 'function') {
-            callback(this.form);
+            // Pass form-level options to consumers (udp-field): `errorDisplay` gates
+            // when the error string is pushed to the child input; `deriveFieldValidators`
+            // toggles the attribute-derived validators. Optional second arg: older
+            // callbacks that only take `(form)` still work unchanged.
+            callback(this.form, {
+                errorDisplay: this.errorDisplay,
+                deriveFieldValidators: this.deriveFieldValidators,
+            });
         }
     }
     render() {
-        return (h("form", { key: '51a31944cd2e4a735ac30f7f325ffe2d6d9eca39', id: this.formId, noValidate: true, onSubmit: e => {
+        return (h("form", { key: '7c76c4cfb8ee22d8bd68ead79f7a1dff1b6cb2f8', id: this.formId, noValidate: true, onSubmit: e => {
                 e.preventDefault();
                 void this.form.submit();
-            } }, h("slot", { key: 'f40e1581e6f3b6864bcfc527794e76a2d4cd0bec' })));
+            } }, h("slot", { key: '3eec3822b4c70bbc38b331913c87753c41210161' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "initialValues": [{
                 "handleValuesChanged": 0
+            }],
+        "validate": [{
+                "handleValidateChanged": 0
             }]
     }; }
 };
@@ -9629,7 +9964,7 @@ const UdpLazyLoader = class {
         }
     }
     render() {
-        return h(Host, { key: '8dac79e89ea9f186fe3e32ccbe742f28926e94be' }, this.shouldRender && this.content ? this.content() : null);
+        return h(Host, { key: '43db3490416e0648ec956f2c2c14db5bedc6abd7' }, this.shouldRender && this.content ? this.content() : null);
     }
     static get watchers() { return {
         "if": [{
@@ -9653,7 +9988,7 @@ const UdpLinearLoader = class {
             loader: true,
             [`loader--color-${this.color}`]: true,
         };
-        return (h(Host, { key: '16be9abb52d220c3efb80fcc6d14a00971a960e1' }, h("div", { key: '90dd2b9a4ba68b4be346aa165e449d1445629b47', class: loaderClasses }, h("div", { key: '03a6f3205a096ad7e7536aae49ebccc14ecb30fc', class: "indeterminate" }))));
+        return (h(Host, { key: '8f22f31cc54bcff12005fe51bc167d6ff5875650' }, h("div", { key: '08533be0143ee2ec556c3aebca1274fee1a35d59', class: loaderClasses }, h("div", { key: 'efa184141b12699b1a276ca1d27d45a61785b934', class: "indeterminate" }))));
     }
 };
 UdpLinearLoader.style = udpLinearLoaderCss();
@@ -9712,11 +10047,11 @@ const UdpListRenderer = class {
     render() {
         const showPrimaryText = this.primaryText || this.hasPrimaryTextSlot;
         const showSecondaryText = this.secondaryText || this.hasSecondaryTextSlot;
-        return (h(Host, { key: '65a885bb5488aca2e47e0344c5afa7770bb8756d' }, h("div", { key: '1173ade294522a6f89e46c32d2a66f76fd88bda5', class: {
+        return (h(Host, { key: '36489442fc414a8c95a8ed085d7093a6ce9616b6' }, h("div", { key: '095db860c92f49264718004b2656b1452dc6c73f', 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: 'e65a0960041ac97468dda250f835e926cb02a592', class: "avatar-container" }, h("udp-avatar", { key: '70f09401e5008bab593131d142fc244f0e6ee9d8', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: 'ff141491127155ba6ea1333d9e4060d31a85f4bd', class: "text-container" }, showPrimaryText && (h("div", { key: 'ae704e51971aaa365c5e92ccc565fcfc2bc2067b', class: "primary-text" }, h("slot", { key: 'fcb268bfa3b732888ca8c031493763e1196a4e40', name: "primary-text" }, h("unity-typography", { key: 'bed80bac0ab0fd47b572bf8ebccc1976a3b69870', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: 'df6625f5fda100eb714c0dac397837a18c2673b7', class: "secondary-text" }, h("slot", { key: '25cd469d1ab6e8e0bc1760cc62fa126c4fd019f1', name: "secondary-text" }, h("unity-typography", { key: 'a327034ec63a31c385ad022b18a8aa20ce37ff2f', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: 'e2a13fff6aeeb5b0a840b7d1072cd9d4935e07cc', class: "status-chip-container" }, h("slot", { key: 'cb30a3247c2d69481ea3dd5aedc4655b0f42b4f3', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: 'e71d26a3729aa54cfef782c25beb6c7b6f20f956', class: "actions-container" }, h("slot", { key: '3c8cddab981b56aa563f3431f054b7b47408baba', name: "actions" }))))));
+            }, onClick: this.handleClick, onKeyPress: this.handleKeyPress, role: this.clickable ? 'button' : undefined, tabindex: this.clickable ? 0 : -1 }, this.iconName && (h("div", { key: 'ec240bc91de86d67a91fe536e93127d8c5b5ff6a', class: "avatar-container" }, h("udp-avatar", { key: '128b7c24d30cb9fd552664c7a6633c04fc6dd36c', iconName: this.iconName, variant: this.avatarVariant, color: this.avatarBackgroundColor }))), h("div", { key: '37ff6fc1b7a1c89fe23e14f0efa61004a0dfab5a', class: "text-container" }, showPrimaryText && (h("div", { key: 'd952b50fb35cdff6f0e30e64f56cd497e3d52f7a', class: "primary-text" }, h("slot", { key: '435d24d8ff133174c87ebff9ff68a4f210b2ae9c', name: "primary-text" }, h("unity-typography", { key: 'af94b840a0803c8cc7274ab9e589365677340f02', variant: "body" }, this.primaryText)))), showSecondaryText && (h("div", { key: '6baf6bdfb55d6f41183cc2c3e490bad6fe1c47af', class: "secondary-text" }, h("slot", { key: '2d5dbf51b722311ebe3a440adc0cf245056d5f5b', name: "secondary-text" }, h("unity-typography", { key: 'a328e658cfd4d1656016703e087e9f6ec0191f1b', variant: "caption-text", color: "textSecondary" }, this.secondaryText))))), this.hasStatusChipSlot && (h("div", { key: '3593a2453beca36300f524324c376dcd0a19b6aa', class: "status-chip-container" }, h("slot", { key: '223e344db18c2286f7802ce28d8a69dcb6d93c90', name: "status-chip" }))), this.hasActionsSlot && (h("div", { key: '63946c93446ae369617f57fdf261149f405f8530', class: "actions-container" }, h("slot", { key: '4c9b616fe65d3e37bcc68791b5703d5c94f09b48', name: "actions" }))))));
     }
     get hostEl() { return getElement(this); }
 };
@@ -9738,11 +10073,13 @@ const UdpMenuItem = class {
         };
     }
     render() {
-        return (h("button", { key: '49b86576f7f160233b74d983a205e1bb643c72b3', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: 'c9b602a4823d8113c0493a4afde1ff0a470c0a3f', iconName: this.iconName, class: "menu-icon" }), h("span", { key: 'e79c8cdfc249a8f6df6f4cfc9a7f765d17187bb7', class: "menu-item-label" }, h("unity-typography", { key: '6ee26cf5261beb812f7f96d413f9ffb4a9f4dd68', variant: 'body1' }, this.label))));
+        return (h("button", { key: 'b82a704b12c25c10652be6831b8f32bacc749ea3', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '51e12c8dca4a5d86740a83efaeebf7e2251db215', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '49a36f3ecb026930430f0e3f3d22eb0649f01db6', class: "menu-item-label" }, h("unity-typography", { key: 'f7cbe3d24aa5041a0efee0cb1dd562cac29b9d4e', variant: 'body1' }, this.label))));
     }
 };
 UdpMenuItem.style = udpMenuItemCss();
 
+const udpMessageBarCss = () => `::slotted([slot='icon']){color:inherit !important}`;
+
 const UdpMessageBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -9768,9 +10105,10 @@ const UdpMessageBar = class {
         };
     }
     render() {
-        return (h(Host, { key: '14c5df2bec65faa6079f130c727b4e26a4af3f0a' }, h("fluent-message-bar", { key: '816902f27dee6e2d6f97ad7fe8e89ba947cf1917', shape: this.shape, layout: this.layout, intent: this.intent }, h("udp-flexbox", { key: '2462f8bcb88309bf9d9e9c196902c15f357e47f1', direction: "row", gap: "sm", slot: "actions" }, h("slot", { key: '48481c06976a7ab481779f94ce83b24791507efb', 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: '0db0507b9c444dc1f7a49773d6eb89b72a841af8', name: "icon", slot: "icon" }), h("slot", { key: '775df222804424d205106ff5a08debef32be7180' }))));
+        return (h(Host, { key: 'fa325815567104264a595f3d0d36ec06ea06a5ec' }, h("fluent-message-bar", { key: '78497180f5e617cb3e13ada00634ff504248e9e8', shape: this.shape, layout: this.layout, intent: this.intent }, h("udp-flexbox", { key: '227f1d5b1eefa028301510e18ff2bfaac1fb134e', direction: "row", gap: "sm", slot: "actions" }, h("slot", { key: 'a17d1f598474757531ced89051de9c153978afee', 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: 'd052bcc8da779751da4d4fb09901d1f5b3a34b37', name: "icon", slot: "icon" }), h("slot", { key: 'f1ef274add5fc6f9afadcacd652c5d6b0d51968d' }))));
     }
 };
+UdpMessageBar.style = udpMessageBarCss();
 
 const udpPopOverCss = () => `:host{display:block;position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity 0.2s ease-out}:host(.is-visible){pointer-events:auto;opacity:1;transform:scale(1)}.popover{background-color:white;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #e0e0e0}`;
 
@@ -9888,7 +10226,7 @@ const UdpPopOver = class {
             maxHeight: this.popoverMaxHeight,
             overflow: this.overflow
         };
-        return (h(Host, { key: '43112ccc31e6efaa8b34eb91ed5c2ea8b6d6fab2' }, h("div", { key: '386fbf8289a49094820ce999fc630e6639e24601', class: "popover", style: style }, h("slot", { key: '200b7b48753905f8a6dfa5ffa92c5054e1a38d05' }))));
+        return (h(Host, { key: '681a9ef47a1265d3036a3b693cd976d84349194f' }, h("div", { key: '62bc5c7b20d331d1cb8b8d7ba5757725b89d1b94', class: "popover", style: style }, h("slot", { key: '4476e5029e5c6bb987a4a4a3eddb36120d97ebf0' }))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -10210,14 +10548,14 @@ const UdpPopover = class {
     }
     render() {
         const anchorName = `--${this.anchorId}`;
-        return (h(Host, { key: '768f1994c6277809dba1d197aaa431d1efb2f1d1', style: { '--udp-internal-anchor-name': anchorName }, class: { 'has-arrow': this.withArrow }, onClick: (e) => {
+        return (h(Host, { key: '9cdc22d2f252ee38dea388837684a9865f7aff23', style: { '--udp-internal-anchor-name': anchorName }, class: { 'has-arrow': this.withArrow }, onClick: (e) => {
                 if (!this.toggleOnTriggerClick)
                     return;
                 if (this.popoverWrapper && e.composedPath().includes(this.popoverWrapper)) {
                     return;
                 }
                 this.open = !this.open;
-            }, onFocusout: this.handleFocusOut }, h("slot", { key: 'b741368087f8ea39bc19cab527456858a2988a45', name: "trigger" }), h("div", { key: '89e01fc9e75cb206ee43f2edcf0307dda842b164', popover: this.keepOpenOnClickOutside ? 'manual' : 'auto', class: {
+            }, onFocusout: this.handleFocusOut }, h("slot", { key: 'cf9bd01e25752965f8819f96a3566518105c077a', name: "trigger" }), h("div", { key: '61b0e0a9ee425a6277f07bfd9614b99ddbcddf7a', popover: this.keepOpenOnClickOutside ? 'manual' : 'auto', class: {
                 'popover-shell': true,
                 'position-top': this.position.startsWith('top'),
                 'position-bottom': this.position.startsWith('bottom'),
@@ -10233,10 +10571,10 @@ const UdpPopover = class {
             }, style: {
                 'position-anchor': `var(--udp-internal-anchor-name)`,
                 'position-area': this.getPositionArea(),
-            } }, h("div", { key: 'afcbfc0bb0744cc1cd46ba0b847ff32633b8b77f', part: "content", class: {
+            } }, h("div", { key: 'f0fefbd2f241dc57a9a337e858a7ba4acbdfd89d', part: "content", class: {
                 'popover-content': true,
                 [`size-${this.size}`]: !!this.size,
-            } }, this.withArrow && h("div", { key: '3866c6cdada36e67a8cf11bb22e715ccdd5984ab', class: "popover-arrow" }), h("slot", { key: '113771453452c511b0aef23b3cd04980a68cb8fe', name: "content" })))));
+            } }, this.withArrow && h("div", { key: '4507f75260eddadab3b94a8acebb10e8e9672d5c', class: "popover-arrow" }), h("slot", { key: '0ad73928d4cf7608e71fae9f404e5c475a05b0c4', name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10247,7 +10585,7 @@ const UdpPopover = class {
 };
 UdpPopover.style = udpPopoverCss();
 
-const udpPrimaryActionHeaderCss = () => `:host{display:block;width:100%;box-sizing:border-box;background-color:var(--colorNeutralBackground1)}.header-body{display:flex;flex-direction:column;padding:var(--spacingVerticalS) var(--spacingHorizontalL);border-bottom:1px solid var(--colorNeutralStroke3)}.title-row{display:flex;align-items:center;gap:var(--spacingHorizontalS);min-height:36px}.title-inline{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex:1 1 auto;min-width:0}.title-inline udp-text{flex-shrink:0;white-space:nowrap}.slot-inline{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}slot[name="inline"]::slotted(*){min-width:0;flex:1}.slot-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:99999;min-width:0;overflow:hidden;flex-wrap:nowrap}.slot-actions>*,.slot-actions ::slotted(*){flex-shrink:0}.system-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:0;min-width:max-content}.system-actions>span.primary-action,.system-actions>span.overflow-action{display:flex}.subtitle-row{margin-top:-6px}.subtitle-row udp-text{color:var(--colorNeutralForeground2)}.toolbar-row{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--colorNeutralStroke3)}.toolbar-row.hidden{display:none}.toolbar-row slot{flex:1;min-width:0;overflow:hidden}slot[name="toolbar"]::slotted(*){min-width:0;flex:1}.hidden{display:none}`;
+const udpPrimaryActionHeaderCss = () => `:host{display:block;width:100%;box-sizing:border-box;background-color:var(--colorNeutralBackground1)}.header-body{display:flex;flex-direction:column;padding:var(--spacingVerticalS) var(--spacingHorizontalM);border-bottom:1px solid var(--colorNeutralStroke3)}.title-row{display:flex;align-items:center;gap:var(--spacingHorizontalS);min-height:36px}.title-inline{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex:1 1 auto;min-width:0}.title-inline udp-text{flex-shrink:0;white-space:nowrap}.slot-inline{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}slot[name="inline"]::slotted(*){min-width:0;flex:1}.slot-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:99999;min-width:0;overflow:hidden;flex-wrap:nowrap}.slot-actions>*,.slot-actions ::slotted(*){flex-shrink:0}.system-actions{display:flex;align-items:center;gap:var(--spacingHorizontalS);flex-shrink:0;min-width:max-content}.system-actions>span.primary-action,.system-actions>span.overflow-action{display:flex}.subtitle-row{margin-top:-6px}.subtitle-row udp-text{color:var(--colorNeutralForeground2)}.toolbar-row{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--colorNeutralStroke3)}.toolbar-row.hidden{display:none}.toolbar-row slot{flex:1;min-width:0;overflow:hidden}slot[name="toolbar"]::slotted(*){min-width:0;flex:1}.hidden{display:none}`;
 
 const UdpPrimaryActionHeader = class {
     constructor(hostRef) {
@@ -10499,7 +10837,7 @@ const UdpPrimaryActionHeader = class {
     render() {
         var _a;
         const hasPropActions = !!this.primaryAction || (((_a = this.secondaryActions) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        return (h(Host, { key: '7bfdb362f8d505a97dfbf03429341b8a33a9cbb9' }, h("div", { key: '49c88d57ffba4b115cee305b2e400f0956265ba7', class: { 'header-body': true, 'has-toolbar': this.hasToolbar } }, h("div", { key: '855a89cf5cf59b343411164ddb4ae048a5c66984', class: "title-row" }, h("div", { key: '63760c4deb501c3b3ddfe3a90b171798edf2a450', class: "title-inline" }, h("udp-text", { key: '036031a5d004507c059493785a43fadbbbac2ed6', variant: "subtitle1", block: false }, this.title !== undefined ? (this.title) : (h("slot", { name: "title", onSlotchange: this.handleSlotChange }))), h("div", { key: '437de5b55b7d98662f20ce33d52e26bb235132e0', class: { 'slot-inline': true, 'hidden': !this.hasInline } }, h("slot", { key: 'b36c68de2b2a95cdf98111d3c0ee198015529d95', name: "inline", onSlotchange: this.handleSlotChange }))), h("div", { key: '90b270268a68080d981b8232ce44643010cc5541', class: { 'slot-actions': true, 'hidden': !this.hasActions } }, h("slot", { key: '2709bacc7eeaf9e6398446c7daa07d4f1ff61953', name: "actions", onSlotchange: this.handleSlotChange })), h("div", { key: '2c95fbd925395017bd9578aabc60f2baf91eafd0', class: { 'system-actions': true, 'hidden': !hasPropActions } }, this.renderSecondaryActions(), this.renderPrimaryAction())), h("div", { key: '2b9f38b4ba8476a4a6a9223c3d934a1944d63bed', class: { 'subtitle-row': true, 'hidden': !this.hasSubtitle && !this.subtitle } }, h("udp-text", { key: 'd48e16c92152caa6e6f2b2e2b47599612e3b80e5', variant: "caption1" }, this.subtitle !== undefined ? (this.subtitle) : (h("slot", { name: "subtitle", onSlotchange: this.handleSlotChange }))))), h("div", { key: 'fdd7ca4857d68c9c8c314d4dcf6c63d30fec2670', class: { 'toolbar-row': true, 'hidden': !this.hasToolbar } }, h("slot", { key: 'bd2d52993b683da5de42a0d7cf1a532309c8ff53', name: "toolbar", onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: 'd0d3f8feab8d5b64bba573bb37174f21823f0abe' }, h("div", { key: '9ebabc0a07f4cfafc190b1a961a0b0f348b63172', class: { 'header-body': true, 'has-toolbar': this.hasToolbar } }, h("div", { key: 'd016ac453daca4d1a2b35a0c10ed8d0de593fe66', class: "title-row" }, h("div", { key: 'fa74513458b5213a36db350ea5005bda1a0a7f8c', class: "title-inline" }, this.title !== undefined ? (h("udp-text", { variant: "subtitle1", block: false }, this.title)) : (h("slot", { name: "title", onSlotchange: this.handleSlotChange })), h("div", { key: '044c794a978a60eef4f7c7d4c43c58345a5ecd8a', class: { 'slot-inline': true, 'hidden': !this.hasInline } }, h("slot", { key: 'afcdb4c86fa67c2598572d2f7b8e244632ba321c', name: "inline", onSlotchange: this.handleSlotChange }))), h("div", { key: '0048d6f5c28d7a5277afc36dc69310b994c2fe15', class: { 'slot-actions': true, 'hidden': !this.hasActions } }, h("slot", { key: '7ebcae5cd4a46c468f67f643ad42cf2245f7d7b0', name: "actions", onSlotchange: this.handleSlotChange })), h("div", { key: '8f06ae578fdb3535df92254b943e05b34d79d32a', class: { 'system-actions': true, 'hidden': !hasPropActions } }, this.renderSecondaryActions(), this.renderPrimaryAction())), h("div", { key: '9a5d592e2125cea11040d5049ddb2213df427094', class: { 'subtitle-row': true, 'hidden': !this.hasSubtitle && !this.subtitle } }, this.subtitle !== undefined ? (h("udp-text", { variant: "caption1" }, this.subtitle)) : (h("slot", { name: "subtitle", onSlotchange: this.handleSlotChange })))), h("div", { key: '2100086f11ed47764ffdc609e5d9b9510c060d53', class: { 'toolbar-row': true, 'hidden': !this.hasToolbar } }, h("slot", { key: '68fad3a7a2b9b0568d1e6943612d93d67a75870b', name: "toolbar", onSlotchange: this.handleSlotChange }))));
     }
     get el() { return getElement(this); }
 };
@@ -10522,7 +10860,7 @@ const UdpProgressBar = class {
         this.validationState = 'info';
     }
     render() {
-        return (h(Host, { key: '71586cde3c899e5f2234876474551568a0c46783' }, h("fluent-progress-bar", { key: '1d72941dcc0ecd5703aeaea6f39efa79b0fd7578', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
+        return (h(Host, { key: '79eb768d6fca57601e21c62a9c76d66d341aee9a' }, h("fluent-progress-bar", { key: 'dd5ee40a37ee5d9bf4ad3d37e25e5c9e44b33c4a', thickness: this.thickness, shape: this.shape, "validation-state": this.validationState, value: this.value, min: this.min, max: this.max })));
     }
 };
 
@@ -10598,14 +10936,14 @@ const UdpSearchInput = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '490634be767d8d4b2b0da2c4bb17023024ae0530', class: { 'has-error': hasError } }, h("fluent-field", { key: 'c02f9c697f745a2d1fa3b5cfa399e9842263c94b', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: 'bf1f8aa98a08ddc90c07e018e350fca00ba33c27', 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: '18e3f399d9adbe656e69b3681480ebe4a9697b24', class: { 'has-error': hasError } }, h("fluent-field", { key: 'af700db04a47415dcdcb18d84341117348b4e9fb', class: { 'no-message': !message && !this.includeErrorPadding } }, h("fluent-text-input", { key: 'd3993717324ed7ed8f2f2f9ffb223813742ad418', 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: 'd2a6e5d9650493ff2da32d57e0b8ddc4e1316c58', slot: "start", name: "start" }, h("udp-fluent-icon", { key: 'd57e926bd88973ec4b6fd9f7284f35eedd1befc9', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '08b43e5cfcd8dde7dfbacb58e044ccf3adfde1a6', class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: 'ac705fd2012ecf274bf4dd0d36a9a6e6e5d495d2', slot: "start", name: "start" }, h("udp-fluent-icon", { key: '2a4779bc4adf452eb8cb010f26d29ba8011278bc', name: "search", size: "xs" })), h("udp-fluent-icon-button", { key: '3995efb2643be86e6de1eb8036a8734b935716f8', 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: 'ab4c3fba81299dcc5d8889b9f60d2571a4809c91', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '723364d0350b704dd41437b8c588c6a697c46ed1', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'c294561ef96e233b79a3ae9e58d17ee3a57ddf6a', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: 'bf0881fc0e97104ff956c826db2fdf78a38e4ce9', 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: '09e6aa89868714b4560ab4e844b1ae3b7c894f04', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '188b331d170b8428c9c1b2d0d3f91fcb26e61800', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'c1b6dca3c08a1189ef27b8353522a91cd87a1287', name: "info", size: "xs", class: "popup-hint-icon" })))))), (!!message || this.includeErrorPadding) && (h("udp-text", { key: '666c475d74d57e5e6f89e4c21f6b2bf0b57aa689', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -10847,27 +11185,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: 'adf954f5aa1e92b211ace05d17db3d1c0ad86d88', iconName: "overflowMenuVertical", color: "inherit" });
-        return (h("div", { key: '22d1fdfcb8b854c088f65550e52f46931c654477', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '97e8aa89547048b7df7017325125468e5ec3a686', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '53c4857ae4d6b4a606585bce123976da1c5a1030', class: "title-container" }, h("div", { key: 'eb986269945724c4dd92fdbf737d617221456918', class: "close-button" }, h("stencil-icon-button", { key: '91be00c8bf9f4b1c274b480f4cec0191734fe8ff',
+        const overflowIcon = h("udp-icon", { key: '6c39f309512725cc4773e1370d42c3c714c9d6bd', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: '3d8838a1377ef5d6d534376b724548d6798b3af7', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '3e5a586280f33a4185b2c726e18cc10606a77136', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: 'a5456d799b92fb4b07dd666f18c0acb624674377', class: "title-container" }, h("div", { key: 'cb1132c6c96ca3ebb6831ada3c3956d86fb7d2c1', class: "close-button" }, h("stencil-icon-button", { key: '997dd654887ccb79f297da44c6381aa5c29b0bdc',
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '6a6a6fa9702ec95474b404565c01a57a82cb8e15', class: "title-text" }, h("unity-typography", { key: '5c23cb6871d9f93589199c0808963bd039f88060', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '7889facee173108d93a27ba4d8f1238d22d854e6', 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: 'ca6fabdf1924f770686574e0d9ab1784a01508aa', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '93887acf897d799ccbcbf15b516e8e765e0d3836', class: "title-text" }, h("unity-typography", { key: 'ca216bf4428b011d729683e1a5a8eeb50e15b0c4', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: 'b498eb6052f74dd6cd1f8a1f3dd57599f05759ef', 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: '311a310a6007b8b0042c84aa7bb2105831cfe16c', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '1faf19fb4f315548de554a8fe9c2d07cf8963e7e', class: "loader-container" }, h("udp-linear-loader", { key: '7aa673e888a8de784895441cd9301fd181889044', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '3d58e75b7e2bc6411112498c3e25ddec76933976', class: { content: true, padding: this.padding } }, h("slot", { key: 'f5fc445b58712fa7ec7fbd19514bbb1a2d0cbac6' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: 'b9d96c4c9ce80d4c38d670db213ab816ea135e53' }, h("div", { key: '7a25131a83ce0a75718dae0f98bf06d31c378171', class: "loader-container" }), h("div", { key: '904641976ddcfdac76d213b6735d573146c3efef', class: {
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: 'e9192a778369b629dfc261469f520fe5b1656f3b', class: "loader-container" }, h("udp-linear-loader", { key: 'ff3a4a7ddb84c178246b103b40d727124af91e55', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '6348c8ad6d4575c4f62cad26e69425daf821839f', class: { content: true, padding: this.padding } }, h("slot", { key: '3e2cfd5a9778756ea5bff000441522e7edf7a3f3' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '5dd3a712db33bc8bbd1f75690edaaa4035c27760' }, h("div", { key: 'e72a3374ce4de6230b526faabb305ec21cbdded4', class: "loader-container" }), h("div", { key: '6d1370245b40d672773906f6449f53762cceb913', 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: 'de709f71facef6a251999c1279bc91e960d0f8d6', class: "footer-secondary-buttons-container" }, h("div", { key: 'd963c3bfe3dc914a26ff6c6b933fee301c0d2e46', 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: '71fa507ef7f601ffc751b24154ef0049ef309ca2', 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: '5d0ce1a63309c638c2014f3aedd5b92710f6938c', class: "footer-secondary-buttons-container" }, h("div", { key: '936a21838d09406da6143d90676f0b4974ee4228', 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: 'e51f332ff548a49e4f3d5274c381047e5e912293', 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: '1332b8210ef0c96d249155460f056958d64d827d', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '4136309a335f605591638be378a2416824bb116a', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: '13a80893e26f3044444707fcb280f1c163c17ebe', 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: '8e22db449186617656f1c18bd3846031533f921d', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '288284faf79eddb49dc907d42c5d401196b32b1c', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: 'ea65e59690f0885b74f2d17243edb80320e61e05', 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: 'f4595635dd8be798ab8e23e508caaf29b38b0395', ref: el => (this.measurementContainerRef = el), style: {
+            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: 'e246fbc961e55e5af4544efaaa092d6eb5774a68', 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: '3bd08216608c6dffda178ec4ee0d26e694f2bcb5', 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: '6382b979dc197b65f643b929c17d42f91e3c8958', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -10914,7 +11252,7 @@ const UdpSlider = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '9e0b72c8f247d9b4ec9af28d3b03b2f13e02bfc8' }, h("fluent-field", { key: 'cc192f0d1c5dd060aab5aa818d53a0f7e70c3168', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '4458899d2de6ab4d0bff4abfe54975b355d552e2', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '78b993d8bd54ed219514e431e5c3bcc63a01e8df', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '9a0b09e3db422775d958819ed857138bece046ac', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: '29cb1e705a6e334939e9f228e7eee41d0700ac25', 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: '4c4de68db58c9d95fc4dbaa381b5e6678e774547', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: 'c46ea343b49e8e87f515656e3a82ce82bd52782a' }, h("fluent-field", { key: '9664f9a8054cc5f79ed4fe891134161f582c65ac', "label-position": "above", class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '28dbcc8ef193def3bc6c8254f415a70eef81d38b', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '865326d46e31e54cf0e80a2689ecc5acf0a8b707', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'edf8e2a4e368fadaaa74c02e42de51c6e56a8add', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-slider", { key: 'f158c0b9203d54f195f882314b24bbbd10663020', 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: '8aaeccdeeea74a406e7dd53df56b0c86e1b4336d', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -10928,7 +11266,7 @@ const UdpSpinner = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a91a914193ac18d6b2c04af5bebc40e707adabbc' }, h("fluent-spinner", { key: '7764cef9d265e703972883c1c059add085fdb36d', size: this.size, appearance: this.appearance })));
+        return (h(Host, { key: '476640046658069569b983816fea2f37cac0343d' }, h("fluent-spinner", { key: 'ea9df3d0896c1a16d5774399dde0274199650852', size: this.size, appearance: this.appearance })));
     }
 };
 
@@ -11142,7 +11480,7 @@ const UdpSwatchPicker = class {
         const gridStyle = this.layout === 'grid' ? { '--grid-columns': Math.min(this.gridColumns, 8).toString() } : {};
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '40f282ac01f41a963c2718fbee51fe69aae75410' }, h("fluent-field", { key: '41e4c657359d30e84e1d1f5d478811550412157f', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '6eded2d070c2ee28a99bd86574622c78820dc2b4', required: this.required, disabled: this.disabled, slot: "label" }, this.label, this.popupHint && (h("udp-tooltip", { key: 'cbdde172b8092efff04bc8ac0f1340fe9440cd72', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e824262fd8aae2dc4981355dd496c8d6bdfb9257', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: '4564a6442565ba0c086244c4e10522eee6839b27', slot: "input", class: containerClasses, role: "radiogroup", "aria-label": "Color picker", style: gridStyle }, this.swatches.map((swatch, index) => this.renderSwatch(swatch, index))), h("udp-text", { key: '5f96859652f9e179bfc8ef5deb82a6a59504341f', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '3548fe5f20da790a69709bab072a6c224f5e56f9' }, h("fluent-field", { key: 'a98d150f1407b4603dbc323ae2a420d8df7c360c', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'ae0751ca43a394b17ff01e9edfee0dc363748209', required: this.required, disabled: this.disabled, slot: "label" }, this.label, this.popupHint && (h("udp-tooltip", { key: '06d241ac76ddf5daf67d10fca5893d406b090a92', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e4f763dfb04e8333f4efe0443b60534999c5e24c', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: '65decf9ebcdd1bf74ef3be72370fcafdbfd2d24d', slot: "input", class: containerClasses, role: "radiogroup", "aria-label": "Color picker", style: gridStyle }, this.swatches.map((swatch, index) => this.renderSwatch(swatch, index))), h("udp-text", { key: '3841d745127b4f0dede093a95a74e7db2739d032', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -11194,7 +11532,7 @@ const UdpTabPanel = class {
     }
     render() {
         const isActive = this.activeTabId === this.id;
-        return (h(Host, { key: '3538f2b223fe1827b2a10d7b19f37f517c847ae7', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: 'f0f0e4ef3d119fa5b9946d7f7ebd60a23341f18f' })));
+        return (h(Host, { key: 'c05836ddf9ef5bf35db4bb136b446414adb0798a', role: "tabpanel", "aria-labelledby": this.id, "aria-hidden": !isActive ? 'true' : 'false', hidden: !isActive }, h("slot", { key: '4b2610933b56b1bb9176f89e41fe348bbf7f8a34' })));
     }
     static get delegatesFocus() { return true; }
 };
@@ -11256,7 +11594,7 @@ const UdpText = class {
             .join(' ');
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         const Tag = finalAs;
-        return (h(Host, { key: '04572b36e38ecc657f44dc05c01006fe41b5e414', class: classNames }, h(Tag, { key: '5d35d86a49e83f0e831bf6fd53ae7e3a55ebcefb' }, h("slot", { key: '59562984513306acadcfae73bdf9e12b651eb8e0' }))));
+        return (h(Host, { key: '86e0780444d718ea941408e65fc98e5acff1dcc3', class: classNames }, h(Tag, { key: '7d9ed6f74951760273827eb3fc3fda2951134553' }, h("slot", { key: '067b01ca86c3d370f80dbe7ab6b340be5f01880a' }))));
     }
 };
 UdpText.style = udpTextCss();
@@ -11319,11 +11657,11 @@ const UdpTextarea = class {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: '897598a0d9342904a8dce1e0ae1774413b0fa86c', class: { 'has-error': hasError } }, h("fluent-field", { key: '5bc2c6f82c42bcf5f739ef229a9f66f17cea9f37', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: 'dc2b9e7d42662322392f9991581866b1ee1358f8', 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: '9fb6e076b7f46073cbf48c73e6f214905062e7a7', class: { 'has-error': hasError } }, h("fluent-field", { key: '0ee8674ea9f35cbca816fb0f749005f4dd2fa1d7', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: '8ca8795705c9d6e718c31cb3508d34612eb6847a', 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: '6713796e0e2d657f5b60431ac94da027187714c7', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '5ae5f622fcfd9235c7878dc4e5578deaa56f8da3', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '6642c5b203ee496d81e1c6d65d2561d3ee930908', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'd0481c4624f09b934332edd492ec8215019e4f63', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }), h("fluent-label", { key: '988191db247a107729cc68b6f340aea5bef68932', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '6bf6d871b57867236c695d812b7c026801acae5a', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'd320fd9ec6903593e8d2044574972e2e60338a91', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'daf6e0c53ce078fcd69abf672742cf7b86344a47', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -11803,7 +12141,7 @@ const UdpTimeInput = class {
         const effectiveError = this.internalError || this.error;
         const hasError = !!effectiveError;
         const message = effectiveError || this.hint;
-        return (h(Host, { key: '823b5fb623fa3b16504ff9d027020277b0db0d0a', class: { 'has-error': hasError } }, h("fluent-field", { key: '6b3dd2593fa0e6023578a9f742fdb5e21b6f6976', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: '4dee6e8c0f1aedb75d6394bd7a8e70efe12b5ccc', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: '1d2e052183438ffcfe191a194d7c96cc99ab8615', 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: '807c4fc09f8d2ecae8afa4a870a5027db744ac83', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: '24ae84fd3ca8772d1332b3e8d73065eb79f45fd2', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'e0bc635efa1e1a302a69ba5020a70ef57581a9a5', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: 'a55c43d43a077d7cc8be9258d0f21bd453d4ba1b', slot: "end" }, h("udp-fluent-icon-button", { key: '0a96486c1ad16e9c9c2b70cce6dc0d14c962299d', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '47327824259cdb67134e134f3c80b22c0e1100b2', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: 'ad7b47db2f99fd4e77c9bbaf650c5fd93895ebaa' }, 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: 'dd056d16b64ae04a46642b8464a5db13d996df5f', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '5bc699fe3919dea4e0c3e9f115ddac67a74bddfa', class: { 'has-error': hasError } }, h("fluent-field", { key: '21487b7133ed7ab3a1f9817a64aa843b4ad773b9', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: '04a9750576804aa0c98a409f830a92454492b8e8', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: '8b39056e8de8934fedc3eceafd3ebb844c2d82ad', 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: '1a8d0f064d0392bde80139e00ee3c804ff00e46e', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: '3b59cd1a660103f0d7b20378778a886a63fbfe7c', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '20fef4a31e42c2209f4a680b40769c8b06435c8c', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: 'c3c188d8cadd47ec9be8110d0654a5af0c87c3fd', slot: "end" }, h("udp-fluent-icon-button", { key: '5ea377718a25a380b23f03393ef67566b08b2d1e', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '5046778baca7a629f9ff3bb8e008aad753ce9e81', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: 'baa6f6a49bfa2df430f0f4a684150562db4f0efd' }, 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: 'f176652eb1199c346e6bbd544289d1f20b1c50e2', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -11851,13 +12189,13 @@ 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: '553ec7430c67f98ea62ba0e60005dddb2acce7dd' }, h("div", { key: '492d0e1f95946f7e458c521b31245c8e84476da5', id: anchorId, onFocusin: (e) => {
+        return (h(Host, { key: '597c2f5b793d34ba49b847d6f0ca4430082a4488' }, h("div", { key: '9c0a13d18efb5bfdc8e408ca4d886c0593c174a0', 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: '165ae7c16c46cd9afbac4f92f089aa3784a1e873' })), h("fluent-tooltip", { key: '11a448764ea2ed7cad67a263aa94d151419a029f', 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: '5a1234bb22f6cdeac39ad7e0980580a6644217dd' })), h("fluent-tooltip", { key: '6869447b0a2d209c963a73a2af152856ed771320', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
     }
 };
 UdpTooltip.style = udpTooltipCss();
@@ -12048,7 +12386,7 @@ const UdpTree = class {
         });
     }
     render() {
-        return (h(Host, { key: '700102f908b14aabb798929d4a68872f5069e850' }, h("fluent-tree", { key: '107529f6e33292ea09c9b09d00118e0cb03c1eaa', class: {
+        return (h(Host, { key: '0ed3ca9cfdda62c0e67d8afb6baf67b4f8fa827c' }, h("fluent-tree", { key: '41cc77d04f95818f76ee8332d9df4481178c9735', 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))));