feat: Enhance dees-appui components with dynamic tab and menu configurations

- Updated dees-appui-mainmenu to accept dynamic tabs with actions and icons.
- Modified dees-appui-mainselector to support dynamic selection options.
- Introduced dees-appui-tabs for improved tab navigation with customizable styles.
- Added dees-appui-view to manage views with tabs and content dynamically.
- Implemented event dispatching for tab and option selections.
- Created a comprehensive architecture documentation for dees-appui system.
- Added demo implementations for dees-appui-base and other components.
- Improved responsiveness and user interaction feedback across components.

ts_web/elements/dees-appui-mainselector.ts

@@ -19,22 +19,22 @@ import {
  */
 @customElement('dees-appui-mainselector')
 export class DeesAppuiMainselector extends DeesElement {
-  public static demo = () => html`<dees-appui-mainselector></dees-appui-mainselector>`;
+  public static demo = () => html`
+    <dees-appui-mainselector
+      .selectionOptions=${[
+        { key: 'Overview', action: () => console.log('Overview') },
+        { key: 'Components', action: () => console.log('Components') },
+        { key: 'Services', action: () => console.log('Services') },
+        { key: 'Database', action: () => console.log('Database') },
+        { key: 'Settings', action: () => console.log('Settings') },
+      ]}
+    ></dees-appui-mainselector>
+  `;
 
   // INSTANCE
-  @property()
+  @property({ type: Array })
   public selectionOptions: interfaces.ISelectionOption[] = [
-    {
-      key: 'Overview',
-      action: () => {},
-    },
-    {
-      key: 'option 1',
-      action: () => {},
-    },
-    { key: 'option 2', action: () => {} },
-    { key: 'option 3', action: () => {} },
-    { key: 'option 4', action: () => {} },
+    { key: '⚠️ Please set selection options', action: () => console.warn('No selection options configured for mainselector') },
   ];
 
   @property()
@@ -152,9 +152,20 @@ export class DeesAppuiMainselector extends DeesElement {
   private selectOption(optionArg: interfaces.ISelectionOption) {
     this.selectedOption = optionArg;
     this.selectedOption.action();
+    
+    // Emit option-select event
+    this.dispatchEvent(new CustomEvent('option-select', {
+      detail: { option: optionArg },
+      bubbles: true,
+      composed: true
+    }));
   }
 
-  firstUpdated() {
-    this.selectOption(this.selectionOptions[0]);
+  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    if (this.selectionOptions && this.selectionOptions.length > 0) {
+      await this.updateComplete;
+      this.selectOption(this.selectionOptions[0]);
+    }
   }
 }