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-checkbox.ts

@@ -6,8 +6,8 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-checkbox.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,7 +18,7 @@ declare global {
 @customElement('dees-input-checkbox')
 export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   // STATIC
-  public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
+  public static demo = demoFunc;
 
   // INSTANCE