feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts

@@ -0,0 +1,91 @@
+import { html, cssManager } from '@design.estate/dees-element';
+import * as interfaces from '../../interfaces/index.js';
+
+export const demoFunc = () => {
+  const horizontalTabs: interfaces.IMenuItem[] = [
+    { key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
+    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
+    { key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
+    { key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
+    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
+  ];
+
+  const verticalTabs: interfaces.IMenuItem[] = [
+    { key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
+    { key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
+    { key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
+    { key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
+    { key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
+  ];
+
+  const noIndicatorTabs: interfaces.IMenuItem[] = [
+    { key: 'All', action: () => console.log('All clicked') },
+    { key: 'Active', action: () => console.log('Active clicked') },
+    { key: 'Completed', action: () => console.log('Completed clicked') },
+    { key: 'Archived', action: () => console.log('Archived clicked') },
+  ];
+
+  const demoContent = (text: string) => html`
+    <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
+      ${text}
+    </div>
+  `;
+
+  return html`
+    <style>
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        padding: 48px;
+        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+        min-height: 100vh;
+      }
+
+      .section {
+        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 8px;
+        padding: 24px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .two-column {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        gap: 24px;
+        align-items: start;
+      }
+    </style>
+    <div class="demo-container">
+      <div class="section">
+        <div class="section-title">Horizontal Tabs with Animated Indicator</div>
+        <dees-appui-tabs .tabs=${horizontalTabs}>
+          ${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
+        </dees-appui-tabs>
+      </div>
+
+      <div class="section">
+        <div class="section-title">Vertical Tabs Layout</div>
+        <div class="two-column">
+          <dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
+          ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
+        </div>
+      </div>
+
+      <div class="section">
+        <div class="section-title">Without Indicator</div>
+        <dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
+          ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
+        </dees-appui-tabs>
+      </div>
+    </div>
+  `;
+};