update

ts_web/elements/dees-input-text.demo.ts

@@ -1,5 +1,6 @@
-import { html, css } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -14,36 +15,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .demo-section {
-          background: #f8f9fa;
-          border-radius: 8px;
-          padding: 24px;
+        dees-panel {
+          margin-bottom: 24px;
         }
         
-        @media (prefers-color-scheme: dark) {
-          .demo-section {
-            background: #1a1a1a;
-          }
-        }
-        
-        .demo-section h3 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #0069f2;
-          font-size: 18px;
-        }
-        
-        .demo-section p {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #666;
-          font-size: 14px;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .demo-section p {
-            color: #999;
-          }
+        dees-panel:last-child {
+          margin-bottom: 0;
         }
         
         .horizontal-group {
@@ -64,14 +41,28 @@ export const demoFunc = () => html`
             grid-template-columns: 1fr;
           }
         }
+        
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+        
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
       `}
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
-        <h3>Basic Text Inputs</h3>
-        <p>Standard text inputs with labels and descriptions</p>
-        
+      <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
         <dees-input-text 
           .label=${'Username'} 
           .value=${'johndoe'}
@@ -91,12 +82,9 @@ export const demoFunc = () => html`
           .value=${'secret123'}
           .key=${'password'}
         ></dees-input-text>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Horizontal Layout</h3>
-        <p>Multiple inputs arranged horizontally for compact forms</p>
-        
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
         <div class="horizontal-group">
           <dees-input-text 
             .label=${'First Name'} 
@@ -119,12 +107,9 @@ export const demoFunc = () => html`
             .key=${'age'}
           ></dees-input-text>
         </div>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Label Positions</h3>
-        <p>Different label positioning options for various layouts</p>
-        
+      <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
         <dees-input-text 
           .label=${'Label on Top (Default)'} 
           .value=${'Standard layout'} 
@@ -150,12 +135,9 @@ export const demoFunc = () => html`
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Validation & States</h3>
-        <p>Different validation states and input configurations</p>
-        
+      <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
         <dees-input-text 
           .label=${'Required Field'} 
           .required=${true}
@@ -174,12 +156,9 @@ export const demoFunc = () => html`
           .validationText=${'Please enter a valid email address'}
           .validationState=${'invalid'}
         ></dees-input-text>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Advanced Features</h3>
-        <p>Password visibility toggle and other advanced features</p>
-        
+      <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
         <dees-input-text 
           .label=${'Password with Toggle'} 
           .isPasswordBool=${true}
@@ -193,7 +172,24 @@ export const demoFunc = () => html`
           .value=${'sk-1234567890abcdef'}
           .description=${'Keep this key secure and never share it'}
         ></dees-input-text>
-      </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the inputs to see real-time value changes'}>
+        <dees-input-text 
+          .label=${'Dynamic Input'} 
+          .placeholder=${'Type something here...'}
+          @changeSubject=${(event) => {
+            const output = document.querySelector('#text-input-output');
+            if (output && event.detail) {
+              output.textContent = `Current value: "${event.detail.getValue()}"`;
+            }
+          }}
+        ></dees-input-text>
+        
+        <div class="interactive-section">
+          <div id="text-input-output" class="output-text">Current value: ""</div>
+        </div>
+      </dees-panel>
     </div>
   </dees-demowrapper>
 `;