v3.35.1

changelog.md

@@ -1,5 +1,118 @@
 # Changelog
 
+## 2026-01-12 - 3.35.1 - fix(dees-statsgrid)
+center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions
+
+- Add .cpu-cores-bars.centered CSS rule to horizontally center the bars when appropriate.
+- Compute shouldCenter by estimating max bars width (cores * 24px + gaps) and comparing to estimated tile content width (accounts for columnSpan, minTileWidth, gap and ~32px padding), using a 66.6% threshold.
+- Change .cpu-core-bar-container to position: relative and .cpu-core-bar-fill to position: absolute (bottom:0; left:0; right:0) to ensure correct vertical alignment and smoother height transitions.
+
+## 2026-01-12 - 3.35.0 - feat(dees-statsgrid)
+add cpuCores tile type with column spanning, rendering, demo and docs
+
+- Introduce ICpuCore and coresData on IStatsTile to represent per-core usage
+- Implement renderCpuCores with responsive vertical bars, color thresholds (low/medium/high) and average usage header
+- Add columnSpan support for tiles and apply it to grid items (style grid-column: span N)
+- Add demo entries (8/16/32 core examples), Randomize grid action and updated demo layout
+- Document StatsGrid enhancements in readme.hints.md (usage examples and available tile types)
+- Bump devDependencies (@git.zone/tsbuild, @git.zone/tsbundle, @types/node), simplify build script to use tsbundle, and add @git.zone/tsbundle config in npmextra.json
+
+## 2026-01-12 - 3.34.1 - fix(deps)
+move @design.estate/dees-wcctools from devDependencies to dependencies
+
+- Promoted @design.estate/dees-wcctools@^3.7.1 to runtime dependencies so it will be installed in production builds.
+
+## 2026-01-07 - 3.34.0 - feat(dees-input-toggle)
+Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
+
+- New UI input component: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts — toggle switch with pointer drag, keyboard support, value syncing and DeesInputBase integration.
+- Interactive demo added: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts demonstrating usage, batch operations and event handling.
+- Module exports updated: added ts_web/elements/00group-input/dees-input-toggle/index.ts and exported from ts_web/elements/00group-input/index.ts.
+- DeesForm integration: imported DeesInputToggle and added it to the form components array and input union types in ts_web/elements/00group-form/dees-form/dees-form.ts
+
+## 2026-01-06 - 3.33.0 - feat(dees-statsgrid)
+add multiPercentage tile type to stats grid
+
+- Add new 'multiPercentage' type to IStatsTile (percentages: [{label, value, color?}])
+- Implement renderMultiPercentage() to render up to 3 percentage items with label, value and colored progress bars
+- Add CSS styles for multi-percentage layout, bars, labels and values
+- Update demo to replace 'Error Rate' tile with a 'Resource Usage' multiPercentage example (CPU, Memory, Disk)
+- Change is additive and backward-compatible with existing tile types
+
+## 2026-01-04 - 3.32.0 - feat(demo)
+add demoGroup metadata to components and update related dependencies
+
+- Add public static demoGroup properties to many components to categorize demos (groups added: App UI, Button, Chart, Data View, Form, Input, PDF, Simple, Workspace).
+- Bump package deps/devDeps: @design.estate/dees-domtools -> ^2.3.7, @design.estate/dees-element -> ^2.1.5, @design.estate/dees-wcctools -> ^3.7.1.
+- Clean up package.json deps (removed duplicate entries and removed 'lit' dependency).
+- Refactor dees-pdf-viewer to use consolidated directives import (directives.keyed and directives.repeat) instead of separate keyed/repeat imports.
+
+## 2026-01-04 - 3.31.0 - feat(dees-input-list)
+enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner
+
+- Add rich drag state to dees-input-list: dragStartY, dragCurrentY, targetIndex, itemHeight and originalItemRects for accurate hit detection.
+- Introduce bound global drag handlers and centralized global drag end/cleanup logic (handleGlobalDragOver / handleGlobalDragEnd).
+- Improve drag visuals and animations: 'dragging', 'move-up', 'move-down' transforms, box-shadow, and smoother transitions; prevent hover styling while dragging.
+- Move reorder logic away from per-item drop to global drag end to avoid race/positioning issues and ensure consistent reflow and cleanup.
+- Migrate many browser test files to chromium-specific variants (added *.chromium.ts) and remove duplicate browser test counterparts.
+
+## 2026-01-04 - 3.30.1 - fix(dees-statsgrid)
+refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance
+
+- Reduce global spacing and sizing variables (grid-gap 16→12, tile-padding 24→16, header-spacing 16→12, content-min-height 48→40, description-spacing 12→8, border-radius 8→6).
+- Adjust typographic scale (value-font-size 30→26, unit-font-size 16→14, label-font-size 13→12, title-font-size 14→13).
+- Switch color tokens to neutral hex values and tighten hover/box-shadow (tile border and backgrounds updated from HSL to hex, hover bg to #fafafa/#0d0d0d, border-color and shadow reduced).
+- Downsize graphical elements: gauge and SVG dimensions (width 140→120, height 80→70), stroke-widths 8→6, radius 48→40.
+- Slim down percentage bar and trend visuals (percentage bar height 8→6, border-radius 4→3, trend stroke-width 2→1.5, trend fill moved to RGBA).
+- No functional or API changes — purely visual/CSS and SVG adjustments.
+
+## 2026-01-03 - 3.30.0 - feat(appui)
+add dees-appui-bottombar component with config, programmatic API, demo and docs
+
+- Adds a new dees-appui-bottombar web component (ts_web/elements/00group-appui/dees-appui-bottombar/) implementing widget and action management (add/update/remove/get/clear).
+- Introduces bottom bar types and API in ts_web/elements/interfaces/appconfig.ts (IBottomBarWidget, IBottomBarAction, IBottomBarConfig, IBottomBarAPI) and extends the app config/type to include bottomBar and bottomBar APIs.
+- Integrates the bottom bar into dees-appui: imports and registers component, renders conditionally, exposes bottomBar proxy API, visibility controls (set/getBottomBarVisible), and wires initial config to populate widgets/actions.
+- Updates layout/styles (reduces main grid height to account for 24px fixed bottom bar and adds bottombar-hidden attribute handling) and exports component from the appui index.
+- Adds interactive demos (dees-appui-bottombar.demo.ts and integration demo) and documents usage and API in readme.hints.md.
+
+## 2026-01-03 - 3.29.3 - fix(elements/appui)
+prevent scroll chaining on app UI components by adding overscroll-behavior: contain
+
+- Added CSS overscroll-behavior: contain to activity log, main menu, secondary menu, profile dropdown, and tabs components to prevent scroll chaining and unintended body scrolling on touch/trackpad.
+- Styling-only change; no public API or behavioral changes beyond scroll handling.
+- Bump patch version from 3.29.2 to 3.29.3.
+
+## 2026-01-03 - 3.29.2 - fix(dees-appui)
+set min-height: 0 on .maingrid > dees-appui-maincontent to prevent layout overflow in flex container
+
+- Added min-height: 0 to .maingrid > dees-appui-maincontent in ts_web/elements/00group-appui/dees-appui/dees-appui.ts to prevent unwanted growth/overflow when used inside a flex container.
+- Pure CSS/layout fix — no API or behavior changes to components.
+
+## 2026-01-03 - 3.29.1 - fix(dees-appui)
+prevent main grid overflow by adding overflow:hidden; and add Playwright scroll containment screenshots
+
+- Add overflow: hidden to .maingrid in ts_web/elements/00group-appui/dees-appui/dees-appui.ts to prevent content from escaping during grid-template-columns transitions.
+- Add Playwright artifacts: .playwright-mcp/after-scroll.png and .playwright-mcp/scroll-containment-check.png (screenshots for scroll containment testing).
+
+## 2026-01-03 - 3.29.0 - feat(docs)
+add documentation for new input components, activity log features, theming, and expand DeesAppui docs
+
+- Updated top-level README to reflect component count increase (75+ → 80+) and added many new component docs
+- Added documentation and examples for DeesInputList (sortable list input) and DeesInputProfilepicture (cropping, upload, processing)
+- Introduced DeesTheme documentation with usage examples and CSS custom property overrides
+- Expanded DeesAppui readme with architecture overview, activity log panel docs, activity entry types, and navigation/secondary menu guidance
+- Documented activity log APIs and controls (activityLog.add, addMany, clear, getEntries, filter, search) and new control API helpers (setActivityLogVisible, toggleActivityLog, getActivityLogVisible)
+- Updated Appbar examples to include activity log toggle properties (.showActivityLogToggle, .activityLogCount, .activityLogActive) and @activity-toggle event
+- Added interface docs (IViewDefinition, IActivityEntry) and updated menu/secondary menu type references
+- Changes are documentation-focused (README/element readmes); no source code logic changes shown in this diff
+
+## 2026-01-03 - 3.28.1 - fix(appui)
+adjust layout and spacing in app UI components: fix activity log overflow, contain main content overscroll, and refine secondary menu padding/transition
+
+- ts_web/elements/00group-appui/dees-appui-activitylog: removed host max-width, added overflow:hidden and set .maincontainer width to 280px to prevent horizontal overflow
+- ts_web/elements/00group-appui/dees-appui-maincontent: added overscroll-behavior: contain to .content-area to prevent scroll chaining/overscroll
+- ts_web/elements/00group-appui/dees-appui-secondarymenu: updated .groupHeader padding and hover border behavior, increased group icon size from 14px to 16px, and added margin + transition tweaks to .groupItems for smoother collapse/expand
+
 ## 2026-01-02 - 3.28.0 - feat(dees-appui)
 Rename DeesAppuiBase to DeesAppui and migrate related API, exports, demos and docs
 

npmextra.json

@@ -49,5 +49,15 @@
   },
   "@ship.zone/szci": {
     "npmGlobalTools": []
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.28.0",
+  "version": "3.35.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
     "watch": "tswatch element",
     "buildDocs": "tsdoc",
     "postinstall": "node scripts/update-monaco-version.cjs"
@@ -16,8 +16,9 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-domtools": "^2.3.7",
+    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-wcctools": "^3.7.1",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -25,6 +26,7 @@
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.1.0",
+    "@tempfix/webcontainer__api": "1.6.1",
     "@tiptap/core": "^2.23.0",
     "@tiptap/extension-link": "^2.23.0",
     "@tiptap/extension-text-align": "^2.23.0",
@@ -32,11 +34,9 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.3.0",
-    "@tempfix/webcontainer__api": "1.6.1",
     "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lit": "^3.3.1",
     "lucide": "^0.562.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
@@ -44,13 +44,12 @@
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@design.estate/dees-wcctools": "^3.4.0",
-    "@git.zone/tsbuild": "^4.0.2",
-    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tsbuild": "^4.1.0",
+    "@git.zone/tsbundle": "^2.8.1",
     "@git.zone/tstest": "^3.1.4",
     "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.6"
   },
   "files": [
     "ts/**/*",

readme.hints.md

@@ -800,4 +800,177 @@ html`
 - **External Router Support**: Integrate with Angular Router or other frameworks
 - **State Persistence**: Save/restore collapsed menus, selections, and current view
 - **View-specific Menus**: Each view can define its own secondary menu and tabs
-- **Full Backward Compatibility**: Existing code continues to work
+- **Full Backward Compatibility**: Existing code continues to work
+
+## AppUI Bottom Bar (2026-01-03)
+
+Added a new `dees-appui-bottombar` component similar to `dees-workspace-bottombar`, providing a 24px fixed-height status bar at the bottom of the app shell.
+
+### Features:
+- **Generic status widgets**: Configurable widgets with icon, label, status colors, loading spinner
+- **App-specific actions**: Quick action buttons with icons and tooltips
+- **Always visible**: Fixed 24px height at the bottom of the app
+- **Status colors**: idle, active (blue), success (green), warning (yellow), error (red)
+- **Context menus**: Widgets can have right-click context menus
+
+### New Interfaces (in `interfaces/appconfig.ts`):
+
+```typescript
+interface IBottomBarWidget {
+  id: string;
+  iconName?: string;
+  label?: string;
+  status?: 'idle' | 'active' | 'success' | 'warning' | 'error';
+  tooltip?: string;
+  loading?: boolean;
+  onClick?: () => void;
+  contextMenuItems?: IBottomBarContextMenuItem[];
+  position?: 'left' | 'right';
+  order?: number;
+}
+
+interface IBottomBarAction {
+  id: string;
+  iconName: string;
+  tooltip?: string;
+  onClick: () => void | Promise<void>;
+  disabled?: boolean;
+  position?: 'left' | 'right';
+}
+
+interface IBottomBarConfig {
+  visible?: boolean;
+  widgets?: IBottomBarWidget[];
+  actions?: IBottomBarAction[];
+}
+```
+
+### Usage via configure():
+
+```typescript
+const config: IAppConfig = {
+  // ... other config
+  bottomBar: {
+    visible: true,
+    widgets: [
+      {
+        id: 'status',
+        iconName: 'lucide:activity',
+        label: 'System Online',
+        status: 'success',
+        tooltip: 'All systems operational',
+        onClick: () => console.log('Status clicked'),
+      },
+      {
+        id: 'notifications',
+        iconName: 'lucide:bell',
+        label: '3 notifications',
+        status: 'warning',
+        position: 'left',
+      },
+      {
+        id: 'version',
+        iconName: 'lucide:gitBranch',
+        label: 'v1.2.3',
+        position: 'right',
+      },
+    ],
+    actions: [
+      {
+        id: 'terminal',
+        iconName: 'lucide:terminal',
+        tooltip: 'Open Terminal',
+        position: 'right',
+        onClick: () => console.log('Terminal clicked'),
+      },
+    ],
+  },
+};
+```
+
+### Programmatic API:
+
+```typescript
+// Add/update/remove widgets
+appui.bottomBar.addWidget({ id: 'status', ... });
+appui.bottomBar.updateWidget('status', { status: 'error', label: 'Error!' });
+appui.bottomBar.removeWidget('status');
+appui.bottomBar.clearWidgets();
+
+// Add/remove actions
+appui.bottomBar.addAction({ id: 'refresh', iconName: 'lucide:refreshCw', ... });
+appui.bottomBar.removeAction('refresh');
+appui.bottomBar.clearActions();
+
+// Visibility control
+appui.setBottomBarVisible(false);
+appui.getBottomBarVisible();
+```
+
+### Files:
+- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts` - Main component
+- `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts` - Demo
+- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
+
+## StatsGrid Enhancements (2026-01-12)
+
+### Column Spanning
+
+Tiles can now span multiple columns using the `columnSpan` property. This is useful for wider visualizations like the CPU cores tile.
+
+```typescript
+const tile: IStatsTile = {
+  id: 'wide-tile',
+  title: 'Wide Tile',
+  value: 100,
+  type: 'cpuCores',
+  columnSpan: 2,  // Spans 2 columns
+  coresData: [...]
+};
+```
+
+Note: On smaller screens where only 1 column fits, tiles will automatically fall back to single column width.
+
+### CPU Cores Tile Type
+
+New tile type `cpuCores` for visualizing multi-core CPU usage with vertical bars:
+
+```typescript
+interface ICpuCore {
+  id: string | number;
+  usage: number;  // 0-100
+  label?: string;
+}
+
+const cpuTile: IStatsTile = {
+  id: 'cpu-cores',
+  title: 'CPU Cores',
+  value: 0,  // Not used, avg is calculated from coresData
+  type: 'cpuCores',
+  icon: 'lucide:cpu',
+  columnSpan: 2,  // Recommended for 8+ cores
+  coresData: [
+    { id: 0, usage: 45, label: '0' },
+    { id: 1, usage: 72, label: '1' },
+    // ... more cores
+  ],
+  description: 'Intel i7 - 8 cores'
+};
+```
+
+Features:
+- Vertical bars showing individual core usage
+- Color-coded: green (<50%), yellow (50-80%), red (>80%)
+- Shows average usage in header
+- Core labels shown for 16 or fewer cores
+- Tooltips show exact usage per core
+- Responsive: bars flex to fill available width
+
+### Available Tile Types:
+- `number` - Simple numeric display
+- `gauge` - Semi-circular gauge with thresholds
+- `percentage` - Progress bar (0-100%)
+- `trend` - Sparkline with recent data
+- `text` - Text value display
+- `multiPercentage` - Multiple progress bars
+- `cpuCores` - Vertical bar visualization for CPU cores

readme.md

@@ -1,6 +1,6 @@
 # @design.estate/dees-catalog
 
-A comprehensive web components library built with TypeScript and LitElement, providing **75+ UI components** for building modern web applications with consistent design and behavior. 🚀
+A comprehensive web components library built with TypeScript and LitElement, providing **80+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
 [![LitElement](https://img.shields.io/badge/LitElement-4.0+-orange.svg)](https://lit.dev/)
@@ -53,13 +53,14 @@ For developers working on this library, please refer to the [UI Components Playb
 | Category | Components |
 |----------|------------|
 | **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
-| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
+| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
 | **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
 | **Development** | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| **Theming** | [`DeesTheme`](#deestheme) |
 | **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
 
@@ -482,6 +483,62 @@ Dynamic list input for managing arrays of typed values.
 ></dees-input-typelist>
 ```
 
+#### `DeesInputList`
+Advanced list input with drag-and-drop reordering, inline editing, and validation.
+
+```typescript
+<dees-input-list
+  key="items"
+  label="List Items"
+  placeholder="Add new item..."
+  .value=${['Item 1', 'Item 2', 'Item 3']}
+  maxItems={10}            // Optional: maximum items
+  minItems={1}             // Optional: minimum items
+  allowDuplicates={false}  // Optional: allow duplicate values
+  sortable={true}          // Optional: enable drag-and-drop reordering
+  confirmDelete={true}     // Optional: confirm before deletion
+  @change=${handleListChange}
+></dees-input-list>
+```
+
+**Key Features:**
+- Add, edit, and remove items inline
+- Drag-and-drop reordering with visual feedback
+- Optional duplicate prevention
+- Min/max item constraints
+- Delete confirmation dialog
+- Full keyboard support
+- Form validation integration
+
+#### `DeesInputProfilepicture`
+Profile picture input with cropping, zoom, and image processing.
+
+```typescript
+<dees-input-profilepicture
+  key="avatar"
+  label="Profile Picture"
+  shape="round"           // Options: round, square
+  size={120}              // Display size in pixels
+  .value=${imageBase64}   // Base64 encoded image or URL
+  allowUpload={true}      // Enable upload button
+  allowDelete={true}      // Enable delete button
+  maxFileSize={5242880}   // Max file size in bytes (5MB)
+  .acceptedFormats=${['image/jpeg', 'image/png', 'image/webp']}
+  outputSize={800}        // Output resolution in pixels
+  outputQuality={0.95}    // JPEG quality (0-1)
+  @change=${handleAvatarChange}
+></dees-input-profilepicture>
+```
+
+**Key Features:**
+- Interactive cropping modal with zoom and pan
+- Drag-and-drop file upload
+- Round or square output shapes
+- Configurable output size and quality
+- File size and format validation
+- Delete functionality
+- Preview on hover
+
 #### `DeesInputDatepicker`
 Date and time picker component with calendar interface and manual typing support.
 
@@ -661,6 +718,7 @@ class MyApp extends DeesElement {
 - **Hash-based Routing**: Automatic URL synchronization with view navigation
 - **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
 - **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
+- **Activity Log Toggle**: Built-in appbar button to show/hide activity panel with entry count badge
 
 **Programmatic APIs include:**
 - `navigateToView(viewId, params?)` - Navigate between views
@@ -670,6 +728,7 @@ class MyApp extends DeesElement {
 - `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu
 - `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI
 - `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
+- `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` - Control activity panel
 
 **View Visibility Control:**
 ```typescript
@@ -740,7 +799,7 @@ Main content area with tab management support.
 ```
 
 #### `DeesAppuiAppbar`
-Professional application bar component with hierarchical menus, breadcrumb navigation, and user account management.
+Professional application bar component with hierarchical menus, breadcrumb navigation, user account management, and activity log toggle.
 
 ```typescript
 <dees-appui-appbar
@@ -775,6 +834,9 @@ Professional application bar component with hierarchical menus, breadcrumb navig
   .breadcrumbs=${'Project > src > components'}
   .showWindowControls=${true}
   .showSearch=${true}
+  .showActivityLogToggle=${true}
+  .activityLogCount=${5}
+  .activityLogActive=${false}
   .user=${{
     name: 'John Doe',
     avatar: '/path/to/avatar.jpg',
@@ -782,6 +844,7 @@ Professional application bar component with hierarchical menus, breadcrumb navig
   }}
   @menu-select=${(e) => handleMenuSelect(e.detail.item)}
   @breadcrumb-navigate=${(e) => handleBreadcrumbClick(e.detail)}
+  @activity-toggle=${() => handleActivityToggle()}
 ></dees-appui-appbar>
 ```
 
@@ -789,9 +852,40 @@ Professional application bar component with hierarchical menus, breadcrumb navig
 - **Hierarchical Menu System** - Top-level menus with dropdown submenus, icons, and keyboard shortcuts
 - **Keyboard Navigation** - Full keyboard support (Tab, Arrow keys, Enter, Escape)
 - **Breadcrumb Navigation** - Customizable breadcrumb trail with click events
-- **User Account Section** - Avatar with status indicator
+- **User Account Section** - Avatar with status indicator and profile dropdown
+- **Activity Log Toggle** - Button with badge count to show/hide activity panel
 - **Accessibility** - Full ARIA support with menubar roles
 
+#### `DeesAppuiActivitylog`
+Real-time activity log panel for displaying user actions and system events.
+
+```typescript
+<dees-appui-activitylog></dees-appui-activitylog>
+
+// Programmatic API
+activityLog.add({
+  type: 'update',        // Options: login, logout, view, create, update, delete, custom
+  user: 'John Doe',
+  message: 'Updated project settings',
+  iconName: 'lucide:settings'  // Optional: custom icon
+});
+
+activityLog.addMany(entries);  // Add multiple entries
+activityLog.clear();           // Clear all entries
+activityLog.getEntries();      // Get all entries
+activityLog.filter({ user: 'John' });  // Filter by user/type
+activityLog.search('settings');        // Search by message
+```
+
+**Key Features:**
+- Stacked entry layout with icon, user, timestamp, and message
+- Date grouping (Today, Yesterday, etc.)
+- Search and filter functionality
+- Context menu for entry actions
+- Live streaming indicator
+- Animated slide-in/out panel
+- Theme-aware styling
+
 #### `DeesAppuiTabs`
 Reusable tab component with horizontal/vertical layout support.
 
@@ -1089,6 +1183,40 @@ Progress indicator component for tracking completion status.
 
 ---
 
+### Theming Components
+
+#### `DeesTheme`
+Theme provider component that wraps children and provides CSS custom properties for consistent theming.
+
+```typescript
+// Basic usage - wrap your app
+<dees-theme>
+  <my-app></my-app>
+</dees-theme>
+
+// With custom overrides
+<dees-theme
+  .customColors=${{
+    primary: '#007bff',
+    success: '#28a745'
+  }}
+  .customSpacing=${{
+    lg: '24px',
+    xl: '32px'
+  }}
+>
+  <my-section></my-section>
+</dees-theme>
+```
+
+**Key Features:**
+- Provides CSS custom properties for colors, spacing, radius, shadows, and transitions
+- Can be nested for section-specific theming
+- Works with dark/light mode
+- Overrides cascade to all child components
+
+---
+
 ### Development Components
 
 #### `DeesEditor`
@@ -1241,6 +1369,29 @@ interface IMenuGroup {
   collapsed?: boolean;
   iconName?: string;
 }
+
+// View definition for app navigation
+interface IViewDefinition {
+  id: string;
+  name: string;
+  iconName?: string;
+  content: string | HTMLElement | (() => TemplateResult);
+  secondaryMenu?: ISecondaryMenuGroup[];
+  contentTabs?: IMenuItem[];
+  route?: string;
+  badge?: string | number;
+}
+
+// Activity log entry
+interface IActivityEntry {
+  id?: string;
+  timestamp?: Date;
+  type: 'login' | 'logout' | 'view' | 'create' | 'update' | 'delete' | 'custom';
+  user: string;
+  message: string;
+  iconName?: string;
+  data?: Record<string, unknown>;
+}
 ```
 
 ---

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.28.0',
+  version: '3.35.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts

@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE PROPERTIES
   @state()
@@ -39,60 +40,92 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        /* CSS Variables aligned with secondary menu */
+        --activitylog-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        --activitylog-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        --activitylog-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
+        --activitylog-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        --activitylog-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        --activitylog-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        --activitylog-accent: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+
+        color: var(--activitylog-fg);
         position: relative;
         display: block;
         width: 100%;
-        max-width: 320px;
         height: 100%;
-        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        font-family: 'Geist Mono', monospace;
-        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: var(--activitylog-bg);
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        border-left: 1px solid var(--activitylog-border);
         cursor: default;
-        box-shadow: ${cssManager.bdTheme(
-          '-4px 0 12px rgba(0, 0, 0, 0.02)',
-          '-4px 0 12px rgba(0, 0, 0, 0.2)'
-        )};
+        overflow: hidden;
       }
+
       .maincontainer {
         position: absolute;
         top: 0px;
         left: 0px;
         height: 100%;
-        width: 100%;
+        width: 280px;
       }
 
+      /* Header with streaming indicator */
       .topbar {
         position: absolute;
         top: 0px;
         height: 48px;
         width: 100%;
-        padding: 0px 16px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 0px 12px;
+        background: var(--activitylog-bg);
+        border-bottom: 1px solid var(--activitylog-border);
         display: flex;
         align-items: center;
+        justify-content: space-between;
         box-sizing: border-box;
       }
 
       .topbar .heading {
         font-weight: 600;
         font-size: 14px;
-        font-family: 'Geist Sans', sans-serif;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--activitylog-fg-active);
       }
 
+      .live-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--activitylog-fg-muted);
+      }
+
+      .live-indicator .dot {
+        width: 6px;
+        height: 6px;
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+        border-radius: 50%;
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 0.5; transform: scale(0.9); }
+        50% { opacity: 1; transform: scale(1.1); }
+      }
+
+      /* Activity container */
       .activityContainer {
         position: absolute;
         top: 48px;
         bottom: 48px;
         width: 100%;
-        padding: 12px 0px;
+        padding: 8px 0;
         overflow-y: auto;
+        overscroll-behavior: contain;
         scrollbar-width: thin;
-        scrollbar-color: ${cssManager.bdTheme('#e5e7eb', '#27272a')} transparent;
+        scrollbar-color: ${cssManager.bdTheme('#d4d4d4', '#333333')} transparent;
       }
 
       .activityContainer::-webkit-scrollbar {
@@ -104,82 +137,53 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
       }
 
       .activityContainer::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: ${cssManager.bdTheme('#d4d4d4', '#333333')};
         border-radius: 3px;
       }
 
       .activityContainer::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        background: ${cssManager.bdTheme('#a3a3a3', '#525252')};
       }
 
       .empty-state {
         font-size: 13px;
         text-align: center;
-        padding: 32px 16px;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        font-family: 'Geist Sans', sans-serif;
-      }
-
-      .streamingIndicator {
-        font-size: 11px;
-        text-align: center;
-        padding: 16px;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        font-family: 'Geist Sans', sans-serif;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-      }
-
-      .streamingIndicator::before {
-        content: '';
-        width: 6px;
-        height: 6px;
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        border-radius: 50%;
-        animation: pulse 2s ease-in-out infinite;
-      }
-
-      @keyframes pulse {
-        0%, 100% { opacity: 0.4; transform: scale(0.8); }
-        50% { opacity: 1; transform: scale(1.2); }
+        padding: 40px 16px;
+        color: var(--activitylog-fg-muted);
       }
 
+      /* Date separator - warm taupe styling */
       .date-separator {
-        padding: 12px 16px 8px;
-        font-size: 11px;
+        padding: 12px 12px 6px;
+        font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        background: ${cssManager.bdTheme('#f9fafb', '#09090b')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        letter-spacing: 0.5px;
+        color: var(--activitylog-accent);
         position: sticky;
         top: 0;
         z-index: 1;
+        background: var(--activitylog-bg);
       }
 
+      /* Activity entry - modern stacked layout */
       .activityentry {
-        min-height: 36px;
-        font-size: 13px;
-        padding: 10px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-        transition: all 0.15s ease;
+        font-size: 12px;
+        padding: 8px 12px;
+        margin: 2px 4px;
+        border-radius: 6px;
+        transition: background 0.15s ease;
         display: flex;
-        align-items: center;
-        gap: 8px;
+        align-items: flex-start;
+        gap: 10px;
         line-height: 1.4;
-        animation: fadeIn 0.3s ease-out;
+        animation: fadeIn 0.2s ease-out;
       }
 
       @keyframes fadeIn {
         from {
           opacity: 0;
-          transform: translateY(-4px);
+          transform: translateY(-2px);
         }
         to {
           opacity: 1;
@@ -187,88 +191,109 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
         }
       }
 
-      .activityentry:last-of-type {
-        border-bottom: none;
-      }
-
       .activityentry:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-
-      .timestamp {
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        font-weight: 500;
-        font-size: 12px;
-        font-variant-numeric: tabular-nums;
-        flex-shrink: 0;
-        min-width: 45px;
+        background: var(--activitylog-hover);
       }
 
       .activity-icon {
         width: 28px;
         height: 28px;
         border-radius: 6px;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-        font-size: 14px;
+        font-size: 13px;
+        color: var(--activitylog-fg-muted);
+        margin-top: 1px;
       }
 
       .activity-icon.login {
-        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.1)')};
-        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.08)', 'rgba(34, 197, 94, 0.12)')};
+        color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
       }
 
       .activity-icon.logout {
-        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.08)', 'rgba(239, 68, 68, 0.12)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
       }
 
       .activity-icon.view {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-        color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(59, 130, 246, 0.12)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
       }
 
       .activity-icon.create {
-        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.1)')};
-        color: ${cssManager.bdTheme('#9333ea', '#a855f7')};
+        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.08)', 'rgba(168, 85, 247, 0.12)')};
+        color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
       }
 
       .activity-icon.update {
-        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.1)', 'rgba(251, 146, 60, 0.1)')};
+        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.08)', 'rgba(251, 146, 60, 0.12)')};
         color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
       }
 
       .activity-icon.delete {
-        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.08)', 'rgba(239, 68, 68, 0.12)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
       }
 
       .activity-icon.custom {
-        background: ${cssManager.bdTheme('rgba(100, 116, 139, 0.1)', 'rgba(100, 116, 139, 0.1)')};
+        background: ${cssManager.bdTheme('rgba(100, 116, 139, 0.08)', 'rgba(100, 116, 139, 0.12)')};
         color: ${cssManager.bdTheme('#475569', '#94a3b8')};
       }
 
-      .activity-text {
+      .activity-content {
         flex: 1;
-        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .activity-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
       }
 
       .activity-user {
         font-weight: 600;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        font-size: 12px;
+        color: var(--activitylog-fg-active);
       }
 
+      .activity-separator {
+        color: var(--activitylog-fg-muted);
+        font-size: 10px;
+      }
+
+      .timestamp {
+        color: var(--activitylog-fg-muted);
+        font-weight: 400;
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        font-family: 'Geist Mono', monospace;
+      }
+
+      .activity-message {
+        color: var(--activitylog-fg);
+        font-size: 12px;
+        line-height: 1.5;
+        word-break: break-word;
+      }
+
+      /* Search box - refined styling */
       .searchbox {
         position: absolute;
         bottom: 0px;
         width: 100%;
         height: 48px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        padding: 8px;
+        background: var(--activitylog-bg);
+        border-top: 1px solid var(--activitylog-border);
+        padding: 8px 12px;
+        box-sizing: border-box;
       }
 
       .search-wrapper {
@@ -282,64 +307,37 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
         left: 10px;
         top: 50%;
         transform: translateY(-50%);
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        font-size: 14px;
+        color: var(--activitylog-fg-muted);
+        font-size: 13px;
         pointer-events: none;
         transition: color 0.15s ease;
       }
 
       .searchbox input {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        color: var(--activitylog-fg-active);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.04)')};
         width: 100%;
         height: 100%;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
         border-radius: 6px;
-        padding: 0 12px 0 36px;
+        padding: 0 12px 0 34px;
         font-family: 'Geist Sans', sans-serif;
-        font-size: 13px;
+        font-size: 12px;
         transition: all 0.15s ease;
       }
 
       .searchbox input::placeholder {
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--activitylog-fg-muted);
       }
 
       .searchbox input:focus {
         outline: none;
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.06)')};
       }
 
-      .searchbox input:focus ~ .search-icon,
       .search-wrapper:has(input:focus) .search-icon {
-        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-      }
-
-      .bottomShadow {
-        position: absolute;
-        width: 100%;
-        height: 24px;
-        bottom: 48px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(180deg, transparent 0%, #fafafa 100%)',
-          'linear-gradient(180deg, transparent 0%, #0a0a0a 100%)'
-        )};
-        pointer-events: none;
-        opacity: 0.8;
-      }
-
-      .topShadow {
-        position: absolute;
-        width: 100%;
-        height: 24px;
-        top: 48px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(0deg, transparent 0%, #fafafa 100%)',
-          'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)'
-        )};
-        pointer-events: none;
-        opacity: 0.8;
+        color: var(--activitylog-fg);
       }
     `,
   ];
@@ -355,12 +353,11 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
       <div class="maincontainer">
         <div class="topbar">
           <div class="heading">Activity Log</div>
+          ${filteredEntries.length > 0
+            ? html`<div class="live-indicator"><span class="dot"></span>Live</div>`
+            : ''}
         </div>
         <div class="activityContainer">
-          ${filteredEntries.length > 0
-            ? html`<div class="streamingIndicator">Live Updates</div>`
-            : ''}
-
           ${filteredEntries.length === 0
             ? html`<div class="empty-state">No activity entries</div>`
             : groupedEntries.map(
@@ -381,8 +378,6 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
             />
           </div>
         </div>
-        <div class="topShadow"></div>
-        <div class="bottomShadow"></div>
       </div>
     `;
   }
@@ -397,12 +392,16 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
         class="activityentry"
         @contextmenu=${(e: MouseEvent) => this.handleContextMenu(e, entry)}
       >
-        <span class="timestamp">${timeStr}</span>
         <div class="activity-icon ${entry.type}">
           <dees-icon .icon=${iconName}></dees-icon>
         </div>
-        <div class="activity-text">
-          <span class="activity-user">${entry.user}</span> ${entry.message}
+        <div class="activity-content">
+          <div class="activity-header">
+            <span class="activity-user">${entry.user}</span>
+            <span class="activity-separator">·</span>
+            <span class="timestamp">${timeStr}</span>
+          </div>
+          <div class="activity-message">${entry.message}</div>
         </div>
       </div>
     `;

ts_web/elements/00group-appui/dees-appui-appbar/component.ts

@@ -28,6 +28,7 @@ declare global {
 @customElement('dees-appui-appbar')
 export class DeesAppuiBar extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE PROPERTIES
   @property({ type: Array })
@@ -57,6 +58,16 @@ export class DeesAppuiBar extends DeesElement {
   @property({ type: Boolean })
   accessor showSearch: boolean = false;
 
+  // Activity log toggle
+  @property({ type: Boolean })
+  accessor showActivityLogToggle: boolean = false;
+
+  @property({ type: Number })
+  accessor activityLogCount: number = 0;
+
+  @property({ type: Boolean })
+  accessor activityLogActive: boolean = false;
+
   // STATE
   @state()
   accessor activeMenu: string | null = null;
@@ -177,8 +188,8 @@ export class DeesAppuiBar extends DeesElement {
   public renderAccountSection(): TemplateResult {
     return html`
       ${this.showSearch ? html`
-        <dees-icon 
-          class="search-icon" 
+        <dees-icon
+          class="search-icon"
           .icon=${'lucide:search'}
           @click=${this.handleSearchClick}
         ></dees-icon>
@@ -206,6 +217,18 @@ export class DeesAppuiBar extends DeesElement {
           ></dees-appui-profiledropdown>
         </div>
       ` : ''}
+      ${this.showActivityLogToggle ? html`
+        <div
+          class="activity-toggle ${this.activityLogActive ? 'active' : ''}"
+          @click=${this.handleActivityToggle}
+          title="Activity Log"
+        >
+          <dees-icon .icon=${'lucide:activity'}></dees-icon>
+          ${this.activityLogCount > 0 ? html`
+            <span class="activity-badge">${this.activityLogCount > 99 ? '99+' : this.activityLogCount}</span>
+          ` : ''}
+        </div>
+      ` : ''}
     `;
   }
 
@@ -304,9 +327,16 @@ export class DeesAppuiBar extends DeesElement {
   }
 
   private handleSearchClick() {
-    this.dispatchEvent(new CustomEvent('search-click', { 
+    this.dispatchEvent(new CustomEvent('search-click', {
       bubbles: true,
-      composed: true 
+      composed: true
+    }));
+  }
+
+  private handleActivityToggle() {
+    this.dispatchEvent(new CustomEvent('activity-toggle', {
+      bubbles: true,
+      composed: true
     }));
   }
 

ts_web/elements/00group-appui/dees-appui-appbar/styles.ts

@@ -17,7 +17,7 @@ export const appuiAppbarStyles = [
         color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
         font-size: var(--appbar-font-size);
         display: grid;
-        grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
+        grid-template-columns: auto 1fr auto;
         -webkit-app-region: drag;
         user-select: none;
       }
@@ -233,6 +233,54 @@ export const appuiAppbarStyles = [
       .user-status.away {
         background: #ff9800;
       }
+
+      /* Activity log toggle button */
+      .activity-toggle {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        height: 28px;
+        padding: 0 8px;
+        border-radius: 6px;
+        cursor: default;
+        -webkit-app-region: no-drag;
+        color: ${cssManager.bdTheme('#00000060', '#ffffff60')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        transition: all 0.15s ease;
+      }
+
+      .activity-toggle:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff15')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        border-color: transparent;
+      }
+
+      .activity-toggle.active {
+        background: ${cssManager.bdTheme('#00000015', '#ffffff20')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        border-color: transparent;
+      }
+
+      .activity-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      .activity-badge {
+        position: relative;
+        margin-left: 4px;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        background: ${cssManager.bdTheme('#525252', '#525252')};
+        color: #fafafa;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
     `,
   ];
 

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

@@ -0,0 +1,210 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesAppuiBottombar } from './dees-appui-bottombar.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          background: #1a1a1a;
+        }
+
+        .demo-section {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .demo-label {
+          font-size: 12px;
+          color: #737373;
+          font-family: 'Geist Sans', sans-serif;
+        }
+
+        .demo-bottombar-wrapper {
+          border: 1px solid hsl(0 0% 20%);
+          border-radius: 4px;
+          overflow: hidden;
+        }
+      </style>
+      <div class="demo-container">
+        <div class="demo-section">
+          <div class="demo-label">Bottom bar with status widgets and actions</div>
+          <div class="demo-bottombar-wrapper">
+            <dees-appui-bottombar
+              id="demo-bottombar"
+            ></dees-appui-bottombar>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <div class="demo-label">Controls</div>
+          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            <button onclick="addSuccessWidget()">Add Success Widget</button>
+            <button onclick="addWarningWidget()">Add Warning Widget</button>
+            <button onclick="addErrorWidget()">Add Error Widget</button>
+            <button onclick="addLoadingWidget()">Add Loading Widget</button>
+            <button onclick="addRightWidget()">Add Right Widget</button>
+            <button onclick="addAction()">Add Action</button>
+            <button onclick="clearAll()">Clear All</button>
+          </div>
+        </div>
+      </div>
+      <script type="module">
+        const bottombar = document.getElementById('demo-bottombar');
+
+        // Wait for component to initialize
+        await bottombar.updateComplete;
+
+        // Add initial widgets
+        bottombar.addWidget({
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+          contextMenuItems: [
+            { name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
+            { divider: true },
+            { name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
+          ],
+        });
+
+        bottombar.addWidget({
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        });
+
+        bottombar.addWidget({
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          tooltip: 'Current version',
+          position: 'right',
+          onClick: () => console.log('Version clicked'),
+        });
+
+        // Add initial actions
+        bottombar.addAction({
+          id: 'settings',
+          iconName: 'lucide:settings',
+          tooltip: 'Settings',
+          position: 'right',
+          onClick: () => alert('Settings clicked'),
+        });
+
+        bottombar.addAction({
+          id: 'help',
+          iconName: 'lucide:helpCircle',
+          tooltip: 'Help',
+          position: 'right',
+          onClick: () => alert('Help clicked'),
+        });
+
+        // Demo control functions
+        let widgetCounter = 0;
+        let actionCounter = 0;
+
+        window.addSuccessWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'success-' + widgetCounter,
+            iconName: 'lucide:checkCircle',
+            label: 'Success ' + widgetCounter,
+            status: 'success',
+            tooltip: 'Success widget',
+            onClick: () => bottombar.removeWidget('success-' + widgetCounter),
+          });
+        };
+
+        window.addWarningWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'warning-' + widgetCounter,
+            iconName: 'lucide:alertTriangle',
+            label: 'Warning ' + widgetCounter,
+            status: 'warning',
+            tooltip: 'Warning widget',
+            onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
+          });
+        };
+
+        window.addErrorWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'error-' + widgetCounter,
+            iconName: 'lucide:xCircle',
+            label: 'Error ' + widgetCounter,
+            status: 'error',
+            tooltip: 'Error widget',
+            onClick: () => bottombar.removeWidget('error-' + widgetCounter),
+          });
+        };
+
+        window.addLoadingWidget = () => {
+          widgetCounter++;
+          const id = 'loading-' + widgetCounter;
+          bottombar.addWidget({
+            id: id,
+            iconName: 'lucide:loader2',
+            label: 'Loading...',
+            status: 'active',
+            loading: true,
+            tooltip: 'Loading in progress',
+          });
+
+          // Simulate completion after 3 seconds
+          setTimeout(() => {
+            bottombar.updateWidget(id, {
+              iconName: 'lucide:check',
+              label: 'Done!',
+              status: 'success',
+              loading: false,
+            });
+          }, 3000);
+        };
+
+        window.addRightWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'right-' + widgetCounter,
+            iconName: 'lucide:info',
+            label: 'Right ' + widgetCounter,
+            position: 'right',
+            onClick: () => bottombar.removeWidget('right-' + widgetCounter),
+          });
+        };
+
+        window.addAction = () => {
+          actionCounter++;
+          bottombar.addAction({
+            id: 'action-' + actionCounter,
+            iconName: 'lucide:zap',
+            tooltip: 'Action ' + actionCounter,
+            onClick: () => {
+              alert('Action ' + actionCounter + ' clicked');
+              bottombar.removeAction('action-' + actionCounter);
+            },
+          });
+        };
+
+        window.clearAll = () => {
+          bottombar.clearWidgets();
+          bottombar.clearActions();
+          widgetCounter = 0;
+          actionCounter = 0;
+        };
+      </script>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts

@@ -0,0 +1,315 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import '../../dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import type {
+  IBottomBarWidget,
+  IBottomBarAction,
+  IBottomBarAPI,
+} from '../../interfaces/appconfig.js';
+import { demoFunc } from './dees-appui-bottombar.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-bottombar': DeesAppuiBottombar;
+  }
+}
+
+@customElement('dees-appui-bottombar')
+export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
+  public static demo = demoFunc;
+  public static demoGroup = 'App UI';
+
+  // INSTANCE PROPERTIES
+  @state()
+  accessor widgets: IBottomBarWidget[] = [];
+
+  @state()
+  accessor actions: IBottomBarAction[] = [];
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 24px;
+        flex-shrink: 0;
+        user-select: none;
+      }
+
+      .bottom-bar {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        gap: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .widget:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .widget dees-icon {
+        flex-shrink: 0;
+      }
+
+      .widget-separator {
+        width: 1px;
+        height: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        margin: 0 4px;
+      }
+
+      /* Status colors matching dees-workspace-bottombar */
+      .widget.active {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .widget.success {
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
+      }
+
+      .widget.warning {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .widget.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .spinning {
+        animation: spin 1s linear infinite;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .action-button.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-button.disabled:hover {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const leftWidgets = this.widgets
+      .filter(w => w.position !== 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const rightWidgets = this.widgets
+      .filter(w => w.position === 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const leftActions = this.actions.filter(a => a.position === 'left');
+    const rightActions = this.actions.filter(a => a.position !== 'left');
+
+    return html`
+      <div class="bottom-bar">
+        <!-- Left actions -->
+        ${leftActions.map(action => this.renderAction(action))}
+
+        <!-- Left widgets -->
+        ${leftWidgets.map((widget, index) => html`
+          ${index > 0 || leftActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+          ${this.renderWidget(widget)}
+        `)}
+
+        <div class="spacer"></div>
+
+        <!-- Right widgets -->
+        ${rightWidgets.map((widget, index) => html`
+          ${this.renderWidget(widget)}
+          ${index < rightWidgets.length - 1 || rightActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+        `)}
+
+        <!-- Right actions -->
+        ${rightActions.map(action => this.renderAction(action))}
+      </div>
+    `;
+  }
+
+  private renderWidget(widget: IBottomBarWidget): TemplateResult {
+    const statusClass = widget.status && widget.status !== 'idle' ? widget.status : '';
+    const iconName = widget.iconName
+      ? (widget.iconName.startsWith('lucide:') ? widget.iconName : `lucide:${widget.iconName}`)
+      : '';
+
+    return html`
+      <div
+        class="widget ${statusClass}"
+        title="${widget.tooltip || ''}"
+        @click=${() => widget.onClick?.()}
+        @contextmenu=${(e: MouseEvent) => this.handleWidgetContextMenu(e, widget)}
+      >
+        ${iconName ? html`
+          <dees-icon
+            .icon=${iconName}
+            iconSize="12"
+            class="${widget.loading ? 'spinning' : ''}"
+          ></dees-icon>
+        ` : ''}
+        ${widget.label ? html`<span>${widget.label}</span>` : ''}
+      </div>
+    `;
+  }
+
+  private renderAction(action: IBottomBarAction): TemplateResult {
+    const iconName = action.iconName.startsWith('lucide:')
+      ? action.iconName
+      : `lucide:${action.iconName}`;
+
+    return html`
+      <div
+        class="action-button ${action.disabled ? 'disabled' : ''}"
+        title="${action.tooltip || ''}"
+        @click=${() => !action.disabled && action.onClick?.()}
+      >
+        <dees-icon
+          .icon=${iconName}
+          iconSize="12"
+        ></dees-icon>
+      </div>
+    `;
+  }
+
+  private async handleWidgetContextMenu(e: MouseEvent, widget: IBottomBarWidget): Promise<void> {
+    if (!widget.contextMenuItems || widget.contextMenuItems.length === 0) return;
+
+    e.preventDefault();
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
+
+    for (const item of widget.contextMenuItems) {
+      if (item.divider) {
+        menuItems.push({ divider: true });
+      } else {
+        menuItems.push({
+          name: item.name,
+          iconName: item.iconName,
+          action: async () => { await item.action(); },
+          disabled: item.disabled,
+        });
+      }
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  // ==========================================
+  // API METHODS (implements IBottomBarAPI)
+  // ==========================================
+
+  /**
+   * Add a widget to the bottom bar
+   */
+  public addWidget(widget: IBottomBarWidget): void {
+    // Remove existing widget with same ID if present
+    this.widgets = this.widgets.filter(w => w.id !== widget.id);
+    this.widgets = [...this.widgets, widget];
+  }
+
+  /**
+   * Update an existing widget by ID
+   */
+  public updateWidget(id: string, update: Partial<IBottomBarWidget>): void {
+    this.widgets = this.widgets.map(w =>
+      w.id === id ? { ...w, ...update } : w
+    );
+  }
+
+  /**
+   * Remove a widget by ID
+   */
+  public removeWidget(id: string): void {
+    this.widgets = this.widgets.filter(w => w.id !== id);
+  }
+
+  /**
+   * Get a widget by ID
+   */
+  public getWidget(id: string): IBottomBarWidget | undefined {
+    return this.widgets.find(w => w.id === id);
+  }
+
+  /**
+   * Clear all widgets
+   */
+  public clearWidgets(): void {
+    this.widgets = [];
+  }
+
+  /**
+   * Add an action button
+   */
+  public addAction(action: IBottomBarAction): void {
+    this.actions = this.actions.filter(a => a.id !== action.id);
+    this.actions = [...this.actions, action];
+  }
+
+  /**
+   * Remove an action by ID
+   */
+  public removeAction(id: string): void {
+    this.actions = this.actions.filter(a => a.id !== id);
+  }
+
+  /**
+   * Clear all actions
+   */
+  public clearActions(): void {
+    this.actions = [];
+  }
+}

ts_web/elements/00group-appui/dees-appui-bottombar/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-bottombar.js';

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
       </div>
     </dees-appui-maincontent>
   `;
+  public static demoGroup = 'App UI';
 
   // INSTANCE
   @property({
@@ -85,6 +86,7 @@ export class DeesAppuiMaincontent extends DeesElement {
       .content-area {
         overflow: auto;
         min-height: 0;
+        overscroll-behavior: contain;
       }
 
       :host([notabs]) .topbar {

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE
 
@@ -164,6 +165,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
+        overscroll-behavior: contain;
         padding: 8px 0;
       }
 

ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts

@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
       .isOpen=${true}
     ></dees-appui-profiledropdown>
   `;
+  public static demoGroup = 'App UI';
 
   @property({ type: Object })
   accessor user: {
@@ -285,6 +286,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
           max-width: calc(100vw - 32px);
           max-height: calc(100vh - 32px);
           overflow-y: auto;
+          overscroll-behavior: contain;
         }
 
         :host([isopen]) .dropdown {

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

@@ -12,41 +12,102 @@ export const demoFunc = () => html`
     .demo-secondarymenu-container .spacer {
       flex: 1;
       background: #0f0f0f;
+      padding: 20px;
+      color: #a3a3a3;
+      font-family: 'Geist Sans', sans-serif;
+    }
+    .demo-secondarymenu-container .spacer h3 {
+      color: #fafafa;
+      margin-top: 0;
+    }
+    .demo-secondarymenu-container .spacer code {
+      background: #27272a;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+    .demo-secondarymenu-container .spacer ul {
+      line-height: 1.8;
     }
   </style>
   <div class="demo-secondarymenu-container">
     <dees-appui-secondarymenu
       .heading=${'Projects'}
       .groups=${[
+        // Group 1: Tab items (default behavior)
         {
-          name: 'Active',
-          iconName: 'lucide:folder',
+          name: 'Navigation',
+          iconName: 'lucide:compass',
           items: [
-            { key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
-            { key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
-            { key: 'Database', iconName: 'database', action: () => console.log('Database') },
-          ]
+            { key: 'Dashboard', iconName: 'lucide:layoutDashboard', action: () => console.log('Dashboard clicked'), badge: 3, badgeVariant: 'warning' },
+            { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects clicked'), badge: 'new', badgeVariant: 'success' },
+            { key: 'Analytics', iconName: 'lucide:barChart2', action: () => console.log('Analytics clicked') },
+          ] as interfaces.ISecondaryMenuItemTab[]
         },
+        // Group 2: Actions
         {
-          name: 'Archived',
-          iconName: 'lucide:archive',
+          name: 'Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'Create New', iconName: 'lucide:plus', action: () => alert('Create New clicked!') },
+            { type: 'action', key: 'Import Data', iconName: 'lucide:upload', action: () => alert('Import Data clicked!') },
+            { type: 'divider' },
+            { type: 'action', key: 'Delete All', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Are you sure you want to delete all items?', action: () => alert('Deleted!') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        // Group 3: Filters
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Status' },
+            { type: 'filter', key: 'Show Active', iconName: 'lucide:checkCircle', active: true, onToggle: (active) => console.log('Show Active:', active) },
+            { type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show Archived:', active) },
+            { type: 'divider' },
+            { type: 'multiFilter', key: 'Categories', iconName: 'lucide:tag', collapsed: false, options: [
+              { key: 'frontend', label: 'Frontend', checked: true, iconName: 'lucide:monitor' },
+              { key: 'backend', label: 'Backend', checked: true, iconName: 'lucide:server' },
+              { key: 'devops', label: 'DevOps', checked: false, iconName: 'lucide:cloud' },
+              { key: 'design', label: 'Design', checked: false, iconName: 'lucide:palette' },
+            ], onChange: (keys) => console.log('Selected categories:', keys) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        // Group 4: Links and misc
+        {
+          name: 'Resources',
+          iconName: 'lucide:bookOpen',
           collapsed: true,
           items: [
-            { key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
-            { key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
-          ]
-        },
-        {
-          name: 'Settings',
-          iconName: 'lucide:settings',
-          items: [
-            { key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
-            { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
-          ]
+            { type: 'header', label: 'Documentation' },
+            { type: 'link', key: 'API Reference', iconName: 'lucide:fileText', href: 'https://api.example.com/docs' },
+            { type: 'link', key: 'User Guide', iconName: 'lucide:book', href: 'https://docs.example.com/guide' },
+            { type: 'divider' },
+            { type: 'header', label: 'Support' },
+            { type: 'link', key: 'Help Center', iconName: 'lucide:helpCircle', href: '/help', external: false },
+            { type: 'link', key: 'GitHub Issues', iconName: 'lucide:github', href: 'https://github.com/example/issues' },
+          ] as interfaces.ISecondaryMenuItem[]
         }
-      ] as interfaces.IMenuGroup[]}
-      @item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
+      ] as interfaces.ISecondaryMenuGroup[]}
+      @item-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
+      @action-click=${(e: CustomEvent) => console.log('Action clicked:', e.detail)}
+      @filter-toggle=${(e: CustomEvent) => console.log('Filter toggled:', e.detail)}
+      @multifilter-change=${(e: CustomEvent) => console.log('Multi-filter changed:', e.detail)}
+      @link-click=${(e: CustomEvent) => console.log('Link clicked:', e.detail)}
     ></dees-appui-secondarymenu>
-    <div class="spacer"></div>
+    <div class="spacer">
+      <h3>Secondary Menu Demo</h3>
+      <p>This demo showcases all 8 item types:</p>
+      <ul>
+        <li><code>tab</code> - Selectable items (Navigation group)</li>
+        <li><code>action</code> - Blue actions (Actions group)</li>
+        <li><code>action</code> with <code>variant: 'danger'</code> - Red danger action</li>
+        <li><code>filter</code> - Checkbox toggles (Filters group)</li>
+        <li><code>multiFilter</code> - Collapsible multi-select (Categories)</li>
+        <li><code>divider</code> - Visual separators</li>
+        <li><code>header</code> - Section labels</li>
+        <li><code>link</code> - External/internal links (Resources group)</li>
+      </ul>
+      <p>Try the collapse toggle on the left edge!</p>
+    </div>
   </div>
 `;

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts

@@ -19,11 +19,21 @@ import { themeDefaultStyles } from '../../00theme.js';
 
 /**
  * Secondary navigation menu for sub-navigation within MainMenu views
- * Supports collapsible groups, badges, and dynamic headings
+ *
+ * Supports 8 item types:
+ * 1. Tab - selectable, stays highlighted (default)
+ * 2. Action - executes without selection (blue)
+ * 3. Danger Action - red styling with optional confirmation
+ * 4. Filter - checkbox toggle
+ * 5. Multi-Filter - collapsible box with multiple checkboxes
+ * 6. Divider - visual separator
+ * 7. Header - non-interactive label
+ * 8. Link - opens URL
  */
 @customElement('dees-appui-secondarymenu')
 export class DeesAppuiSecondarymenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE
 
@@ -31,22 +41,30 @@ export class DeesAppuiSecondarymenu extends DeesElement {
   @property({ type: String })
   accessor heading: string = 'Menu';
 
-  /** Grouped items with collapse support */
+  /** Grouped items with collapse support - supports new ISecondaryMenuGroup */
   @property({ type: Array })
-  accessor groups: interfaces.IMenuGroup[] = [];
+  accessor groups: interfaces.ISecondaryMenuGroup[] = [];
 
   /** Legacy flat list support for backward compatibility */
   @property({ type: Array })
   accessor selectionOptions: (interfaces.IMenuItem | { divider: true })[] = [];
 
-  /** Currently selected item */
+  /** Currently selected tab item */
   @property({ type: Object })
-  accessor selectedItem: interfaces.IMenuItem | null = null;
+  accessor selectedItem: interfaces.ISecondaryMenuItemTab | null = null;
 
   /** Internal state for collapsed groups */
   @state()
   accessor collapsedGroups: Set<string> = new Set();
 
+  /** Internal state for collapsed multi-filters */
+  @state()
+  accessor collapsedMultiFilters: Set<string> = new Set();
+
+  /** Render counter to force re-renders when items are mutated */
+  @state()
+  private accessor renderCounter: number = 0;
+
   /** Horizontal collapse state */
   @property({ type: Boolean, reflect: true })
   accessor collapsed: boolean = false;
@@ -80,6 +98,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
         --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
 
+        /* Action colors */
+        --action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+        --action-primary-hover: ${cssManager.bdTheme('#1d4ed8', '#60a5fa')};
+        --action-danger: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+        --action-danger-hover: ${cssManager.bdTheme('#b91c1c', '#f87171')};
+
         position: relative;
         display: block;
         height: 100%;
@@ -178,6 +202,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
+        overscroll-behavior: contain;
         padding: 8px 0;
       }
 
@@ -212,7 +237,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 8px;
+        padding: 8px 12px;
         cursor: pointer;
         border-radius: 6px;
         transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
@@ -220,7 +245,14 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .groupHeader:hover {
-        background: var(--sidebar-hover);
+        border: 1px solid ${cssManager.bdTheme('rgba(140, 120, 100, 0.06)', 'rgba(180, 160, 140, 0.08)')};
+        padding: 7px 11px;
+      }
+
+      .groupHeader:not(.collapsed) {
+        background: ${cssManager.bdTheme('rgba(140, 120, 100, 0.06)', 'rgba(180, 160, 140, 0.08)')};
+        border: none;
+        padding: 8px 12px;
       }
 
       .groupHeader .groupTitle {
@@ -229,7 +261,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         gap: 8px;
         font-size: 11px;
         font-weight: 600;
-        color: var(--sidebar-fg-muted);
+        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -237,14 +269,14 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .groupHeader .groupTitle dees-icon {
-        font-size: 14px;
-        opacity: 0.7;
+        font-size: 16px;
+        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
       }
 
       .groupHeader .chevron {
         font-size: 12px;
         transition: transform 0.2s ease;
-        color: var(--sidebar-fg-muted);
+        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
       }
 
       .groupHeader.collapsed .chevron {
@@ -263,14 +295,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       /* Group Items Container */
       .groupItems {
         overflow: hidden;
-        transition: max-height 0.25s ease, opacity 0.2s ease;
-        max-height: 500px;
+        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
+        max-height: 1000px;
         opacity: 1;
+        margin-bottom: 12px;
       }
 
       .groupItems.collapsed {
         max-height: 0;
         opacity: 0;
+        margin-bottom: 0;
       }
 
       /* Always show items when horizontally collapsed (regardless of group collapse state) */
@@ -279,7 +313,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         opacity: 1;
       }
 
-      /* Menu Item */
+      /* Menu Item Base */
       .menuItem {
         position: relative;
         display: flex;
@@ -304,6 +338,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         background: var(--sidebar-active);
       }
 
+      .menuItem.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
       .menuItem.selected {
         background: var(--sidebar-active);
         color: var(--sidebar-fg-active);
@@ -340,6 +380,208 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         transition: opacity 0.2s ease, width 0.25s ease;
       }
 
+      /* Action Item Styles */
+      .menuItem.action-primary {
+        color: var(--action-primary);
+      }
+
+      .menuItem.action-primary:hover {
+        color: var(--action-primary-hover);
+        background: ${cssManager.bdTheme('rgba(37, 99, 235, 0.08)', 'rgba(59, 130, 246, 0.12)')};
+      }
+
+      .menuItem.action-primary dees-icon {
+        opacity: 1;
+      }
+
+      .menuItem.action-danger {
+        color: var(--action-danger);
+      }
+
+      .menuItem.action-danger:hover {
+        color: var(--action-danger-hover);
+        background: ${cssManager.bdTheme('rgba(220, 38, 38, 0.08)', 'rgba(239, 68, 68, 0.12)')};
+      }
+
+      .menuItem.action-danger dees-icon {
+        opacity: 1;
+      }
+
+      /* Filter Item Styles */
+      .menuItem.filter {
+        justify-content: space-between;
+      }
+
+      .menuItem.filter .filter-checkbox {
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${cssManager.bdTheme('#d4d4d4', '#525252')};
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .menuItem.filter .filter-checkbox.checked {
+        background: var(--sidebar-accent);
+        border-color: var(--sidebar-accent);
+      }
+
+      .menuItem.filter .filter-checkbox dees-icon {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        opacity: 1;
+      }
+
+      .menuItem.filter.active {
+        color: var(--sidebar-fg-active);
+      }
+
+      /* Multi-Filter Container */
+      .multiFilter {
+        margin: 4px 0;
+        border: 1px solid var(--sidebar-border);
+        border-radius: 8px;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
+      }
+
+      .multiFilter-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .multiFilter-header:hover {
+        background: var(--sidebar-hover);
+      }
+
+      .multiFilter-header .multiFilter-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--sidebar-fg-active);
+      }
+
+      .multiFilter-header .multiFilter-title dees-icon {
+        font-size: 16px;
+        opacity: 0.7;
+      }
+
+      .multiFilter-header .multiFilter-count {
+        font-size: 11px;
+        color: var(--sidebar-fg-muted);
+        background: var(--badge-default-bg);
+        padding: 2px 6px;
+        border-radius: 4px;
+      }
+
+      .multiFilter-header .chevron {
+        font-size: 12px;
+        transition: transform 0.2s ease;
+        color: var(--sidebar-fg-muted);
+      }
+
+      .multiFilter-header.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      .multiFilter-options {
+        border-top: 1px solid var(--sidebar-border);
+        overflow: hidden;
+        transition: max-height 0.25s ease, opacity 0.2s ease;
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .multiFilter-options.collapsed {
+        max-height: 0;
+        opacity: 0;
+        border-top: none;
+      }
+
+      .multiFilter-option {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+        font-size: 13px;
+        color: var(--sidebar-fg);
+      }
+
+      .multiFilter-option:hover {
+        background: var(--sidebar-hover);
+        color: var(--sidebar-fg-active);
+      }
+
+      .multiFilter-option .option-checkbox {
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${cssManager.bdTheme('#d4d4d4', '#525252')};
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .multiFilter-option .option-checkbox.checked {
+        background: var(--sidebar-accent);
+        border-color: var(--sidebar-accent);
+      }
+
+      .multiFilter-option .option-checkbox dees-icon {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+      }
+
+      .multiFilter-option dees-icon.option-icon {
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      /* Divider */
+      .menuDivider {
+        height: 1px;
+        background: var(--sidebar-border);
+        margin: 8px 12px;
+      }
+
+      :host([collapsed]) .menuDivider {
+        margin: 8px 4px;
+      }
+
+      /* Header/Label */
+      .menuHeader {
+        padding: 12px 12px 4px 12px;
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--sidebar-fg-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      :host([collapsed]) .menuHeader {
+        display: none;
+      }
+
+      /* Link Item */
+      .menuItem.link .external-icon {
+        font-size: 12px;
+        opacity: 0.5;
+        margin-left: auto;
+      }
+
       /* Collapsed menu item styles */
       :host([collapsed]) .menuItem {
         justify-content: center;
@@ -357,6 +599,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         left: -4px;
       }
 
+      :host([collapsed]) .menuItem .filter-checkbox,
+      :host([collapsed]) .menuItem .external-icon {
+        display: none;
+      }
+
+      :host([collapsed]) .multiFilter {
+        display: none;
+      }
+
       /* Tooltip for collapsed state */
       .item-tooltip {
         position: absolute;
@@ -431,17 +682,17 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         display: none;
       }
 
-      /* Divider */
+      /* Legacy options container */
+      .legacyOptions {
+        padding: 0 8px;
+      }
+
+      /* Divider (legacy) */
       .divider {
         height: 1px;
         background: var(--sidebar-border);
         margin: 8px 12px;
       }
-
-      /* Legacy options container */
-      .legacyOptions {
-        padding: 0 8px;
-      }
     `,
   ];
 
@@ -472,28 +723,58 @@ export class DeesAppuiSecondarymenu extends DeesElement {
             @click="${() => this.toggleGroup(group.name)}"
           >
             <span class="groupTitle">
-              ${group.iconName ? html`<dees-icon .icon="${group.iconName.startsWith('lucide:') ? group.iconName : `lucide:${group.iconName}`}"></dees-icon>` : ''}
+              ${group.iconName ? html`<dees-icon .icon="${this.normalizeIcon(group.iconName)}"></dees-icon>` : ''}
               ${group.name}
             </span>
             <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
           </div>
           <div class="groupItems ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}">
-            ${group.items.map((item) => this.renderMenuItem(item, group))}
+            ${group.items.map((item) => this.renderItem(item, group))}
           </div>
         </div>
       `)}
     `;
   }
 
-  private renderMenuItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): TemplateResult {
+  private renderItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
+    // Check for hidden items
+    if ('hidden' in item && item.hidden) {
+      return html``;
+    }
+
+    // Determine item type
+    const itemType = 'type' in item ? item.type : 'tab';
+
+    switch (itemType) {
+      case 'action':
+        return this.renderActionItem(item as interfaces.ISecondaryMenuItemAction);
+      case 'filter':
+        return this.renderFilterItem(item as interfaces.ISecondaryMenuItemFilter);
+      case 'multiFilter':
+        return this.renderMultiFilterItem(item as interfaces.ISecondaryMenuItemMultiFilter);
+      case 'divider':
+        return this.renderDivider();
+      case 'header':
+        return this.renderHeader(item as interfaces.ISecondaryMenuItemHeader);
+      case 'link':
+        return this.renderLinkItem(item as interfaces.ISecondaryMenuItemLink);
+      case 'tab':
+      default:
+        return this.renderTabItem(item as interfaces.ISecondaryMenuItemTab, group);
+    }
+  }
+
+  private renderTabItem(item: interfaces.ISecondaryMenuItemTab, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
     const isSelected = this.selectedItem?.key === item.key;
+    const isDisabled = item.disabled === true;
+
     return html`
       <div
-        class="menuItem ${isSelected ? 'selected' : ''}"
-        @click="${() => this.selectItem(item, group)}"
+        class="menuItem ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}"
+        @click="${() => !isDisabled && this.selectTabItem(item, group)}"
         @contextmenu="${(e: MouseEvent) => this.handleContextMenu(e, item)}"
       >
-        ${item.iconName ? html`<dees-icon .icon="${item.iconName.startsWith('lucide:') ? item.iconName : `lucide:${item.iconName}`}"></dees-icon>` : ''}
+        ${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
         <span class="itemLabel">${item.key}</span>
         ${item.badge !== undefined ? html`
           <span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
@@ -503,6 +784,100 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     `;
   }
 
+  private renderActionItem(item: interfaces.ISecondaryMenuItemAction): TemplateResult {
+    const variant = item.variant || 'primary';
+    const isDisabled = item.disabled === true;
+
+    return html`
+      <div
+        class="menuItem action-${variant} ${isDisabled ? 'disabled' : ''}"
+        @click="${() => !isDisabled && this.handleActionClick(item)}"
+      >
+        ${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
+        <span class="itemLabel">${item.key}</span>
+        <span class="item-tooltip">${item.key}</span>
+      </div>
+    `;
+  }
+
+  private renderFilterItem(item: interfaces.ISecondaryMenuItemFilter): TemplateResult {
+    const isDisabled = item.disabled === true;
+
+    return html`
+      <div
+        class="menuItem filter ${item.active ? 'active' : ''} ${isDisabled ? 'disabled' : ''}"
+        @click="${() => !isDisabled && this.handleFilterToggle(item)}"
+      >
+        ${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
+        <span class="itemLabel">${item.key}</span>
+        <div class="filter-checkbox ${item.active ? 'checked' : ''}">
+          ${item.active ? html`<dees-icon .icon="${'lucide:check'}"></dees-icon>` : ''}
+        </div>
+        <span class="item-tooltip">${item.key}</span>
+      </div>
+    `;
+  }
+
+  private renderMultiFilterItem(item: interfaces.ISecondaryMenuItemMultiFilter): TemplateResult {
+    const isCollapsed = this.collapsedMultiFilters.has(item.key);
+    const checkedCount = item.options.filter(opt => opt.checked).length;
+
+    return html`
+      <div class="multiFilter">
+        <div
+          class="multiFilter-header ${isCollapsed ? 'collapsed' : ''}"
+          @click="${() => this.toggleMultiFilter(item.key)}"
+        >
+          <span class="multiFilter-title">
+            ${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
+            ${item.key}
+          </span>
+          ${checkedCount > 0 ? html`<span class="multiFilter-count">${checkedCount}</span>` : ''}
+          <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
+        </div>
+        <div class="multiFilter-options ${isCollapsed ? 'collapsed' : ''}">
+          ${item.options.map(option => html`
+            <div
+              class="multiFilter-option"
+              @click="${() => this.handleMultiFilterOptionToggle(item, option.key)}"
+            >
+              <div class="option-checkbox ${option.checked ? 'checked' : ''}">
+                ${option.checked ? html`<dees-icon .icon="${'lucide:check'}"></dees-icon>` : ''}
+              </div>
+              ${option.iconName ? html`<dees-icon class="option-icon" .icon="${this.normalizeIcon(option.iconName)}"></dees-icon>` : ''}
+              <span>${option.label}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderDivider(): TemplateResult {
+    return html`<div class="menuDivider"></div>`;
+  }
+
+  private renderHeader(item: interfaces.ISecondaryMenuItemHeader): TemplateResult {
+    return html`<div class="menuHeader">${item.label}</div>`;
+  }
+
+  private renderLinkItem(item: interfaces.ISecondaryMenuItemLink): TemplateResult {
+    const isExternal = item.external ?? item.href.startsWith('http');
+    const isDisabled = item.disabled === true;
+
+    return html`
+      <div
+        class="menuItem link ${isDisabled ? 'disabled' : ''}"
+        @click="${() => !isDisabled && this.handleLinkClick(item)}"
+      >
+        ${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
+        <span class="itemLabel">${item.key}</span>
+        ${isExternal ? html`<dees-icon class="external-icon" .icon="${'lucide:externalLink'}"></dees-icon>` : ''}
+        <span class="item-tooltip">${item.key}</span>
+      </div>
+    `;
+  }
+
   private renderLegacyOptions(): TemplateResult {
     return html`
       <div class="legacyOptions">
@@ -511,16 +886,25 @@ export class DeesAppuiSecondarymenu extends DeesElement {
             return html`<div class="divider"></div>`;
           }
           const item = option as interfaces.IMenuItem;
-          return this.renderMenuItem({
+          // Convert legacy IMenuItem to ISecondaryMenuItemTab
+          const tabItem: interfaces.ISecondaryMenuItemTab = {
             key: item.key,
             iconName: item.iconName,
             action: item.action,
-          });
+            badge: item.badge,
+            badgeVariant: item.badgeVariant,
+          };
+          return this.renderTabItem(tabItem);
         })}
       </div>
     `;
   }
 
+  // Helper to normalize icon names
+  private normalizeIcon(iconName: string): string {
+    return iconName.startsWith('lucide:') ? iconName : `lucide:${iconName}`;
+  }
+
   private toggleGroup(groupName: string): void {
     const newCollapsed = new Set(this.collapsedGroups);
     if (newCollapsed.has(groupName)) {
@@ -531,6 +915,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     this.collapsedGroups = newCollapsed;
   }
 
+  private toggleMultiFilter(filterKey: string): void {
+    const newCollapsed = new Set(this.collapsedMultiFilters);
+    if (newCollapsed.has(filterKey)) {
+      newCollapsed.delete(filterKey);
+    } else {
+      newCollapsed.add(filterKey);
+    }
+    this.collapsedMultiFilters = newCollapsed;
+  }
+
   public toggleCollapse(): void {
     this.collapsed = !this.collapsed;
     this.dispatchEvent(new CustomEvent('collapse-change', {
@@ -540,7 +934,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     }));
   }
 
-  private selectItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): void {
+  private selectTabItem(item: interfaces.ISecondaryMenuItemTab, group?: interfaces.ISecondaryMenuGroup): void {
     this.selectedItem = item;
     item.action();
 
@@ -551,7 +945,81 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     }));
   }
 
-  private handleContextMenu(event: MouseEvent, item: interfaces.IMenuItem): void {
+  private async handleActionClick(item: interfaces.ISecondaryMenuItemAction): Promise<void> {
+    // Handle confirmation if required
+    if (item.confirmMessage) {
+      const confirmed = window.confirm(item.confirmMessage);
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    await item.action();
+
+    this.dispatchEvent(new CustomEvent('action-click', {
+      detail: { item },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleFilterToggle(item: interfaces.ISecondaryMenuItemFilter): void {
+    const newActive = !item.active;
+    // Update the item's active state
+    item.active = newActive;
+    item.onToggle(newActive);
+
+    // Force re-render by incrementing the render counter
+    this.renderCounter++;
+
+    this.dispatchEvent(new CustomEvent('filter-toggle', {
+      detail: { item, active: newActive },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleMultiFilterOptionToggle(item: interfaces.ISecondaryMenuItemMultiFilter, optionKey: string): void {
+    // Update the option's checked state
+    const option = item.options.find(opt => opt.key === optionKey);
+    if (option) {
+      option.checked = !option.checked;
+    }
+
+    // Calculate the new selected keys
+    const selectedKeys = item.options
+      .filter(opt => opt.checked)
+      .map(opt => opt.key);
+
+    item.onChange(selectedKeys);
+
+    // Force re-render by incrementing the render counter
+    this.renderCounter++;
+
+    this.dispatchEvent(new CustomEvent('multifilter-change', {
+      detail: { item, selectedKeys },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleLinkClick(item: interfaces.ISecondaryMenuItemLink): void {
+    const isExternal = item.external ?? item.href.startsWith('http');
+
+    if (isExternal) {
+      window.open(item.href, '_blank', 'noopener,noreferrer');
+    } else {
+      window.location.href = item.href;
+    }
+
+    this.dispatchEvent(new CustomEvent('link-click', {
+      detail: { item },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItemTab): void {
     DeesContextmenu.openContextMenuWithOptions(event, [
       {
         name: 'View details',
@@ -572,26 +1040,52 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     // Initialize collapsed state from group defaults
     if (this.groups.length > 0) {
       const initialCollapsed = new Set<string>();
+      const initialMultiFilterCollapsed = new Set<string>();
+
       this.groups.forEach(group => {
         if (group.collapsed) {
           initialCollapsed.add(group.name);
         }
-      });
-      this.collapsedGroups = initialCollapsed;
 
-      // Auto-select first item if none selected
-      if (!this.selectedItem && this.groups[0]?.items.length > 0) {
-        this.selectItem(this.groups[0].items[0], this.groups[0]);
+        // Check for collapsed multi-filters
+        group.items.forEach(item => {
+          if ('type' in item && item.type === 'multiFilter') {
+            const multiFilter = item as interfaces.ISecondaryMenuItemMultiFilter;
+            if (multiFilter.collapsed) {
+              initialMultiFilterCollapsed.add(multiFilter.key);
+            }
+          }
+        });
+      });
+
+      this.collapsedGroups = initialCollapsed;
+      this.collapsedMultiFilters = initialMultiFilterCollapsed;
+
+      // Auto-select first tab item if none selected
+      if (!this.selectedItem) {
+        for (const group of this.groups) {
+          for (const item of group.items) {
+            const itemType = 'type' in item ? item.type : 'tab';
+            if (itemType === 'tab' || itemType === undefined) {
+              const tabItem = item as interfaces.ISecondaryMenuItemTab;
+              if (!tabItem.disabled) {
+                this.selectTabItem(tabItem, group);
+                return;
+              }
+            }
+          }
+        }
       }
     } else if (this.selectionOptions.length > 0) {
       // Legacy mode: select first non-divider option
       const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.IMenuItem;
       if (firstOption && !this.selectedItem) {
-        this.selectItem({
+        const tabItem: interfaces.ISecondaryMenuItemTab = {
           key: firstOption.key,
           iconName: firstOption.iconName,
           action: firstOption.action,
-        });
+        };
+        this.selectTabItem(tabItem);
       }
     }
   }

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

@@ -18,6 +18,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-tabs')
 export class DeesAppuiTabs extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE
   @property({
@@ -116,6 +117,7 @@ export class DeesAppuiTabs extends DeesElement {
         font-size: 14px;
         overflow-x: auto;
         overflow-y: hidden;
+        overscroll-behavior: contain;
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
         height: 100%;

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

@@ -1,7 +1,10 @@
 import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
 import type { DeesAppui } from './dees-appui.js';
 import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
+import type * as interfaces from '../../interfaces/index.js';
 import '@design.estate/dees-wcctools/demotools';
+import '../../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../dees-statsgrid/dees-statsgrid.js';
 
 // Demo view component with lifecycle hooks
 @customElement('demo-dashboard-view')
@@ -11,12 +14,85 @@ class DemoDashboardView extends DeesElement {
 
   private ctx: IViewActivationContext;
 
+  private statsTiles: IStatsTile[] = [
+    {
+      id: 'users',
+      title: 'Active Users',
+      value: 1234,
+      type: 'number',
+      icon: 'lucide:users',
+      description: 'Online now',
+      color: '#22c55e'
+    },
+    {
+      id: 'api-calls',
+      title: 'API Calls',
+      value: 45200,
+      type: 'trend',
+      icon: 'lucide:activity',
+      description: '+12% from last hour',
+      color: '#3b82f6',
+      trendData: [32000, 35000, 38000, 41000, 39000, 42000, 45200]
+    },
+    {
+      id: 'health',
+      title: 'System Health',
+      value: 99.9,
+      unit: '%',
+      type: 'gauge',
+      icon: 'lucide:heart-pulse',
+      description: 'All systems operational',
+      color: '#10b981',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 80, color: '#ef4444' },
+          { value: 95, color: '#f59e0b' },
+          { value: 100, color: '#10b981' }
+        ]
+      }
+    },
+    {
+      id: 'response',
+      title: 'Avg Response',
+      value: 127,
+      unit: 'ms',
+      type: 'number',
+      icon: 'lucide:timer',
+      description: '-15ms from yesterday',
+      color: '#8b5cf6'
+    },
+    {
+      id: 'resources',
+      title: 'Resource Usage',
+      value: '',
+      type: 'multiPercentage',
+      icon: 'lucide:server',
+      percentages: [
+        { label: 'CPU', value: 67, color: '#3b82f6' },
+        { label: 'Memory', value: 84, color: '#8b5cf6' },
+        { label: 'Disk', value: 45, color: '#10b981' }
+      ]
+    },
+    {
+      id: 'requests',
+      title: 'Requests/sec',
+      value: 1850,
+      type: 'trend',
+      icon: 'lucide:zap',
+      description: 'Current throughput',
+      color: '#06b6d4',
+      trendData: [1200, 1400, 1350, 1600, 1750, 1680, 1850]
+    }
+  ];
+
   onActivate(context: IViewActivationContext) {
     this.ctx = context;
     this.activated = true;
     console.log('Dashboard activated with context:', context);
 
-    // Set view-specific secondary menu
+    // Set view-specific secondary menu with new item types
     context.appui.setSecondaryMenu({
       heading: 'Dashboard',
       groups: [
@@ -24,17 +100,36 @@ class DemoDashboardView extends DeesElement {
           name: 'Quick Access',
           iconName: 'lucide:zap',
           items: [
-            { key: 'overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
-            { key: 'recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
-          ]
+            { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
+            { key: 'Recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
+            { type: 'divider' },
+            { type: 'action', key: 'Refresh Data', iconName: 'lucide:refreshCw', action: () => alert('Refreshing dashboard data...') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Time Range' },
+            { type: 'filter', key: 'Live Updates', iconName: 'lucide:radio', active: true, onToggle: (active) => console.log('Live updates:', active) },
+            { type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show archived:', active) },
+            { type: 'divider' },
+            { type: 'multiFilter', key: 'Data Sources', iconName: 'lucide:database', options: [
+              { key: 'api', label: 'API Server', checked: true, iconName: 'lucide:server' },
+              { key: 'web', label: 'Web Traffic', checked: true, iconName: 'lucide:globe' },
+              { key: 'mobile', label: 'Mobile App', checked: false, iconName: 'lucide:smartphone' },
+            ], onChange: (keys) => console.log('Data sources:', keys) },
+          ] as interfaces.ISecondaryMenuItem[]
         },
         {
           name: 'Analytics',
           iconName: 'lucide:barChart3',
           items: [
-            { key: 'metrics', iconName: 'activity', action: () => console.log('Metrics') },
-            { key: 'reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
-          ]
+            { key: 'Metrics', iconName: 'activity', action: () => console.log('Metrics') },
+            { key: 'Reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
+            { type: 'divider' },
+            { type: 'link', key: 'Analytics Docs', iconName: 'lucide:externalLink', href: 'https://docs.example.com/analytics' },
+          ] as interfaces.ISecondaryMenuItem[]
         }
       ]
     });
@@ -63,21 +158,9 @@ class DemoDashboardView extends DeesElement {
         }
         h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
         p { color: #737373; margin-bottom: 32px; }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 16px;
+        dees-statsgrid {
+          margin-bottom: 32px;
         }
-        .card {
-          background: rgba(255,255,255,0.03);
-          border: 1px solid rgba(255,255,255,0.08);
-          border-radius: 8px;
-          padding: 20px;
-        }
-        .card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
-        .metric { font-size: 32px; font-weight: 700; color: #fafafa; }
-        .status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
-        .status.active { background: #14532d; color: #4ade80; }
 
         .ctx-actions {
           margin-top: 32px;
@@ -127,23 +210,10 @@ class DemoDashboardView extends DeesElement {
       </style>
       <h1>Dashboard</h1>
       <p>Welcome back! Here's an overview of your system.</p>
-      <div class="grid">
-        <div class="card">
-          <h3>Active Users</h3>
-          <div class="metric">1,234</div>
-          <span class="status active">Online</span>
-        </div>
-        <div class="card">
-          <h3>API Calls</h3>
-          <div class="metric">45.2K</div>
-          <p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
-        </div>
-        <div class="card">
-          <h3>System Health</h3>
-          <div class="metric">99.9%</div>
-          <p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
-        </div>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.statsTiles}
+        @tile-action=${(e: CustomEvent) => console.log('Tile action:', e.detail)}
+      ></dees-statsgrid>
 
       <div class="ctx-actions">
         <h2>Context Actions (ctx.appui)</h2>
@@ -322,11 +392,22 @@ class DemoProjectsView extends DeesElement {
       groups: [
         {
           name: 'My Projects',
+          iconName: 'lucide:folder',
           items: [
-            { key: 'active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
-            { key: 'archived', iconName: 'archive', action: () => console.log('Archived') },
-            { key: 'shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
-          ]
+            { key: 'Active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
+            { key: 'Archived', iconName: 'archive', action: () => console.log('Archived') },
+            { key: 'Shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Quick Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'New Project', iconName: 'lucide:folderPlus', action: () => alert('Create new project') },
+            { type: 'action', key: 'Import', iconName: 'lucide:download', action: () => alert('Import project') },
+            { type: 'divider' },
+            { type: 'link', key: 'Templates', iconName: 'lucide:layoutTemplate', href: 'https://templates.example.com' },
+          ] as interfaces.ISecondaryMenuItem[]
         }
       ]
     });
@@ -407,13 +488,40 @@ class DemoTasksView extends DeesElement {
       heading: 'Tasks',
       groups: [
         {
-          name: 'Filters',
+          name: 'Views',
+          iconName: 'lucide:eye',
           items: [
-            { key: 'all', iconName: 'list', badge: 12, action: () => console.log('All') },
-            { key: 'today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
-            { key: 'upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
-            { key: 'completed', iconName: 'checkCircle', action: () => console.log('Completed') },
-          ]
+            { key: 'All Tasks', iconName: 'list', badge: 12, action: () => console.log('All') },
+            { key: 'Today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
+            { key: 'Upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
+            { key: 'Completed', iconName: 'checkCircle', action: () => console.log('Completed') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Priority' },
+            { type: 'multiFilter', key: 'Priority', iconName: 'lucide:flag', options: [
+              { key: 'high', label: 'High', checked: true, iconName: 'lucide:alertCircle' },
+              { key: 'medium', label: 'Medium', checked: true, iconName: 'lucide:minusCircle' },
+              { key: 'low', label: 'Low', checked: false, iconName: 'lucide:circle' },
+            ], onChange: (keys) => console.log('Priority filter:', keys) },
+            { type: 'divider' },
+            { type: 'header', label: 'Options' },
+            { type: 'filter', key: 'Show Subtasks', iconName: 'lucide:listTree', active: true, onToggle: (active) => console.log('Show subtasks:', active) },
+            { type: 'filter', key: 'Show Completed', iconName: 'lucide:checkSquare', active: false, onToggle: (active) => console.log('Show completed:', active) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'Add Task', iconName: 'lucide:plus', action: () => alert('Add new task') },
+            { type: 'action', key: 'Import Tasks', iconName: 'lucide:upload', action: () => alert('Import tasks') },
+            { type: 'divider' },
+            { type: 'action', key: 'Clear Completed', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Delete all completed tasks?', action: () => alert('Cleared completed tasks') },
+          ] as interfaces.ISecondaryMenuItem[]
         }
       ]
     });
@@ -605,6 +713,44 @@ export const demoFunc = () => {
 
     defaultView: 'dashboard',
 
+    bottomBar: {
+      visible: true,
+      widgets: [
+        {
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+        },
+        {
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        },
+        {
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          position: 'right',
+          tooltip: 'Current version',
+        },
+      ],
+      actions: [
+        {
+          id: 'terminal',
+          iconName: 'lucide:terminal',
+          tooltip: 'Open Terminal',
+          position: 'right',
+          onClick: () => console.log('Terminal clicked'),
+        },
+      ],
+    },
+
     onViewChange: (viewId, view) => {
       console.log(`View changed to: ${viewId} (${view.name})`);
     },

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

@@ -15,6 +15,7 @@ import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainme
 import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
 import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
+import type { DeesAppuiBottombar } from '../dees-appui-bottombar/dees-appui-bottombar.js';
 import { demoFunc } from './dees-appui.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -23,6 +24,7 @@ import { ViewRegistry } from './view.registry.js';
 
 // Import child components
 import '../dees-appui-appbar/index.js';
+import '../dees-appui-bottombar/dees-appui-bottombar.js';
 import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
 import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import '../dees-appui-maincontent/dees-appui-maincontent.js';
@@ -37,6 +39,7 @@ declare global {
 @customElement('dees-appui')
 export class DeesAppui extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // ==========================================
   // REACTIVE OBSERVABLES (RxJS Subjects)
@@ -98,10 +101,10 @@ export class DeesAppui extends DeesElement {
   accessor secondarymenuHeading: string = '';
 
   @property({ type: Array })
-  accessor secondarymenuGroups: interfaces.IMenuGroup[] = [];
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
 
   @property({ type: Object })
-  accessor secondarymenuSelectedItem: interfaces.IMenuItem | undefined = undefined;
+  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItemTab | undefined = undefined;
 
   // Collapse states
   @property({ type: Boolean })
@@ -126,6 +129,13 @@ export class DeesAppui extends DeesElement {
   @property({ type: Number })
   accessor contentTabsAutoHideThreshold: number = 0;
 
+  // Activity log visibility and count
+  @state()
+  accessor activityLogVisible: boolean = false;
+
+  @state()
+  accessor activityLogCount: number = 0;
+
   // Properties for maincontent
   @property({ type: Array })
   accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -149,6 +159,12 @@ export class DeesAppui extends DeesElement {
   @state()
   accessor activitylogElement: DeesAppuiActivitylog | undefined = undefined;
 
+  @state()
+  accessor bottombarElement: DeesAppuiBottombar | undefined = undefined;
+
+  @state()
+  accessor bottombarVisible: boolean = true;
+
   // Current view state
   @state()
   accessor currentView: interfaces.IViewDefinition | undefined = undefined;
@@ -172,11 +188,25 @@ export class DeesAppui extends DeesElement {
       .maingrid {
         position: absolute;
         top: 40px;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px - 24px);
         width: 100%;
         display: grid;
-        grid-template-columns: auto auto 1fr 240px;
+        /* grid-template-columns set dynamically in template */
         grid-template-rows: 1fr;
+        transition: grid-template-columns 0.3s ease, height 0.3s ease;
+        overflow: hidden;
+      }
+
+      :host([bottombar-hidden]) .maingrid {
+        height: calc(100% - 40px);
+      }
+
+      dees-appui-bottombar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 4;
       }
 
       /* Z-index layering for proper stacking */
@@ -193,11 +223,25 @@ export class DeesAppui extends DeesElement {
       .maingrid > dees-appui-maincontent {
         position: relative;
         z-index: 1;
+        min-height: 0;
       }
 
       .maingrid > dees-appui-activitylog {
         position: relative;
         z-index: 1;
+        overflow: hidden;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+
+      .maingrid > dees-appui-activitylog.hidden {
+        opacity: 0;
+        transform: translateX(20px);
+        pointer-events: none;
+      }
+
+      .maingrid > dees-appui-activitylog.visible {
+        opacity: 1;
+        transform: translateX(0);
       }
 
       /* View container for dynamically loaded views */
@@ -221,14 +265,18 @@ export class DeesAppui extends DeesElement {
         .user=${this.appbarUser}
         .profileMenuItems=${this.appbarProfileMenuItems}
         .showSearch=${this.appbarShowSearch}
+        .showActivityLogToggle=${true}
+        .activityLogCount=${this.activityLogCount}
+        .activityLogActive=${this.activityLogVisible}
         @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
         @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
         @search-click=${() => this.handleAppbarSearchClick()}
         @search-query=${(e: CustomEvent) => this.handleAppbarSearchQuery(e)}
         @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
         @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
+        @activity-toggle=${() => this.toggleActivityLog()}
       ></dees-appui-appbar>
-      <div class="maingrid">
+      <div class="maingrid" style="grid-template-columns: auto auto 1fr ${this.activityLogVisible ? '280px' : '0px'};">
         ${this.mainmenuVisible ? html`
           <dees-appui-mainmenu
             .logoIcon=${this.mainmenuLogoIcon}
@@ -264,8 +312,13 @@ export class DeesAppui extends DeesElement {
           <div class="view-container"></div>
           <slot name="maincontent"></slot>
         </dees-appui-maincontent>
-        <dees-appui-activitylog></dees-appui-activitylog>
+        <dees-appui-activitylog
+          class="${this.activityLogVisible ? 'visible' : 'hidden'}"
+        ></dees-appui-activitylog>
       </div>
+      ${this.bottombarVisible ? html`
+        <dees-appui-bottombar></dees-appui-bottombar>
+      ` : ''}
     `;
   }
 
@@ -276,6 +329,14 @@ export class DeesAppui extends DeesElement {
     this.secondarymenu = this.shadowRoot!.querySelector('dees-appui-secondarymenu') as DeesAppuiSecondarymenu;
     this.maincontent = this.shadowRoot!.querySelector('dees-appui-maincontent') as DeesAppuiMaincontent;
     this.activitylogElement = this.shadowRoot!.querySelector('dees-appui-activitylog') as DeesAppuiActivitylog;
+    this.bottombarElement = this.shadowRoot!.querySelector('dees-appui-bottombar') as DeesAppuiBottombar;
+
+    // Subscribe to activity log entry changes for badge count
+    if (this.activitylogElement) {
+      this.activitylogElement.entries$.subscribe((entries) => {
+        this.activityLogCount = entries.length;
+      });
+    }
 
     // Set appui reference in view registry for lifecycle context
     this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppui);
@@ -534,7 +595,7 @@ export class DeesAppui extends DeesElement {
   /**
    * Set the secondary menu configuration
    */
-  public setSecondaryMenu(config: { heading?: string; groups: interfaces.IMenuGroup[] }): void {
+  public setSecondaryMenu(config: { heading?: string; groups: interfaces.ISecondaryMenuGroup[] }): void {
     if (config.heading !== undefined) {
       this.secondarymenuHeading = config.heading;
     }
@@ -544,7 +605,7 @@ export class DeesAppui extends DeesElement {
   /**
    * Update a specific secondary menu group
    */
-  public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.IMenuGroup>): void {
+  public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.ISecondaryMenuGroup>): void {
     this.secondarymenuGroups = this.secondarymenuGroups.map(group =>
       group.name === groupName ? { ...group, ...update } : group
     );
@@ -555,7 +616,7 @@ export class DeesAppui extends DeesElement {
    */
   public addSecondaryMenuItem(
     groupName: string,
-    item: interfaces.IMenuGroup['items'][0]
+    item: interfaces.ISecondaryMenuItem
   ): void {
     this.secondarymenuGroups = this.secondarymenuGroups.map(group => {
       if (group.name === groupName) {
@@ -569,13 +630,13 @@ export class DeesAppui extends DeesElement {
   }
 
   /**
-   * Set the selected secondary menu item by key
+   * Set the selected secondary menu item by key (for tab items only)
    */
   public setSecondaryMenuSelection(itemKey: string): void {
     for (const group of this.secondarymenuGroups) {
-      const item = group.items.find(i => i.key === itemKey);
-      if (item) {
-        this.secondarymenuSelectedItem = item;
+      const item = group.items.find(i => 'key' in i && i.key === itemKey);
+      if (item && (!('type' in item) || item.type === 'tab' || item.type === undefined)) {
+        this.secondarymenuSelectedItem = item as interfaces.ISecondaryMenuItemTab;
         return;
       }
     }
@@ -673,6 +734,93 @@ export class DeesAppui extends DeesElement {
     };
   }
 
+  /**
+   * Set activity log visibility
+   */
+  public setActivityLogVisible(visible: boolean): void {
+    this.activityLogVisible = visible;
+  }
+
+  /**
+   * Toggle activity log visibility
+   */
+  public toggleActivityLog(): void {
+    this.activityLogVisible = !this.activityLogVisible;
+  }
+
+  /**
+   * Get activity log visibility state
+   */
+  public getActivityLogVisible(): boolean {
+    return this.activityLogVisible;
+  }
+
+  // ==========================================
+  // PROGRAMMATIC API: BOTTOM BAR
+  // ==========================================
+
+  /**
+   * Get the bottom bar API for widget/action management
+   */
+  public get bottomBar(): interfaces.IBottomBarAPI {
+    if (!this.bottombarElement) {
+      // Return a deferred API that will work after firstUpdated
+      return {
+        addWidget: (widget) => {
+          this.updateComplete.then(() => this.bottombarElement?.addWidget(widget));
+        },
+        updateWidget: (id, update) => {
+          this.updateComplete.then(() => this.bottombarElement?.updateWidget(id, update));
+        },
+        removeWidget: (id) => {
+          this.updateComplete.then(() => this.bottombarElement?.removeWidget(id));
+        },
+        getWidget: (id) => this.bottombarElement?.getWidget(id),
+        clearWidgets: () => {
+          this.updateComplete.then(() => this.bottombarElement?.clearWidgets());
+        },
+        addAction: (action) => {
+          this.updateComplete.then(() => this.bottombarElement?.addAction(action));
+        },
+        removeAction: (id) => {
+          this.updateComplete.then(() => this.bottombarElement?.removeAction(id));
+        },
+        clearActions: () => {
+          this.updateComplete.then(() => this.bottombarElement?.clearActions());
+        },
+      };
+    }
+    return {
+      addWidget: (widget) => this.bottombarElement!.addWidget(widget),
+      updateWidget: (id, update) => this.bottombarElement!.updateWidget(id, update),
+      removeWidget: (id) => this.bottombarElement!.removeWidget(id),
+      getWidget: (id) => this.bottombarElement!.getWidget(id),
+      clearWidgets: () => this.bottombarElement!.clearWidgets(),
+      addAction: (action) => this.bottombarElement!.addAction(action),
+      removeAction: (id) => this.bottombarElement!.removeAction(id),
+      clearActions: () => this.bottombarElement!.clearActions(),
+    };
+  }
+
+  /**
+   * Set bottom bar visibility
+   */
+  public setBottomBarVisible(visible: boolean): void {
+    this.bottombarVisible = visible;
+    if (!visible) {
+      this.setAttribute('bottombar-hidden', '');
+    } else {
+      this.removeAttribute('bottombar-hidden');
+    }
+  }
+
+  /**
+   * Get bottom bar visibility state
+   */
+  public getBottomBarVisible(): boolean {
+    return this.bottombarVisible;
+  }
+
   // ==========================================
   // PROGRAMMATIC API: NAVIGATION
   // ==========================================
@@ -785,6 +933,23 @@ export class DeesAppui extends DeesElement {
       }
     }
 
+    // Apply bottom bar config
+    if (config.bottomBar) {
+      this.setBottomBarVisible(config.bottomBar.visible ?? true);
+
+      if (config.bottomBar.widgets) {
+        config.bottomBar.widgets.forEach(widget => {
+          this.bottomBar.addWidget(widget);
+        });
+      }
+
+      if (config.bottomBar.actions) {
+        config.bottomBar.actions.forEach(action => {
+          this.bottomBar.addAction(action);
+        });
+      }
+    }
+
     // Setup domtools.router integration
     this.setupRouterIntegration(config);
 

ts_web/elements/00group-appui/dees-appui/readme.md

@@ -1,6 +1,6 @@
 # DeesAppui
 
-A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management. 🚀
 
 ## Quick Start
 
@@ -35,6 +35,34 @@ class MyApp extends DeesElement {
 }
 ```
 
+## Architecture Overview
+
+The DeesAppui shell consists of several interconnected components:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  AppBar (dees-appui-appbar)                                         │
+│  ├── Menus (File, Edit, View...)                                    │
+│  ├── Breadcrumbs                                                    │
+│  ├── User Profile + Dropdown                                        │
+│  └── Activity Log Toggle                                            │
+├─────────────┬───────────────────────────────────┬───────────────────┤
+│ Main Menu   │  Content Area                     │  Activity Log     │
+│ (collapsed/ │  ├── Content Tabs                 │  (slide panel)    │
+│  expanded)  │  │   (closable, from tables/lists)│                   │
+│             │  └── View Container               │                   │
+│ ┌─────────┐ │      └── Active View              │                   │
+│ │ 🏠 Home │ ├─────────────────────────────────┐ │                   │
+│ │ 📁 Files│ │ Secondary Menu                  │ │                   │
+│ │ ⚙ Settings ├── Collapsible Groups            │ │                   │
+│ │         │ │   ├── Item 1                    │ │                   │
+│ └─────────┘ │   ├── Item 2 (with badge)       │ │                   │
+│             │   └── Item 3                    │ │                   │
+└─────────────┴─────────────────────────────────┴───────────────────────┘
+```
+
+---
+
 ## Configuration API
 
 ### `configure(config: IAppConfig)`
@@ -155,74 +183,289 @@ appui.removeMainMenuItem('Main', 'tasks');
 
 // Selection
 appui.setMainMenuSelection('dashboard');
-appui.setMainMenuCollapsed(true);
+
+// Visibility control
+appui.setMainMenuCollapsed(true);     // Collapse to icon-only sidebar
+appui.setMainMenuVisible(false);       // Hide completely
 
 // Badges
 appui.setMainMenuBadge('inbox', 12);
 appui.clearMainMenuBadge('inbox');
 ```
 
-### Secondary Menu API
+---
 
-Views can control the secondary (contextual) menu.
+## Secondary Menu API 📋
+
+The secondary menu is a contextual sidebar that appears next to the main content area. It supports **collapsible groups** with icons and badges, making it perfect for:
+
+- **Settings pages** (grouped settings categories)
+- **File browsers** (folder trees)
+- **Project navigation** (grouped by category)
+- **Documentation** (chapters/sections)
+
+### Collapsible Groups
+
+Groups can be collapsed/expanded by clicking the group header. The state is visually indicated with an icon rotation.
 
 ```typescript
-// Set menu
+// Set secondary menu with collapsible groups
 appui.setSecondaryMenu({
   heading: 'Settings',
   groups: [
     {
       name: 'Account',
+      iconName: 'lucide:user',        // Group icon
+      collapsed: false,                // Initial state (default: false)
       items: [
-        { key: 'profile', iconName: 'lucide:user', action: () => {} },
-        { key: 'security', iconName: 'lucide:shield', action: () => {} },
+        { key: 'profile', iconName: 'lucide:user', action: () => showProfile() },
+        { key: 'security', iconName: 'lucide:shield', badge: '!', badgeVariant: 'warning', action: () => showSecurity() },
+        { key: 'billing', iconName: 'lucide:credit-card', action: () => showBilling() }
+      ]
+    },
+    {
+      name: 'Preferences',
+      iconName: 'lucide:settings',
+      collapsed: true,                 // Start collapsed
+      items: [
+        { key: 'notifications', iconName: 'lucide:bell', action: () => {} },
+        { key: 'appearance', iconName: 'lucide:palette', action: () => {} },
+        { key: 'language', iconName: 'lucide:globe', action: () => {} }
       ]
     }
   ]
 });
+```
 
-// Update group
-appui.updateSecondaryMenuGroup('Account', { items: newItems });
+### Secondary Menu Item Properties
 
-// Add item
-appui.addSecondaryMenuItem('Account', {
-  key: 'notifications',
-  iconName: 'lucide:bell',
-  action: () => {}
+```typescript
+interface ISecondaryMenuItem {
+  key: string;                    // Unique identifier
+  iconName?: string;              // Icon (e.g., 'lucide:user')
+  action: () => void;             // Click handler
+  badge?: string | number;        // Badge text/count
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+interface ISecondaryMenuGroup {
+  name: string;                   // Group name (shown in header)
+  iconName?: string;              // Group icon
+  collapsed?: boolean;            // Initial collapsed state
+  items: ISecondaryMenuItem[];    // Items in this group
+}
+```
+
+### Updating Secondary Menu
+
+```typescript
+// Update a specific group
+appui.updateSecondaryMenuGroup('Account', {
+  items: [...newItems]
 });
 
-// Selection
+// Add item to a group
+appui.addSecondaryMenuItem('Account', {
+  key: 'api-keys',
+  iconName: 'lucide:key',
+  action: () => showApiKeys()
+});
+
+// Selection (highlights the item)
 appui.setSecondaryMenuSelection('profile');
 
+// Visibility control
+appui.setSecondaryMenuCollapsed(true);   // Collapse panel
+appui.setSecondaryMenuVisible(false);     // Hide completely
+
 // Clear
 appui.clearSecondaryMenu();
 ```
 
-### Content Tabs API
+### View-Specific Secondary Menus
 
-Control tabs in the main content area.
+Each view can define its own secondary menu that appears when the view is activated:
 
 ```typescript
-// Set tabs
-appui.setContentTabs([
-  { key: 'code', iconName: 'lucide:code', action: () => {} },
-  { key: 'preview', iconName: 'lucide:eye', action: () => {} }
-]);
+// In view definition
+{
+  id: 'settings',
+  name: 'Settings',
+  content: 'my-settings-view',
+  secondaryMenu: [
+    {
+      name: 'General',
+      items: [
+        { key: 'account', iconName: 'lucide:user', action: () => {} },
+        { key: 'security', iconName: 'lucide:shield', action: () => {} }
+      ]
+    }
+  ]
+}
 
-// Add/remove
-appui.addContentTab({ key: 'debug', iconName: 'lucide:bug', action: () => {} });
-appui.removeContentTab('debug');
-
-// Select
-appui.selectContentTab('preview');
-
-// Get current
-const current = appui.getSelectedContentTab();
+// Or set dynamically in view's onActivate hook
+onActivate(context: IViewActivationContext) {
+  context.appui.setSecondaryMenu({
+    heading: 'Project Files',
+    groups: [...]
+  });
+}
 ```
 
-### Activity Log API
+---
 
-Add activity entries to the right-side activity log.
+## Content Tabs API 📑
+
+Content tabs appear above the main view content. They're designed for **opening multiple items** from tables, lists, or other data sources—similar to browser tabs or IDE editor tabs.
+
+### Common Use Cases
+
+- **Table row details** - Click a row to open it as a tab
+- **Document editing** - Open multiple documents
+- **Entity inspection** - View customer, order, product details
+- **Multi-file editing** - Edit multiple configuration files
+
+### Closable Tabs
+
+Tabs can be closable, allowing users to open items, work with them, and close when done:
+
+```typescript
+// Set initial tabs
+appui.setContentTabs([
+  { key: 'overview', iconName: 'lucide:home', action: () => showOverview() },
+  { key: 'activity', iconName: 'lucide:activity', action: () => showActivity() }
+]);
+
+// Add a closable tab when user clicks a table row
+table.addEventListener('row-click', (e) => {
+  const item = e.detail.item;
+
+  appui.addContentTab({
+    key: `item-${item.id}`,
+    label: item.name,                      // Display label
+    iconName: 'lucide:file',
+    closable: true,                        // Allow closing
+    action: () => showItemDetails(item)
+  });
+
+  // Select the new tab
+  appui.selectContentTab(`item-${item.id}`);
+});
+
+// Handle tab close
+appui.addEventListener('tab-close', (e) => {
+  const tabKey = e.detail.key;
+  // Cleanup resources if needed
+  console.log(`Tab ${tabKey} closed`);
+});
+```
+
+### Tab Management
+
+```typescript
+// Add/remove tabs
+appui.addContentTab({
+  key: 'debug',
+  iconName: 'lucide:bug',
+  closable: true,
+  action: () => {}
+});
+appui.removeContentTab('debug');
+
+// Select tab
+appui.selectContentTab('preview');
+
+// Get current tab
+const current = appui.getSelectedContentTab();
+
+// Visibility control
+appui.setContentTabsVisible(false);        // Hide tab bar
+
+// Auto-hide when only one tab
+appui.setContentTabsAutoHide(true, 1);     // Hide when ≤ 1 tab
+```
+
+### Opening Items from Tables/Lists
+
+A common pattern is opening table rows as closable tabs:
+
+```typescript
+@customElement('my-customers-view')
+class MyCustomersView extends DeesElement {
+  private appui: DeesAppui;
+
+  onActivate(context: IViewActivationContext) {
+    this.appui = context.appui;
+
+    // Set base tabs
+    this.appui.setContentTabs([
+      { key: 'list', label: 'All Customers', iconName: 'lucide:users', action: () => this.showList() }
+    ]);
+  }
+
+  render() {
+    return html`
+      <dees-table
+        .data=${this.customers}
+        @row-dblclick=${this.openCustomerTab}
+      ></dees-table>
+    `;
+  }
+
+  openCustomerTab(e: CustomEvent) {
+    const customer = e.detail.item;
+    const tabKey = `customer-${customer.id}`;
+
+    // Check if tab already exists
+    const existingTab = this.appui.getSelectedContentTab();
+    if (existingTab?.key === tabKey) {
+      return; // Already viewing this customer
+    }
+
+    // Add new closable tab
+    this.appui.addContentTab({
+      key: tabKey,
+      label: customer.name,
+      iconName: 'lucide:user',
+      closable: true,
+      action: () => this.showCustomerDetails(customer)
+    });
+
+    this.appui.selectContentTab(tabKey);
+  }
+
+  showCustomerDetails(customer: Customer) {
+    // Render customer details
+    this.currentView = html`<customer-details .customer=${customer}></customer-details>`;
+  }
+
+  showList() {
+    this.currentView = html`<dees-table ...></dees-table>`;
+  }
+}
+```
+
+---
+
+## Activity Log API 📊
+
+The activity log is a slide-out panel on the right side showing user actions and system events.
+
+### Activity Log Toggle
+
+The appbar includes a toggle button with a badge showing the entry count:
+
+```typescript
+// Control visibility
+appui.setActivityLogVisible(true);     // Show panel
+appui.toggleActivityLog();             // Toggle state
+const isVisible = appui.getActivityLogVisible();
+
+// The toggle button automatically shows entry count
+// Add entries and the badge updates automatically
+```
+
+### Adding Entries
 
 ```typescript
 // Add single entry
@@ -234,19 +477,35 @@ appui.activityLog.add({
   data: { invoiceId: '123' }     // Optional metadata
 });
 
-// Add multiple
+// Add multiple entries (e.g., from backend)
 appui.activityLog.addMany([...entries]);
 
-// Clear
+// Clear all entries
 appui.activityLog.clear();
 
-// Query
+// Query entries
 const entries = appui.activityLog.getEntries();
 const filtered = appui.activityLog.filter({ user: 'John', type: 'create' });
 const searched = appui.activityLog.search('invoice');
 ```
 
-### Navigation API
+### Activity Entry Types
+
+Each type has a default icon that can be overridden:
+
+| Type | Default Icon | Use Case |
+|------|--------------|----------|
+| `login` | `lucide:log-in` | User sign-in |
+| `logout` | `lucide:log-out` | User sign-out |
+| `view` | `lucide:eye` | Page/item viewed |
+| `create` | `lucide:plus` | New item created |
+| `update` | `lucide:pencil` | Item modified |
+| `delete` | `lucide:trash` | Item deleted |
+| `custom` | `lucide:activity` | Custom events |
+
+---
+
+## Navigation API
 
 Navigate between views programmatically.
 
@@ -512,6 +771,7 @@ class CrmSettings extends DeesElement {
       groups: [
         {
           name: 'Account',
+          iconName: 'lucide:user',
           items: [
             { key: 'profile', iconName: 'lucide:user', action: () => this.showSection('profile') },
             { key: 'security', iconName: 'lucide:shield', action: () => this.showSection('security') }
@@ -519,6 +779,8 @@ class CrmSettings extends DeesElement {
         },
         {
           name: 'Preferences',
+          iconName: 'lucide:settings',
+          collapsed: true,
           items: [
             { key: 'notifications', iconName: 'lucide:bell', action: () => this.showSection('notifications') }
           ]
@@ -557,4 +819,5 @@ All interfaces are exported from `@design.estate/dees-catalog`:
 - `IAppBarMenuItem` - App bar menu item
 - `IMainMenuConfig` - Main menu configuration
 - `ISecondaryMenuGroup` - Secondary menu group
-- `ITab` - Tab definition
+- `ISecondaryMenuItem` - Secondary menu item
+- `IMenuItem` - Tab/menu item definition

ts_web/elements/00group-appui/index.ts

@@ -1,6 +1,7 @@
 // App UI Components
 export * from './dees-appui-activitylog/index.js';
 export * from './dees-appui-appbar/index.js';
+export * from './dees-appui-bottombar/index.js';
 export * from './dees-appui/index.js';
 export * from './dees-appui-maincontent/index.js';
 export * from './dees-appui-mainmenu/index.js';

ts_web/elements/00group-button/dees-button-exit/dees-button-exit.ts

@@ -16,6 +16,7 @@ export class DeesButtonExit extends DeesElement {
   public static demo = () => html`
     <dees-button-exit></dees-button-exit>
   `;
+  public static demoGroup = 'Button';
 
   // INSTANCE
   @property({

ts_web/elements/00group-button/dees-button-group/dees-button-group.ts

@@ -21,6 +21,7 @@ declare global {
 @customElement('dees-button-group')
 export class DeesButtonGroup extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Button';
 
   @property()
   accessor label: string = '';

ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -23,6 +23,7 @@ declare global {
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Button';
 
   @property({
     reflect: true,

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -23,6 +23,7 @@ declare global {
 @customElement('dees-chart-area')
 export class DeesChartArea extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Chart';
 
   // instance
   @state()

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts

@@ -29,6 +29,7 @@ export interface ILogEntry {
 @customElement('dees-chart-log')
 export class DeesChartLog extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Chart';
 
   @property()
   accessor label: string = 'Server Logs';

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Data View';
 
   @property()
   accessor progLang: string = 'typescript';

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-statusobject')
 export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Data View';
 
   @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
 

ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -19,6 +19,7 @@ declare global {
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Form';
 
   @property({
     type: Boolean,

ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -19,6 +19,7 @@ import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/i
 import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
 import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
 import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
+import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
 import { DeesTable } from '../../dees-table/index.js';
@@ -37,6 +38,7 @@ const FORM_INPUT_TYPES = [
   DeesInputQuantitySelector,
   DeesInputRadiogroup,
   DeesInputText,
+  DeesInputToggle,
   DeesInputTypelist,
   DeesTable,
 ];
@@ -53,6 +55,7 @@ export type TFormInputElement =
   | DeesInputQuantitySelector
   | DeesInputRadiogroup
   | DeesInputText
+  | DeesInputToggle
   | DeesInputTypelist
   | DeesTable<any>;
 
@@ -65,6 +68,7 @@ declare global {
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Form';
 
   public name: string = 'myform';
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -21,6 +21,7 @@ declare global {
 export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -54,6 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
     ></dees-input-code>
   `;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: String })

ts_web/elements/00group-input/dees-input-datepicker/component.ts

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-datepicker')
 export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = '';

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -21,6 +21,7 @@ declare global {
 @customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ attribute: false })
   accessor value: File[] = [];

ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts

@@ -17,6 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesInputIban extends DeesInputBase<DeesInputIban> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @state()

ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -23,6 +23,7 @@ declare global {
 export class DeesInputList extends DeesInputBase<DeesInputList> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: Array })
@@ -64,6 +65,26 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
   @state()
   accessor dragOverIndex: number = -1;
 
+  // Enhanced drag state for interactive reordering
+  @state()
+  accessor dragStartY: number = 0;
+
+  @state()
+  accessor dragCurrentY: number = 0;
+
+  @state()
+  accessor targetIndex: number = -1;
+
+  @state()
+  accessor itemHeight: number = 0;
+
+  // Bound event handlers for cleanup
+  private boundHandleGlobalDragOver: ((e: DragEvent) => void) | null = null;
+  private boundHandleGlobalDragEnd: (() => void) | null = null;
+
+  // Store original item positions for accurate hit detection (before transforms)
+  private originalItemRects: DOMRect[] = [];
+
   public static styles = [
     themeDefaultStyles,
     ...DeesInputBase.baseStyles,
@@ -113,7 +134,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         padding: 12px 16px;
         border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        transition: all 0.15s ease;
+        transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
         overflow: hidden; /* Prevent animation from affecting scroll bounds */
       }
@@ -122,20 +143,31 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         border-bottom: none;
       }
 
-      .list-item:hover:not(.disabled) {
+      .list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
         background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
       }
 
+      /* Dragging item - follows cursor */
       .list-item.dragging {
-        opacity: 0.4;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.8%)')};
+        position: relative;
+        z-index: 100;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 12%)')};
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.4)')};
+        border-radius: 6px;
+        transition: box-shadow 0.15s ease, background 0.15s ease;
       }
 
-      .list-item.drag-over {
-        background: ${cssManager.bdTheme('hsl(210 40% 93.1%)', 'hsl(215 20.2% 13.8%)')};
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      /* Items that need to move up to make space */
+      .list-item.move-up {
+        transform: translateY(calc(-1 * var(--item-height, 48px)));
       }
 
+      /* Items that need to move down to make space */
+      .list-item.move-down {
+        transform: translateY(var(--item-height, 48px));
+      }
+
+
       .drag-handle {
         display: flex;
         align-items: center;
@@ -313,27 +345,9 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 34.9%)')};
       }
 
-      /* Animation for adding/removing items */
-      @keyframes slideIn {
-        from {
-          opacity: 0;
-          transform: translateY(-10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .list-item {
-        animation: slideIn 0.2s ease;
-      }
-
-      /* Override any inherited contain/content-visibility that might cause scrolling issues */
-      .list-items, .list-item {
-        content-visibility: visible !important;
-        contain: none !important;
-        contain-intrinsic-size: auto !important;
+      /* Disable transitions during drop to prevent flash */
+      .list-items.dropping .list-item {
+        transition: none !important;
       }
     `,
   ];
@@ -347,12 +361,11 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
           <div class="list-items">
             ${this.value.length > 0 ? this.value.map((item, index) => html`
               <div
-                class="list-item ${this.draggedIndex === index ? 'dragging' : ''} ${this.dragOverIndex === index ? 'drag-over' : ''}"
+                class="list-item ${this.draggedIndex === index ? 'dragging' : ''}"
                 draggable="${this.sortable && !this.disabled}"
                 @dragstart=${(e: DragEvent) => this.handleDragStart(e, index)}
                 @dragend=${this.handleDragEnd}
                 @dragover=${(e: DragEvent) => this.handleDragOver(e, index)}
-                @dragleave=${this.handleDragLeave}
                 @drop=${(e: DragEvent) => this.handleDrop(e, index)}
               >
                 ${this.sortable && !this.disabled ? html`
@@ -547,48 +560,313 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
     return confirm(message);
   }
 
-  // Drag and drop handlers
+  // Drag and drop handlers - Interactive implementation
   private handleDragStart(e: DragEvent, index: number) {
     if (!this.sortable || this.disabled) return;
-    
+
     this.draggedIndex = index;
+    this.targetIndex = index;
     e.dataTransfer!.effectAllowed = 'move';
     e.dataTransfer!.setData('text/plain', index.toString());
+
+    // Hide the default drag image
+    const emptyImg = new Image();
+    emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+    e.dataTransfer!.setDragImage(emptyImg, 0, 0);
+
+    // Store initial mouse position
+    this.dragStartY = e.clientY;
+    this.dragCurrentY = e.clientY;
+
+    // Measure item height and store all original positions before any transforms
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const allItems = Array.from(listItems?.querySelectorAll('.list-item') || []) as HTMLElement[];
+
+    if (allItems[index]) {
+      this.itemHeight = allItems[index].offsetHeight;
+    }
+
+    // Store original positions for accurate hit detection (before any transforms are applied)
+    this.originalItemRects = allItems.map(item => item.getBoundingClientRect());
+
+    // Add class to container
+    listItems?.classList.add('is-dragging');
+
+    // Set up global event listeners
+    this.boundHandleGlobalDragOver = this.handleGlobalDragOver.bind(this);
+    this.boundHandleGlobalDragEnd = this.handleGlobalDragEnd.bind(this);
+    document.addEventListener('dragover', this.boundHandleGlobalDragOver);
+    document.addEventListener('dragend', this.boundHandleGlobalDragEnd);
+  }
+
+  private handleGlobalDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (this.draggedIndex === -1) return;
+
+    this.dragCurrentY = e.clientY;
+
+    // Calculate which position the item should move to
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    if (!listItems) return;
+
+    const items = Array.from(listItems.querySelectorAll('.list-item')) as HTMLElement[];
+    const draggedElement = items[this.draggedIndex];
+    if (!draggedElement) return;
+
+    // Apply transform to dragged item
+    const deltaY = this.dragCurrentY - this.dragStartY;
+    draggedElement.style.transform = `translateY(${deltaY}px)`;
+
+    // Calculate the dragged item's current center position
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    if (!draggedRect) return;
+    const draggedCenter = draggedRect.top + draggedRect.height / 2 + deltaY;
+
+    // Determine target index: swap when dragged item's center crosses another item's center
+    // Account for items that have already shifted (their visual position changed)
+    let newTargetIndex = this.draggedIndex;
+
+    for (let i = 0; i < items.length; i++) {
+      if (i === this.draggedIndex) continue;
+
+      const rect = this.originalItemRects[i];
+      if (!rect) continue;
+
+      // Adjust item center based on whether it has shifted
+      let itemCenter = rect.top + rect.height / 2;
+
+      // If item has moved, use its shifted position
+      if (items[i].classList.contains('move-up')) {
+        itemCenter -= this.itemHeight;
+      } else if (items[i].classList.contains('move-down')) {
+        itemCenter += this.itemHeight;
+      }
+
+      if (draggedCenter < itemCenter && i < this.draggedIndex) {
+        newTargetIndex = i;
+        break;
+      } else if (draggedCenter > itemCenter && i > this.draggedIndex) {
+        newTargetIndex = i;
+      }
+    }
+
+    // Update target index and apply move classes
+    if (newTargetIndex !== this.targetIndex) {
+      this.targetIndex = newTargetIndex;
+      this.updateItemPositions(items);
+    }
+  }
+
+  private updateItemPositions(items: HTMLElement[]) {
+    const draggedIdx = this.draggedIndex;
+    const targetIdx = this.targetIndex;
+
+    // Set CSS variable for item height
+    const listItems = this.shadowRoot?.querySelector('.list-items') as HTMLElement;
+    if (listItems) {
+      listItems.style.setProperty('--item-height', `${this.itemHeight}px`);
+    }
+
+    items.forEach((item, i) => {
+      if (i === draggedIdx) return; // Skip dragged item
+
+      item.classList.remove('move-up', 'move-down');
+      item.style.setProperty('--item-height', `${this.itemHeight}px`);
+
+      if (draggedIdx < targetIdx) {
+        // Dragging down: items between draggedIdx and targetIdx move up
+        if (i > draggedIdx && i <= targetIdx) {
+          item.classList.add('move-up');
+        }
+      } else if (draggedIdx > targetIdx) {
+        // Dragging up: items between targetIdx and draggedIdx move down
+        if (i >= targetIdx && i < draggedIdx) {
+          item.classList.add('move-down');
+        }
+      }
+    });
+  }
+
+  private handleGlobalDragEnd() {
+    // Clean up event listeners
+    if (this.boundHandleGlobalDragOver) {
+      document.removeEventListener('dragover', this.boundHandleGlobalDragOver);
+      this.boundHandleGlobalDragOver = null;
+    }
+    if (this.boundHandleGlobalDragEnd) {
+      document.removeEventListener('dragend', this.boundHandleGlobalDragEnd);
+      this.boundHandleGlobalDragEnd = null;
+    }
+
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const items = listItems?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+    const draggedElement = items?.[this.draggedIndex];
+
+    // If no reorder needed, animate back and clean up
+    if (this.draggedIndex === -1 || this.targetIndex === -1 || this.draggedIndex === this.targetIndex) {
+      // Animate dragged item back to original position
+      if (draggedElement && this.draggedIndex !== -1) {
+        draggedElement.style.transition = 'transform 0.15s ease';
+        draggedElement.style.transform = 'translateY(0)';
+
+        let handled = false;
+        const onReturn = () => {
+          if (handled) return;
+          handled = true;
+          draggedElement.removeEventListener('transitionend', onReturn);
+          this.cleanupDragState(listItems, items);
+        };
+
+        draggedElement.addEventListener('transitionend', onReturn, { once: true });
+        setTimeout(onReturn, 200);
+      } else {
+        this.cleanupDragState(listItems, items);
+      }
+      return;
+    }
+
+    // Calculate final position for dragged item
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    const targetRect = this.originalItemRects[this.targetIndex];
+
+    if (!draggedRect || !targetRect || !draggedElement) {
+      this.cleanupDragState(listItems, items);
+      return;
+    }
+
+    // Calculate where dragged item needs to go
+    let finalY: number;
+    if (this.targetIndex > this.draggedIndex) {
+      // Moving down: go to bottom of target
+      finalY = targetRect.bottom - draggedRect.bottom;
+    } else {
+      // Moving up: go to top of target
+      finalY = targetRect.top - draggedRect.top;
+    }
+
+    // Animate dragged item to final position
+    draggedElement.style.transition = 'transform 0.15s ease';
+    draggedElement.style.transform = `translateY(${finalY}px)`;
+
+    // After animation completes, update data
+    let handled = false;
+    const onTransitionEnd = () => {
+      if (handled) return;
+      handled = true;
+      draggedElement.removeEventListener('transitionend', onTransitionEnd);
+
+      // Disable all transitions
+      listItems?.classList.add('dropping');
+
+      // Force reflow so dropping class takes effect immediately
+      void (listItems as HTMLElement)?.offsetHeight;
+
+      // Clean up all element state
+      items?.forEach(item => {
+        item.classList.remove('move-up', 'move-down', 'dragging');
+        item.style.removeProperty('transform');
+        item.style.removeProperty('transition');
+      });
+
+      // Update data
+      const newValue = [...this.value];
+      const [draggedItem] = newValue.splice(this.draggedIndex, 1);
+      newValue.splice(this.targetIndex, 0, draggedItem);
+      this.value = newValue;
+      this.emitChange();
+
+      // Reset state
+      this.draggedIndex = -1;
+      this.dragOverIndex = -1;
+      this.targetIndex = -1;
+      this.dragStartY = 0;
+      this.dragCurrentY = 0;
+      this.originalItemRects = [];
+
+      // After render, ensure no animation then re-enable transitions
+      this.updateComplete.then(() => {
+        // Set inline transition:none on fresh elements
+        const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+        freshItems?.forEach(item => {
+          item.style.transition = 'none';
+        });
+
+        // Force reflow
+        void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+        // Now re-enable transitions
+        requestAnimationFrame(() => {
+          freshItems?.forEach(item => {
+            item.style.removeProperty('transition');
+          });
+          listItems?.classList.remove('dropping', 'is-dragging');
+        });
+      });
+    };
+
+    draggedElement.addEventListener('transitionend', onTransitionEnd, { once: true });
+
+    // Fallback timeout in case transitionend doesn't fire
+    setTimeout(onTransitionEnd, 200);
+  }
+
+  private cleanupDragState(listItems: Element | null | undefined, items: NodeListOf<HTMLElement> | undefined) {
+    listItems?.classList.add('dropping');
+
+    // Force reflow so dropping class takes effect immediately
+    void (listItems as HTMLElement)?.offsetHeight;
+
+    items?.forEach(item => {
+      item.classList.remove('move-up', 'move-down', 'dragging');
+      item.style.removeProperty('transform');
+      item.style.removeProperty('transition');
+    });
+
+    this.draggedIndex = -1;
+    this.dragOverIndex = -1;
+    this.targetIndex = -1;
+    this.dragStartY = 0;
+    this.dragCurrentY = 0;
+    this.originalItemRects = [];
+
+    this.updateComplete.then(() => {
+      const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+      freshItems?.forEach(item => {
+        item.style.transition = 'none';
+      });
+
+      void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+      requestAnimationFrame(() => {
+        freshItems?.forEach(item => {
+          item.style.removeProperty('transition');
+        });
+        listItems?.classList.remove('dropping', 'is-dragging');
+      });
+    });
   }
 
   private handleDragEnd() {
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // This is called by the native dragend on the element
+    // The actual cleanup is done in handleGlobalDragEnd
+    this.handleGlobalDragEnd();
   }
 
   private handleDragOver(e: DragEvent, index: number) {
     if (!this.sortable || this.disabled) return;
-    
     e.preventDefault();
     e.dataTransfer!.dropEffect = 'move';
-    this.dragOverIndex = index;
+    // We handle positioning in handleGlobalDragOver now
   }
 
   private handleDragLeave() {
-    this.dragOverIndex = -1;
+    // No longer needed for visual feedback - handled by transform
   }
 
   private handleDrop(e: DragEvent, dropIndex: number) {
     if (!this.sortable || this.disabled) return;
-    
     e.preventDefault();
-    const draggedIndex = parseInt(e.dataTransfer!.getData('text/plain'));
-    
-    if (draggedIndex !== dropIndex) {
-      const newValue = [...this.value];
-      const [draggedItem] = newValue.splice(draggedIndex, 1);
-      newValue.splice(dropIndex, 0, draggedItem);
-      this.value = newValue;
-      this.emitChange();
-    }
-    
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // The actual reorder happens in handleGlobalDragEnd
   }
 
   private emitChange() {

ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
 
   @property()

ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts

@@ -22,6 +22,7 @@ declare global {
 export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @state()

ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts

@@ -13,6 +13,7 @@ declare global {
 @customElement('dees-input-quantityselector')
 export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts

@@ -21,6 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
 @customElement('dees-input-radiogroup')
 export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

ts_web/elements/00group-input/dees-input-richtext/component.ts

@@ -28,6 +28,7 @@ declare global {
 @customElement('dees-input-richtext')
 export class DeesInputRichtext extends DeesInputBase<string> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({

ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts

@@ -22,6 +22,7 @@ declare global {
 export class DeesInputTags extends DeesInputBase<DeesInputTags> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: Array })

ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-text')
 export class DeesInputText extends DeesInputBase {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({

ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -0,0 +1,310 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesInputToggle } from './dees-input-toggle.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    // Example of programmatic interaction
+    const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
+    const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
+    const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
+
+    if (toggleAllOnBtn && toggleAllOffBtn) {
+      toggleAllOnBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = true;
+          }
+        });
+      });
+
+      toggleAllOffBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = false;
+          }
+        });
+      });
+    }
+  }}>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        dees-panel {
+          margin-bottom: 24px;
+        }
+
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+
+        .toggle-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .horizontal-toggles {
+          display: flex;
+          gap: 32px;
+          flex-wrap: wrap;
+        }
+
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
+
+        .settings-section {
+          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          padding: 20px;
+        }
+
+        .button-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+
+        .feature-toggles {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+        }
+
+        .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+
+        .drag-hint {
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+          margin-top: 8px;
+          font-style: italic;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Enable feature'}
+            .value=${false}
+            .key=${'basic'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Active toggle'}
+            .value=${true}
+            .key=${'active'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'With description'}
+            .value=${false}
+            .description=${'This toggle has additional helper text explaining its purpose'}
+            .key=${'withDesc'}
+          ></dees-input-toggle>
+        </div>
+        <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
+      </dees-panel>
+
+      <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Default (off)'}
+            .value=${false}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Enabled (on)'}
+            .value=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (off)'}
+            .value=${false}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (on)'}
+            .value=${true}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Required (always on)'}
+            .value=${true}
+            .required=${true}
+            .description=${'This toggle cannot be turned off'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
+        <div class="horizontal-toggles">
+          <dees-input-toggle
+            .label=${'WiFi'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Bluetooth'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'GPS'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'NFC'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
+        <div class="settings-section">
+          <h4 class="section-title">Notification Settings</h4>
+
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Push notifications'}
+              .value=${true}
+              .description=${'Receive push notifications on your device'}
+              .key=${'push'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Email notifications'}
+              .value=${true}
+              .description=${'Get important updates via email'}
+              .key=${'email'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Sound'}
+              .value=${false}
+              .description=${'Play a sound for notifications'}
+              .key=${'sound'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Vibration'}
+              .value=${true}
+              .description=${'Vibrate for notifications'}
+              .key=${'vibration'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
+        <div class="button-group">
+          <dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
+          <dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
+        </div>
+
+        <div class="feature-toggles">
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Dark Mode'}
+              .value=${true}
+              .key=${'darkMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Auto-save'}
+              .value=${true}
+              .key=${'autoSave'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Spell check'}
+              .value=${false}
+              .key=${'spellCheck'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Developer mode'}
+              .value=${false}
+              .key=${'devMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Beta features'}
+              .value=${false}
+              .key=${'beta'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Airplane mode'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#airplane-output');
+              if (output) {
+                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+              }
+            }}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Do not disturb'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#dnd-output');
+              if (output) {
+                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+              }
+            }}
+          ></dees-input-toggle>
+        </div>
+
+        <div class="interactive-section">
+          <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
+          <div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts

@@ -0,0 +1,372 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { demoFunc } from './dees-input-toggle.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-toggle': DeesInputToggle;
+  }
+}
+
+@customElement('dees-input-toggle')
+export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
+  // STATIC
+  public static demo = demoFunc;
+  public static demoGroup = 'Input';
+
+  // INSTANCE
+
+  @property({ type: Boolean, reflect: true })
+  accessor value: boolean = false;
+
+  /**
+   * Knob position tracking (0 = off, maxTravel = on)
+   */
+  private currentX = 0;
+
+  /**
+   * Drag state
+   */
+  private isDragging = false;
+  private hasDragged = false;
+  private startX = 0;
+
+  // Toggle dimensions
+  private readonly trackWidth = 36;
+  private readonly trackHeight = 20;
+  private readonly knobSize = 14;
+  private readonly padding = 2;
+  private readonly maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
+
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Toggle defaults to label on the right
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        position: relative;
+        cursor: default;
+        font-family: ${cssGeistFontFamily};
+      }
+
+      .maincontainer {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+      }
+
+      .toggle-track {
+        position: relative;
+        flex-shrink: 0;
+        height: 20px;
+        width: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        overflow: hidden;
+        transition: all 0.15s ease;
+        margin-top: 1px;
+      }
+
+      .maincontainer:hover .toggle-track {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
+      :host([value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .toggle-track:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+      }
+
+      .toggle-knob {
+        position: absolute;
+        top: 2px;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        transition: left 0.15s ease, background 0.15s ease;
+        touch-action: none;
+      }
+
+      .toggle-knob.dragging {
+        transition: background 0.15s ease;
+      }
+
+      :host([value]) .toggle-knob {
+        background: white;
+      }
+
+      /* Disabled state */
+      .maincontainer.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .toggle-track.disabled {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      /* Required state (locked on) */
+      :host([required][value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        cursor: not-allowed;
+      }
+
+      :host([required][value]) .toggle-knob {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 70%)')};
+      }
+
+      /* Label */
+      .label-container {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      .toggle-label {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        transition: color 0.15s ease;
+        letter-spacing: -0.01em;
+      }
+
+      .maincontainer:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .maincontainer.disabled:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+
+      /* Description */
+      .description-text {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.handleClick}">
+          <div
+            class="toggle-track ${this.disabled ? 'disabled' : ''}"
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${this.handleKeydown}"
+          >
+            <div
+              class="toggle-knob"
+              style="left: ${this.padding + this.currentX}px;"
+              @pointerdown="${this.onPointerDown}"
+              @pointermove="${this.onPointerMove}"
+              @pointerup="${this.onPointerUp}"
+              @pointercancel="${this.onPointerUp}"
+            ></div>
+          </div>
+          <div class="label-container">
+            ${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
+            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    // Initialize knob position based on initial value
+    if (this.required && !this.value) {
+      this.value = true;
+    }
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+  }
+
+  /**
+   * Click handler - toggles the value
+   */
+  private async handleClick(event: MouseEvent) {
+    if (this.isDragging || this.hasDragged) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.required) {
+      // Bounce animation for required toggles
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      await new Promise((r) => setTimeout(r, 10));
+      this.currentX = this.maxTravel - 3;
+      this.requestUpdate();
+      await domtools.plugins.smartdelay.delayFor(150);
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.value = !this.value;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Pointer down - start dragging
+   */
+  private onPointerDown(event: PointerEvent) {
+    if (this.required || this.disabled) {
+      return;
+    }
+
+    this.isDragging = true;
+    this.startX = event.clientX - this.currentX;
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  /**
+   * Pointer move - track drag position
+   */
+  private onPointerMove(event: PointerEvent) {
+    if (!this.isDragging) return;
+    const newX = event.clientX - this.startX;
+    this.hasDragged = true;
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.add('dragging');
+    }
+
+    this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
+    this.requestUpdate();
+  }
+
+  /**
+   * Pointer up - complete drag and snap to nearest side
+   */
+  private onPointerUp(event: PointerEvent) {
+    if (!this.isDragging) return;
+    (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+    this.isDragging = false;
+
+    if (!this.hasDragged) {
+      return;
+    }
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.remove('dragging');
+    }
+
+    // Snap to nearest side based on midpoint
+    const midpoint = this.maxTravel / 2;
+    this.value = this.currentX > midpoint;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Sync knob position when value is changed externally
+   */
+  updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('value') &&
+      !this.isDragging &&
+      !this.hasDragged
+    ) {
+      this.currentX = this.value ? this.maxTravel : 0;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Keyboard support
+   */
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleClick(event as unknown as MouseEvent);
+    }
+  }
+
+  // DeesInputBase interface implementation
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(valueArg: boolean): void {
+    this.value = valueArg;
+  }
+
+  public focus(): void {
+    const track = this.shadowRoot?.querySelector('.toggle-track');
+    if (track) {
+      (track as HTMLElement).focus();
+    }
+  }
+}

ts_web/elements/00group-input/dees-input-toggle/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-toggle.js';

ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts

@@ -16,6 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-input-typelist')
 export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
 
   // INSTANCE

ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -39,6 +39,7 @@ declare global {
 @customElement('dees-input-wysiwyg')
 export class DeesInputWysiwyg extends DeesInputBase<string> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = '';

ts_web/elements/00group-input/index.ts

@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';
 export * from './profilepicture/dees-input-profilepicture.js';

ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts

@@ -25,6 +25,7 @@ export type ProfileShape = 'square' | 'round';
 @customElement('dees-input-profilepicture')
 export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = ''; // Base64 encoded image or URL

ts_web/elements/00group-pdf/dees-pdf-preview/component.ts

@@ -15,6 +15,7 @@ declare global {
 @customElement('dees-pdf-preview')
 export class DeesPdfPreview extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'PDF';
   public static styles = previewStyles;
 
   @property({ type: String })

ts_web/elements/00group-pdf/dees-pdf-viewer/component.ts

@@ -1,6 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
-import { keyed } from 'lit/directives/keyed.js';
-import { repeat } from 'lit/directives/repeat.js';
+import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
@@ -17,6 +15,7 @@ type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' |
 @customElement('dees-pdf-viewer')
 export class DeesPdfViewer extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'PDF';
   public static styles = viewerStyles;
 
   @property({ type: String })
@@ -196,8 +195,8 @@ export class DeesPdfViewer extends DeesElement {
                 </button>
               </div>
               <div class="sidebar-content">
-                ${keyed(this.documentId, html`
-                  ${repeat(
+                ${directives.keyed(this.documentId, html`
+                  ${directives.repeat(
                     this.thumbnailData,
                     (item) => item.page,
                     (item) => html`
@@ -224,7 +223,7 @@ export class DeesPdfViewer extends DeesElement {
               </div>
             ` : html`
               <div class="pages-container">
-                ${repeat(
+                ${directives.repeat(
                   this.pageData,
                   (item) => item.page,
                   (item) => html`

ts_web/elements/00group-pdf/dees-pdf/component.ts

@@ -21,6 +21,7 @@ declare global {
 export class DeesPdf extends DeesElement {
   // DEMO
   public static demo = () => html` <dees-pdf></dees-pdf> `;
+  public static demoGroup = 'PDF';
 
   // INSTANCE
 

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -33,6 +33,7 @@ export interface IView {
 export class DeesSimpleAppDash extends DeesElement {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Simple';
   // INSTANCE
 
   @property()

ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts

@@ -20,7 +20,8 @@ declare global {
 @customElement('dees-simple-login')
 export class DeesSimpleLogin extends DeesElement {
   // STATIC
-  public static demo = demoFunc
+  public static demo = demoFunc;
+  public static demoGroup = 'Simple';
   // INSTANCE
 
   @property()

ts_web/elements/00group-workspace/dees-workspace-diff-editor/dees-workspace-diff-editor.ts

@@ -31,6 +31,7 @@ export class DeesWorkspaceDiffEditor extends DeesElement {
       .filePath=${'/demo/example.ts'}
     ></dees-workspace-diff-editor>
   `;
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();

ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts

@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
       <dees-workspace-filetree></dees-workspace-filetree>
     </div>
   `;
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   @property({ type: Object })