update

ts_web/elements/dees-modal.demo.ts

@@ -40,6 +40,89 @@ export const demoFunc = () => html`
   </style>
   
   <div class="demo-container">
+    <div class="demo-section">
+      <h3>Header Buttons</h3>
+      <p>Modals can have optional header buttons for help and closing.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'With Help Button',
+            showHelpButton: true,
+            onHelp: async () => {
+              const helpModal = await DeesModal.createAndShow({
+                heading: 'Help',
+                width: 'small',
+                showCloseButton: true,
+                showHelpButton: false,
+                content: html`
+                  <p>This is the help content for the modal.</p>
+                  <p>You can provide context-specific help here.</p>
+                `,
+                menuOptions: [{
+                  name: 'Got it',
+                  action: async (modal) => modal.destroy()
+                }],
+              });
+            },
+            content: html`
+              <p>This modal has a help button in the header. Click it to see help content.</p>
+              <p>The close button is also visible by default.</p>
+            `,
+            menuOptions: [{
+              name: 'OK',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>With Help Button</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'No Close Button',
+            showCloseButton: false,
+            content: html`
+              <p>This modal has no close button in the header.</p>
+              <p>You must use the action buttons or click outside to close it.</p>
+            `,
+            menuOptions: [{
+              name: 'Close',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>No Close Button</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Both Buttons',
+            showHelpButton: true,
+            showCloseButton: true,
+            onHelp: () => alert('Help clicked!'),
+            content: html`
+              <p>This modal has both help and close buttons.</p>
+            `,
+            menuOptions: [{
+              name: 'Done',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Both Buttons</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Clean Header',
+            showCloseButton: false,
+            showHelpButton: false,
+            content: html`
+              <p>This modal has a clean header with no buttons.</p>
+            `,
+            menuOptions: [{
+              name: 'Close',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Clean Header</dees-button>
+      </div>
+    </div>
+    
     <div class="demo-section">
       <h3>Modal Width Variations</h3>
       <p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
@@ -108,18 +191,25 @@ export const demoFunc = () => html`
         
         <dees-button @click=${() => {
           DeesModal.createAndShow({
-            heading: 'Fullscreen Modal',
+            heading: 'Fullscreen Editor',
             width: 'fullscreen',
+            showHelpButton: true,
+            onHelp: async () => {
+              alert('In a real app, this would show editor documentation');
+            },
             content: html`
-              <h4>Fullscreen Experience</h4>
-              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. Great for immersive experiences, detailed editors, or when you need maximum space.</p>
+              <h4>Fullscreen Experience with Header Controls</h4>
+              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.</p>
               <p>The content area can be as tall as needed and will scroll if necessary.</p>
               <div style="height: 200px; background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
                 <span style="color: ${cssManager.bdTheme('#999', '#666')}">Large content area</span>
               </div>
             `,
             menuOptions: [{
-              name: 'Close',
+              name: 'Save',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Cancel',
               action: async (modal) => modal.destroy()
             }],
           });
@@ -217,7 +307,7 @@ export const demoFunc = () => html`
           DeesModal.createAndShow({
             heading: 'No Actions',
             content: html`
-              <p>This modal has no buttons. Click outside or press ESC to close.</p>
+              <p>This modal has no bottom buttons. Use the X button or click outside to close.</p>
               <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')};">This is useful for informational modals that don't require user action.</p>
             `,
             menuOptions: [],
@@ -249,8 +339,11 @@ export const demoFunc = () => html`
         DeesModal.createAndShow({
           heading: 'Responsive Modal',
           width: 'large',
+          showHelpButton: true,
+          onHelp: () => console.log('Help requested for responsive modal'),
           content: html`
             <p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
+            <p>The header buttons remain accessible at all viewport sizes.</p>
           `,
           menuOptions: [{
             name: 'Close',