feat: Enhance demo components with new input types and layout options

- Added dropdown and radio input components to the demo for application settings.
- Introduced horizontal layout for display preferences and notification settings.
- Implemented checkbox demo with programmatic selection and clear functionality.
- Created file upload and quantity selector demos with various states and configurations.
- Added comprehensive radio input demo showcasing group behavior and various states.
- Developed text input demo with validation states and advanced features like password visibility.
- Introduced a new panel component for better content organization in demos.

ts_web/elements/dees-panel.demo.ts

@@ -0,0 +1,81 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-background {
+        padding: 24px;
+        background: ${cssManager.bdTheme('#f0f0f0', '#0a0a0a')};
+        min-height: 100vh;
+      }
+      
+      .demo-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+      
+      .grid-layout {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+      }
+      
+      @media (max-width: 768px) {
+        .grid-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+    `}
+  </style>
+  
+  <div class="demo-background">
+    <div class="demo-container">
+      <dees-panel .title=${'Panel Component'}>
+        <p>The panel component automatically follows the theme and provides consistent styling for grouped content.</p>
+        <p>It's perfect for creating sections in your application with proper spacing and borders.</p>
+      </dees-panel>
+      
+      <dees-panel .title=${'Panel with Subtitle'} .subtitle=${'Additional context information'}>
+        <p>Panels can have both a title and subtitle to provide more context.</p>
+        <p>The subtitle appears in a smaller, muted text below the title.</p>
+      </dees-panel>
+      
+      <div class="grid-layout">
+        <dees-panel .title=${'Feature 1'}>
+          <p>Grid layouts work great with panels for creating dashboards and feature sections.</p>
+          <dees-button>Action</dees-button>
+        </dees-panel>
+        
+        <dees-panel .title=${'Feature 2'}>
+          <p>Each panel maintains consistent spacing and styling.</p>
+          <dees-button>Another Action</dees-button>
+        </dees-panel>
+      </div>
+      
+      <dees-panel .title=${'Complex Content'}>
+        <h4>Nested Elements</h4>
+        <p>Panels can contain any type of content:</p>
+        <ul>
+          <li>Text and paragraphs</li>
+          <li>Lists and tables</li>
+          <li>Form inputs</li>
+          <li>Other components</li>
+        </ul>
+        
+        <dees-input-text .label=${'Example Input'} .description=${'Input inside a panel'}></dees-input-text>
+        
+        <div style="margin-top: 16px;">
+          <dees-button>Submit</dees-button>
+        </div>
+      </dees-panel>
+      
+      <dees-panel>
+        <p>Panels work great even without a title for simple content grouping.</p>
+        <p>They provide visual separation and consistent padding.</p>
+      </dees-panel>
+    </div>
+  </div>
+`;