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-input-phone.demo.ts

@@ -1,3 +1,80 @@
-import { html } from '@design.estate/dees-element';
+import { html, css } from '@design.estate/dees-element';
 
-export const demoFunc = () => html`<dees-input-phone .label=${'Phone Number'}></dees-input-phone>`;
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        
+        .horizontal-group {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
+        <dees-input-phone 
+          .label=${'Phone Number'} 
+          .description=${'Enter your phone number with country code'}
+          .value=${'5551234567'}
+        ></dees-input-phone>
+        
+        <dees-input-phone 
+          .label=${'Contact Phone'} 
+          .description=${'Required for account verification'}
+          .required=${true}
+          .placeholder=${'+1 (555) 000-0000'}
+        ></dees-input-phone>
+      </dees-panel>
+      
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
+        <div class="horizontal-group">
+          <dees-input-phone 
+            .label=${'Mobile'} 
+            .layoutMode=${'horizontal'}
+            .value=${'4155551234'}
+          ></dees-input-phone>
+          
+          <dees-input-phone 
+            .label=${'Office'} 
+            .layoutMode=${'horizontal'}
+            .placeholder=${'+1 (800) 555-0000'}
+          ></dees-input-phone>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
+        <dees-input-phone 
+          .label=${'International Contact'} 
+          .description=${'Automatically formats international numbers'}
+          .value=${'441234567890'}
+        ></dees-input-phone>
+        
+        <dees-input-phone 
+          .label=${'Emergency Contact'} 
+          .value=${'911'}
+          .disabled=${true}
+        ></dees-input-phone>
+      </dees-panel>
+      
+      <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
+        <dees-form>
+          <dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
+          <dees-input-phone .label=${'Phone Number'} .required=${true}></dees-input-phone>
+          <dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
+        </dees-form>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;