npm - udp-stencil-component-library - Versions diffs - 26.3.0-beta.2 → 26.3.0-beta.21 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (701) hide show

package/dist/collection/test-pages/test-components-page.js CHANGED Viewed

@@ -402,51 +402,51 @@ export class TestComponentsPage {
     }
     render() {
         var _a;
-        return (h("div", { key: '211f852adbd706cbd11d5950eb7f8bee8f8169a1', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: '94b285a6faa2233f0d19d62f2a0c071b0fed1753', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '88e64c7a58145fe4103d68c6cde4f82b54302b7b', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: 'eceadfdc32623cd3b20395b2011178a5c8e17b2c', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '401f092d799a6714a2d17332913af7d68e0238d9', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '0181472e56ffbb2b8ed92850654a42fe6f88d24e' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '379c20dc169a5542f2883a2df260d3e665fa8980', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: '3bc375d23ac9c90bf91cb02de439bae05a52fa6d', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '4f27e671b280e4286773c6e1311670ca67cf1c09' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: '0d6654ddc61e2d9bcc15fe2a531de2c298da1be1', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '817139f5f7c32c09f0fc0b9a7bb95b324578ed0e', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: '687f4a358460f61f4f18a51f3fb7edaae712f40a', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: '9f19d49b8ebfef24cf23e0849a6c4b2f209946dc', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: 'f2536581e9884c3707f14fc01afc5cf3f8bd3124', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: '377ab2b84c39313c3341e952dfce63539a633619' }, "Buttons & Inputs"), h("div", { key: '5d684dec9c2c8029e425b3beeb819da34b52f368', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: 'bc90dfe124dd5b906d5428d1e75f321ccfc4956d', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '3767fc4a9880a0198dfff096b30ad006150febfa', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: '893cb9ab7ac2b4b0aacda732484e2bd6233c40a0', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: '6cdbb0729252e5766fd4d86642e36fa93b295799' }, h("udp-fluent-button", { key: 'a2daa636da7f7c1b7a00c0bbac4cca56a53191bc', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '920c38c11be16f7a37bcb383293df6ee4fe96999' }, h("h4", { key: '0cb86dec0a4e2b59c108b43efcce1518af8b9ead' }, "New Icon Props"), h("div", { key: '64e58bbbbdfdd0b019ba116f67fc317c784918c4', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: 'e9f3b130144cdedb828b0209820a615592450e29', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: 'c1eaa08283d739c110269a98782385580979534b', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: '70f4d96c1a478ed74012d5e126b98d05c2a7485d', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: 'd7633cdcc38d23a2f977a31543d8a3f162f9537e', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: '5bb7c811578c057ed6263528b66b44e62d35fc9b', slot: "start" }, h("udp-fluent-icon", { key: 'd870c959dea2ecd443c4aa530bf62d85f7b85bf4', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: '00fc80fd525836eefa0603000c72ecbacdf6b23d' }, h("h4", { key: '49c81a480b2ff11e67bf44e76076fe01e4b33e1a' }, "Compound Buttons"), h("div", { key: '1ed1e0726d18ea521db8d226a8bc8c3ca7ebe3ad', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: '002ee8145741dfb66f50b88a32445f247f6ad805', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: '68350550ccd6fe3db5f119a68bfc6b12f1bd38ef', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: 'dd5d8c94646784c8fd4501d0b534a4b2abacd61f', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: 'ea71bef65202e68a27adf93bdf878a77fe0fdb08', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: '4858250de3b3fb4ab30d2ee37dc7767b53478775', style: {
+        return (h("div", { key: 'a9c2322a26615d31613089bc327c27e3ec4917aa', style: { display: 'flex', flexDirection: 'column' } }, h("div", { key: 'bf2ba944baa02b50dd338098d9d5c3ed4e92eac9', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, h("udp-fluent-button", { key: '242492378dad7dd52621678294e2647c6dbb499c', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), h("udp-fluent-button", { key: '66126efb0e275889a5377d0a8b3e4dcd42d4e715', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), h("div", { key: '919821dfd30a7cf09bad796e7d3b4b5ca3ac8097', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, h("h4", { key: '00e3320913a1c3c53978f2b1b07d78165930214c' }, "Scroll Overflow Strategy"), h("udp-fluent-tablist", { key: '9ab08dcfddfdbe4d43d22533bb7e91e4eb306b6d', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, h("span", { key: 'a70671fda6c6472f7fe8b21800b295ab122a8c7e', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("h4", { key: '963ef03978a78e87336b27be5add4c29f5a2efb0' }, "Collapse Overflow Strategy"), h("udp-fluent-tablist", { key: 'ea61b3879d3cbbeb9c6618e5858d41c2f836028e', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, h("span", { key: '72ca1c8badafb439d583d3361492a33c50203d07', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), h("div", { key: 'bc463889ac07a431dc87c73f067fb8addbc24cc5', style: { padding: '1rem', border: '1px solid #ccc' } }, h("udp-tab-panel", { key: 'ac7bcd1e0855661c1b006bdd8d5f25ffd1575743', id: "buttons-inputs", activeTabId: this.currentTab }, h("div", { key: '63b0192e96eb71b182b0707d8db7eeae399ebcef', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("h3", { key: 'e3d5f9758314ab4d5d7cba2cead95d182a143b82' }, "Buttons & Inputs"), h("div", { key: 'd2d95504692b3429c7fb43bc27ae938f4e7626ff', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-switch", { key: 'e9ce5e96a67c67afe668d3bfe1c60cc3fbaeabc2', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), h("udp-fluent-button", { key: '076a4b9c8b3939fca0e5b0fe165f38c1e1478c4f', loading: this.isButtonLoading, size: "medium" }, h("udp-fluent-icon", { key: '35c7becc662dd5d891f5aaee818cacb728a9aab5', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), h("div", { key: 'c36f993d3d0034655fdea10d24ae114d0fb55fba' }, h("udp-fluent-button", { key: '005f381234113fd751518aadae7dbf5f98b2d60d', onClick: () => console.log('Click Me Clicked') }, "Click Me")), h("div", { key: '21a9b646be50f2c9adf88a1cbb7c159e8a3a1708' }, h("h4", { key: '71fb818808575b24d24fdfbe78e23e3fba82f405' }, "New Icon Props"), h("div", { key: '9877970aeb3fd51cb725b7a7423fc0af02c24ee9', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-button", { key: '926b5e5137ad0533897ab4dd303cb9106eea1f80', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), h("udp-fluent-button", { key: '92cca95950d0eed95c50a6292564e32a92ced897', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), h("udp-fluent-button", { key: 'f960cf20882fcd125b7a53c0a2576350d4889347', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), h("udp-fluent-button", { key: 'c93088bb38d605f6d3d895c4e078366a6b91c396', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, h("span", { key: '9caa795afb3ca4f0037bb44c561ea2b4cefe27ef', slot: "start" }, h("udp-fluent-icon", { key: 'cdf66302bae34dad84acdc7e87251c2f9386e336', name: "home", size: "md" })), "Slotted icon override"))), h("div", { key: 'd323f8e769102769a062974da71b7eb8d6658f10' }, h("h4", { key: '038bb2e73ad76f03f3e2b8de5359e29b0b319611' }, "Compound Buttons"), h("div", { key: '57dfa5e9eb921e6b2c602098677a4144119b4ca1', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-compound-button", { key: '99830baa92fae322458cacaf94a554aad816d02c', description: "Hello World", startIconName: "calendar" }, "Compound Button"), h("udp-compound-button", { key: '0e07486eb840a6af2ea73f1cd57f582d2ead0cbb', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), h("udp-compound-button", { key: 'bb60625d8140dbc78f1a382381bcb7225b244818', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, h("span", { key: '29f365a8cf5a0c3887a47b87faabe40682037408', slot: "description" }, "Slotted Description"), "Compound")), h("div", { key: '6d7109606ba0485a72b5152245c97cb8a18844a4', style: {
                 marginTop: '1rem',
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
-            } }, h("udp-fluent-switch", { key: '21bb3826067bff6192ac7fe38627e82443a9d449', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: 'e7ae647fcdc11e418eeb4658a1438c050933556d', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '4bf942ea146eda54e01c65f7e5c94521ec0eb0e6' }, h("h4", { key: '23596bb89957a74843c6a845d7fb11e3205b5ca8' }, "Toggle Buttons"), h("div", { key: '487e8e3191e63c0b11929c46f12e03f28fdf1c6e', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: 'a656be6b3f4786f2db7aa516bdb29f9d769bd510' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: '607972b90159c4518c0e290bc104a70b5871fd80', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '931f0d740dc5345142936827c79a4d3d3175a595' }, h("udp-fluent-icon", { key: '225c78fe23e3275d5b92cedacb12b1d89591a0df', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: 'cb7df6c9cf4e311ae393e754b422f55bf08ca2cc', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '593c1889646c68045572461c83736caae9860b45', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: 'edeb435c52f45fb3ce971b9e7314b8f2357e07e4', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: '6e93570264f27575a52e27ee7ab671ba3a9356eb' }, h("h4", { key: 'c9264b2701340b9a0dd13117260210d133de7685' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: '58228a05b7135ee92fc30f0197d6b5d2fd7aef50', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: '88e9166212dcdd8f5ed5241601c7904a24583319', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '48111d30b127c0e12f5eec73bde592b54e77b915', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: '32d1a164fe6e15be46554c19da6e0809180e370a', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '5a8d96110c502679dc516a984cfd60d2749a02d7', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'c46d0f1541422852ec442cddedc79fae5d42af20', iconName: "settings", size: "medium",
+            } }, h("udp-fluent-switch", { key: '04ebf651f2230fdcc81a7928662cbbb4ae9b9161', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), h("udp-compound-button", { key: '0e7638c6075fb794c97e7d2ee59db594e561c2c0', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), h("div", { key: '244a86372c3cf3d16236c6f0e154b53af3836bbe' }, h("h4", { key: '9b3a0148eb4009f814f1b023b3bb7e4e55312d83' }, "Toggle Buttons"), h("div", { key: '5d2e76afc817c86021017b7b2ad25a0678453906', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, h("udp-fluent-toggle-button", { key: 'aa415541152a25e399d92646448824e9e3c1b444' }, "Toggle Me"), h("udp-fluent-toggle-button", { key: 'f393ebdba5b63d7d45cf02e62b52ddedcfe2d13e', pressed: true, disabled: true }, "Disabled Pressed"), h("udp-fluent-toggle-button", { key: '5956343beeaa7358a451ad981ff7ee8a8f4ac354' }, h("udp-fluent-icon", { key: 'aa7a3e07e6d9d2686db547fea62ff4340e57ab11', name: "add", size: "sm", slot: "start" }), "Slotted icon"), h("udp-fluent-toggle-button", { key: 'a6fe9d77dea303d942a68accf448b12d6421ac92', endIconName: "settings" }, "End Icon Prop"), h("udp-fluent-toggle-button", { key: '3197c1f85d6036e9269f5291d803ae2c588ff97f', size: "small", startIconName: "add" }, "Small"), h("udp-fluent-toggle-button", { key: 'c87a03c8762ea5d6a72e249c4ed5d89431ba3e3d', size: "large", endIconName: "delete" }, "Large"))), h("div", { key: '1342cf8a51ffc4824988f222c16f44faa1bb4288' }, h("h4", { key: '734d04a76b6933f8ed9ef859a8a944d3c1811651' }, "Icon Buttons (Dynamic Sizing)"), h("div", { key: 'ba2567c6e53d8a8ff789f28981a3696cf024da39', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("div", { key: 'bdb25678cde5a8689296ed1410cc44d6445ac720', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '785795590edcbcd3b3c33791c858600491e91fe2', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), h("span", { key: '80f869560b0087cbd3f47d382f6a27944d254cb1', style: { fontSize: '12px' } }, "Small (Subtle)")), h("div", { key: '5bce1bbceb8d92fd34870279d7ed9cadae945a72', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '8b97470503d8d99e0c4eb10c9503170fe9579df5', iconName: "settings", size: "medium",
             //appearance="primary"
-            ariaLabel: "Delete" }), h("span", { key: '71846361be959fb7942f25af3d9a413cd74a0839', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: '2c40b6b19e5adc1cf7606dcef0758a18dbb2dff9', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: '53f3ee5fdc41d89d0bbe7cd349267b09490ecf3f', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: '6a7443ce22e2c048d4961762040a0802b2a01c81', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: 'a7f338137f905d957f0d37d7a942c59a6576d497' }, h("udp-loading-spinner", { key: '5e31af9721df95cfd333a5d4eee35a49f1ec1d2e', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '99da32b0f63e38f589e96f45f0fefdee52cf5c22', id: "inputs", activeTabId: this.currentTab }, h("div", { key: '30504ade52136e78def5a00f30d795cd9152593b', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: '19c7b5b4538c488483306bebc11f260d4ba57259', style: {
+            ariaLabel: "Delete" }), h("span", { key: '5e340cabab8b0461ae2b394d63e9b92e70bc520f', style: { fontSize: '12px' } }, "Medium (Outline)")), h("div", { key: '2fade4d53bf10e7587db6cec326b2ad5737aabc3', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("udp-fluent-icon-button", { key: 'c37eb2ac3fbdb5de76487babd3927fdb52adfc25', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), h("span", { key: 'ecea0b60ed282a75bb468c53e2e1e31d29c5b5f0', style: { fontSize: '12px' } }, "Large (Transparent)")))), h("div", { key: '743c684b4f721cedea7f24350be72a95c4094dee' }, h("udp-loading-spinner", { key: '1637fc4d712521bb23fb795917c7f9b6437bfca6', size: "tiny", appearance: "primary" })))), h("udp-tab-panel", { key: '972256fea6668009ab1811ff1bff073de2198e45', id: "inputs", activeTabId: this.currentTab }, h("div", { key: 'f03349ae64368fac7a1aedf2adb50cb78043ffe1', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, h("div", { key: '9c28839e42105ee9ac55df10299bfe964c65b7f6', style: {
                 padding: '1rem',
                 backgroundColor: 'var(--colorNeutralBackground3, #f5f5f5)',
                 borderRadius: '8px',
                 marginBottom: '1rem',
-            } }, h("h3", { key: 'a544499a651d4b1e4267ca02d5329f199f6c5d24', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: '7660c2bafa11a2c5818e62c97b3dd781afa6f0b6', style: {
+            } }, h("h3", { key: 'ec492fbcc5045a6717e23c54316d6e939b50db63', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), h("div", { key: '80207364c26854976d42c08da0ebbc2f4e4ffb7d', style: {
                 display: 'flex',
                 gap: '2rem',
                 flexWrap: 'wrap',
                 alignItems: 'flex-end',
-            } }, h("udp-fluent-dropdown", { key: '6600c6a954552ee136fc7471c2fa49d96597dda6', label: "Appearance", value: this.inputControlAppearance, options: [
+            } }, h("udp-fluent-dropdown", { key: 'f855a9ab7b7bd02d74e781cac1fe7a0b705eacac', label: "Appearance", value: this.inputControlAppearance, options: [
                 { label: 'Outline', value: 'outline' },
                 { label: 'Underline', value: 'underline' },
                 { label: 'Filled Lighter', value: 'filled-lighter' },
                 { label: 'Filled Darker', value: 'filled-darker' },
-            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), h("udp-fluent-dropdown", { key: 'f0b15b1d858e92f77a06d63596a427f9183e62e2', label: "Control Size", value: this.inputControlSize, options: [
+            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), h("udp-fluent-dropdown", { key: 'ba01afa7f9b176741781818ca5e4b3342a9621fb', label: "Control Size", value: this.inputControlSize, options: [
                 { label: 'Small', value: 'small' },
                 { label: 'Medium', value: 'medium' },
                 { label: 'Large', value: 'large' },
-            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: '005c5ffb9ebf721740eaa2673cd845404cc4ee35', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: 'e9ef406856823a172cb63daea3c76277fc5cbce9', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'a1152b15f0dc2b99eca7bdff833477792db7057d', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: 'b92492d470a0977c46ac8644a69a60f89a3ce0d0', style: {
+            ], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), h("udp-fluent-switch", { key: 'e5732edab996b12c60eaba885c5f2348ce51b2db', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), h("udp-fluent-switch", { key: '1db41ed259be9907ea3a18cf3137eb6811a6b103', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), h("udp-fluent-switch", { key: 'c2c7ac38c8277ffd3e193576973a2067c8c4d109', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), h("p", { key: '2c9bd808f492554642680aba181876402d33399a', style: {
                 margin: '0.75rem 0 0',
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
-            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-fluent-text-input", { key: '3d937d30a764695a8932cedbed9af4e3dd4118cb', label: "Text Input", placeholder: "Enter text...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test" }), h("udp-fluent-text-input", { key: '66d9f414545f2c9992328826b64bf42703f35c33', label: "Email Input", type: "email", placeholder: "Enter email...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test@gmail.com" }), h("udp-fluent-text-input", { key: '8d3b426a56e0a86a0e78a875719a74d7dc7ce43c', label: "Number Input", type: "number", placeholder: "Enter number...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '123' }), h("udp-date-input", { key: '535f4ccd62e3108c9b5bc1da24223405d9e5dcdb', label: "Date Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30' }), h("udp-date-time-input", { key: '34f858ef5a11a4f9ebc4fe65f72c536360d4e743', label: "Date Time Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30T12:00:00' }), h("udp-time-input", { key: 'f0b230d15fb904a1dd3b0f5d876ff51e7ce7763b', label: "Time Input", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '12:00' }), h("udp-textarea", { key: '03fe8ff7eeab6af68f9ff5148839619f34ee4709', label: "Textarea", placeholder: "Tell us about yourself...", autoResize: true, required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: 'test' }), h("udp-fluent-dropdown", { key: 'df359ee3bae82e9a41c5501aae3b372c56316b7c', label: "Dropdown", placeholder: "Select an option...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
+            } }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), h("udp-fluent-text-input", { key: '1bcc06ec36215c916ef12f2d5eb6ea660d2b16a2', label: "Text Input", placeholder: "Enter text...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test" }), h("udp-fluent-text-input", { key: '89b772ea4fa4ba00e694790959ff0688ec727bb2', label: "Email Input", type: "email", placeholder: "Enter email...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test@gmail.com" }), h("udp-fluent-text-input", { key: '201d9fe86f4cb25fbbb7a8aa00e5aebc4cfa3de0', label: "Number Input", type: "number", placeholder: "Enter number...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '123' }), h("udp-date-input", { key: '7dd9d1a6fe13c95807c83d0d6cafa630a1a2b9c2', label: "Date Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30' }), h("udp-date-time-input", { key: '836ca8989445f862ec7e4da197ac8f0b7c557c90', label: "Date Time Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30T12:00:00' }), h("udp-time-input", { key: 'b6c349af19bf76dacae9fd2eb03cf493b2e6fb6d', label: "Time Input", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '12:00' }), h("udp-textarea", { key: 'b8cf77007b6ed7ea0f4903ca9789d6f75fb6c588', label: "Textarea", placeholder: "Tell us about yourself...", autoResize: true, required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: 'test' }), h("udp-fluent-dropdown", { key: 'e215c9f73c96f9d04b9e58242e06af0763b50a06', label: "Dropdown", placeholder: "Select an option...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
                 { label: 'Option 1', value: 'option1' },
                 { label: 'Option 2', value: 'option2' },
                 { label: 'Option 3', value: 'option3' },
-            ], controlSize: this.inputControlSize, multiple: true }), h("udp-autocomplete", { key: '3eb2ced72076501dea8b74a41845c4a16d6ba617', label: "Autocomplete", placeholder: "Type to search...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
+            ], controlSize: this.inputControlSize, multiple: true }), h("udp-autocomplete", { key: '4dd6158d4eb44f8573fe1a89813c0778d2a4b0c4', label: "Autocomplete", placeholder: "Type to search...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
                 { label: 'Apple', value: 'apple' },
                 { label: 'Banana', value: 'banana' },
                 { label: 'Cherry', value: 'cherry' },
                 { label: 'Date', value: 'date' },
                 { label: 'Elderberry', value: 'elderberry' },
-            ], controlSize: this.inputControlSize }), h("udp-fluent-checkbox", { key: '9308fbce7b00a4c89a3c7bb0c801cd80501c478a', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '657deb6c8cd263c2fffd90399e7656b91a2fd89f', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '26a07b571029c841b70cb0ee5446cfc7f09a9c04', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: '309f41bef2e8585adeac9e52553cf6fae7e33b39', label: "Radio Group", disabled: this.inputControlDisabled, items: [
+            ], controlSize: this.inputControlSize }), h("udp-fluent-checkbox", { key: 'bc4ee065153d67b6eb67074e5447e1c49c305cac', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), h("udp-fluent-switch", { key: '80ec3e6a600fb60d89511355c8932eef6be076fc', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), h("udp-slider", { key: '6e367840c051db800dd02c0ad71655fe7a18fed7', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), h("udp-fluent-radio-group", { key: '42c1ce960ddc437c35c3335eea46a6108e4dd69e', label: "Radio Group", disabled: this.inputControlDisabled, items: [
                 { label: 'Option A', value: 'a' },
                 { label: 'Option B', value: 'b' },
                 { label: 'Option C', value: 'c' },
-            ], value: "a" }))), h("udp-tab-panel", { key: 'f1ecf23f87041001da0021f437f18e03f0bb85db', id: "data-display", activeTabId: this.currentTab }, h("div", { key: '2dd83171c820be3ed99863be569fd1c5ba3ea7f3', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: 'a2663c456df3d68add0e02fff7892f16116c80a0' }, h("h3", { key: '3a16270d16641ff0cc31ae3d2452a97107b7fdb7' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: 'c1bfc1a8e403da78b525042f648e34f753eb0eaf', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: 'c9ec3ba19a9555b4980faa2e09f8c99cb6da7df1', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: '9d6d7369574b84b8177cfc8e37b393ec12321138' }, h("h3", { key: 'dfd4e57c46dbf3a361d429ee657703d2d923bd68' }, "Accordion Example"), h("udp-accordion", { key: '4d33e3ba2a5622373098c4009b77d9de798c0a00', items: [
+            ], value: "a" }))), h("udp-tab-panel", { key: '77fdaf9cfbc1ecfbe95de9164bcf0decdee4bb12', id: "data-display", activeTabId: this.currentTab }, h("div", { key: '2bf6711e09b598cb7378fddeb54eba1448ef531f', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, h("div", { key: '6e32607f36fd0c4172f8c1fbac1c54a45bb92f99' }, h("h3", { key: '3398cc45b6cf68f2aa43a971992a0fcb9ba20b44' }, "Tree Example - Animal Kingdom (Conservation Status)"), h("p", { key: '8e33b49ba9ec0846e98828c04c0d068e23c69564', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), h("udp-tree", { key: '40cbeb7889dcf3b85a0152571c9b415bd38b3f22', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), h("div", { key: 'c5b9b9ac6697aaec324d3e228cc512446fac2fd3' }, h("h3", { key: '401301b8a2e88501a42f5f00ecdb122de09109c8' }, "Accordion Example"), h("udp-accordion", { key: 'f24bf1be554c94b9f444c9572de8668896d96d60', items: [
                 {
                     id: 'simple',
                     label: 'Simple Item (Default)',
@@ -481,29 +481,29 @@ export class TestComponentsPage {
                     id: 'complex-slotted',
                     // complex content provided via slots below
                 },
-            ] }, h("span", { key: 'e0095d1d5d15c0adef721f2372e5b558a5926906', slot: "complex-slotted-heading" }, h("div", { key: 'c1e733caa4464e785459f69f22db2ebe75accf3e', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: '2f9e4588e86883651361bc39437bce989dddc7ac', name: "star", size: "md" }), h("span", { key: '4542ed5a9ffd9f7bbc1cf542cae5493d31780d9b' }, "Complex Slotted Header"), h("udp-chip", { key: 'fa3e7670727136e2ef43c34f0825ca4cbeae1c23', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: '11b2cf385dea3371195618f9c057a593b266d80c', slot: "complex-slotted-content" }, h("p", { key: '7b13306b153b2f0c0196838c63260992f304c956' }, "This content uses slots for complete control.", h("br", { key: '69cce49d784bd09eebabf0ab6b7bca47fd770d05' }), h("span", { key: 'abc46f5c7f8b7452776d30bcbfe0e2ca7943058b', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: '6f5b91255e2fbbfd8c8b302c21cb7de24fcfd4fa', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: 'f7dd65c2f4536b4e98931f5b592c3a0656d71e13', size: "small" }, "Action A"), h("udp-fluent-button", { key: '8a83eb1c7ccff9909e1b4f3bbc1f2224f5153113', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '939a03ff7e36e3df770a299c4a1a25138cd4f45d' }, h("h3", { key: 'd2e76453bebc0fdd91429da201514e1d56bd20c3' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '8db8298cf510e1a50ea1b67f41e0c23fa458e809', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: 'f4201211c20064c7f22d30e67181e97d1ca3ba9d' }, "Hover me"))), h("div", { key: '52e7dde59c62af7433a5559e129a0fe713aac75a' }, h("h3", { key: 'c1b2d4f6768893d6f84422810b75c15dd98a46d1' }, "Message Bar Example"), h("div", { key: '8a50ac229bf0c5ff1f03860d1a938f5474d7254e', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: '76e2118c45a3a08e800fd408fab363a1c1b6ae18', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: 'e93928dfa59bb8815c3ce703e918ce71f0bf1806', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: '878385a01f2f96ada074b44902266df6a394d33b', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: '02e09d8c7767f5c194d29cc877ddc6ea0554cf22', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: '49510ae2d82cc553c3329864da8775c3d78b168d', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: '37208b185babce242fc5c62e25c5f3044b2e6e54', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '3c558827933be457a0adc20112647f0065caf93d', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: '4f51260283cf1174a60c69ba97ac82a1814bda0d' }, h("h3", { key: 'a6c2bc51972a24fc364c8fc5fbfd5c26bc21394f' }, "Progress Bar Examples"), h("h4", { key: '67a670df625e12a0d2401abd7dae7d41b1830df5' }, "Indeterminate"), h("udp-progress-bar", { key: '2e375f4f5176b42680ec65b637c4ddafc65f53f0', thickness: "large" }), h("h4", { key: '4c59e0479ce239352ab6b10d605d04dd3562b0a8' }, "Determinate (Success)"), h("udp-progress-bar", { key: 'f7cf0e76da3b80b90a5c74400bd3cbf6e4a2e680', value: 75, validationState: "success", shape: "square" }), h("h4", { key: 'd1e5025a5c74b1dbad8de58351926eae9d45d158' }, "Interactive"), h("div", { key: '0a33ed005c6b3089fae5d1642f0590cbbeeeaa03', style: {
+            ] }, h("span", { key: 'ae3f3a9bf405fd5e851debc02f9e76ada576d5b5', slot: "complex-slotted-heading" }, h("div", { key: 'fa1c0adc0c5005ff8acd6b350a03e41883704764', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, h("udp-fluent-icon", { key: 'f97f8e764feb2d77fc79767dcb45d3f0fe2ae9b4', name: "star", size: "md" }), h("span", { key: '6badcee5af6ccaac8e23da312b5141f858eea384' }, "Complex Slotted Header"), h("udp-chip", { key: '74328823d59e5508a11bf2fddaf91ee640c01817', label: "New", color: "success", size: "small", variant: "filled" }))), h("div", { key: 'e816c8ea48e64c3d21f17dd16d3b887f5d8f4690', slot: "complex-slotted-content" }, h("p", { key: '82709cbd97bfc95cff776dec0f34defbb842f30b' }, "This content uses slots for complete control.", h("br", { key: 'a164b912bb1fdf8e4c90a8fa9b9d0efb1b520387' }), h("span", { key: 'd3974ad2398721510eda3be33991eeaab4b10a89', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), h("div", { key: '019147e252c0d8a78cbb8c755aa3983eab72ae98', style: { marginTop: '8px' } }, h("udp-fluent-button", { key: 'dcb6c913ce3a460cfabfd30ce221a0f16c08185e', size: "small" }, "Action A"), h("udp-fluent-button", { key: 'cbb8b41e5c020c1339c23b03369d5863f0504628', size: "small", appearance: "outline" }, "Action B"))))), h("div", { key: '6a1ff2d1e1b7df9fc7581bec977e48d39ca70c88' }, h("h3", { key: '22ce55c72c726aa45e60f12da34ae3a56f62c297' }, "Auto-Wrapping Tooltip"), h("udp-tooltip", { key: '135947f4097c79cfc6b548d2cd263533c2640e05', positioning: "above", content: "This works with Shadow DOM!" }, h("udp-fluent-button", { key: '46d2dfd14852bf3f6223f15f85b5601d8e87caeb' }, "Hover me"))), h("div", { key: '6709b19d3c5d890829b91c9acca6ee68c208884a' }, h("h3", { key: '28bd6a5155973ee5a918789563e637e4d69ccc64' }, "Message Bar Example"), h("div", { key: '52cf20b28a27d8068370ee82d49c89299bc39195', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-message-bar", { key: '7e9e931d762b851a4ccb2fbeb9d417e64d0720f3', intent: "info" }, "This is an informational message bar."), h("udp-message-bar", { key: '2f9be85b01d731556fa9d756ddb2f260fd17e982', intent: "warning" }, "This is a warning message bar."), h("udp-message-bar", { key: '3ec65b1bb0f04447033c63dbbcd9f1074e6ed066', intent: "error" }, "This is an error message bar with actions.", h("udp-fluent-button", { key: 'ee74859f779e23707a1113a0d38e594846ba9cde', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (h("udp-message-bar", { key: 'f5af3b8d64e49f51f6a4041091bddbb7d4000f45', intent: "success", shape: "square" }, "This is a success message bar (square).", h("udp-icon", { key: 'dc1d5a7e89796415354c0fb3188be90300571227', iconName: "add", slot: "icon" }), h("udp-fluent-icon-button", { key: '7c2b86365dbc0999822dc5b25c4312287748b449', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), h("div", { key: 'ad70349e1a5cbc2c345871c7f993870d155c5fb2' }, h("h3", { key: '8d761f238da5f183af39d5133b421742863f4842' }, "Progress Bar Examples"), h("h4", { key: 'd6ef6d3eded2d0d7332bd382bb7647c38ee212b9' }, "Indeterminate"), h("udp-progress-bar", { key: '85c12d201fe8b96b4ce5893e0bdfb1fada820f6c', thickness: "large" }), h("h4", { key: '07d84941bd21e6cf5c6c0235fd2ab15c505c5e0c' }, "Determinate (Success)"), h("udp-progress-bar", { key: 'e4b8a2973657ff90e0be96720d8b8cd3cc446793', value: 75, validationState: "success", shape: "square" }), h("h4", { key: '846cff45e7b69fe8eeae43b79c3ededce2005c8c' }, "Interactive"), h("div", { key: 'e73b5c33064a47a278f3238100996e7960c5038e', style: {
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
                 marginBottom: '1rem',
-            } }, h("udp-fluent-text-input", { key: 'ca5e4881e71d4a18b22cba6aa9c8e22e4a4fded4', label: "Set Progress", type: "number", value: (_a = this.progressValue) === null || _a === void 0 ? void 0 : _a.toString(), onValueChanged: e => (this.progressValue = parseInt(e.detail)) })), h("udp-progress-bar", { key: 'd868205951df4e6860c19d0182e2a9f10cccbc97', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: 'a2788315bdaf10be38463dea43cfabca25a9418a' }, h("h3", { key: '50f1386cc287e0667ca8421727476ef1f4dd45d2' }, "Divider Examples"), h("p", { key: 'ccf33ddc6c896cdf5bcbd08ac8f54166f027e367' }, "Default Divider:"), h("udp-fluent-divider", { key: 'ac5cdbdfff8f1a649783714f74a8b5ff177b9f93' }), h("p", { key: '3e59d4272fa7b7b876759b5f860db8c304a3f113' }, "Align Content:"), h("udp-fluent-divider", { key: '6925c8e565161500f7df2f7555b2602a38f90604', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: '584a0d2284075ab5a07910d7ec61c4cc79315585', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: '6e6b0254dcb64585981a14c7bc1b807fb4251ce8', "align-content": "end" }, "End"), h("p", { key: 'e0389d14de774a268b3a50062d354ee87bc805eb' }, "Appearance:"), h("udp-fluent-divider", { key: 'e173c248b31c2e1e91cbf20dd7a38b489a1510af', appearance: "strong" }, h("udp-icon", { key: '569e5d02ca5d955acc228b82a4953bea767f6240', iconName: "add" })), h("div", { key: '33ea1433d1ef48663db1daa38d8d9a507a980fb5', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'c5806cc0d65b76dc3cf1d3d2cc25a26331370102', appearance: "brand" }, "Brand"), h("div", { key: 'eccef1e18ce5afcee8910abce71d4708afc10fd8', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'a9e475250065e5fc6346be0bf805d336ad368d21', appearance: "subtle" }, "Subtle"), h("p", { key: 'ec7747c9ee1d65905a535404165960033bbc9fce' }, "Vertical Divider (inside flex container):"), h("div", { key: '2bc2f4bf5bc7adc4374e19b62df34f004a1a555d', style: {
+            } }, h("udp-fluent-text-input", { key: '740dd2da608e8b6af3f2107602ac3857db4b5af4', label: "Set Progress", type: "number", value: (_a = this.progressValue) === null || _a === void 0 ? void 0 : _a.toString(), onValueChanged: e => (this.progressValue = parseInt(e.detail)) })), h("udp-progress-bar", { key: 'b2dda92b20fcfeade5aa48926e486bbdfc6156b7', value: this.progressValue, min: 0, max: 100, shape: "square" })), h("div", { key: 'c1b029c3d0d676c8b87e11e25e0b5e1e3bb4c662' }, h("h3", { key: 'ce0ce2425846b779ad62f913726011df4d24aa38' }, "Divider Examples"), h("p", { key: '23bc63207378d6578e9c9409b3bf3755a421b27b' }, "Default Divider:"), h("udp-fluent-divider", { key: '9e4c3ae8be07c5b6c426bb329264770156dc9116' }), h("p", { key: '990820751b2c9dc457dd995742ab6aaef75c20cc' }, "Align Content:"), h("udp-fluent-divider", { key: 'ccac08a2a35b75b56bee460abdb28c10f5686694', "align-content": "start" }, "Start"), h("udp-fluent-divider", { key: 'e58ecd7c9ab898dc891a397aa3050d0268d3c2e0', "align-content": "center" }, "Center"), h("udp-fluent-divider", { key: 'cb5dede99f948589591e9a38636c0368c20fb9f0', "align-content": "end" }, "End"), h("p", { key: 'b31a3bcd204dc33f88930a75c0b4f78d36a6a6b4' }, "Appearance:"), h("udp-fluent-divider", { key: 'b109e20f375e9c7c1582d2a87b44b91fdae86867', appearance: "strong" }, h("udp-icon", { key: '8c674e724aa6b996c171f865a5bbf28c9b6350e1', iconName: "add" })), h("div", { key: '149502fc02f6bd96a335b433745b7b184b689f90', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'd807ac65751e7278c340a15967946cc8df6d8b8e', appearance: "brand" }, "Brand"), h("div", { key: 'd98881c01cfbd4d736b26942ca18a0fee698d65f', style: { height: '10px' } }), h("udp-fluent-divider", { key: 'da12ebc90414cb2db322e36dae167a2a7e1292e1', appearance: "subtle" }, "Subtle"), h("p", { key: '7130f6f91e9f8f1443d1dffec3c4f32cf9b9a67f' }, "Vertical Divider (inside flex container):"), h("div", { key: '5c2b2bb4db35c6396171cdf4c5b9232c9f288d57', style: {
                 display: 'flex',
                 height: '50px',
                 alignItems: 'center',
                 border: '1px solid #ccc',
                 padding: '10px',
-            } }, h("span", { key: '333244c443e04fe684c9e3c9301042bcccf4cbaf' }, "Item 1"), h("udp-fluent-divider", { key: '3d5579d1647af12b6d21eceaac68b58a12f1dcad', orientation: "vertical" }), h("span", { key: '256a9111d76dcc7dba202c240c5287a01b62a10d' }, "Item 2"), h("udp-fluent-divider", { key: 'af3455b99d29ac67e1040616ff37675cd3c0b78a', orientation: "vertical", appearance: "brand" }), h("span", { key: '805e66f370a4dd2a19e63b54a3e1623433674306' }, "Item 3"))), h("div", { key: 'e94ac056e8a7308f4c7d5bed1cb7dc97f47c0460' }, h("h3", { key: '38a7857c73ebfcc141a79b07f29f3ee9e28973f2' }, "Fluent Icon Examples"), h("p", { key: 'd08ecc4ed38eb7e35f9e19547dd63a41434df78c' }, "Basic usage (new simplified API):"), h("div", { key: '5001e48a61e5ec5ca8848066ce9b736633e2f0d8', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '13161f20c4c1aee65bf917cc75af9ff2c26fdcb9', name: "add" }), h("udp-fluent-icon", { key: '9341532c7e670248e874822ac19aeeb1cae58a72', name: "home" }), h("udp-fluent-icon", { key: '5155515f81ca248dc30ad0c533036883e47be5a3', name: "settings" })), h("p", { key: '819e70763a2371b2f9eaa8177868735ac7a8855f' }, "Colored:"), h("div", { key: '537e6ccbc81061d515f5f3150bc63982579d0da9', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '0ca369a1a17e13cb39433b1a2c77d31dd00e87f9', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: '4ecd0d2071ca6f3bad36b4a9569ffeee66fd13c6', name: "delete", color: "red" })), h("p", { key: 'ad2d75ebfae5854ff09cf2af522172b294998953' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: 'b7835777ff815d941a77ac5f0983f26ebe7ac652', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'ba09140d10a02f62eb813d9da88748b815ffa664', name: "home", size: "xs" }), h("udp-fluent-icon", { key: '351ee06fb8894f14f9d5960634bd4076321f385a', name: "home", size: "sm" }), h("udp-fluent-icon", { key: 'e6e0a670dd30d7e3629a406e137912658d432b33', name: "home", size: "md" }), h("udp-fluent-icon", { key: '5e6cbd7a3e03a06144c64035a1c39d41a82cb7af', name: "home", size: "lg" })), h("p", { key: 'c7ecefd4f36deedbe329e66f0a81d0365c3d639a' }, "Variants (regular vs filled):"), h("div", { key: '801197df75e2f40179e73f83d79086606e66f334', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'aa8355a86481bdd99ba74ea2eeeb3408736212d0', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '7298e568df494b18530b5a5dfc7753b1e4a66e05', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: '471a56a7d6c01a2690f4d445768856f2b1e30d04', id: "text", activeTabId: this.currentTab }, h("div", { key: '1e633f39b3e1dcc414d7f3d3b525b9160db2cffa', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '5de23485afe65df129274898174363501e42bacf' }, "Text Component - All Variants"), h("div", { key: '4ff6cc7eb098dd90150cebed4ddea92d3013212c' }, h("h4", { key: '6a902e48f73f6fd2ec319814ec743db7b340a782' }, "Display Variant"), h("udp-text", { key: 'acef62c4fda7db942504ecb2e884ddc7d7eb22ff', variant: "display" }, "Display Text (h1)")), h("div", { key: '61eadcedee69c40b819826a4e4a92e03dfd2449f' }, h("h4", { key: 'f590ade708fb42d017046e2118aa799eb51a5691' }, "Large Title Variant"), h("udp-text", { key: 'b532f6d0aaf49db7aa0a3789813d6a296d0a5401', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: 'fd6dccfbffbf3175044542481a99696573c98f55' }, h("h4", { key: '1b1e2a101ef12ad43b2d53c7ea95516e5a830845' }, "Title Variants"), h("udp-text", { key: '3240124338197c4ded60512513ba6bd6fa68686e', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: '44dce98a19cc404762f78181483f80039e60d9ec', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: 'abdc383cd4be36ad9eb5c040438c221e199de3ba', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: '41771c664381345589ea21105b290ba2b3a09404' }, h("h4", { key: 'd28fc88db883a181e7d2a165c68944fe322cc97b' }, "Subtitle Variants"), h("udp-text", { key: 'ba46a5e1064677c2f5300fd75ba8c45adf9bee99', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: '0bc952ab545b33354642e5cd9af2d83fac31cb12', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: '4c95eba2483b636fa3e11fd11186a69a2f4174a7' }, h("h4", { key: '8aabec17542a60378eebe4f92f0cbde10d5bc4b1' }, "Body Variants"), h("udp-text", { key: '07ac26bb90ffd8c589eeed2c4f3f3b92953e1cba', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: '413f05881746ce9f46cd6556e0d796e0e9452576', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: '45e302e95c492ec4db14f2c4bc57a67be8331731', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: '60891ea2f4bdd3140d976678a793f7f64a137863', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: 'c2254624baf7ff5f52f035e1f077cfe23fc1d5c5' }, h("h4", { key: 'af7e6cc35c37420e821ec8cb900884d9429fa44e' }, "Caption Variants"), h("udp-text", { key: '29097b5ad8aeacf7fca44a9d701ce644f9bcb5ba', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: '58e4525489bd8a6daf94b1cc935347cedb612111' }), h("udp-text", { key: '81daeb313d62c34225e4ce29d1701800cfd3c05a', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: 'd9b683d01870f2f11ddde6ec6aff6be7436a64f7' }), h("udp-text", { key: 'c0867df8e47aa0d43a84c924cafddd2051f58d3d', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: '99a9dbbd754d53f93a3f615876fc6c24cd3b4dfd' }), h("udp-text", { key: '8dddbbe824472dec44bfa4d9009c5725bbad342a', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: 'ea90994227bfdc4fad84e6ac12333700808a357c' }), h("udp-text", { key: '47084c2285fffe3f5a9de53f2db5c7b54459d2ec', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: '59bdddec5575a63ccdbbbdaf8f70b9252755c98c' }, h("h4", { key: '9e0734307e09a4085c647337b4d5c173c3817b40' }, "Text Alignment"), h("udp-text", { key: '29aea473bff9cfee154a36744ecf0a375c0d19e2', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: '2d87e540a75ef43e752aa1066ec94fb523c50188', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: '54e3d78cf5e5fefad49775c083debd94e75ed89c', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: 'aa2394c29efc6d5ec11d6db2e829e68cc4cd4851' }, h("h4", { key: '9d2028fc32c998fffc3b1ff9011869dc77f5ead5' }, "Text Styling"), h("udp-text", { key: '235c1501afd71ed2dca479d19dd0fa0e55b9ef26', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '28a3cdff1c88252a3fd6b44587967d1c11596fa6', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: 'd9eea48e8c60c7d7744231da7ecaeac283223dc5', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: 'f3514a2f671c3edace30a6d712052237a19a0a32', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: '281306d725bf18e5aa11f14662feb75aad9721e0' }, h("h4", { key: '23f3c8e2eac16d5a9bb43fb1792963946e2be22b' }, "Custom Semantic Tags"), h("udp-text", { key: 'e5ef7c2a3c1355556e2a51abf1f094f26bc2e462', as: "h1" }, "text as h1 element"), h("udp-text", { key: 'c4f2df5862bdbbcd91cfb6a8a623c28525bd0957', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: '0a1ebbd5a0961885b543f12d487a5ca52cac57e0' }, h("h4", { key: 'b289f4567b7f99a913f4c1949de4aee1f88dbba1' }, "Font Variants"), h("udp-text", { key: '135e5d9d20806c7d280b0eba2108776b04aed0b2', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: '48906e8aa6d9ea2f10efc722a3b12b1cc5951505', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: '8a79dbe8fcc8c80002c99d3e201bcb8a7279116e', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: 'd25677b707f4c0a49012f00d6111786167f8f5be' }, h("h4", { key: 'f2ecbc915ba2445b9816657572558032ef85b5c6' }, "Size Override"), h("udp-text", { key: '2a508d8ddf7b2c968e4e405999b23cd129cee2cc', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: 'eb37e0dec4fd6d66da85f06a87a271729750fdd7', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '2462846ea539b4f1ec06e41e6c7e896967ca8d4e', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: '55a5b70a842b2ac38b74b3982a7d6eeae2fa29f7' }, h("h4", { key: '97f984363429aea12b614e740a6225a97cb438c7' }, "Lists"), h("udp-text", { key: 'a229c279bab6b11d969ad97276fa6ce1c4591832', variant: "body1", as: "ul" }, h("li", { key: 'bc878ae9b273a672ab561a858cf47013fd4c6c4f' }, "First list item"), h("li", { key: '24db49505571ef816c51305fdca0c3c5d8ade7bb' }, "Second list item"), h("li", { key: 'cb9021a8bb3c036e8fe264375271a8587c164bd3' }, "Third list item")), h("udp-text", { key: '01836f6efcae5a35a2ead4b59fb399c487268217', variant: "body1", as: "ol" }, h("li", { key: 'fc184bdf81d7cd33aee1617a4b300a254601e39b' }, "First ordered item"), h("li", { key: '7a03ba1729a89c51274ea683617bfa8347929d94' }, "Second ordered item"), h("li", { key: 'd55e0124eeeaa0dd5d2d725d004ff35436627efb' }, "Third ordered item"))))), h("udp-tab-panel", { key: '00aa0d4e2c042bbf12fa4eb9a745c4794954c1e6', id: "menus", activeTabId: this.currentTab }, h("div", { key: '811cc275049f45ab679f64998720e89e8264896d', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: 'd6f5ca6e7afe5f1985fbdd231448c3ae663d0013' }, h("udp-fluent-menu", { key: 'a9d41b1041d1f2a48f06da5b92cc9c34825dfc12', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: '097ca2e38c7da71d98f048c019c55491ab695a8f' }, h("udp-fluent-menu", { key: '29598112299fc3de48842c32ff411d9ebd4e934b', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: '0afa3ae23f102753411af589148e3abdc17d46f5' }, h("udp-fluent-menu", { key: '88563137aba8c16cc406090fc3c8bb417064c0f2', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: '9f86d8231f2ceac2b29292d8082d6a3deaa3b9ed', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: 'ffde4c595153b108773f080e8742b041c42d26a4', slot: "slot-test-end", style: {
+            } }, h("span", { key: '949c3f42383aeb454af50263566939746ae02bfe' }, "Item 1"), h("udp-fluent-divider", { key: '32501ff8f93a48e9bcb3da217283698e421e162e', orientation: "vertical" }), h("span", { key: 'e59aea9c027fec6cb4fec15f5a65162f5e0555a3' }, "Item 2"), h("udp-fluent-divider", { key: 'b7f357dc17bf5debb609a3c5cd5532cef0859d26', orientation: "vertical", appearance: "brand" }), h("span", { key: 'd0a6b9254ae004e7f137dc569b653f12039d2d51' }, "Item 3"))), h("div", { key: 'afb0078edd8f1fa66461dbe778614ef6b409ed8d' }, h("h3", { key: '8065dbf16dd3114762ddbefbc443937bfd7602d9' }, "Fluent Icon Examples"), h("p", { key: '51044c3113f5291337d2010de72d64841028fe83' }, "Basic usage (new simplified API):"), h("div", { key: '8bc7c0797842640871e7d031f5a5372f1ed152a6', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '9ee788cbb5cd10e59965f8b963c1f5ea0204d041', name: "add" }), h("udp-fluent-icon", { key: '8901e7b5a636b00df07065e78b17b5e7f70c923f', name: "home" }), h("udp-fluent-icon", { key: '6f3b282efe40abe6ea726d432a649c8296e0bda9', name: "settings" })), h("p", { key: '52ef93c801604ef54a0f3a1c4df63da18394e133' }, "Colored:"), h("div", { key: 'b1c65ab33791399c5315a477db9ef727e65038df', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'f5f6b380d9ee2d12ddfed4ecd3877c8abb024fbc', name: "add", variant: "filled", color: "green" }), h("udp-fluent-icon", { key: 'c3208182c81fc385e901caf2661480a17e18227b', name: "delete", color: "red" })), h("p", { key: '1f6c84b57822e26d98e217d895cb7400beea9b7f' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), h("div", { key: '46ef5ec269427ff516300029a19dd340584dfd71', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: 'd4dd1aa55b8e5be00a30294e74114c297b68b14c', name: "home", size: "xs" }), h("udp-fluent-icon", { key: 'ef7a5fed6b38072b4ed7af72c54a3fd9c630f6d4', name: "home", size: "sm" }), h("udp-fluent-icon", { key: '703428e322d4690b431f7702b262ecb9a39d668c', name: "home", size: "md" }), h("udp-fluent-icon", { key: '3b0260ec7ff93e5f6fb759c3b8bf5dd2ead5f536', name: "home", size: "lg" })), h("p", { key: 'c6305854d59e3379ee3d1941b9426eaba1eea838' }, "Variants (regular vs filled):"), h("div", { key: 'a3e344ba6f6c0e2d131e8714f2fb68c5349f84b0', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, h("udp-fluent-icon", { key: '634d1679ff10b3fc68885ccb6e82ecbae533d9f3', name: "star", variant: "regular", size: "lg" }), h("udp-fluent-icon", { key: '1808ffc37a71b6ec3e21d8061aa22b8f767606c3', name: "star", variant: "filled", size: "lg", color: "gold" }))))), h("udp-tab-panel", { key: '9061491c7408ef518c93e4510c0342f4196b00a5', id: "text", activeTabId: this.currentTab }, h("div", { key: '42158fd01324be5ac6580d127e3cf517db55800b', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("h3", { key: '19955508b8ce1e974f2718b3f368ff2249563e76' }, "Text Component - All Variants"), h("div", { key: 'cd20ac11a81b0a18840a65fb25776ca7ba9ba8f0' }, h("h4", { key: 'fc43111ddef3bf567c20b4f60843144abdbc73cd' }, "Display Variant"), h("udp-text", { key: '815fc4167ae4cb1855db99460af931c54428c422', variant: "display" }, "Display Text (h1)")), h("div", { key: 'b4b2b4052cc782e20d0c7ed4bfc53661c7e8067b' }, h("h4", { key: '208f0f42c37d1da8798bb1abeec4d9312ed9e7e1' }, "Large Title Variant"), h("udp-text", { key: 'f90529216b82c76cc2fd883cc3788c01f12a1fcd', variant: "largeTitle" }, "Large Title Text (h2)")), h("div", { key: '5953ab7ce98fc9ede62e35266b58a7fefc055531' }, h("h4", { key: '6f89ce02716c6f55724907fb150a2fed11d0da1b' }, "Title Variants"), h("udp-text", { key: '6becaa1002625599a274c54fef2a8d7392836aaf', variant: "title1" }, "Title 1 Text (h3)"), h("udp-text", { key: '26107029e3ff5f2f3324080cfcbc4f927f7cab17', variant: "title2" }, "Title 2 Text (h4)"), h("udp-text", { key: '8efa0ccb5fe059e835f1249dcad355921a5d7d64', variant: "title3" }, "Title 3 Text (h5)")), h("div", { key: '82102e3003627b38457b6080657f0d1df1bf6d40' }, h("h4", { key: 'ff3e79501db293156d8cf8df92d27c2acd4d657b' }, "Subtitle Variants"), h("udp-text", { key: '174c06c8299b92577a434ffb93f0944cdcbcc8a7', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), h("udp-text", { key: '7de1a0ca543e14f9eef0856750c5cb3b6b09bd24', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), h("div", { key: '39fe2b088383f16fa2af20ea26fd2f67af619176' }, h("h4", { key: '472e5693b40fec8fae2dd5b75ab59ac2f8fe7e95' }, "Body Variants"), h("udp-text", { key: '2aee779b847fea987a9cd08035c240ceed7d85be', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), h("udp-text", { key: 'a2729ead635e58a09332ed8e11e7c6aa057b6d8c', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), h("udp-text", { key: 'cbadb54e7c02a661dffa6eec403bc30978bf73e8', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), h("udp-text", { key: 'df56890ce3b82fbaf497ad094cf86a3a8b7771e0', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), h("div", { key: '4d3e11a28bc6981e5d1438d4aff3f6ef570af346' }, h("h4", { key: 'e55f6012ac4b09ddf2a961768e6c3326c719f409' }, "Caption Variants"), h("udp-text", { key: '101f698517f16e40f1bc5a9426d3d595ed6e0a9d', variant: "caption1" }, "Caption 1 Text (span, inline)"), h("br", { key: 'c82297bb0390e94c31e560a7b6435504ff25abe9' }), h("udp-text", { key: '892f817148acb710d89167bb7e86a447993f6ee6', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), h("br", { key: '49cc7284229bbe1bc365188e358e3835fbd38cee' }), h("udp-text", { key: '76414d1d212289c51723a55d97a5d3da6668112e', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), h("br", { key: 'f2d4edd51aceba3c1b5797c0df6c44c73130614c' }), h("udp-text", { key: '9b87b6b4b833a6b70fca0d0391b1366a879b0b6f', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), h("br", { key: '75910dcc73dae664d7f82ee2ffc92c8c86adf812' }), h("udp-text", { key: '4ac1b89267ba36e4b85b0479a68b979523e51e1a', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), h("div", { key: '33d91d6bc2df8df1cdafa8708cb69eae03f5d680' }, h("h4", { key: '00cfc23ea8e5032482e0d659d47f876e28f5f014' }, "Text Alignment"), h("udp-text", { key: '52850e1292d7986ca7161904bc09135d453d9c20', variant: "body1", align: "start" }, "Aligned to start"), h("udp-text", { key: 'c41f33e30c168e4cb5f802753605c94b410481d2', variant: "body1", align: "center" }, "Centered text"), h("udp-text", { key: 'b7c0fabbf8587e0ab2f73d827bc3f829b2147576', variant: "body1", align: "end" }, "Aligned to end")), h("div", { key: '703ee79f1eaae0231ac61c266c615f5ea5fec6d5' }, h("h4", { key: '1054bde800cf17649dbecb1c81a879e0b697e335' }, "Text Styling"), h("udp-text", { key: '7821df898438bf0702d039787ad00b0be9eca6aa', variant: "body1", italic: true }, "Italic text"), h("udp-text", { key: '3bc080c0ee2267c0c1339136e0020cbd91571b17', variant: "body1", underline: true }, "Underlined text"), h("udp-text", { key: '4caebcfd35cc80f55158258daf79aa407633fc4a', variant: "body1", strikethrough: true }, "Strikethrough text"), h("udp-text", { key: '9e7073072d1d5680d7d388215d0ee1102cad78f6', variant: "body1", weight: "bold" }, "Bold text")), h("div", { key: '77d272c771c34dba5f6f99fb7ee720d74c58c743' }, h("h4", { key: '17ece7137fe4f964d94e3c483fb84ca4d7f32ded' }, "Custom Semantic Tags"), h("udp-text", { key: '39755ecf77e42c99174074ae7b4eab2fe751177b', as: "h1" }, "text as h1 element"), h("udp-text", { key: '673b2f4bff5af8c2c0c56845805bf68dbda8b956', variant: "caption1", as: "p" }, "Caption text as paragraph")), h("div", { key: 'e8323a13cf76eda241134f81f886459d3ad01d6e' }, h("h4", { key: 'd9ab19fbfe1098b9fca8a08ddfa26753548eaa2b' }, "Font Variants"), h("udp-text", { key: 'e8664100b4ae37e4e9e69af3778c0bf45d0fbafc', variant: "body1", font: "base" }, "Base font (default)"), h("udp-text", { key: '38e11a31a0d8bbf35264aa4861fc4afac36f2e8e', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), h("udp-text", { key: '52a7644e31499d395237032bf032f9ab6481977e', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), h("div", { key: 'cdc154b83212b95e06c8ea2de0ba37154e1dabe7' }, h("h4", { key: 'd44a775577d89517f846c64f0feb89f3c2257e75' }, "Size Override"), h("udp-text", { key: '575308b06fdf994e4b7449fa3f5971d821a58d20', variant: "body1", size: "200" }, "Body variant with size 200"), h("udp-text", { key: 'e596a8db486ef37988b2f2f51a6838faba14dc5d', variant: "body1", size: "600" }, "Body variant with size 600"), h("udp-text", { key: '65e1308031cdebe08a72f7793e87fc9906de4690', variant: "body1", size: "1000" }, "Body variant with size 1000")), h("div", { key: 'b83b0c0d342a0840bd810dd64cac688aa7b88160' }, h("h4", { key: '0be4f9b3587be6d6fcc2245a0f15bb6db5d3da4d' }, "Lists"), h("udp-text", { key: 'b14c6454f28ce670231b6e1844ed3be18d9f453b', variant: "body1", as: "ul" }, h("li", { key: '43d751fe5a10ec5f47fa4c5dc353b16c5255d86c' }, "First list item"), h("li", { key: 'f54de0ea90e30bda8134965448c15fed9d7c2d4c' }, "Second list item"), h("li", { key: '06cc15e35287b6974cb963c3e59e1ede8e52f30d' }, "Third list item")), h("udp-text", { key: 'f2178019b003d4567ae6b093f323ad8c190f57f3', variant: "body1", as: "ol" }, h("li", { key: '7c0b27016a2e2e8c100a4c2c6e2adf9e7b5994dc' }, "First ordered item"), h("li", { key: '4157bc9ebebde329fe1a819f79646dda4646c189' }, "Second ordered item"), h("li", { key: 'b5bd89272c56938cb2402ff4bdafd57939a399bb' }, "Third ordered item"))))), h("udp-tab-panel", { key: 'e09ec247aee6bbc0c14af4b2b88a3748f282635e', id: "menus", activeTabId: this.currentTab }, h("div", { key: '528334b1baaf0100c2e802bd3f68a454a81af316', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, h("div", { key: '38b76ef11eba3a3df0e85f9079b5506f75b0acf4' }, h("udp-fluent-menu", { key: '1768f62fa29af9d8ca8ff6a4ea3231ecd6068b2d', items: this.nestedMenuItems, label: "Nested Menu" })), h("div", { key: 'd4f4c26e153846cc898a85c9bfe67eb749a8c1e8' }, h("udp-fluent-menu", { key: 'ec8fe2cfe87e2e07873915c8a9dacf75597fb72d', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), h("div", { key: 'bee5317fe4aa275a5dc99d2657d68da2aef53034' }, h("udp-fluent-menu", { key: '8785cdb3add784ad2914ea3cbe33bee14de9c7ac', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, h("div", { key: 'db4b00a2e2ca38188b624bbc1057c3c1c8e26a48', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), h("span", { key: 'd8da4b6bdd4c55ff0d5868e1dac87d588046dc96', slot: "slot-test-end", style: {
                 backgroundColor: 'red',
                 color: 'white',
                 borderRadius: '4px',
                 padding: '2px 6px',
                 fontSize: '10px',
-            } }, "NEW"), h("span", { key: 'c18208462cb7bd71063159ad646caf9c565101cd', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: '30e7587aee8cfd03becc6d514691aace0f1c2376', style: {
+            } }, "NEW"), h("span", { key: 'fe2933edadf9522cbeb3f82b8d9a44557bfdf50f', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), h("div", { key: 'eeb74aef44dccdf1f150a27aa700d80a9d5df277', style: {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 border: '1px dashed #ccc',
                 padding: '1rem',
-            } }, h("span", { key: '762ca1d47a2db2448a9089bdc469ca436c72933f', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: '4fe9598983700ab1143a77ff4ad1b4ce78b33bb7', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: 'd7337245b13d8fa5ae9554fafe06f63c801a4e5f', items: this.radioMenuItems, onCheckedChange: e => console.log('Radio item changed:', e.detail), label: "Radio Groups", buttonType: "icon", endIconName: "more_horizontal_20_regular", shape: "circular", appearance: "transparent", openOnContext: true }))), h("div", { key: 'ddc135648c7f8b71c7a9fbbe6cf2cf3a224f823b' }, h("h3", { key: '8a418188d541ab87c59300c1d2179564996a508a' }, "New Radio Group Example"), h("udp-fluent-menu", { key: '4a39541816cf1638fdfffb4ad187c9d379cdceb0', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '1557c0ab16fac836450687ccc2834614bf185137', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: '40455541289bfbfef536605de4eb303bb0f9ffda' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '9991dbf2551f8bdb408e5c1a47c8eb07e6e872dd', items: this.checkboxMenuItems, onCheckedChange: e => console.log('Checked changed:', e.detail), label: "Checkbox Groups", buttonType: "split", onPrimaryClick: () => console.log('Primary clicked'), shape: "circular" }, h("udp-icon", { key: 'f7dc12040b1ab6e1802fd21d6c3f038285b9425a', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: '3d86c0dd6c19e3cc668d1d84d07b60e04ecd04bb', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: '2538d05bffe48b2b3dbb6f620529267502cf97c7', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
+            } }, h("span", { key: 'a5bd09fbb99708406bb2e8e5089abc1c3f775b7b', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), h("udp-tooltip", { key: 'ad2726ab98706cf206102bbd2015da142906f64d', positioning: "before", content: "More Options" }, h("udp-fluent-menu", { key: 'ebd2f0e804f6dfe0ae8a4c2de4f1f54b5de746a4', items: this.radioMenuItems, onCheckedChange: e => console.log('Radio item changed:', e.detail), label: "Radio Groups", buttonType: "icon", endIconName: "more_horizontal_20_regular", shape: "circular", appearance: "transparent", openOnContext: true }))), h("div", { key: 'ad74c9b25c3cbb2205120c0140c520008c8467cc' }, h("h3", { key: 'ba375eaddee10a6e45af3800be15f72349808d36' }, "New Radio Group Example"), h("udp-fluent-menu", { key: '00bc97736e57296a4324b616dc46febbb0269a68', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), h("div", { key: '7e5a52bb673728dbfca40aec7dc932605269d0d4', style: { padding: '1rem', border: '1px dashed #ccc' } }, h("h3", { key: '8f44971154efa9b004f15a34d854205d98babfdf' }, "Menu at Bottom (Testing onClick handlers)"), h("udp-fluent-menu", { key: '5561e2582c59b337c5519bd9aa65d7c5c68d84a3', items: this.checkboxMenuItems, onCheckedChange: e => console.log('Checked changed:', e.detail), label: "Checkbox Groups", buttonType: "split", onPrimaryClick: () => console.log('Primary clicked'), shape: "circular" }, h("udp-icon", { key: '8b1486b295de9e7685f42d4eace70ec408294201', slot: "start", iconName: "add" }))))), h("udp-tab-panel", { key: 'b961a0a978e6d7d40b1837e91087b6061dc42af0', id: "grids", activeTabId: this.currentTab }, h("udp-lazy-loader", { key: '207ddc9a9f3be697c933bf9cc6c6eaa37c21ab5c', if: this.currentTab === 'grids', content: () => (h("client-side-grid", { columnDefs: [
                     { field: 'make' },
                     { field: 'model' },
                     { field: 'price' },
@@ -514,7 +514,7 @@ export class TestComponentsPage {
                     { make: 'Toyota', model: 'Celica', price: 35000 },
                     { make: 'Ford', model: 'Mondeo', price: 32000 },
                     { make: 'Porsche', model: 'Boxster', price: 72000 },
-                ] })) })), h("udp-tab-panel", { key: '51242bef07ce5451b17f62bce5cc9d3b80abf50b', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: '725905abb2a3c7ed23e7d26036a208fada26ce3d' }, h("udp-fluent-button", { key: '63eefcb0a4f62c09989969eefdf5b7bf0e4e058f', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: 'ac8cb9c6d1db4c5a7c4210b45bb4de74fc81420b', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: '8b6afd18ab356bef42452d13414e59f7e48298eb' }, "This is a simple dialog example."), h("udp-fluent-button", { key: '51503ca5fe199aa362536c9130fef008de1c109d', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: '4b294c9a5607cf14df8903de901b7cff9339d682', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: 'dc7f6af08ab6da691afcf82ebc9dce5512eb9ddd', id: "cards", activeTabId: this.currentTab }, h("div", { key: '0a55a6c9498ed775ea709eae969594c6f4fa7e82', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '2595568dac2b549f8dd6137abeba2cdf16c297ee' }, "Cards"), h("h4", { key: '56b0092f6d9a7b6da5ed0e6eec087e559948c3e9' }, "Basic & Outlined (Default)"), h("div", { key: '21bebe2f6506edd17bfb3dad9976bdc78e488d3a', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6108171065bb5c15827aa0a3477119a57f55fbe3', appearance: "filled" }, h("div", { key: '4f086ca9005f1859df75c4f48f52e4480a3d0b5e', slot: "header" }, h("h3", { key: '8927c10308bb804ef48c97463d7f5339bfd4567a', style: { margin: '0' } }, "Basic Card"), h("span", { key: 'e988fa7d31762fd614b14fe99b6ec043d183751d', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: 'b7b01fbd8664204a902f9928b0211761a8158d0e' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: 'b150152d08e9a9e81cd6c2a6355bfe8ba6faf2af' }, "Elevated & Media"), h("div", { key: 'c7a7cd272f5f583c7cd2499cdaa68c53dbdf97f8', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6b368fdedf42fb39a7e8eb3124cdeb1fa3d3ca2b', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '753b9c7c4e65b6203053160ffd3b4ab9b998f822', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '83a5a539fea21401b7178454c71d26593ac4694c' }, "Card content"), h("div", { key: '794dddb085167b652a610481301fc3f44aabff89', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '4ec6cfaff63546f8d6d5ac02777eba7be0c34117', size: "small" }, "Action 1"), h("udp-fluent-button", { key: 'e79faa72b5e7bfbdd45c29bb47ff148328b5df9d', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: '1ea2a0741dd7d71cd351ead42755cbbdf7234cdf', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: '7ea870fffa152b84e5988fc27c41d28dc13660a6' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: '794f1b2ab96289083b8ef8319b03cc3f1f68f8ba', slot: "footer" }, h("udp-fluent-button", { key: '77661994153e89ceca4c29e4a2139665cd67d28a', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: 'c788c938e639a6159810d04a37a0b91835878fc7', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: 'b12ffb2a599acf4fe359afc97a25489273116050', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: '333e446b8be61229e08826199143071088e21010' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: '9ca29399787df637641f0e6c708d3ecd608f7aeb', appearance: "muted" }, h("h4", { key: '29f46d1b38921246004ac2dcf90bde0c9a1162c9', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: '83621f85fda9e172a80eaa1a37896a7cc1054f13' }, "Flat with subtle grey shading."))), h("h4", { key: '1355a4872433b49f73a70dbddcb925d95b79f185' }, "Horizontal & Sized"), h("div", { key: '92a9983cb7d2ad2c4c98d988fc42682fb1c10c2d', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: 'b39b6d3d70974d82a4fc5b340ce4174e8af98d52', orientation: "horizontal", width: "400px" }, h("div", { key: '09c86e6317d5ad50a53a237685b89ae2b22ef45c', slot: "preview", style: {
+                ] })) })), h("udp-tab-panel", { key: '611f7081c5f5a5e944bd3d61b2b0f7783090c7f9', id: "dialogs", activeTabId: this.currentTab }, h("div", { key: '98e221d954d163cbb8f9e1daee827936088f1192' }, h("udp-fluent-button", { key: '8ea4674f753f07f7003bb54ede8beb21fba87221', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), h("udp-fluent-dialog", { key: 'fd736dbb071b2dbbacf85a7710ffacdebc662afc', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, h("div", { key: '81228808f36ed196e99c3dc42cb4fb2dc630ec41' }, "This is a simple dialog example."), h("udp-fluent-button", { key: '9d97aa4e3e028b03642953654d844dd9d6c74c46', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), h("udp-fluent-button", { key: 'adfd1d446af0eb2598c1df104a2da110f920e40d', appearance: "primary", slot: "action" }, "Confirm")))), h("udp-tab-panel", { key: 'b9fb3c07db15a11f001351c324949ede16f207b2', id: "cards", activeTabId: this.currentTab }, h("div", { key: '6d1818cad04a021d24a118847515f7aa319726f2', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, h("h3", { key: '9d156fb3b4b73423b94673335938d84e0cb7c211' }, "Cards"), h("h4", { key: 'a2ffc49ed0848d086ca9e2e2b38bdb5ce176300f' }, "Basic & Outlined (Default)"), h("div", { key: '2ef335dd7d90637cb6c8fc05b7301f42cfde1a70', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '70829bee58c2ec8285a44a444d53fbce8751b376', appearance: "filled" }, h("div", { key: 'dfcb7b7f222eaf8e77f245b51c94255130dd9012', slot: "header" }, h("h3", { key: 'f6b00b7fa2ec7a5891c9a7861181fae72a8c0173', style: { margin: '0' } }, "Basic Card"), h("span", { key: 'c8d30963ccf89f556d606123649c356e7c61425a', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), h("span", { key: 'd05b6fe416a7c7357becd7e25c881c25c922afbd' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), h("h4", { key: '6d2e56c8b2d5767810f31f3a9d89e6060cabd8bc' }, "Elevated & Media"), h("div", { key: '5ba088c7b7269a07d8b3eab80de07d25efdd35a5', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: 'aeb986059cf19e9e6d1123938f9bf64da08019cb', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, h("img", { key: '9801355d1a8068a994c3452a7f9a26f91ee9d488', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), h("span", { key: '335ce1eab18d86a827cecdef09299272b73c1b9d' }, "Card content"), h("div", { key: '51d47a4d29bd753e77f190a338edd12c78ae4548', slot: "footer", style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '1641ee437373db6d6d538097c7db6f89837db400', size: "small" }, "Action 1"), h("udp-fluent-button", { key: 'bb33a0b8c4a57490ef6398bf2cda70af2a67f789', size: "small", appearance: "outline" }, "Action 2"))), h("udp-fluent-card", { key: 'ba1f891b2aa1abf587f77c8f76d037f7cb0ee5f0', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, h("span", { key: 'ad929628071f1322c5618228cc91f04960e70860' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), h("div", { key: '12eff546d98f7a685bf418bf1c8d261e268d12ad', slot: "footer" }, h("udp-fluent-button", { key: '38d4bdec852840c087c23791896a098997c2ed04', appearance: "primary" }, "Dismiss"))), h("udp-fluent-card", { key: '38034b70915f98fe91c225b6a064669e04c8f655', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, h("udp-fluent-icon-button", { key: 'b594a04bcc7488d4e88b7f4c22983b2be5f56159', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), h("span", { key: '8b9c1fbf27a737f16f1090e8acbca4d04e7b060b' }, "This card demonstrates the header-action slot with an icon button.")), h("udp-fluent-card", { key: 'c9f7c868be35f782de8dcf063990a59f17dd7b00', appearance: "muted" }, h("h4", { key: '1a85d7b49b40edae1a63ead9bd953f064a174111', slot: "header", style: { margin: '0' } }, "Muted Card"), h("span", { key: 'fa980e6c65a542b828db0aee4c6186534c167bb9' }, "Flat with subtle grey shading."))), h("h4", { key: 'f4df5b5d26cc98354243b5478cc95dfba2e2c2ca' }, "Horizontal & Sized"), h("div", { key: '4f949b219111544edf3d675cb2711d11147b6c58', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("udp-fluent-card", { key: '0c0e1a5ff93e8cd224c471eeb47e7ef317e9bc47', orientation: "horizontal", width: "400px" }, h("div", { key: '6ce20fb5151344423e3da874db695454b1390bd0', slot: "preview", style: {
                 width: '80px',
                 height: '100%',
                 backgroundColor: 'var(--colorNeutralBackground3)',
@@ -522,7 +522,7 @@ export class TestComponentsPage {
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontSize: '24px',
-            } }, "\uD83D\uDCF7"), h("div", { key: '523ff32c37911b7d94aec06b3ca3b580f255350d', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: '84383ac693ce128e671054a5b83d95ed2dbccdd7', slot: "header" }, h("h4", { key: 'd6afc4579edc9b0235f917c418ae01e2e215a80b', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: '4b922e7c902907c87caffd8ec9a20a5a4b7e7f37' }, "Fixed 400px width."))), h("udp-fluent-card", { key: '1300596ff7cd5f7cdf1bf9b7909095f7c03b547c', width: "300px", appearance: "filled" }, h("div", { key: 'be7a8e1212f90788d03d0e14cb78d6e3566926ef', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'a60d78a29413cabba2e8dc5c5e18769e1f686c2d', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: '06e487b2bc9ed448121958e77e342f42f3ea50e6', name: "person_20_regular" })), h("span", { key: 'f51901590639419d21783b77d81c436baad95b2f' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: '2571095067154e0ad53c27c4b01fea370c1ce809' }, "Complex Interaction"), h("div", { key: '1bc2a80c22ef1e47139a17c2071d91c5503eacd4', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '8c59fa896755469fcd140c534988d7e3515ba161', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '39f25edd39d129952a41f6b6c905f02b5a560981', style: {
+            } }, "\uD83D\uDCF7"), h("div", { key: '51b50fb75f90fadd2837918012372dbfd6ab14d1', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, h("div", { key: 'fdf7b30429d6a89ccc4c1bd0ac56bac95185e718', slot: "header" }, h("h4", { key: '6e157a9fcd5a0ec43a3094b6aa0db68e6f753929', style: { margin: '0' } }, "Horizontal Card")), h("span", { key: '14d33efeeacb3578cf14c28b18c07c694ee6cd42' }, "Fixed 400px width."))), h("udp-fluent-card", { key: 'd7950aa84eaa206c74ffa019c0a3e3e07a37cf5e', width: "300px", appearance: "filled" }, h("div", { key: '69a0f6c5261327d8416f3ea2272e5b7fa57d6c62', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, h("span", { key: 'b4d4436867f934db8f56afe3ec858017d8303f72', style: { fontWeight: '600' } }, "Fixed Width User"), h("udp-fluent-icon", { key: 'c9037b4b1eae9c93e6b402c03a6c0d3cc32eab01', name: "person_20_regular" })), h("span", { key: 'f9e486ae96bd6e1bfc09e418125128d33966d8a0' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), h("h4", { key: '97414297ba0b8d6b5be4e784c36a2ccc92b86d67' }, "Complex Interaction"), h("div", { key: 'e3809ba88425145900456a1c2067cebb3ee0145d', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, h("udp-fluent-card", { key: '6078b9865ca44f56e4f8d00b71f566e20cdef4d9', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, h("div", { key: '2d6742805d89224d04c9c628056fee2e802dd464', style: {
                 width: '32px',
                 height: '32px',
                 borderRadius: '50%',
@@ -531,39 +531,39 @@ export class TestComponentsPage {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: '7d1d02d5716589b4d23fb4d9da35b60987f4ebe1', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: '178e360a683605c216ccb6134349be3f16f5fc82', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: '7bfff0201fc4b7189b318e704744e100a887bc12' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '7dd77b5d5610246219a70cbeb2787e86db31c319', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '24154f6f130e4a88caa215c60aaa508048affae3', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: '256b2eb0f470e6be00108569847184da4fb10926', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: '276c5a37bbe1eee0152a63038d8853021c699b5f', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: '7fb679f743c43c1f6f5eb3a0cab3e4620d958841' }, "Flex Layout (Grid System)"), h("div", { key: 'd09f350f46719ed74bbb29d5410d40c86d943769', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: '9a4b53827f20f4e7727afe613821881258ecf5df', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '5087ba37f7b427d5e27ce3815d32cfcea73fdda9', style: { flex: '1' } }, h("udp-fluent-card", { key: '999a31706413774f46ee8d84eef89efd766963c1', width: "100%" }, h("div", { key: '36e567e92ad32937ee2f6d81827be5453ead04f3', slot: "header" }, h("h3", { key: 'da8ad1597f89061b501f8c75c70142e086af826b' }, "Card 1 (50%)")), h("span", { key: '3c5683fbe18544fa0a276325f2f3a89985713b81' }, "Flex item 1"))), h("div", { key: '33f4d9d1d6572183cbfa262416f70b730a04116f', style: { flex: '1' } }, h("udp-fluent-card", { key: 'e0fd48da7f1fcc40c048788bf1c377d0fa687fdb', width: "100%" }, h("div", { key: '67fc16262e5e33265c137411ef2c3828571d14c2', slot: "header" }, h("h3", { key: 'bc0785e87a8dab84fc8dbe9ad128449a80bfac46' }, "Card 2 (50%)")), h("span", { key: '620a8db35513e472f237bd016bdf4a614f4d3b56' }, "Flex item 2")))), h("div", { key: '4cdcc44dfbf5673d9d9d7665120abceafc451d08', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '49b8283a73fb7ec5d97d0297decdfaffa529bf57', style: { flex: '1' } }, h("udp-fluent-card", { key: '1b1e4e15bf4208a284948eb0c911ef2df48061c0', width: "100%" }, h("div", { key: 'c65051082f6b49f33f5eb10f8d8d2713ba8e573c', slot: "header" }, h("h3", { key: '920589078aa2d01f7f6ab311527a2f7b3abada7e' }, "Card 3 (33%)")), h("span", { key: 'cca6c7694c55e8e90a5e1496242d4a6964ac8e78' }, "Flex item 3"))), h("div", { key: '68831e10df853a158f664aa7fee3087169d7a3ae', style: { flex: '1' } }, h("udp-fluent-card", { key: 'd54be26b74b0fbc34cfc9d55e53194c12b17407f', width: "100%" }, h("div", { key: '78e0be3d1634804a22fba85bb4d0864d66f6b8d2', slot: "header" }, h("h3", { key: '3c5074904a12c7db3de49067a7472c89bffb693a' }, "Card 4 (33%)")), h("span", { key: '35a273d40345f4ce907f8363d3ed2ae5195cfbd5' }, "Flex item 4"))), h("div", { key: '72f6b587d3118dfb29b58a3ce9f400c0195827d1', style: { flex: '1' } }, h("udp-fluent-card", { key: '15910a63f60e5168273fdb652781dafc919bc148', width: "100%" }, h("div", { key: 'b9aec09e7606026dc0ef8e3971165066231b2878', slot: "header" }, h("h3", { key: '62ab73898a9145b72dea617baaeb1fac43d48fbc' }, "Card 5 (33%)")), h("span", { key: 'ff83cf070e83d0ba017a19ed7c90b35b4bccdd1d' }, "Flex item 5"))))))), h("udp-tab-panel", { key: 'c83c84b00e7f6859677366909e124416f5d75780', id: "chips", activeTabId: this.currentTab }, h("div", { key: '9d764da04f16fa4e99d486b7a7376a843afb60b6', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: '66cd71e4bc49b9fbc7abb7ee5446c0f5da46292d' }, "Filled Chips"), h("div", { key: '33f70cd71a3d68a1d5a0de47e9add95d41a0c727', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '2f0e3a95889cf0d07aeb9e1a4aa3491e79d445be', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: '6e42307ea053171b250a515e70a1eed3fd8243f2', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: 'a1464a099862fc5ce68e9ef32ca708a7574b4016', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: 'db786080322180e7e80b6e578ca483030eed0ccd', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: 'e27fe085fd94d496b2bb12ec8fc94aaa74a81bb0', label: "Error", variant: "filled", color: "error" })), h("h4", { key: '18200481df81a659e6036eca14c735934267a216' }, "Outlined Chips"), h("div", { key: 'b3ca785718f415a209025d802059a21c7ca90cc3', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '1a8826dfe8425e504962d5bcc799393c13870a69', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: '14d626118c70c96e3187ac3eaa00449eb4e02586', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: '4e2e400c6febf3b5c21d972b8d63eccc5591ddfc', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: 'f6d9ec075b7bbf707bd9e3c99975ae6bf592cdcc', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: '6325d228daf9c7f777dd51472dbe3640e7719391', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: '3a693d5725ae00050a2e6229533271773d622ee4' }, "With Icons & Deletable"), h("div", { key: 'df5f00a9c5390ff61a801675f8e1c51baaa41fcb', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '99471c776f30b22b4b867056a00d908d9b41c9aa', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: 'e234f741fc59c7d17a0ec55a988f3bbd3927ae15', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: '068d34fdba279d202cfdceb632381184309f16c1' }, "Sizes"), h("div", { key: '045a120603d52676dbf13e647388ff0d2d36ba5f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '1389cdad67ac0bb207ea18c1ec56e6ae1ee0d3da', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: '4794469a5e5c18240b0bf192e69efeb260b11a4d', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '93ce4dca7cdd5702314d9abdf966b85352f7dc05', id: "forms", activeTabId: this.currentTab }, h("div", { key: '25a88487d305507df5b14ad59b895ca29089d78b', style: {
+            }, slot: "header-start" }, "JD"), h("udp-fluent-icon-button", { key: '4db66fa4e7495b02e9eb344746dca88cf08c4006', iconName: "more", slot: "header-action", shape: "circular" }), h("udp-fluent-icon-button", { key: '00ccae5c21a5e63a9a8be2d3942b5cc83c7c132a', iconName: "dismiss", slot: "header-action", shape: "circular" }), h("div", { key: '1f41bbf20173c61b387cf9c841c5afb0c2aab509' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '43cd1d08d5ff0d181a72360813e15ec0ab3c96f1', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-typography", { key: '0693a1dd4cc8e9f801453c5567c3765fe49b1034', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), h("udp-fluent-button", { key: '78e4b10feb952643aa1d9e9b5cfc8870e93f0c92', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), h("udp-fluent-button", { key: '1b55a80c412ace704016945d7e7754a2c30ce02c', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), h("h4", { key: '92695342613fa80150a47949a9decc5a9de768ff' }, "Flex Layout (Grid System)"), h("div", { key: '74b2cf35e7d4273c01a51b9a0434be304c499b33', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, h("div", { key: '7ccce1e2ec6cffdb14f5da5403bd02a833799695', style: { display: 'flex', gap: '1rem' } }, h("div", { key: 'c54f057f09461122bf8df32ec41c30fa0ce3710e', style: { flex: '1' } }, h("udp-fluent-card", { key: '77a8cff7730a3406e6a9310fad104e0c44c45d02', width: "100%" }, h("div", { key: 'a624d19751e9080670e2a58c1550388f0b232c83', slot: "header" }, h("h3", { key: '3de162c68af8128fd9bf9eedf5d1f31652c29624' }, "Card 1 (50%)")), h("span", { key: 'eeb79fb1288fb75ae095a92cc3c4baee9753a4a3' }, "Flex item 1"))), h("div", { key: '1ea1bf23f48b77b49a454878e056bc0c2e6cee4a', style: { flex: '1' } }, h("udp-fluent-card", { key: '78def1ef68ea9d2cb28d6cbb03b068586ed9bde8', width: "100%" }, h("div", { key: '37c24dbe2b807fb8d8c342480e59fac7380b9ac8', slot: "header" }, h("h3", { key: '4451a1fb49bdf86da969dc7e36ec36fd9d052d4e' }, "Card 2 (50%)")), h("span", { key: '6f7555032ebb12c868940dbbf72d0eb9ef1580de' }, "Flex item 2")))), h("div", { key: 'af0b1bfa1411a7ac4125ece9864fed2156044274', style: { display: 'flex', gap: '1rem' } }, h("div", { key: '1084f82b5f6c3a1da18ebc04523400adc5ed9a3c', style: { flex: '1' } }, h("udp-fluent-card", { key: '30bdd8486e8e8f1fd644a8d2fa8506d86d2301e6', width: "100%" }, h("div", { key: '4ca3b4efa5c5dea6a9853aa9445dd0f10e02d27e', slot: "header" }, h("h3", { key: '5b98a820eaafbc574616dc8f914a945dc617eb32' }, "Card 3 (33%)")), h("span", { key: 'bbd4769778ecad1f73ec23dfcbba236d9a615980' }, "Flex item 3"))), h("div", { key: 'c14f814fd247ef8aa57c0326d2fb03a7a57c98d1', style: { flex: '1' } }, h("udp-fluent-card", { key: '146de00db7e14b8f193eb17c5c98737bba778d32', width: "100%" }, h("div", { key: '117354ab3b00e49d78b271675786564d4635b7af', slot: "header" }, h("h3", { key: '5b4898b6ff436bc0bce2fe5c3ec28c84623596c7' }, "Card 4 (33%)")), h("span", { key: '9c6bcb4fa1cbf6cde21dcfcd5f90f176cf2f4748' }, "Flex item 4"))), h("div", { key: '84538a75637a02ce2437f00947064f892cf7c88b', style: { flex: '1' } }, h("udp-fluent-card", { key: '56b8204956fbcf209987ff16de132ca2528ea508', width: "100%" }, h("div", { key: 'fe1e8148e4b8665c6d71ae0718347853232418a3', slot: "header" }, h("h3", { key: 'f690fd59b8dc4be8b1ffcc008d2a0dd6bd42bb16' }, "Card 5 (33%)")), h("span", { key: '932bda158a38e14dfe48811d46df57309f8991c0' }, "Flex item 5"))))))), h("udp-tab-panel", { key: '88ed75229aabbcaa6a1022887ef52dbc19c91e1e', id: "chips", activeTabId: this.currentTab }, h("div", { key: '8af5fcc4bdc5d5eae25eb3d1c1d43cb621c98dc0', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, h("h4", { key: '7e2cebdf3abb636484b8c2c1903f5f1d80e815b4' }, "Filled Chips"), h("div", { key: '633e81f8161f15130a99fc9cfaebdbb71e291261', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'f393337049dfd1c98f6ded1481b521761835b3f8', label: "Basic Chip", variant: "filled", color: "gray" }), h("udp-chip", { key: 'f6c85f01147ced201eed3d4594c8249e0fd3d5d8', label: "Primary", variant: "filled", color: "primary" }), h("udp-chip", { key: '53222a89e6f6b31120c478b6fd9c35ed73a90bb2', label: "Success", variant: "filled", color: "success" }), h("udp-chip", { key: 'f6c47b7cfa85bc3c612e3414bca5bff185e9982f', label: "Warning", variant: "filled", color: "warning" }), h("udp-chip", { key: '8380869d2869997550cd58f60e05d03bac09a7d9', label: "Error", variant: "filled", color: "error" })), h("h4", { key: 'f1239966cc07bf73587bbbdb23626ba04381c44f' }, "Outlined Chips"), h("div", { key: '6685b6c1529075c94b5e19374eb0bd01fd7f4981', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: '1ee60acbab2184408cd382da4889bef128e826bd', label: "Basic Chip", variant: "outlined", color: "gray" }), h("udp-chip", { key: 'f237d938668b58d3ff944593aff68733b25207c3', label: "Primary", variant: "outlined", color: "primary" }), h("udp-chip", { key: '00f74d9971532b06192c01f8b517fe8680d69848', label: "Success", variant: "outlined", color: "success" }), h("udp-chip", { key: '797e8dcb81f81c894156e21524a3c6f1e3f99d0a', label: "Warning", variant: "outlined", color: "warning" }), h("udp-chip", { key: 'f64ca7451d70878bb7378b47f7c9ac12014087ec', label: "Error", variant: "outlined", color: "error" })), h("h4", { key: 'a9756e7283d6a3a4074ebc4c4669ca2d7e04a2c9' }, "With Icons & Deletable"), h("div", { key: 'ef6a7ccb28fde281283867185e53e811706a5857', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-chip", { key: 'dba7238bd1f43866f95a44ee3577c0acbeffe1b4', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), h("udp-chip", { key: '93a0048a47e0a137dc236552f9ad2f029ac348d5', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), h("h4", { key: '254c629d89e9ef1a3912868c5c0e7b2c48f22788' }, "Sizes"), h("div", { key: '8207bab587da5149b8c96ce2a2d1157f8446d637', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, h("udp-chip", { key: '8f44326a0fbe430ac27f7b72c85cfc29db68da8c', label: "Medium (Default)", size: "medium" }), h("udp-chip", { key: '3e057b9f323a86b73b20c513a552ac30d1e0f887', label: "Small", size: "small" })))), h("udp-tab-panel", { key: '9f89a0da047922c50cf76d799d1625a2f949dfa2', id: "forms", activeTabId: this.currentTab }, h("div", { key: 'd213943d5d985c7fdf8a1c6f9883d2a5550ac97e', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '40px',
-            } }, h("div", { key: '563c0a80407a8a19cf56d801845926cf9319b418' }, h("h3", { key: 'e84c438dcba52b3712cc915560668a1835d958f7' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: 'd9b12b84dea0dd4fd194155774673482f2359102' }, "Button in drawer footer auto-connects to form via ", h("code", { key: 'cf89ec3f3e9eac6714e12b5748bce8022f0eca55' }, "formId"), "."), h("div", { key: 'e412d748183de2907d7d4e74ca918f6477cd00c7', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'bd15ebeea2258b28b2a822a8e33440691e4231b8', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: '30bab92c428cd6f8dac812f230bb655749992e08', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: '7afb400d1331621fe2896d888bd6b7aba5941501' }, h("h3", { key: '14bfdf7c0498726e38525e9e4034f35b03c2d393' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: '5ad3be3b3343ab94edc9df983eb93fc3c65bdbc9' }, "Parent component manually listens to ", h("code", { key: '554ccc9071a86efcfa93b8e29e3857ea5b66d4f2' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: 'fd9eb84d4fdf5b2e698fc2ad42045e2b9d6f1a5d' }, "submit()"), "."), h("div", { key: 'fb71876302f459d98cd0ec14a6cab284af6158dc', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: 'daef7bc0c66cee7b7717535c48effc410c3b0934', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: '231e5f84db607ce934b386c6ebc0443e4f58a2e8', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'a63dfff9f5095b64ec4a1deb4875be4bc28a497c' }, h("h3", { key: '4c87d77d111407efce449f73c3419d4e2f848716' }, "3. Inline Form"), h("p", { key: '74c1949b283ba152d6e7762f11fb85224fde3a9a' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: 'b47a18972e8365ab53894e3ee9d3f536d476f51a', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'fc62bdbc4b4c98395328fcb608a68ab30503bd37', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: 'fb1b33467762690084fb89c940cef18296078f08', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: '61e89686634fe76e9350632013937d737208077f', id: "calendar", activeTabId: this.currentTab }, h("div", { key: '49704f993fc2fc06ce92db321ebacf5dfc1693ce', style: {
+            } }, h("div", { key: 'b80261a9bf86cdf12849ad404d4c3197f67c8d5c' }, h("h3", { key: 'f3a79b73737877d76f2694d8cfca3ab3c2a07183' }, "1. Registry Pattern (Sidesheet)"), h("p", { key: 'de7aae22952fe113d571d75a9a7f750e33339cfb' }, "Button in drawer footer auto-connects to form via ", h("code", { key: 'f8ab264a55aba2a386a6e78589470750ee2070b6' }, "formId"), "."), h("div", { key: '337d7bbab8bb985bbd52b8f755c744145fcd0873', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '2f097e68139e611cf630ed252f84d324102d20f9', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), h("hr", { key: '7d5568120b9d60a8557dcedbb5ca568c679bf8d7', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: 'df0cd61b04418f570c065db4f0ba78c28a265417' }, h("h3", { key: '7508a1d1b3b1efd24e8448e38fde36fa5d712dc1' }, "2. Legacy Manual Wiring (Sidesheet)"), h("p", { key: 'dc6e333bfb52cd3d3c0f9b3d0a7b9ea74886e700' }, "Parent component manually listens to ", h("code", { key: '95dc4b57526933ce8a4f6231ffc1a3c8567a15e5' }, "formReady"), ", tracks validity state, and calls ", h("code", { key: '5f1c2b8eaff919de930c94ad5cf221ab78d700dd' }, "submit()"), "."), h("div", { key: 'f38c9d920d0f6874f3be0490adb9bc944c7a13df', style: { marginTop: '16px' } }, h("udp-fluent-button", { key: '24ef0443a16a240122f68b50cf41efd8b388bd36', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), h("hr", { key: 'b1dfe7a753fd8df429888eb29dad1b6a424d37bd', style: { width: '100%', borderColor: '#eee' } }), h("div", { key: '18e9d2eedc2a2586f20679d9d351583f8294b4fc' }, h("h3", { key: '50aec36cdac2d136692a737986b0b35208518c1a' }, "3. Inline Form"), h("p", { key: 'fc4801b61a1a0136f70e5aa720e2a1c2d50b7e9b' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), h("div", { key: '6ad1d54a4cb971d665b4af6a3bc230635730aa7b', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, h("div", { key: 'd9d0a17af517f258c74eb439b479079a19e7c9df', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, h("udp-fluent-button", { key: 'e34b1f0c704b93fbf67fd8bed3de2ad6fdb5bf48', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), h("udp-tab-panel", { key: '9b38be482e3a8faa5c1a81f5ca7d83336c9caebd', id: "calendar", activeTabId: this.currentTab }, h("div", { key: 'f5b1b4344fd1737af514dd40968b21bff35121a4', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: '26ab6757383d77674a37ecf8b8cc70bdb8909c5d' }, h("h3", { key: '50359a57f8ffc3b5542c8daa3e707efc7779e105' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: '819ff05f5ed48735cb225ec262fdd7f882a24a4e', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: '5be49864f0da152a0aa13655a175f8df10515bd3', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: '8331dbf3d5243cf65b89352ac1e9dccd7e4c9a7f' }, h("h4", { key: '0a4567db569b2f64e591c3e3d6ec3f04bad61e0c', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: '1ffe7b59f29b96b16f1080d5ec210a1b17afed1f', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '9a79abef6b2cbd876f4a1796d9f70c4f26354de8', style: {
+            } }, h("div", { key: '6988993fd53d16ceba30defe24935fe8058bb3b0' }, h("h3", { key: '871db8c584562bf096ac93f0a0e048ce5ef4bc43' }, "Date Range Selector (Fluent2 Styled)"), h("p", { key: 'f048857420af064c334122db02071be519372660', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), h("div", { key: 'a3e5190d29006a28b204f7ef56fcff976fe9edf3', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, h("div", { key: 'e904a9ca74a364727106bbaca92933e1d83d4543' }, h("h4", { key: '2dbc91365b6f27b163dd8cf4e768c17ac5f593d8', style: { marginBottom: '8px' } }, "Single Date (sm)"), h("udp-date-range-selector", { key: '69d2f581d4fbba74fc40f5483cf58e3f623427c6', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), h("p", { key: '4f6a4e436a9d49c879ec40c5fedb74b4a4737957', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: 'ba17be496aca143e1f7909e2cbe8d9140c97c0bf' }, this.singleDateValue || '(none)'))), h("div", { key: 'e5740190143ed4a7e99323ba551175580f3db7ba' }, h("h4", { key: '9ee922a42dbf1f6c7daf05ad4a437c63d3bde49e', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: '8f7268dfedc24418e3be00184ee4f419f2ebcd6a', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: 'f402cb1fcec98bbc7136f2151b986f79bedf0233', style: {
+            } }, "Value: ", h("code", { key: '96b9e90d465820739f85e314b91895b5ed147c7b' }, this.singleDateValue || '(none)'))), h("div", { key: '78670ee359abf290ba8d94b58fe71c60aad1ad1b' }, h("h4", { key: '45b6ade6c4808b011184e0ff34433233d66abba6', style: { marginBottom: '8px' } }, "Multi-Select (md)"), h("udp-date-range-selector", { key: '5d4ae298f2bb6f7d9defed5716b96c7c67015af7', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), h("p", { key: 'a556aa32e975a1a7f9b8e8e072e9b90398b02ca4', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '2372bd6f684c3564cddab0869246521460b58a77' }, this.multiDateValue || '(none)')))), h("div", { key: 'e7e402f05eb8c0ed5f0a51db54b416354407f1f5' }, h("h4", { key: 'a86039086489fbf3b9bd978ddd397f98a47d0e11', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: '11c20cb966cb31a77b072ad797ce5e6259104077', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: '6869b15724417c91d4dc1f924d84a8cd867ddc5b', style: {
+            } }, "Value: ", h("code", { key: 'ece61d000ccf09db5813bd6ec11853a67696988c' }, this.multiDateValue || '(none)')))), h("div", { key: '9b18249409730967a04c0598584d2f3c5d5f977f' }, h("h4", { key: 'c34dab89630d11b37870d70602f4d61657487b3d', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), h("udp-date-range-selector", { key: '8aa2b984755b84499c1265a3582f5dba0e9e5352', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), h("p", { key: '937653dd99a2da0b6828d442014865a2b6c5c6e2', style: {
                 fontSize: '12px',
                 color: 'var(--colorNeutralForeground3)',
                 marginTop: '8px',
-            } }, "Value: ", h("code", { key: '6dd57cd5898842d4477dcb4e91ad336f54e371e6' }, this.rangeDateValue || '(none)'))), h("div", { key: '9feff639a5332138cd796d350ed6a3fb5708054c' }, h("h3", { key: 'bf46d5c832b554d6e5b9ad2bf582f8872c7a8b46', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: 'bea185821776af8dd3be6e84b981406ad9cd926d', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: 'f9345778523c6b9aedfcf17351d9da9629268e8b', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: 'aff5ff6dd3db6a62bf77074561b558ebbc8bf0e3', label: "Date", appearance: "outline" }), h("udp-date-input", { key: '393030f81ef27f1d45d2d3e36e90da895b34d4d5', label: "Date & Time", appearance: "outline" }))), h("div", { key: 'cd364363a855743baaecfcad08251581733dbced' }, h("h3", { key: 'b582dab5e47b6641c57dc1d17c38d9befc642d7c', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: '18dc0b1b855fd8bcda569aa90c51b11c0278d716', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: '11db1169f312e258ad23c65c47a5d64238c5a994', style: {
+            } }, "Value: ", h("code", { key: '75a1420a86b75f8990401bcf9cc5764b8a4d94dd' }, this.rangeDateValue || '(none)'))), h("div", { key: '40685d4b580a6d5e9c9eb6cf35d63cee6e6ba75b' }, h("h3", { key: '756e063c4b011fc9b6f13280b6ad92598a01e0bd', style: { marginTop: '16px' } }, "Date Picker (Native)"), h("p", { key: '8845e45d2612f1c6c8b70d2f8ebee56bf9e4ab16', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), h("div", { key: 'f07a0c05f653d0e6df9416d2849bd83e958bf343', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, h("udp-date-input", { key: '5052a4abe2e19d8e30616f55358907c0f475af95', label: "Date", appearance: "outline" }), h("udp-date-input", { key: 'dd6f2d6ee001f7eda5ff2135d8012305e5a5b744', label: "Date & Time", appearance: "outline" }))), h("div", { key: '3dc32f5693540dbb0830c8a7fdfaa3457655dba8' }, h("h3", { key: 'a1e77bf974467b23afe5d7c3336f3e5d1dadc4b3', style: { marginTop: '24px' } }, "Popover Component"), h("p", { key: '9547fccb75a7ebb41cb8a070d6eea193a269f26f', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), h("div", { key: 'dcec04de0ae8c08248864097715591f83666572b', style: {
                 display: 'flex',
                 gap: '24px',
                 flexWrap: 'wrap',
                 alignItems: 'flex-start',
-            } }, h("udp-popover", { key: '8c98c9b3181201ac94c5f36d93bec10a2a290d31', position: "bottom-start" }, h("udp-fluent-button", { key: '15ac1e47ef454dd885d93b1529cc304fbf36c3bd', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: '46ab7f7326402ebdb7261db318a9cb986debe1ea', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '36d2b9dd8dac25e3f87e3679724d2a6adee754d2', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: 'b7658dbc7ab1d569f0a439224fd4b9958437f20f', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: 'ed8f7bad51ad45253d133b65b68d42cec3193e9c', position: "bottom-start" }, h("udp-fluent-button", { key: '1175020edc0282321cce9c26141c3b86a839a10e', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: '258e8ad14deda563edb4e3ce70050a377a8e7cfc', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '9683d7d0564786fcbf20b41ea6be2cbd6850c231', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: 'ce0a4b2a3d1ace61dff29a602981b5b3518b66ec', position: "right" }, h("udp-fluent-button", { key: '53fe67d3b383acad747218d73a3c4ff257c9a11c', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: 'c74c4d8de02bcc745ccede3fbf4262315feab808', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: 'e4f5157eb6e8ff9668f127e81f7358fbee2506cd', id: "popover", activeTabId: this.currentTab }, h("div", { key: '0790f3bcd82f87a21c64054337e4b8e071a0c66c', style: {
+            } }, h("udp-popover", { key: 'c2e8567daf2364615279149938fd5d9ae521c82d', position: "bottom-start" }, h("udp-fluent-button", { key: '333b902b5ae1739f2f19f229ae39897a8fd9cf90', slot: "trigger", appearance: "outline" }, "Open Popover"), h("div", { key: '013a5caa6382d517c8cb9d31f2fe12e981b76e37', slot: "content", style: { padding: '16px', minWidth: '200px' } }, h("p", { key: '9522caade1a6b9ce160b8981886f96cc28094843', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), h("p", { key: '03c459807a1ae04aeae39b419807e99b3e2c53cc', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '74bbf26ffb077df6d7758aa7e5f692453fe5374d', position: "bottom-start" }, h("udp-fluent-button", { key: 'a16178fe00e238d6e9c113868188c743b64c1882', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), h("div", { key: '258720ea1e6355a23158e23c9cc641e1102898ae', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '3332f6f66b3a124e339270ebfec9f92214528d5e', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '396da41f51568d6a67f5dc4229fe97a9c89f3a76', position: "right" }, h("udp-fluent-button", { key: '567e0b5bcc102642f2312ac1e91d7a08732052a7', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '0aff1512e968f34db5d5ff93f23e18710d76c1c4', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), h("udp-tab-panel", { key: '6c40f823edc3f25250d2614efe19e4568ae4fa8b', id: "popover", activeTabId: this.currentTab }, h("div", { key: 'be820146db93e489f8188211992ac4e01646f0c0', style: {
                 padding: '24px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '32px',
-            } }, h("div", { key: 'fae5fee6838abbf7feb31e3e31c22dbd2bc47862' }, h("h3", { key: '902bdfc44622fcc730cb4045a4de850f2e48c824' }, "Popover Component"), h("p", { key: '37cc9952de48816764b37e2fca496889d47850c8', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '83069ec9d611a0add25c83df47eb5ddb3a3f3ada' }, h("h4", { key: 'ec3bc512ca7c699204787b8ff82d31c6febb1033' }, "Basic Usage"), h("div", { key: '931c76864583362b5dbc9cceb7938be0a31e7ce2', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '9f2f5eedcdf222c9f0f9e6a05e30c4689abdf6dc' }, h("udp-fluent-button", { key: 'e09829dcfa3c7856f8170c9b3a7f22c466a517b0', slot: "trigger" }, "Default Popover"), h("div", { key: '69c389a4877028a0a59a18f14ba6fcf130b9c3dc', slot: "content" }, h("h4", { key: 'b7eb0dd899f8f672e5f44a57efbeea24473a64e6', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: '3e56a7f7c8c6583b5f289f141cbf855414e082e6', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '29c53e399dc79389f2f8bc5bae5196ee48f32896', position: "top" }, h("udp-fluent-button", { key: '1a0e6b7169200b8fc8f4d7869b64c148af3cc110', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '8624ebd63f689cc5fb4f3acec323f4958289ab7a', slot: "content" }, h("p", { key: '47319bf4c85d0fa78b03aa350171a30d789562e3', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: '038f0fb75dcd33c4c833cd992a97edfac4845862', position: "right" }, h("udp-fluent-button", { key: 'd56d0aa2e7e3d2ed951c9c3cf2910305e185a274', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: '0b5c4d242ad57687e2be3fd91376df4b420e9032', slot: "content" }, h("p", { key: '14119b5e9ac8d53afa6898786e1951ef8edc8461', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: 'a14cc950f54fb1c3988374547b13b8e274971bba' }, h("h4", { key: 'd20264be3da6484394970b191ece9ae94dccac52' }, "With Arrow"), h("p", { key: 'fbb156ffef71d2d84c67b8da8101845df8b43290', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '27b295af57675a85f2baab3411e589918427c4c6', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'fd8af2dd5c1b8615816fd088754e785e7548b417', "with-arrow": true }, h("udp-fluent-button", { key: '7493d1bb8db7cab27abf4ca2e1caec47288c2703', slot: "trigger" }, "Default Arrow"), h("div", { key: '07e3fc5e1fc297eb4db8e14cdce0e09d16195860', slot: "content" }, h("p", { key: '6528cffe6e0b6326564c331d7fa1f8e8c71bc44e', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: 'f8ad54b9e03a02d5496878580dc7391c0587a130', "with-arrow": true }, h("udp-fluent-button", { key: '15b61f01b62a6cfff686cf75972a7f03f6f2b795', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: '3b68c7785a9a83481b455072858e845e547d8991', slot: "content" }, h("p", { key: 'c8ed278e15671af6d42a2881585e05d5d9f8e868', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: '8508556c3ec46164738962d9e19967e891742a74', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: '575fda41f01ec13245f1e6f6dc96edd27954cc71', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'b76ee96f677046a69e64338eb854226cd75ef649', slot: "content" }, h("p", { key: '6ad8b241d1806d55fbe80cda290814c14ce96a3f', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: 'a995e01d346098aff0ea4da8e985b81d01709a18' }, h("h4", { key: '24569c43eb3547871a76cadc7dd1b7db1e8d65e9' }, "Size Constraints"), h("p", { key: 'df9f5e5e3ab9d85b5126f6a4e4707d6450475153', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: '058cab97656ef6d008d0fcf352da7ad4ee895758', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'c76eec4eb38c02463d9d91a8c40a13bfe90fb3dc', size: "small" }, h("udp-fluent-button", { key: 'bbe3661c263bf8b56e801a7cb18ee8c9c79866e7', slot: "trigger" }, "Small (320px)"), h("div", { key: 'ff518658eb7e2804ba4d1ab1f0db1e1061cf928c', slot: "content" }, h("p", { key: 'e52e930eb6fda8444f576b7626640a8e0c6344af', style: { margin: '0px' } }, "This is a small popover with max-width of 320px. The content will wrap if it exceeds this width."))), h("udp-popover", { key: 'a1809fe516b8f6eac2b10bb5d0b5fb9ab15d693d', size: "medium" }, h("udp-fluent-button", { key: '978c7c7b0caf1d284aa6221bd5696b1614639ceb', slot: "trigger" }, "Medium (480px)"), h("div", { key: '9726b56eedf7c273dd190b6dcd5d6a023ac7d4d8', slot: "content" }, h("p", { key: '9024a90179d963de5f27ff6170841c0685957be7', style: { margin: '0px' } }, "This is a medium popover with max-width of 480px. The content will wrap if it exceeds this width. This gives you more room for content."))), h("udp-popover", { key: '12539d539f1ae37218ab0ca203ff23f31dcac266', size: "large" }, h("udp-fluent-button", { key: 'ad800a181358fd75fa4131108a2c6adc85744663', slot: "trigger" }, "Large (640px)"), h("div", { key: '1daec25ea4fea5cd7659150f6c492cb156607af4', slot: "content" }, h("p", { key: 'dfd408bf27b29206c582afba19e9a56bd5612cec', style: { margin: '0px' } }, "This is a large popover with max-width of 640px. This size is suitable for more complex content that needs additional space while still maintaining good readability and layout."))))), h("div", { key: 'd6c9e911925445901897174c3ffc6bc68b7137e3' }, h("h4", { key: '96beeeb7e0a3d9cb6842c4fbfff9fca54d0fb55c' }, "Trap Focus (Accessibility)"), h("p", { key: '317cdff948817702ffad570d0ae302b36363d6f5', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: '71c801dee731e5a0ce6ec4cda6c977e695d1ccbb', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '042208da25a9af2efa791e799ff5d232ba159474', trapFocus: true }, h("udp-fluent-button", { key: '457fcf45360710ff812ad0e51850bc5be843ddf0', slot: "trigger" }, "Trap Focus"), h("div", { key: '371205b9c43fdf0c3d402af1ffa7db8dc3a536db', slot: "content" }, h("h4", { key: 'df919d8d45e8f5a38077281ab4b48b75149e3f3f', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '0ba6d6d73efccb08ae2cdd052d55c675f266ad1f' }, "This popover traps focus. Press Escape to close."), h("div", { key: 'a860d51d751775ddd8fc5b3503362e2f069f5c52', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '8410ca23c2dbaf87e7ef2aa7068a4fe2c9cb2e2e', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '268d7602f036ec22f0b71e9ae6a18aba3d305000', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '6078c1c812d4ba2cbaa6a0d91273dc1f9caff529' }, h("h4", { key: '9490cfa81d01ea1fad516e2f9688b59be4464017' }, "Advanced Examples"), h("div", { key: '6a20d1a1632b55e1da0b2e20bd87aaa6e459a947', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '7c36c26e7370322ad9aa2293a4c7f17e5d46a156', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: 'f6ee5481d2461a1b5c08e656e0749d8a9b2edc98', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: '1b825d40bd47fdfb8aa5a388a9a7e62379321f96', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: 'e091fb5c908deb5f5beae484f13bb6e717e0f8e9', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '29a36bdfe2804f43f31e143f7f7b254df97f0c39', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: 'bda0a0ca7829640a8abac677f1b1df326091d0b0', slot: "trigger" }, "Rich Content"), h("div", { key: 'a3cf9b20d7157115ddc497ec38a64532ea11adfd', slot: "content" }, h("h4", { key: '78decf58ba187d3e440ce9a1b80a72a593729a90', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '6f64e6015aafa3e9fded28008986a06eb6db40f0', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '221db8b4a9fa6cda03dfe1ba787417416eab317c', size: "small" }, "Learn More"))), h("udp-popover", { key: '61b85f5f65ce2b883d7b64963be7cb17c89309d9', "close-on-scroll": true }, h("udp-fluent-button", { key: 'a3f4648ddc3353ed1763ab8eb0384284a7b7b634', slot: "trigger" }, "Closes on Scroll"), h("div", { key: '788efbf17e6408a700d587ebe5f1368a144c6c5e', slot: "content" }, h("p", { key: '5c4f8d1c85be5ca3ab4a7327526c8d28ee22ff0f', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '6ecdb86841649b2634f493db3c68484e1a6afb25', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: 'ec642c7e70f95e9c10aadbd1b1fdc567e8b8b60e', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
+            } }, h("div", { key: '1edd32650b2f9fe5b9437b53e6e8fdb51e9b3d44' }, h("h3", { key: '34760034aa8712347e339fad984e5be07e7f7fd7' }, "Popover Component"), h("p", { key: 'ec233c0396eb1cf41f715ad3fe93c431ba5c714e', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), h("div", { key: '6db4188136ba096cb10952265a4ffcc03070f066' }, h("h4", { key: '4c87f6463690fca22ab587af82baef1e89c2f234' }, "Basic Usage"), h("div", { key: 'd282d8af07b7c95d0f57eb147577febeaa7a6adf', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: 'b609a230383ea24ebcfeae60ebc72cde757252e4' }, h("udp-fluent-button", { key: 'd2cc5601ff33d84f9c26d21597aa35fa31b52440', slot: "trigger" }, "Default Popover"), h("div", { key: '602a6e1823fb09889c1cc9da1ba31e65726adc43', slot: "content" }, h("h4", { key: '991998c6139d745c100268dc47e190ac79f7d443', style: { marginTop: '0px' } }, "Popover Title"), h("p", { key: 'b47c75bf0ebe2157579198373a34ef613f421f5f', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), h("udp-popover", { key: '98047aa0559df389081553fa7a4cf0d4d5b819db', position: "top" }, h("udp-fluent-button", { key: '43ae296c17a63b3ed0eab1e165af967c84e77d25', slot: "trigger", appearance: "outline" }, "Top Position"), h("div", { key: '92bcebb1e78d2dc6c5095c1dd36e849b292de345', slot: "content" }, h("p", { key: '03d68b100200eaab5526eb0c0f45f1ea1b7e423c', style: { margin: '0px' } }, "Positioned above the trigger"))), h("udp-popover", { key: 'c34d53dfd4c8eabbd8f17e7a268d1c67b884002d', position: "right" }, h("udp-fluent-button", { key: '9826db5ba78847dfed3467cdf290efd571ff4953', slot: "trigger", appearance: "subtle" }, "Right Position"), h("div", { key: 'fa64043d534caa73b7d25149ca84892213a59d05', slot: "content" }, h("p", { key: 'a37b82cbc77993555f1e0197e04694d832ebeda2', style: { margin: '0px' } }, "Positioned to the right"))))), h("div", { key: '44e826d09aecf9bf0a77825c321b4c85e4f59eef' }, h("h4", { key: '7e7d0b18e60114e601894281301b6d377a27f330' }, "With Arrow"), h("p", { key: 'f507d037e4c44ed5eb80b2334f832c1bd01a4c1e', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), h("div", { key: '96dc49c80faae587c8d126182582264967e31e68', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '55d9b77ecdfc523f08cd74dad2770ce99026939c', "with-arrow": true }, h("udp-fluent-button", { key: '6d06d24e8a5a5ee6ef5009b0a2b65353f5053e55', slot: "trigger" }, "Default Arrow"), h("div", { key: '6542230c89fda24441e8b3003c6c5a48b115336b', slot: "content" }, h("p", { key: 'e77ab6763e3bfddbae740a09924560416904b434', style: { margin: '0px' } }, "Popover with arrow"))), h("udp-popover", { key: 'e3797e4e6c17ef617bdb500aed63402e86ff6a6d', "with-arrow": true }, h("udp-fluent-button", { key: '14a59e2062abdea1f1654375d23da5412b35134f', slot: "trigger", appearance: "primary" }, "Brand Arrow"), h("div", { key: 'cf61ff06c1889d60aa4c72d7cfd40d5049303e23', slot: "content" }, h("p", { key: '60f875a43880c87cf934086fa378f29a981303bd', style: { margin: '0px' } }, "Brand popover with arrow"))), h("udp-popover", { key: 'ea336b5d007e4167ba9b27793ab4e11ae8440fe8', "with-arrow": true, position: "top" }, h("udp-fluent-button", { key: '27aa56f8b8b0b3fd2b41e6494fdafd2f96e50b86', slot: "trigger", appearance: "outline" }, "Top Arrow"), h("div", { key: 'b2d3434f23a6796ea619a995b4feab2fa60fe5af', slot: "content" }, h("p", { key: '9cc01d5a3d0ce76521972f4de056b4be4436f302', style: { margin: '0px' } }, "Arrow on top position"))))), h("div", { key: 'a11338014ef13d8cf4b4be3a91780135d498a3fa' }, h("h4", { key: '7b42d95ea0e420f5dbbf2864c8410ac4cf328985' }, "Size Constraints"), h("p", { key: '3ee49f3397565b3d2ebf0de2eff599a148cb4406', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), h("div", { key: '6b0a06a74cf60ee78d2d413df14ad5790d1f41de', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '801d24cc5179ff65cf636e66efb1a1cd4eeaebcb', size: "small" }, h("udp-fluent-button", { key: '87fb0d5f80a2fddb1cefa178e31701e6666a8b32', slot: "trigger" }, "Small (320px)"), h("div", { key: 'ca277e1fcfc1b36133f8d14494b3d22711d652a8', slot: "content" }, h("p", { key: '96c7af5f090b0832ca375fb2fb58580ab93ccedb', style: { margin: '0px' } }, "This is a small popover with max-width of 320px. The content will wrap if it exceeds this width."))), h("udp-popover", { key: 'e669a24d1aac72abd66ae5e26414afa4917681b4', size: "medium" }, h("udp-fluent-button", { key: 'ec45babf503c3fc5c4d810bdffe4b492685e82f2', slot: "trigger" }, "Medium (480px)"), h("div", { key: '1498db4073e24e965d36be124e9478be13db2660', slot: "content" }, h("p", { key: '3c6f5e5d6194a66099c66c7405a3093f07501313', style: { margin: '0px' } }, "This is a medium popover with max-width of 480px. The content will wrap if it exceeds this width. This gives you more room for content."))), h("udp-popover", { key: 'a091bee3b9a3a290de176f09cc2b7d9840690970', size: "large" }, h("udp-fluent-button", { key: 'd4c680f0e62cbdec56a8e55a1114c37e8c69c9c7', slot: "trigger" }, "Large (640px)"), h("div", { key: '212dfab8173befd065b55b9e2e353b4362a8b41f', slot: "content" }, h("p", { key: 'a35df83cb6ac72c91ae00f47def4639cd706c9bc', style: { margin: '0px' } }, "This is a large popover with max-width of 640px. This size is suitable for more complex content that needs additional space while still maintaining good readability and layout."))))), h("div", { key: '4ff95eadd0af3f4679b4c9438a0fb5654e4a2898' }, h("h4", { key: 'cdc79da26b6f885eab5067b90bcffd35796646bb' }, "Trap Focus (Accessibility)"), h("p", { key: 'c91c9b51bbc03809d3df53d4b286d0bbaef7e151', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), h("div", { key: 'dedcad5b844014a107799854c8d3edaf4a4a76c6', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '10ffcd589dd605355cbfa5d9e2fb98da7c5237b2', trapFocus: true }, h("udp-fluent-button", { key: 'd3fc9b7baad7dc7a30063a75d2a30db966af3046', slot: "trigger" }, "Trap Focus"), h("div", { key: '36b1a13a772ee0de7fb9474ca62a2d9a2c534efa', slot: "content" }, h("h4", { key: '4347f0527d8cd9f37b90c495c8fc5f399ea7b406', style: { marginTop: '0px' } }, "Modal Popover"), h("p", { key: '870d9fad03d2d7d3064e54609c8d08acfc20f5ef' }, "This popover traps focus. Press Escape to close."), h("div", { key: '30d72421b1cda4a9e56e07eeeff613a7aedfba8f', style: { display: 'flex', gap: '8px' } }, h("udp-fluent-button", { key: '9902ed1f75c927276fea5f8eee5e7fe7f6657831', size: "small" }, "Action 1"), h("udp-fluent-button", { key: '2ede35579061b2d47a317fe176e6e77ea02e10d7', size: "small", appearance: "outline" }, "Action 2")))))), h("div", { key: '417db415c76410afdc930056abad7f8760511f3d' }, h("h4", { key: '7fdf2c595251f4e8d6d71b681ee70c1649ee089a' }, "Advanced Examples"), h("div", { key: '44e48b144e7732676bd8232503868e91a36f1206', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, h("udp-popover", { key: '1afe18b6973d97cdbab3b8b2bc82cb6ea36a4083', position: "bottom-start", "with-arrow": true }, h("udp-fluent-button", { key: 'fb8afde54173be626b374de5815117b285c32fa5', slot: "trigger", startIconName: "calendar" }, "Date Picker"), h("div", { key: '86c751e087bb1e9dacc1c61b3301e8e03d37a192', slot: "content", style: { padding: '8px' } }, h("udp-date-range-selector", { key: '4720012a3765869aeb3e34246568f2d43ac67b02', variant: "single", monthsToDisplay: 1, size: "sm" }))), h("udp-popover", { key: '8a5a81bb641e66de6528f796a3cd049fba6c6b4a', size: "medium", "with-arrow": true }, h("udp-fluent-button", { key: '2d5c4c27fe3022ddd095a63b588efee855209d1c', slot: "trigger" }, "Rich Content"), h("div", { key: 'e7082d15a2f09ffce34802df69c6c896c17f8b04', slot: "content" }, h("h4", { key: '5b83ad04dbe20a509c89689ab6133c5cbbb7fe80', style: { marginTop: '0px' } }, "Feature Update"), h("p", { key: '3bbce4ea891cf9988e0646d566265a84b651c8e5', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), h("udp-fluent-button", { key: '5ad055447c46054dab2ce8706cbd048a0812179f', size: "small" }, "Learn More"))), h("udp-popover", { key: '65ac8bc7e0c3d076f5b8823306917d073163df70', "close-on-scroll": true }, h("udp-fluent-button", { key: 'af2bbd466a6475d16e9ffe1141912fb115897439', slot: "trigger" }, "Closes on Scroll"), h("div", { key: 'c256bc2841d210480d088bd44c4867717fe3f7a1', slot: "content" }, h("p", { key: 'dba086fc8582f001e21e7ffb218780a4af8ff01d', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), h("udp-fluent-drawer", { key: '7d9b5e2729991738b91654daaeaec6293732de22', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, h("udp-lazy-loader", { key: 'fda21dd13e4c9db7caf26adbb7edec4cd4ca233c', if: this.drawerOpen, content: () => (h("div", null, h("client-side-grid", { columnDefs: [
                     { field: 'name' },
                     { field: 'age' },
                     { field: 'name' },
@@ -574,10 +574,10 @@ export class TestComponentsPage {
                 ], rowData: [
                     { name: 'John', age: 30 },
                     { name: 'Jane', age: 25 },
-                ] }), h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), h("udp-fluent-drawer", { key: 'f322c55a40076aab178eea5785e3a8f89e80a9d3', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: 'db095a1edf2b9d96f90d23bac537d27e1fa15c6a', if: this.formDrawerOpen, content: () => (h("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { appearance: "outline", onClick: () => (this.secondDrawerOpen = true) }, "Open Second Drawer")), h("test-form", { handleSubmit: this.handleSubmit, formId: "registry-drawer-form" }))) }), h("udp-fluent-button", { key: 'f15f61f3567ff6dc8d5d95372ed18064e6a82473', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: '6336a877c5573b9f74377ed04d63eeda9b77a452', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: '8144a51ef212b4de0834d8e39aa5ab98ebadd567', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: '3d6b8930fa2f66ee7da3716e8eea9739ccc1ce94', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '07b4a0dd52f742aa3d5ab502b812dbde644f2a04', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
+                ] }), h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), h("udp-fluent-drawer", { key: 'aa303a377d4aaa20473976dca42b16d3e253ab6d', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, h("udp-lazy-loader", { key: '85a6cc60167f024d1e68c64a80db28d701cba51d', if: this.formDrawerOpen, content: () => (h("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { appearance: "outline", onClick: () => (this.secondDrawerOpen = true) }, "Open Second Drawer")), h("test-form", { handleSubmit: this.handleSubmit, formId: "registry-drawer-form" }))) }), h("udp-fluent-button", { key: '636725804c2c6541dd375b6b6745a533a5933e6d', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), h("udp-fluent-button", { key: 'b9d26d098aba2a8d86420851fa4cd8c94ef99c92', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), h("udp-fluent-drawer", { key: 'b591dbad939aaacfc2b07f761d1c5574ec632672', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, h("udp-lazy-loader", { key: 'bb9a236daf20c79b5628f98511f18dc004bde157', if: this.manualDrawerOpen, content: () => (h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), h("udp-fluent-button", { key: '4868f7758a3c5fb1baa801351e21226939f642a1', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
                 var _a;
                 void ((_a = this.manualFormInstance) === null || _a === void 0 ? void 0 : _a.submit());
-            } }, "Submit (Manual)")), h("udp-fluent-dialog", { key: 'd49d81a77336a937ae737243fade81c91a692a75', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: 'be85b912b653656c3deb6a6a008b698788b1d264' }, "This dialog was opened from inside the drawer!"), h("div", { key: '226c017a93e0da8f4893059eeef2fd1ed441daa1' }, h("p", { key: '99f7f7bed3024e4fba883e01cc07585e208a9c31' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '744bb09155ae63446d72b59f849e18c338eb30fd' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'f2828044200ba3cf8f2fc719ec5f8811cc54f6dd' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), h("udp-fluent-button", { key: '1e2e6f52a0739446dd3fa314ef7d7b35046e3f27', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'e2837943d9918bdfa016a609823250adfd0e94cc', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '671165fe9ca8af35d26aacbc8ef8fa994834f8a6', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: 'aae8fd0b613469f9b5ee3edc8f4532aabc3dee2b', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: 'c2699ba856ea6b5b42c763643573e4864c680914' }, "This is the second drawer opened from within the first drawer."), h("div", { key: '8eb4a76293cf590d0aae1b73362b9da0ef8e235f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: '3f631e6f4d8f25929d7b340c57dfd76e8b5824d7', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: '386b7e6f8eb5c9b21e19deb86226a357fdb8c8ac', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: 'fa4b0ea7fd56f38a1c7c554b8f282075bb2aceb5' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'fa4511d7ed24b65534c81cb7ea39a01f9059f354' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'f3227905a61113a1ffcf684cc403c49c727789e7' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("p", { key: '3a22d6acff8e3d659780a4d6c60737bd224834a2' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), h("p", { key: 'aa727f7ef1076a84cc0027b304aa0f776b26a0e7' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), h("udp-fluent-button", { key: 'e92e241234b7f87a5ee20842549f7f153fe0a973', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: 'b156a016bee30cb3482582b896b375723de717cd', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: '4225d763b8d8423d742cd9bb8d7244589f4291de', style: { padding: '16px' } }, h("p", { key: '5dc33a244057589e3727f28042ef156223e86e5e' }, "This is the third drawer! Three levels deep."), h("p", { key: '41c02615fb6c1a565a051836886175a6f22d49a1', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: 'cecf2b0fb5ce3c2c971bdec99e4a47c2b974e2be' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '01d310de5496eb58817e47480b9fe9dbfe8ced28' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), h("p", { key: '1c4174e92c66f10338b8d96b9c7e63efa65e8cf7' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), h("p", { key: '270d3de261d06e3aaa9bacb89fb5d2cc8879cb52' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), h("p", { key: '43d1a028934c5501f710355c7e5338119ddf496d' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), h("udp-fluent-button", { key: 'e467504fda19d0e85041d8300cc970c5dccc970d', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: '01112cb144df8ea78d76098e71caa206ad9d3954', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: '444b505efe77b882d9159ed62ee4b6fefdcdfc7b' }, "This dialog was opened from the second drawer!"), h("p", { key: 'db5c1b0af0cdcd87ca7d540a63ede5d6c8493442' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '41c486e46bff47d23db86113c58edd1e85c2fbb3' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: '2cc8f8196054e826fd5539e38bd9229987f4c123' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("udp-fluent-button", { key: 'cfeab7536777e88636e24d322d1a3d1cf72ef6e0', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '76cdbd3b247fc9cace656080dd3cccf6fd3ec9a2', appearance: "primary", slot: "action" }, "Confirm"))));
+            } }, "Submit (Manual)")), h("udp-fluent-dialog", { key: '85f2b641cc9f0ecaa327da056cd9a52e270912e3', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, h("div", { key: 'e3bf597e4dacdf1e34c8dfdf63c65bc9e3e7a482' }, "This dialog was opened from inside the drawer!"), h("div", { key: '9c17eee8d9ab701c15635272326efa2122f63f0c' }, h("p", { key: '24f3c246adec7d822bf173185ce3a99384627527' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'cb494e999d170265608078b3a27e7db7f873e51a' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: '3374084f9b619e4ece2740899dc4182f8f59595e' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), h("udp-fluent-button", { key: '7cbe9d22b1c4567b05b0f024ea9fe9fb84a918cd', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: '6593fa9478602571627c3694ca1832a30976fb6b', appearance: "primary", slot: "action" }, "Confirm")), h("udp-fluent-drawer", { key: '790e2ba054f94c62c9d796f377c6169067540a93', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, h("div", { key: 'd1b8b5de6636906ebd9a90839b9cebcda84a2348', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, h("p", { key: '572f5051af669e4ba4eee3213179440ebb709b9c' }, "This is the second drawer opened from within the first drawer."), h("div", { key: '369218231794b928d71436b8c485b6ccceade3a7', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, h("udp-fluent-button", { key: 'a9dac02d2735f1c9f45d870556c7aa19fffedf4b', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), h("udp-fluent-button", { key: '5ac90eff5ac462a03f5fd8356312daa801db8087', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), h("p", { key: '14d78095ab4e7206ac6134c03a71977d337a882b' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '1c3f3d7fa0796680baedee05327c212e8171a3e1' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'e25f5a441ce0f5a7b9560b59b9549672f7c197d0' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("p", { key: 'fab1cc9450f5cf226178fc4734848c3e3837156b' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), h("p", { key: '3afe2eda21c841bfd9a5509b34e6943ed7e695e7' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), h("udp-fluent-button", { key: '73cb8d42a6e2ca8da6600a00a2c52c4050934fc4', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), h("udp-fluent-drawer", { key: 'e6988e2de64a1a14a5ed85a5afa83c2add46e493', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, h("div", { key: '62348c97061715dabfc70a1aca8012a2aad0c63c', style: { padding: '16px' } }, h("p", { key: '5f3c0df123e2972d797637171afa36e315135f6d' }, "This is the third drawer! Three levels deep."), h("p", { key: 'eac31168ea71b9404b2b8f85ed7df3ba7e589260', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), h("p", { key: '6ae4321c62ed498241b6102d4d2f331235b7f50d' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: '73b8ea6208a950c2cf2dee064b26199f0774c3bb' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), h("p", { key: 'f6e290a4be14b777037b9fecc6d9fb410c3bf783' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), h("p", { key: '1daebc59739f4cadc1cdb772e77be7a1761c8a17' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), h("p", { key: 'fde52e84d6ac74dc882f421d4ea27803d4d3eb73' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), h("udp-fluent-button", { key: '24147fbe1ae6d2341ba61442ec61c070de51100a', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), h("udp-fluent-dialog", { key: 'ec067f433388c06cd1b73807429ff951c92813f3', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, h("div", { key: 'aa08e40a57a62398d1faf514d2a0e09b50170ffc' }, "This dialog was opened from the second drawer!"), h("p", { key: 'e4a021b7057c9945658e0bf35ddf3f065a049fcc' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), h("p", { key: 'b5104a7ec49333cf1750f228e81f0b47c7e0a0d9' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), h("p", { key: 'dfb26ae04becff477de1d1bd4b6b5648918644da' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), h("udp-fluent-button", { key: 'eddcd6ff3b9ec7ab9de1ef1db575d583a7c002ba', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), h("udp-fluent-button", { key: 'c1b38551c76d49c97b28f9adfa43f9bcaa799a60', appearance: "primary", slot: "action" }, "Confirm"))));
     }
     static get is() { return "test-components-page"; }
     static get encapsulation() { return "shadow"; }