v3.55.5

- Added `DeesStorageBrowser` to the Data Display section in README.
- Included `DeesUpdater` in the Theming section of README.
- Corrected the path to the LICENSE file in the README.
- Updated company information section for clarity in README.
- Modified `getFormElements` and `getSubmitButton` methods in `DeesForm` to use `querySelectorAll` for better input selection.
- Updated `apexcharts` version from `5.10.3` to `5.10.4` in versions service.

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "json.schemas": [
     {
-      "fileMatch": ["/npmextra.json"],
+      "fileMatch": ["/.smartconfig.json"],
       "schema": {
         "type": "object",
         "properties": {

changelog.md

@@ -1,5 +1,386 @@
 # Changelog
 
+## 2026-04-04 - 3.55.5 - fix(chart)
+refine ECharts series styling and legend color handling across bar, donut, and radar charts
+
+- switch chart series palettes to hex colors and add rgba conversion to prevent black flashes during ECharts hover and emphasis animations
+- explicitly provide legend item colors and solid tooltip markers so translucent fills render consistently across chart types
+- deep-merge legend theme options in the shared ECharts base component to preserve nested legend text styling
+- adjust donut chart spacing and shared chart container styling for improved layout
+
+## 2026-04-04 - 3.55.4 - fix(chart)
+align ECharts components with theme tokens and load the full ECharts ESM bundle
+
+- replace hardcoded chart colors with centralized themeDefaults-based ECharts theme helpers across bar, donut, gauge, and radar components
+- improve donut label styling to use theme-aware text colors
+- switch CDN loading to the pre-built echarts.esm.min.js bundle so all chart types and components are available
+
+## 2026-04-04 - 3.55.3 - fix(theme)
+align component styles with shared theme CSS variables
+
+- replace hardcoded bdTheme color usages across chart, dataview, input, layout, modal, media, simple, and workspace components with shared --dees-* theme tokens
+- add themeDefaultStyles to components and style modules that were not yet inheriting the shared theme defaults
+- standardize hover, border, background, text, and scrollbar colors for more consistent theming across the catalog
+
+## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login)
+migrate app dashboard and login styles to shared theme CSS variables
+
+- Replaces hardcoded bdTheme color values with --dees-* design tokens across dashboard and login components
+- Aligns backgrounds, borders, text, hover, active, and scrollbar colors with the shared theming system
+
+## 2026-04-04 - 3.55.1 - fix(appui)
+replace hardcoded app UI theme colors with shared dees CSS variables
+
+- Standardizes app UI component styling on shared --dees-* theme tokens across app bar, menus, tabs, main content, and bottom bar
+- Removes remaining hardcoded light/dark color values in favor of centralized background, border, text, badge, tooltip, scrollbar, and accent variables
+
+## 2026-04-04 - 3.55.0 - feat(theme)
+centralize theme CSS tokens in theme defaults and add missing interactive color variables
+
+- Refactors theme CSS variables to derive light and dark values from the shared themeDefaults token map instead of hardcoded color literals.
+- Adjusts dark background token values so secondary and tertiary surfaces align more consistently with the dark UI palette.
+- Adds new theme variables for interactive states, focus ring, tooltip, link, code, selection, and scrollbar styling.
+
+## 2026-04-04 - 3.54.0 - feat(media)
+rename media tile components to thumbnail components and add shared thumbnail base exports
+
+- Replaces dees-tile-* media component exports and implementations with dees-thumbnail-* counterparts for audio, image, video, note, folder, and pdf previews.
+- Introduces a shared DeesThumbnailBase and shared thumbnail styles for consistent sizing, hover overlays, loading states, error states, and lazy-loading behavior.
+- Updates the media index to export the new thumbnail component modules.
+- Includes a small layout cleanup in dees-dataview-codebox by removing forced full-height and absolute grid positioning.
+
+## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
+add configurable sidebar position support
+
+- introduces a sidebarPosition property with left and right options
+- updates viewer layout and footer alignment when the sidebar is displayed on the right
+
+## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
+add top scroll offset when navigating to a page in the PDF viewer
+
+- Subtracts 16px from the calculated scroll target so the selected page is not flush against the top edge of the viewer.
+- Improves page navigation positioning in the dees-pdf-viewer component.
+
+## 2026-04-03 - 3.52.4 - fix(appui-maincontent)
+adjust main content background theme colors
+
+- Update the main content background from pure white/near-black to softer light and dark theme values.
+
+## 2026-04-03 - 3.52.3 - fix(input-richtext)
+resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers
+
+- Switch Tiptap imports from CDN URLs to bundled npm packages to avoid duplicate ProseMirror instances
+- Update rich text, code, dataview, and terminal preview containers to use absolute inset positioning for stable full-size layouts
+- Trigger a component update after rich text editor initialization and improve ProseMirror wrapping behavior
+
+## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash)
+align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation
+
+- Update dees-chart-log to refresh the terminal theme when goBright changes and derive dark mode directly from the brightness setting.
+- Refine dees-simple-appdash control bar colors, borders, and shadow gradients for better light and dark theme consistency.
+- Expand the app dashboard demo with recent activity content to showcase scrollable layout behavior.
+
+## 2026-04-03 - 3.52.1 - fix(dees-modal)
+refine modal styling, spacing, and animations for a cleaner overlay presentation
+
+- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
+- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
+- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
+
+## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
+add full page toggle control for chart area
+
+- adds a header action to expand and collapse the chart area into a full page view
+- updates chart area styling for the custom header, label, and expand button
+- resizes the chart after toggling full page mode by fitting the visible time scale
+
+## 2026-04-03 - 3.51.2 - fix(ui)
+standardize tile-based layouts across input, product card, and terminal preview components
+
+- Replace custom card containers with dees-tile in code input, richtext editor, shopping product card, and terminal preview components
+- Move toolbars and footers into dees-tile header/footer slots for more consistent structure and spacing
+- Update hover, focus, and selected state styling to target dees-tile parts while preserving existing component behavior
+
+## 2026-04-03 - 3.51.1 - fix(repo)
+no changes to commit
+
+
+## 2026-04-03 - 3.51.0 - feat(chart-area)
+replace ApexCharts with Lightweight Charts for area chart rendering
+
+- switch chart dependency and CDN loader from apexcharts to lightweight-charts
+- update dees-chart-area styling and tooltip support for the new chart engine
+- adjust appdash terminal overlay sizing with automatic height
+
+## 2026-04-02 - 3.50.2 - fix(chart,dashboardgrid demos)
+use dees-button text property consistently in demo interactions and update dataset button highlighting reliably
+
+- Replaces textContent reads with the component text property when wiring demo button handlers.
+- Updates the chart area demo to refresh dataset button highlight states directly on click without redundant listener replacement logic.
+- Uses the button text property when toggling dashboard edit mode labels.
+
+## 2026-04-02 - 3.50.1 - fix(appdash)
+use banner height CSS variable for terminal layout and expose terminal resize handling
+
+- Removes manual terminal top offset updates in the app dashboard and relies on the shared --banner-area-height CSS variable instead.
+- Drops fixed max-width and max-height calculations so the terminal can size more reliably within its container.
+- Makes the workspace terminal resize handler public to support external resize coordination.
+
+## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
+add global message banners with actions and dismissal support
+
+- introduces typed global message APIs and public methods to add, remove, and clear banners
+- renders info, success, warning, and error banners with optional icons and action buttons
+- adjusts app content and terminal positioning to account for banner height dynamically
+- updates the demo to showcase dismissible and actionable global messages
+
+## 2026-04-02 - 3.49.2 - fix(dees-input-list)
+refine dees-input-list spacing and simplify the add item action button
+
+- reduce list item, input, helper text, and empty state sizing for a more compact layout
+- replace the add action from dees-button to a native icon-only button and remove the unused button import
+- simplify add-input styling by removing bordered focus treatment and using a minimal inline input appearance
+
+## 2026-04-01 - 3.49.1 - fix(ts_web)
+resolve TypeScript nullability and event typing issues across web components
+
+- adds explicit non-null assertions and nullable types to component properties, shadowRoot queries, and modal references
+- normalizes demo and component event listeners by casting generic Event objects to CustomEvent where needed
+- guards optional form, dropdown, menu, and DOM interactions to prevent invalid access under stricter TypeScript checks
+- updates tsconfig to include Node types for the web build environment
+
+## 2026-03-18 - 3.49.0 - feat(dataview-statusobject)
+add last updated footer to status object and refresh demo data
+
+- Render a bottom bar that shows the status object's lastUpdated timestamp when available.
+- Adjust detail row padding to keep spacing consistent with the new footer layout.
+- Update demo status objects to include lastUpdated examples for current, hourly, and daily timestamps.
+- Bump @tsclass/tsclass from ^9.3.0 to ^9.5.0.
+
+## 2026-03-14 - 3.48.5 - fix(repo)
+no changes to commit
+
+
+## 2026-03-14 - 3.48.4 - fix(storage-browser)
+rename S3-specific storage browser interfaces to generic storage types
+
+- Replaces IS3DataProvider, IS3Object, and IS3ChangeEvent with generic storage interface names across storage browser components
+- Updates demo provider naming and user-facing demo text from S3 browser to Storage browser
+- Aligns interface and utility comments with storage-agnostic terminology
+
+## 2026-03-14 - 3.48.3 - fix(dataview)
+rename dees-s3-browser exports and custom elements to dees-storage-browser
+
+- Replaces the dees-s3-browser module path with dees-storage-browser in dataview exports
+- Renames the main custom element from dees-s3-browser to dees-storage-browser
+- Renames related columns, keys, preview, demo, interfaces, and utility entry points under the new storage-browser module
+
+## 2026-03-12 - 3.48.2 - fix(repo)
+no changes to commit
+
+
+## 2026-03-12 - 3.48.1 - fix(repo)
+no changes to commit
+
+
+## 2026-03-12 - 3.48.0 - feat(dataview)
+add an S3 browser component with column and list views, file preview, editing, and object management
+
+- introduces a new dees-s3-browser module with shared interfaces, utilities, demo, and exports
+- supports browsing S3-style prefixes in both column and list layouts with breadcrumb navigation
+- adds file preview with text editing, download, and delete actions
+- includes create, rename, move, delete, upload, and drag-and-drop handling for files and folders
+- adds optional live change stream integration with refresh indicators
+
+## 2026-03-11 - 3.47.2 - fix(deps)
+bump @design.estate/dees-domtools and @design.estate/dees-element dependencies
+
+- update @design.estate/dees-domtools from ^2.3.9 to ^2.5.1
+- update @design.estate/dees-element from ^2.2.1 to ^2.2.2
+
+## 2026-03-11 - 3.47.1 - fix(dees-statsgrid)
+add tablet breakpoint to render stats grid as three columns
+
+- Added cssManager.cssForTablet rule to set .stats-grid grid-template-columns: repeat(3, 1fr).
+- Improves responsive layout on tablet devices for dees-statsgrid tiles.
+- Change made in ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
+
+## 2026-03-11 - 3.47.0 - feat(dees-statsgrid)
+add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1
+
+- Added @containerResponsive decorator and import to dees-statsgrid
+- Added cssManager.cssForPhablet and cssManager.cssForPhone responsive style blocks to adjust layout, spacing and font sizes on smaller viewports
+- Bumped dependency @design.estate/dees-element from ^2.1.6 to ^2.2.1
+
+## 2026-03-10 - 3.46.1 - fix(dees-appui)
+add min-height: 0 to mainmenu and secondarymenu to prevent unintended container height and fix layout stacking
+
+- Modified ts_web/elements/00group-appui/dees-appui/dees-appui.ts: added min-height: 0 to .maingrid > dees-appui-mainmenu and .maingrid > dees-appui-secondarymenu
+- Fixes layout issues where children or flexbox-derived min-height could cause menu containers to expand and interfere with z-index stacking
+
+## 2026-03-10 - 3.46.0 - feat(dees-tile)
+unify tile metadata into a consistent bottom info bar and add PDF file-size display
+
+- Introduce renderBottomBar() hook in DeesTileBase and remove per-component bottom badges/labels in favor of a unified info bar.
+- Implement renderBottomBar in audio, video, image, folder, note and pdf tiles to show label, counts, dimensions, duration, language/line info and page counts.
+- PDF tile: add fileSize state, attempt to read download info and display formatted file size in the info bar; show currentPreviewPage/pageCount when hovering.
+- Styling changes: replace legacy badges/labels with .tile-info-bar (.info-label, .info-detail, .info-spacer); adjust padding, font sizing, z-index, and remove hover translate for clickable tiles.
+- PDF demo and styles: use cssManager theming for demo colors and adjust preview padding.
+- Bump devDependencies: @git.zone/tswatch -> ^3.3.0 and @types/node -> ^25.4.0
+
+## 2026-03-10 - 3.45.1 - fix(dees-appui)
+substitute route params into URL hash when navigating
+
+- Replaces :param placeholders in view.route with provided params before updating the URL hash.
+- Ensures window.history.pushState is called with the resolved route so URLs do not contain literal parameter tokens.
+
+## 2026-03-10 - 3.45.0 - feat(dees-form)
+register new input components (tags, list, wysiwyg, richtext) and emit change notification for richtext updates
+
+- Added imports and registration of DeesInputTags, DeesInputList, DeesInputWysiwyg, and DeesInputRichtext in dees-form
+- Extended TFormInputElement union type to include the new input components
+- DeesInputRichtext now calls changeSubject.next(this.value) in the editor onUpdate handler to propagate changes
+
+## 2026-03-10 - 3.44.0 - feat(appui-tabs)
+add support for left/right tab action buttons and content tab action APIs
+
+- Introduce ITabAction interface and add actionsLeft/actionsRight properties to dees-appui-tabs, dees-appui-maincontent, and dees-appui.
+- Render action buttons with new styles and renderActions() helper, including disabled state and click handlers; wire actions into tab components.
+- Add public clear() on dees-appui-tabs and improve tab selection logic to reset selection when tabs become empty or when the selected tab is removed.
+- Expose setContentTabActionsLeft and setContentTabActionsRight on the DeesAppui programmatic API and update interfaces/appconfig accordingly.
+- Update demos to showcase action buttons, add clear-all behavior, and adjust layout/styling for action areas.
+
+## 2026-03-09 - 3.43.4 - fix(media)
+remove deprecated dees-pdf and dees-pdf-preview components and bump several dependencies
+
+- Removed deprecated PDF components and related demos/styles: ts_web/elements/00group-media/dees-pdf/* and ts_web/elements/00group-media/dees-pdf-preview/*
+- Removed exports for dees-pdf and dees-pdf-preview from ts_web/elements/00group-media/index.ts (public API removal)
+- Dependency upgrades: @design.estate/dees-domtools → ^2.3.9, apexcharts → ^5.10.3, lucide → ^0.577.0, @fortawesome/* → ^7.2.0
+- DevDependency upgrades: @git.zone/tsbuild → ^4.3.0, @git.zone/tsbundle → ^2.9.1, @git.zone/tstest → ^3.3.2, @git.zone/tswatch → ^3.2.5, @types/node → ^25.3.5
+- Updated ts_web/services/versions.ts to align CDN/version constants (apexcharts, tiptap → 2.27.2, fontawesome)
+
+## 2026-02-24 - 3.43.3 - fix(dees-table)
+use lucide icon identifier for Search action in dees-table
+
+- Replaced iconName 'magnifyingGlass' with 'lucide:Search' in ts_web/elements/00group-dataview/dees-table/dees-table.ts
+- Updates the icon identifier for the header 'Search' action; no functional behavior changed
+
+## 2026-02-21 - 3.43.2 - fix(dees-chart-log)
+avoid duplicate log entries, optimize incremental updates, enforce maxEntries, and respect filters when writing logs
+
+- Prevent property-bound logEntries from duplicating entries already present in logBuffer by deduplicating on timestamp|message
+- Call updateMetrics() when replaying or appending log entries so metrics stay accurate
+- Skip processing entirely when the incoming logEntries array is unchanged
+- Optimize append-only updates by writing only the new tail entries instead of full re-render
+- Enforce maxEntries when appending to the logBuffer to maintain buffer size
+- Respect filterMode and searchQuery when deciding whether to write appended entries to the terminal
+
+## 2026-02-21 - 3.43.1 - fix(dees-chart-log)
+replay buffered log entries when terminal becomes ready and sync logEntries updates to re-render filtered logs
+
+- Replay entries stored in logBuffer after terminal initialization to avoid losing entries that arrived early
+- Add updated() lifecycle hook to copy logEntries into logBuffer and call reRenderFilteredLogs when terminalReady
+- Call super.updated(changedProperties) to preserve base class behavior
+
+## 2026-02-17 - 3.43.0 - feat(dees-form)
+add layout styles to dees-form and standardize demo input grouping
+
+- Add static CSS to dees-form: default column layout with gap and support for [horizontal-layout] (row wrapping, alignment and gap).
+- Remove inline <style> from dees-form render to centralize styling.
+- Simplify dees-input-base styles by removing host margins and making spacing container-driven.
+- Update multiple demo files to wrap related inputs in a new .input-group container and include .input-group CSS for consistent vertical spacing.
+
+## 2026-02-16 - 3.42.2 - fix(dees-chart-area)
+add ApexAxisChartSeries type to dees-chart-area component to improve typing for ApexCharts series data
+
+- Introduces ApexAxisChartSeries type alias with support for number arrays, [x,y] tuples, and object {x,y,...} series entries
+- Type-only change — no runtime or API behavior modified
+- File changed: ts_web/elements/00group-chart/dees-chart-area/component.ts
+
+## 2026-02-16 - 3.42.1 - fix(dees-table)
+Guard against undefined action.type in dees-table by using optional chaining and update several dependencies
+
+- Use optional chaining (action.type?.includes(...)) in ts_web/elements/.../dees-table.ts to prevent runtime errors when action.type is undefined
+- Bump dependency apexcharts from ^5.3.6 to ^5.5.0
+- Bump dependency lucide from ^0.563.0 to ^0.564.0
+- Bump devDependency @git.zone/tswatch from ^3.0.1 to ^3.1.0
+- Bump devDependency @types/node from ^25.0.10 to ^25.2.3
+
+## 2026-02-02 - 3.42.0 - feat(dees-form-submit)
+forward button properties to internal dees-button, use property bindings, add demo and styles
+
+- Added forwarded properties: type, size, icon, iconPosition (with defaults) and preserved text/status/disabled
+- Changed template to use property bindings (.prop) for dees-button instead of string attributes
+- Switched internal event handler to listen for dees-button's @clicked event (was @click)
+- Added component styles (:host display and dees-button width:100%) and improved layout
+- Expanded demo with multiple usage examples (basic, icons, types, sizes, states, and a form context)
+
+## 2026-02-02 - 3.41.6 - fix(dees-simple-appdash)
+respect selectedView when loading initial view, falling back to the first tab
+
+- firstUpdated now loads this.selectedView if set, otherwise loads the first view tab
+- Prevents always loading the first tab and preserves a previously selected view on initial render
+
+## 2026-02-01 - 3.41.5 - fix(dees-service-lib-loader)
+prevent horizontal scrollbar by offsetting xterm WidthCache measurement container
+
+- Injects additional CSS into DeesServiceLibLoader to move xterm.js WidthCache measurement div off-screen horizontally (selector: body > div[style*="top: -50000px"][style*="width: 50000px"])
+- Fixes root cause where xterm creates a large-width measurement container (width: 50000px) on document.body that expands scrollWidth and causes a horizontal scrollbar
+- Change applied in ts_web/services/DeesServiceLibLoader.ts by concatenating the fix CSS into the injected stylesheet
+
+## 2026-01-29 - 3.41.4 - fix()
+no changes
+
+- No files changed in this commit; no code or documentation modified
+- No release required
+
+## 2026-01-29 - 3.41.3 - fix(dees-pdf-viewer)
+use in-memory PDF data for download and print; add robust print wrapper, cleanup and error handling
+
+- Download and Print now use pdfDocument.getData() to create Blob URLs so in-memory PDFs (pdf.js) can be saved/printed.
+- Print flow now opens an HTML wrapper with an iframe to allow onafterprint handling, auto-close, popup-fallback and timed cleanup of Blob URLs.
+- Added try/catch logging, URL.revokeObjectURL calls and safety timeouts to avoid resource leaks.
+- Removed context menu items that relied on the raw PDF URL (Open in New Tab, Copy PDF URL); Download/Print actions now await the async handlers.
+
+## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer)
+account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays
+
+- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size
+- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged
+- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation
+- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout
+
+## 2026-01-27 - 3.41.1 - fix(dataview-codebox)
+fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies
+
+- Updated CSS in ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts: added height:100%, box-sizing, display:flex and flex-direction:column on container, set flex-shrink on header elements, made code grid overflow:auto with flex:1 and min-height:0 to prevent overflow issues.
+- Bumped dependencies in package.json: @design.estate/dees-domtools from ^2.3.7 to ^2.3.8 and @design.estate/dees-element from ^2.1.5 to ^2.1.6.
+- Non-breaking visual/layout fix — suitable for a patch release.
+
+## 2026-01-27 - 3.41.0 - feat(docs)
+document new media & tile components and expand Workspace/IDE component docs; update component count to 90+
+
+- Updated README component count from 70+ to 90+.
+- Added Media & Tile components documentation (DeesTilePdf, DeesTileImage, DeesTileAudio, DeesTileVideo, DeesTileNote, DeesTileFolder, DeesPreview, DeesPdfViewer, DeesImageViewer, DeesAudioViewer, DeesVideoViewer).
+- Expanded Workspace/IDE documentation and introduced workspace subcomponents (DeesWorkspace, DeesWorkspaceMonaco, DeesWorkspaceDiffEditor, DeesWorkspaceFiletree, DeesWorkspaceTerminal, DeesWorkspaceTerminalPreview, DeesWorkspaceMarkdown, DeesWorkspaceMarkdownoutlet, DeesWorkspaceBottombar).
+- Enhanced Contextmenu docs to demonstrate nested submenus and programmatic API usage.
+- Added ITileFolderItem interface example for tile folder items.
+
+## 2026-01-27 - 3.40.0 - feat(dees-tile)
+unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests
+
+- Add shared badge styles: .tile-badge-corner, .tile-badge-topright, .tile-badge and layout rules in dees-tile-shared/styles.ts
+- Update tile components (audio, video, image, folder, note, pdf) to use new badge markup and remove duplicated badge CSS
+- Shift badge positioning when a tile label is present (.tile-container:has(.tile-label))
+- Remove older per-component badge rules (duration-badge, item-count-badge, dimension-badge, note-language/note-line-indicator, preview-page-indicator) and replace with unified classes
+- Update tests to import dees-contextmenu and dees-dashboardgrid from new 00group-overlay / 00group-layout paths to reflect folder reorganization
+
+## 2026-01-27 - 3.39.1 - fix(dees-tile-note)
+use horizontal pointer position to scroll note body by computing percentage from clientX and element width instead of clientY and height
+
+- Changed ts_web/elements/00group-media/dees-tile-note/component.ts: use x = e.clientX - rect.left and percentage = x / rect.width to drive scrollTop calculation instead of using vertical coordinates
+- Fixes incorrect scroll mapping where vertical mouse position was used for horizontal scrolling interaction
+
 ## 2026-01-27 - 3.39.0 - feat(components)
 add large set of new UI components and demos, reorganize groups, and bump a few dependencies
 

license

@@ -1,4 +1,4 @@
-Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -8,10 +8,7 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software. You agree to being mentioned
-as reference by Lossless GmbH. This includes the use of your entity logos
-or profile picture by Lossless GmbH on websites and readme's, also on third party
-pages like gitlab.com or github.com.
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -19,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.39.0",
+  "version": "3.55.5",
   "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",
@@ -16,13 +16,13 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.7",
-    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-domtools": "^2.5.4",
+    "@design.estate/dees-element": "^2.2.4",
     "@design.estate/dees-wcctools": "^3.8.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.1.0",
@@ -33,23 +33,24 @@
     "@tiptap/extension-typography": "^2.23.0",
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
-    "@tsclass/tsclass": "^9.3.0",
-    "apexcharts": "^5.3.6",
+    "@tsclass/tsclass": "^9.5.0",
+    "echarts": "^5.6.0",
+    "lightweight-charts": "^5.1.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.563.0",
+    "lucide": "^0.577.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
-    "@git.zone/tstest": "^3.1.8",
-    "@git.zone/tswatch": "^3.0.1",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.10"
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tstest": "^3.6.3",
+    "@git.zone/tswatch": "^3.3.2",
+    "@push.rocks/projectinfo": "^5.1.0",
+    "@types/node": "^25.5.0"
   },
   "files": [
     "ts/**/*",
@@ -60,7 +61,7 @@
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [

readme.md

@@ -1,6 +1,6 @@
 # @design.estate/dees-catalog
 
-A comprehensive web components library built with TypeScript and LitElement, providing **70+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
+A comprehensive web components library built with TypeScript and LitElement, providing **90+ 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/)
@@ -18,6 +18,8 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 - 🔧 **TypeScript-First** — Fully typed APIs with excellent IDE support
 - 🧩 **Modular** — Use only what you need, tree-shakeable architecture
 - 🏗️ **Full App Shell** — `dees-appui` provides a complete application framework with menus, routing, activity log, and bottom bar
+- 🎬 **Media Components** — Rich tile-based previews for PDFs, images, audio, video, notes, and folders
+- 💻 **IDE Workspace** — Full workspace component with Monaco editor, file tree, terminal, and diff viewer
 
 ## 📦 Installation
 
@@ -55,13 +57,14 @@ For developers working on this library, please refer to the [UI Components Playb
 |----------|------------|
 | **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), [`DeesActionbar`](#deesactionbar) |
 | **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
-| **App Shell (Layout)** | [`DeesAppui`](#deesappui-), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
-| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| **App Shell (Layout)** | [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination), [`DeesStorageBrowser`](#deesstorgebrowser) |
+| **Media & Tiles** | [`DeesTilePdf`](#deestilepdf), [`DeesTileImage`](#deestileimage), [`DeesTileAudio`](#deestileaudio), [`DeesTileVideo`](#deestilevideo), [`DeesTileNote`](#deestilenote), [`DeesTileFolder`](#deestilefolder), [`DeesPreview`](#deespreview), [`DeesPdfViewer`](#deespdfviewer), [`DeesPdfPreview`](#deespdfpreview), [`DeesImageViewer`](#deesimageviewer), [`DeesAudioViewer`](#deesaudioviewer), [`DeesVideoViewer`](#deesvideoviewer) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
-| **Workspace / IDE** | [`DeesEditor`](#deeseditor), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
-| **Theming** | [`DeesTheme`](#deestheme) |
+| **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
+| **Theming** | [`DeesTheme`](#deestheme), [`DeesUpdater`](#deesupdater) |
 | **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
 
@@ -1234,6 +1237,146 @@ Pagination component for navigating through large datasets.
 
 ---
 
+### Media & Tile Components 🎬
+
+A rich collection of tile-based preview components for displaying media files in grids. All tiles share a consistent base class (`DeesTileBase`) with lazy loading via `IntersectionObserver`, hover interactions, click events, context menus, and three size variants (`small`, `default`, `large`).
+
+All tile badges use a unified styling system with label-awareness — when a `label` is set, bottom badges automatically shift up to avoid overlapping.
+
+#### `DeesTilePdf`
+PDF document tile with live page preview on hover.
+
+```typescript
+<dees-tile-pdf
+  pdfUrl="/documents/report.pdf"
+  label="Annual Report"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-pdf>
+```
+
+**Key Features:**
+- Renders first page as canvas preview
+- Hover to scrub through pages (mouse X position maps to page number)
+- Shows page count badge, hover page indicator
+- Detects A4/Letter vs non-standard aspect ratios
+
+#### `DeesTileImage`
+Image tile with lazy loading and dimension display.
+
+```typescript
+<dees-tile-image
+  src="/photos/landscape.jpg"
+  alt="Mountain landscape"
+  label="landscape.jpg"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-image>
+```
+
+**Key Features:**
+- Lazy loads image on scroll into view
+- Shows image dimensions on hover (e.g. "1920 × 1080")
+- Checkerboard background for transparent images
+
+#### `DeesTileAudio`
+Audio file tile with waveform visualization.
+
+```typescript
+<dees-tile-audio
+  src="/music/track.mp3"
+  title="Summer Vibes"
+  artist="DJ Example"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-audio>
+```
+
+**Key Features:**
+- Generates waveform visualization from audio data
+- Shows duration badge (e.g. "3:42")
+- Displays title and artist metadata
+- Play overlay on hover
+
+#### `DeesTileVideo`
+Video tile with thumbnail capture and hover preview.
+
+```typescript
+<dees-tile-video
+  src="/videos/intro.mp4"
+  poster="/thumbs/intro.jpg"
+  label="Introduction"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-video>
+```
+
+**Key Features:**
+- Auto-captures first frame as thumbnail (or uses provided `poster`)
+- Plays video preview on hover
+- Shows duration badge
+- Play button overlay
+
+#### `DeesTileNote`
+Code/text snippet tile with syntax-aware display.
+
+```typescript
+<dees-tile-note
+  title="config.ts"
+  language="TypeScript"
+  .content=${codeString}
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-note>
+```
+
+**Key Features:**
+- Monospace font with line numbers
+- Language badge (top-right)
+- Scrollable content on hover (mouse X position controls scroll)
+- Line indicator badge while scrolling
+- Gradient fade at bottom
+
+#### `DeesTileFolder`
+Folder tile with 2×2 content preview grid.
+
+```typescript
+<dees-tile-folder
+  name="Project Assets"
+  .items=${[
+    { type: 'image', name: 'logo.png', thumbnailSrc: '/thumbs/logo.png' },
+    { type: 'pdf', name: 'spec.pdf' },
+    { type: 'audio', name: 'jingle.mp3' },
+    { type: 'video', name: 'demo.mp4' },
+  ]}
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-folder>
+```
+
+**Key Features:**
+- 2×2 preview grid showing first 4 items (thumbnails or type icons)
+- Item count badge (e.g. "12 items")
+- Folder icon header with name
+- Supports: `pdf`, `image`, `audio`, `video`, `note`, `folder`, `unknown` types
+
+#### `DeesPreview`
+Unified preview component that auto-selects the right tile type based on content.
+
+#### `DeesPdfViewer` / `DeesPdfPreview`
+Full PDF viewing components with navigation controls.
+
+#### `DeesImageViewer`
+Full-screen image viewer with zoom and pan.
+
+#### `DeesAudioViewer`
+Audio playback component with waveform and controls.
+
+#### `DeesVideoViewer`
+Video playback component with standard controls.
+
+---
+
 ### Visualization Components
 
 #### `DeesChartArea`
@@ -1294,16 +1437,41 @@ DeesModal.createAndShow({
 ```
 
 #### `DeesContextmenu`
-Context menu component for right-click actions.
+Context menu component for right-click actions with nested submenu support.
 
 ```typescript
-<dees-contextmenu
-  .items=${[
-    { label: 'Edit', icon: 'edit', action: () => handleEdit() },
-    { label: 'Delete', icon: 'trash', action: () => handleDelete() }
-  ]}
-  position="right"
-></dees-contextmenu>
+// Programmatic usage
+DeesContextmenu.openContextMenuWithOptions(mouseEvent, [
+  {
+    name: 'Edit',
+    iconName: 'lucide:edit',
+    action: async () => handleEdit()
+  },
+  { divider: true },
+  {
+    name: 'More Options',
+    iconName: 'lucide:moreHorizontal',
+    submenu: [
+      { name: 'Duplicate', iconName: 'lucide:copy', action: async () => handleDuplicate() },
+      { name: 'Archive', iconName: 'lucide:archive', action: async () => handleArchive() },
+    ]
+  },
+  {
+    name: 'Delete',
+    iconName: 'lucide:trash2',
+    action: async () => handleDelete()
+  }
+]);
+
+// Component-based (implement getContextMenuItems on any element)
+class MyComponent extends DeesElement {
+  getContextMenuItems() {
+    return [
+      { name: 'View Details', iconName: 'lucide:eye', action: async () => { ... } },
+      { name: 'Edit', iconName: 'lucide:edit', action: async () => { ... } },
+    ];
+  }
+}
 ```
 
 #### `DeesSpeechbubble`
@@ -1395,51 +1563,68 @@ Theme provider component that wraps children and provides CSS custom properties
 
 ---
 
-### Workspace / IDE Components
+### Workspace / IDE Components 💻
 
-#### `DeesEditor`
-Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
+A full-featured IDE workspace component suite for building browser-based code editors, terminal interfaces, and documentation viewers.
+
+#### `DeesWorkspace`
+Top-level workspace shell that composes editor, file tree, terminal, and bottom bar into an IDE-like layout.
 
 ```typescript
-<dees-editor
+<dees-workspace></dees-workspace>
+```
+
+#### `DeesWorkspaceMonaco`
+Monaco Editor integration for code editing with full IntelliSense, syntax highlighting, and language support.
+
+```typescript
+<dees-workspace-monaco
   .value=${code}
-  @change=${handleCodeChange}
   .language=${'typescript'}
-  .theme=${'vs-dark'}
-  .options=${{
-    lineNumbers: true,
-    minimap: { enabled: true },
-    autoClosingBrackets: 'always'
-  }}
-></dees-editor>
+  @change=${handleCodeChange}
+></dees-workspace-monaco>
 ```
 
-#### `DeesTerminal`
-Terminal emulator component for command-line interface.
+#### `DeesWorkspaceDiffEditor`
+Side-by-side diff editor powered by Monaco for comparing file versions.
 
 ```typescript
-<dees-terminal
-  .commands=${{
-    'echo': (args) => `Echo: ${args.join(' ')}`,
-    'help': () => 'Available commands: echo, help'
-  }}
-  .prompt=${'$'}
-  .welcomeMessage=${'Welcome! Type "help" for available commands.'}
-></dees-terminal>
+<dees-workspace-diff-editor
+  .originalValue=${originalCode}
+  .modifiedValue=${modifiedCode}
+  .language=${'typescript'}
+></dees-workspace-diff-editor>
 ```
 
-#### `DeesUpdater`
-Component for managing application updates and version control.
+#### `DeesWorkspaceFiletree`
+File tree navigation component with expand/collapse, file icons, and selection.
 
 ```typescript
-<dees-updater
-  .currentVersion=${'1.5.2'}
-  .checkInterval=${3600000}
-  .autoUpdate=${false}
-  @update-available=${handleUpdateAvailable}
-></dees-updater>
+<dees-workspace-filetree
+  .files=${fileTreeData}
+  @file-select=${handleFileSelect}
+></dees-workspace-filetree>
 ```
 
+#### `DeesWorkspaceTerminal`
+Terminal emulator component powered by xterm.js.
+
+```typescript
+<dees-workspace-terminal></dees-workspace-terminal>
+```
+
+#### `DeesWorkspaceTerminalPreview`
+Terminal with integrated preview pane for output visualization.
+
+#### `DeesWorkspaceMarkdown`
+Markdown editor with live preview.
+
+#### `DeesWorkspaceMarkdownoutlet`
+Read-only markdown renderer for documentation display.
+
+#### `DeesWorkspaceBottombar`
+IDE-style bottom status bar for the workspace.
+
 ---
 
 ### Pre-built Templates
@@ -1582,13 +1767,20 @@ interface IViewActivationContext {
   viewId: string;
   params?: Record<string, string>;
 }
+
+// Tile folder item (for DeesTileFolder)
+interface ITileFolderItem {
+  type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
+  thumbnailSrc?: string;
+  name: string;
+}
 ```
 
 ---
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./license) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 
@@ -1600,9 +1792,11 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH
+Task Venture Capital GmbH  
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.
 
 By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

test/test.contextmenu-demo.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
-import { demoFunc } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.demo.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.js';
 
 tap.test('should render context menu demo', async () => {
   // Create demo container

test/test.contextmenu-nested-close.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should close all parent menus when clicking action in nested submenu', async () => {
   let actionCalled = false;

test/test.contextmenu-shadowdom.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesElement, customElement, html } from '@design.estate/dees-element';
 
 // Create a test element with shadow DOM

test/test.contextmenu.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should show context menu with nested submenu', async () => {
   // Create a test element with context menu items

test/test.dashboardgrid-layout.node.ts

@@ -3,8 +3,8 @@ import { tap, expect } from '@git.zone/tstest/tapbundle';
 import {
   resolveWidgetPlacement,
   collectCollisions,
-} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
-import type { DashboardWidget } from '../ts_web/elements/dees-dashboardgrid/types.ts';
+} from '../ts_web/elements/00group-layout/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/00group-layout/dees-dashboardgrid/types.ts';
 
 tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
   const widgets: DashboardWidget[] = [

test/test.pdf-text-selection.chromium.ts

@@ -0,0 +1,79 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('PDF viewer should render text layer', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+  await viewer.updateComplete;
+
+  expect(viewer.totalPages).toBeGreaterThan(0);
+
+  const textLayer = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"]');
+  expect(textLayer).toBeTruthy();
+
+  const textSpans = textLayer?.querySelectorAll('span');
+  expect(textSpans?.length).toBeGreaterThan(0);
+  console.log(`Text layer has ${textSpans?.length} spans`);
+});
+
+tap.test('Text should be selectable', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+
+  const textLayer = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"]');
+  const firstSpan = textLayer?.querySelector('span') as HTMLElement;
+
+  if (firstSpan?.textContent) {
+    const range = document.createRange();
+    const textNode = firstSpan.firstChild;
+    if (textNode) {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, Math.min(5, textNode.textContent?.length || 0));
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      expect(selection?.toString().length).toBeGreaterThan(0);
+      console.log('Selected text:', selection?.toString());
+    }
+  }
+});
+
+tap.test('endOfContent element exists for selection boundary', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+
+  const endOfContent = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"] .endOfContent');
+  expect(endOfContent).toBeTruthy();
+});
+
+export default tap.start();

test/test.wysiwyg-blocktype-change.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
 import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should change block type via context menu', async () => {
   // Create WYSIWYG editor with a paragraph

test/test.wysiwyg-contextmenu.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
 import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should show context menu on WYSIWYG blocks', async () => {
   // Create WYSIWYG editor

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.39.0',
+  version: '3.55.5',
   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-appbar/component.ts

@@ -122,7 +122,7 @@ export class DeesAppuiBar extends DeesElement {
       >
         ${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
         ${menuItem.name}
-        ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
+        ${hasSubmenu ? this.renderDropdown(menuItem.submenu!, itemId, isActive) : ''}
       </div>
     `;
   }

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

@@ -75,21 +75,21 @@ export const demoFunc = () => {
       // Set up status toggle
       const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
       statusButtons[0].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'online' };
+        appbar.user = { ...appbar.user!, status: 'online' };
       });
       statusButtons[1].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'busy' };
+        appbar.user = { ...appbar.user!, status: 'busy' };
       });
       statusButtons[2].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'away' };
+        appbar.user = { ...appbar.user!, status: 'away' };
       });
       statusButtons[3].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'offline' };
+        appbar.user = { ...appbar.user!, status: 'offline' };
       });
       
       // Set up window controls toggle
       const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
-      windowControlsButton.addEventListener('click', () => {
+      windowControlsButton!.addEventListener('click', () => {
         appbar.showWindowControls = !appbar.showWindowControls;
       });
       

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

@@ -12,8 +12,8 @@ export const appuiAppbarStyles = [
         position: relative;
         width: 100%;
         height: var(--appbar-height);
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border-bottom: 1px solid var(--dees-color-border-default);
+        background: var(--dees-color-bg-primary);
         color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
         font-size: var(--appbar-font-size);
         display: grid;
@@ -78,8 +78,8 @@ export const appuiAppbarStyles = [
         top: 100%;
         left: 0;
         min-width: 200px;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
         margin-top: 4px;
@@ -112,7 +112,7 @@ export const appuiAppbarStyles = [
 
       .dropdown-divider {
         height: 1px;
-        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-border-default);
         margin: 4px 0;
       }
 
@@ -215,7 +215,7 @@ export const appuiAppbarStyles = [
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 2px solid var(--dees-color-bg-primary);
       }
 
       .user-status.online {

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

@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
         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%)')};
+        background: var(--dees-color-bg-tertiary);
+        border-top: 1px solid var(--dees-color-border-default);
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
       }
 
       .widget:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
       .widget-separator {
         width: 1px;
         height: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-strong);
         margin: 0 4px;
       }
 
@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
         border-radius: 3px;
         cursor: pointer;
         transition: background 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .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%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
 
       .action-button.disabled:hover {
         background: transparent;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
     `,
   ];

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

@@ -53,18 +53,23 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({ type: Number })
   accessor tabsAutoHideThreshold: number = 0;
 
+  @property({ type: Array })
+  accessor tabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor tabActionsRight: interfaces.ITabAction[] = [];
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: var(--dees-color-text-secondary);
         display: grid;
         grid-template-rows: auto 1fr;
         width: 100%;
         height: 100%;
-        background: ${cssManager.bdTheme('#ffffff', '#161616')};
+        background: var(--dees-color-bg-secondary);
       }
 
       .maincontainer {
@@ -106,6 +111,8 @@ export class DeesAppuiMaincontent extends DeesElement {
             .tabStyle=${'horizontal'}
             .autoHide=${this.tabsAutoHide}
             .autoHideThreshold=${this.tabsAutoHideThreshold}
+            .actionsLeft=${this.tabActionsLeft}
+            .actionsRight=${this.tabActionsRight}
             @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
             @tab-close=${(e: CustomEvent) => this.handleTabClose(e)}
           ></dees-appui-tabs>
@@ -157,7 +164,7 @@ export class DeesAppuiMaincontent extends DeesElement {
     }
     // Tab selection is now handled by the dees-appui-tabs component
     // But we need to ensure the tabs component is ready
-    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    const tabsComponent = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
     if (tabsComponent) {
       await tabsComponent.updateComplete;
     }

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

@@ -46,7 +46,7 @@ export class DeesAppuiMainmenu extends DeesElement {
   accessor tabs: interfaces.IMenuItem[] = [];
 
   @property()
-  accessor selectedTab: interfaces.IMenuItem;
+  accessor selectedTab!: interfaces.IMenuItem;
 
   @property({ type: Boolean, reflect: true })
   accessor collapsed: boolean = false;
@@ -55,28 +55,27 @@ export class DeesAppuiMainmenu extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --menu-width-expanded: 200px;
         --menu-width-collapsed: 56px;
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
         position: relative;
         display: block;
         height: 100%;
       }
 
       .mainContainer {
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        color: var(--dees-color-text-secondary);
         z-index: ${zIndexLayers.fixed.appBar};
         display: flex;
         flex-direction: column;
         position: relative;
         width: var(--menu-width-expanded);
         height: 100%;
-        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        background: var(--dees-color-bg-secondary);
         user-select: none;
-        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-right: 1px solid var(--dees-color-border-subtle);
         font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         transition: width 0.25s ease;
       }
@@ -94,23 +93,23 @@ export class DeesAppuiMainmenu extends DeesElement {
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -128,14 +127,14 @@ export class DeesAppuiMainmenu extends DeesElement {
         gap: 10px;
         height: 48px;
         padding: 0 14px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         flex-shrink: 0;
         box-sizing: border-box;
       }
 
       .logoSection .logoIcon {
         font-size: 22px;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
         flex-shrink: 0;
       }
 
@@ -143,7 +142,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         flex: 1;
         font-size: 15px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -178,12 +177,12 @@ export class DeesAppuiMainmenu extends DeesElement {
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -200,7 +199,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         padding: 8px 12px 6px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#737373', '#737373')};
+        color: var(--dees-color-text-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -238,21 +237,21 @@ export class DeesAppuiMainmenu extends DeesElement {
         border-radius: 6px;
         cursor: pointer;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        color: var(--dees-color-text-secondary);
       }
 
       .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        background: var(--dees-color-hover);
         color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
       }
 
       .tab:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        background: var(--dees-color-active);
       }
 
       .tab.selectedTab {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
       }
 
       .tab.selectedTab::before {
@@ -263,7 +262,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         transform: translateY(-50%);
         width: 3px;
         height: 16px;
-        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-text-primary);
         border-radius: 0 2px 2px 0;
       }
 
@@ -353,23 +352,23 @@ export class DeesAppuiMainmenu extends DeesElement {
       }
 
       .badge.default {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+        background: var(--dees-color-badge-default-bg);
+        color: var(--dees-color-badge-default-fg);
       }
 
       .badge.success {
-        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
-        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+        background: var(--dees-color-badge-success-bg);
+        color: var(--dees-color-badge-success-fg);
       }
 
       .badge.warning {
-        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
-        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        background: var(--dees-color-badge-warning-bg);
+        color: var(--dees-color-badge-warning-fg);
       }
 
       .badge.error {
-        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
-        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        background: var(--dees-color-badge-error-bg);
+        color: var(--dees-color-badge-error-fg);
       }
 
       :host([collapsed]) .badge {
@@ -380,7 +379,7 @@ export class DeesAppuiMainmenu extends DeesElement {
       .bottomSection {
         flex-shrink: 0;
         padding: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-top: 1px solid var(--dees-color-border-subtle);
         display: flex;
         flex-direction: column;
         gap: 2px;

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

@@ -73,30 +73,29 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --sidebar-width-expanded: 240px;
         --sidebar-width-collapsed: 56px;
-        --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
-        --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
-        --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
-        --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
-        --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --sidebar-bg: var(--dees-color-bg-secondary);
+        --sidebar-fg: var(--dees-color-text-secondary);
+        --sidebar-fg-muted: var(--dees-color-text-muted);
+        --sidebar-fg-active: var(--dees-color-text-primary);
+        --sidebar-border: var(--dees-color-border-subtle);
+        --sidebar-hover: var(--dees-color-hover);
+        --sidebar-active: var(--dees-color-active);
+        --sidebar-accent: var(--dees-color-text-primary);
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
 
         /* Badge colors */
-        --badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        --badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
-        --badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
-        --badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
-        --badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
-        --badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
-        --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
-        --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        --badge-default-bg: var(--dees-color-badge-default-bg);
+        --badge-default-fg: var(--dees-color-badge-default-fg);
+        --badge-success-bg: var(--dees-color-badge-success-bg);
+        --badge-success-fg: var(--dees-color-badge-success-fg);
+        --badge-warning-bg: var(--dees-color-badge-warning-bg);
+        --badge-warning-fg: var(--dees-color-badge-warning-fg);
+        --badge-error-bg: var(--dees-color-badge-error-bg);
+        --badge-error-fg: var(--dees-color-badge-error-fg);
 
         /* Action colors */
         --action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
@@ -136,23 +135,23 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -215,12 +214,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -261,7 +260,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         gap: 8px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -270,13 +269,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {
 
       .groupHeader .groupTitle dees-icon {
         font-size: 16px;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader .chevron {
         font-size: 12px;
         transition: transform 0.2s ease;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader.collapsed .chevron {

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

@@ -2,7 +2,7 @@ import { html, cssManager, css, DeesElement, customElement, state } from '@desig
 import * as interfaces from '../../interfaces/index.js';
 import type { DeesAppuiTabs } from './dees-appui-tabs.js';
 
-// Interactive demo component for closeable tabs
+// Interactive demo component for closeable tabs with action buttons
 @customElement('demo-closeable-tabs')
 class DemoCloseableTabs extends DeesElement {
   @state()
@@ -18,24 +18,6 @@ class DemoCloseableTabs extends DeesElement {
       :host {
         display: block;
       }
-      .controls {
-        display: flex;
-        gap: 8px;
-        margin-top: 16px;
-      }
-      button {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.3)')};
-        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
-        padding: 8px 16px;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s ease;
-      }
-      button:hover {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
-      }
       .info {
         margin-top: 16px;
         padding: 12px 16px;
@@ -66,17 +48,27 @@ class DemoCloseableTabs extends DeesElement {
     this.tabs = this.tabs.filter(t => t.key !== tabKey);
   }
 
+  private clearAll() {
+    const tabsEl = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    tabsEl?.clear();
+    this.tabs = [];
+    this.tabCounter = 0;
+  }
+
   render() {
+    const rightActions: interfaces.ITabAction[] = [
+      { id: 'add', iconName: 'lucide:plus', action: () => this.addTab(), tooltip: 'New Tab' },
+      { id: 'clear', iconName: 'lucide:trash2', action: () => this.clearAll(), tooltip: 'Clear All Tabs' },
+    ];
+
     return html`
       <dees-appui-tabs
         .tabs=${this.tabs}
+        .actionsRight=${rightActions}
         @tab-close=${(e: CustomEvent) => this.removeTab(e.detail.tab.key)}
       ></dees-appui-tabs>
-      <div class="controls">
-        <button @click=${() => this.addTab()}>+ Add New Tab</button>
-      </div>
       <div class="info">
-        Click the X button on tabs to close them. The "Main" tab is not closeable.
+        Click the X button on tabs to close them. Use the + button to add tabs and the trash button to clear all.
         <br>Current tabs: ${this.tabs.length}
       </div>
     `;
@@ -232,6 +224,16 @@ export const demoFunc = () => {
     { key: 'Archived', action: () => console.log('Archived clicked') },
   ];
 
+  const actionsLeft: interfaces.ITabAction[] = [
+    { id: 'back', iconName: 'lucide:arrowLeft', action: () => console.log('Back'), tooltip: 'Go Back' },
+  ];
+
+  const actionsRight: interfaces.ITabAction[] = [
+    { id: 'add', iconName: 'lucide:plus', action: () => console.log('Add tab'), tooltip: 'New Tab' },
+    { id: 'search', iconName: 'lucide:search', action: () => console.log('Search'), tooltip: 'Search Tabs' },
+    { id: 'disabled', iconName: 'lucide:lock', action: () => {}, tooltip: 'Disabled Action', disabled: true },
+  ];
+
   const demoContent = (text: string) => html`
     <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
       ${text}
@@ -279,7 +281,17 @@ export const demoFunc = () => {
       </div>
 
       <div class="section">
-        <div class="section-title">Closeable Tabs (Browser-style)</div>
+        <div class="section-title">Tabs with Action Buttons</div>
+        <dees-appui-tabs
+          .tabs=${horizontalTabs}
+          .actionsLeft=${actionsLeft}
+          .actionsRight=${actionsRight}
+        ></dees-appui-tabs>
+        ${demoContent('Action buttons can be placed on either side of the tab bar. They remain fixed while tabs scroll. The lock icon shows a disabled action.')}
+      </div>
+
+      <div class="section">
+        <div class="section-title">Closeable Tabs with Actions</div>
         <demo-closeable-tabs></demo-closeable-tabs>
       </div>
 

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

@@ -41,6 +41,12 @@ export class DeesAppuiTabs extends DeesElement {
   @property({ type: Number })
   accessor autoHideThreshold: number = 0;
 
+  @property({ type: Array })
+  accessor actionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor actionsRight: interfaces.ITabAction[] = [];
+
   // Scroll state for fade indicators
   @state()
   private accessor canScrollLeft: boolean = false;
@@ -54,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;
@@ -70,9 +75,11 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tabs-wrapper.horizontal-wrapper {
         height: 48px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-bottom: 1px solid var(--dees-color-border-default);
         box-sizing: border-box;
         overflow: hidden;
+        display: flex;
+        align-items: stretch;
       }
 
       /* Scroll fade indicators */
@@ -105,6 +112,72 @@ export class DeesAppuiTabs extends DeesElement {
         opacity: 1;
       }
 
+      .scroll-area {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        display: flex;
+      }
+
+      /* Tab action buttons */
+      .tab-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        flex-shrink: 0;
+        padding: 0 4px;
+      }
+
+      .tab-actions.left {
+        padding-left: 12px;
+        padding-right: 8px;
+        border-right: 1px solid var(--dees-color-border-default);
+      }
+
+      .tab-actions.right {
+        padding-right: 12px;
+        padding-left: 8px;
+        border-left: 1px solid var(--dees-color-border-default);
+      }
+
+      .tab-action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        background: transparent;
+        color: var(--dees-color-text-muted);
+        flex-shrink: 0;
+      }
+
+      .tab-action-button:hover {
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tab-action-button:active {
+        background: var(--dees-color-pressed);
+      }
+
+      .tab-action-button.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .tab-action-button.disabled:hover {
+        background: transparent;
+        color: var(--dees-color-text-muted);
+      }
+
+      .tab-action-button dees-icon {
+        font-size: 16px;
+      }
+
       .tabsContainer {
         position: relative;
         user-select: none;
@@ -121,12 +194,14 @@ export class DeesAppuiTabs extends DeesElement {
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
         height: 100%;
+        width: 100%;
         padding: 0 16px;
         gap: 4px;
       }
 
       /* Show scrollbar on hover */
-      .tabs-wrapper:hover .tabsContainer.horizontal {
+      .tabs-wrapper:hover .tabsContainer.horizontal,
+      .scroll-area:hover .tabsContainer.horizontal {
         scrollbar-color: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')} transparent;
       }
 
@@ -144,11 +219,13 @@ export class DeesAppuiTabs extends DeesElement {
         transition: background 0.2s ease;
       }
 
-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
         background: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')};
       }
 
-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
         background: ${cssManager.bdTheme('rgba(0,0,0,0.35)', 'rgba(255,255,255,0.35)')};
       }
 
@@ -159,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement {
         font-size: 14px;
         gap: 2px;
         position: relative;
-        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 8px;
       }
 
       .tab {
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
         cursor: pointer;
         transition: color 0.15s ease;
@@ -192,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement {
         transform: translateY(-50%);
         height: 20px;
         width: 1px;
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: var(--dees-color-border-default);
         opacity: 0.5;
       }
       
@@ -213,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .tab:hover {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
+        background: var(--dees-color-hover);
       }
       
       .horizontal .tab:hover::after,
@@ -230,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .horizontal .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab.selectedTab::after,
@@ -239,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .vertical .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
 
       .tab dees-icon {
@@ -259,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement {
       .tabs-wrapper .tabIndicator {
         height: 3px;
         bottom: 0;
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        background: var(--dees-color-accent-primary);
         border-radius: 3px 3px 0 0;
         z-index: 3;
       }
@@ -272,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement {
         left: 8px;
         right: 8px;
         border-radius: 6px;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        background: var(--dees-color-bg-primary);
         z-index: 1;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
       }
@@ -288,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement {
         margin-left: 8px;
         opacity: 0.4;
         transition: opacity 0.15s, background 0.15s;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
       }
 
       .tab:hover .tab-close {
@@ -297,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tab-close:hover {
         opacity: 1;
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
-        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+        background: var(--dees-color-pressed);
+        color: var(--dees-color-accent-error);
       }
 
       .tab.selectedTab .tab-close {
@@ -331,13 +408,20 @@ export class DeesAppuiTabs extends DeesElement {
     const containerClass = `tabsContainer ${this.tabStyle}`;
 
     if (isHorizontal) {
+      const hasLeftActions = this.actionsLeft && this.actionsLeft.length > 0;
+      const hasRightActions = this.actionsRight && this.actionsRight.length > 0;
+
       return html`
         <div class="${wrapperClass}">
-          <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
-          <div class="${containerClass}" @scroll=${this.handleScroll}>
-            ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+          ${hasLeftActions ? this.renderActions(this.actionsLeft, 'left') : ''}
+          <div class="scroll-area">
+            <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
+            <div class="${containerClass}" @scroll=${this.handleScroll}>
+              ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+            </div>
+            <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
           </div>
-          <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
+          ${hasRightActions ? this.renderActions(this.actionsRight, 'right') : ''}
           ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
         </div>
       `;
@@ -353,6 +437,22 @@ export class DeesAppuiTabs extends DeesElement {
     `;
   }
 
+  private renderActions(actions: interfaces.ITabAction[], position: 'left' | 'right'): TemplateResult {
+    return html`
+      <div class="tab-actions ${position}">
+        ${actions.map(action => html`
+          <div
+            class="tab-action-button ${action.disabled ? 'disabled' : ''}"
+            title="${action.tooltip || action.id}"
+            @click=${() => !action.disabled && action.action()}
+          >
+            <dees-icon .icon=${action.iconName}></dees-icon>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
   private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
     const isSelected = tab === this.selectedTab;
     const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
@@ -406,6 +506,14 @@ export class DeesAppuiTabs extends DeesElement {
     }));
   }
 
+  /**
+   * Clear all tabs and reset selection.
+   */
+  public clear(): void {
+    this.tabs = [];
+    this.selectedTab = null;
+  }
+
   private closeTab(e: Event, tab: interfaces.IMenuItem) {
     e.stopPropagation();  // Don't select tab when closing
 
@@ -423,14 +531,9 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   firstUpdated() {
-    if (this.tabs && this.tabs.length > 0) {
-      this.selectTab(this.tabs[0]);
-    }
-
-    // Set up ResizeObserver for scroll state updates
+    // Tab selection is handled by updated() lifecycle
     this.setupResizeObserver();
 
-    // Initial scroll state check
     requestAnimationFrame(() => {
       this.updateScrollState();
     });
@@ -503,8 +606,24 @@ export class DeesAppuiTabs extends DeesElement {
   async updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('tabs') && this.tabs && this.tabs.length > 0 && !this.selectedTab) {
-      this.selectTab(this.tabs[0]);
+    if (changedProperties.has('tabs')) {
+      if (!this.tabs || this.tabs.length === 0) {
+        // Tabs are empty => reset selection
+        if (this.selectedTab !== null) {
+          this.selectedTab = null;
+          this.dispatchEvent(new CustomEvent('tab-select', {
+            detail: { tab: null },
+            bubbles: true,
+            composed: true,
+          }));
+        }
+      } else if (this.selectedTab && !this.tabs.includes(this.selectedTab)) {
+        // Selected tab was removed => select first available
+        this.selectTab(this.tabs[0]);
+      } else if (!this.selectedTab) {
+        // Tabs exist but nothing selected => select first
+        this.selectTab(this.tabs[0]);
+      }
     }
 
     if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {
@@ -543,21 +662,21 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   private shouldShowIndicator(): boolean {
-    return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
+    return !!this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
   }
 
   private getSelectedTabElement(): HTMLElement | null {
-    const selectedIndex = this.tabs.indexOf(this.selectedTab);
+    const selectedIndex = this.tabs.indexOf(this.selectedTab!);
     const isHorizontal = this.tabStyle === 'horizontal';
-    const selector = isHorizontal 
+    const selector = isHorizontal
       ? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
       : `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
-      
-    return this.shadowRoot.querySelector(selector);
+
+    return this.shadowRoot!.querySelector(selector);
   }
 
   private getIndicatorElement(): HTMLElement | null {
-    return this.shadowRoot.querySelector('.tabIndicator');
+    return this.shadowRoot!.querySelector('.tabIndicator');
   }
 
   private handleInitialTransition(indicator: HTMLElement): void {
@@ -575,7 +694,7 @@ export class DeesAppuiTabs extends DeesElement {
     const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
     if (!tabContent) return;
 
-    const wrapperRect = indicator.parentElement.getBoundingClientRect();
+    const wrapperRect = indicator.parentElement!.getBoundingClientRect();
     const contentRect = tabContent.getBoundingClientRect();
     
     const contentLeft = contentRect.left - wrapperRect.left;
@@ -587,7 +706,7 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
-    const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
+    const tabsContainer = this.shadowRoot!.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
     if (!tabsContainer) return;
     
     indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;

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

@@ -12,7 +12,7 @@ class DemoDashboardView extends DeesElement {
   @state()
   accessor activated: boolean = false;
 
-  private ctx: IViewActivationContext;
+  private ctx!: IViewActivationContext;
 
   private statsTiles: IStatsTile[] = [
     {
@@ -267,7 +267,7 @@ class DemoSettingsView extends DeesElement {
   @state()
   accessor hasChanges: boolean = false;
 
-  private appui: DeesAppui;
+  private appui!: DeesAppui;
 
   onActivate(context: IViewActivationContext) {
     this.appui = context.appui as any;

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

@@ -143,6 +143,12 @@ export class DeesAppui extends DeesElement {
   @property({ type: Object })
   accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;
 
+  @property({ type: Array })
+  accessor contentTabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor contentTabActionsRight: interfaces.ITabAction[] = [];
+
   // References to child components
   @state()
   accessor appbar: DeesAppuiBar | undefined = undefined;
@@ -178,12 +184,11 @@ export class DeesAppui extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         position: absolute;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+        background: var(--dees-color-bg-tertiary);
       }
       .maingrid {
         position: absolute;
@@ -213,11 +218,13 @@ export class DeesAppui extends DeesElement {
       .maingrid > dees-appui-mainmenu {
         position: relative;
         z-index: 3;
+        min-height: 0;
       }
 
       .maingrid > dees-appui-secondarymenu {
         position: relative;
         z-index: 2;
+        min-height: 0;
       }
 
       .maingrid > dees-appui-maincontent {
@@ -306,6 +313,8 @@ export class DeesAppui extends DeesElement {
           .showTabs=${this.maincontentTabsVisible}
           .tabsAutoHide=${this.contentTabsAutoHide}
           .tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
+          .tabActionsLeft=${this.contentTabActionsLeft}
+          .tabActionsRight=${this.contentTabActionsRight}
           @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
           @tab-close=${(e: CustomEvent) => this.handleContentTabClose(e)}
         >
@@ -699,6 +708,20 @@ export class DeesAppui extends DeesElement {
     return this.maincontentSelectedTab;
   }
 
+  /**
+   * Set content tab action buttons on the left side
+   */
+  public setContentTabActionsLeft(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsLeft = [...actions];
+  }
+
+  /**
+   * Set content tab action buttons on the right side
+   */
+  public setContentTabActionsRight(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsRight = [...actions];
+  }
+
   // ==========================================
   // PROGRAMMATIC API: ACTIVITY LOG
   // ==========================================
@@ -853,8 +876,13 @@ export class DeesAppui extends DeesElement {
     try {
       await this.loadView(view, params);
 
-      // Update URL hash
-      const route = view.route || viewId;
+      // Update URL hash (substitute params into route pattern)
+      let route = view.route || viewId;
+      if (params) {
+        for (const [key, val] of Object.entries(params)) {
+          route = route.replace(`:${key}`, val);
+        }
+      }
       const newHash = `#${route}`;
       if (window.location.hash !== newHash) {
         window.history.pushState({ viewId }, '', newHash);
@@ -1008,7 +1036,7 @@ export class DeesAppui extends DeesElement {
     if (!config.mainMenu?.sections) return [];
 
     return config.mainMenu.sections.map((section) => ({
-      name: section.name,
+      name: section.name || '',
       items: section.views
         .map((viewId) => {
           const view = this.viewRegistry.get(viewId);

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

@@ -173,7 +173,7 @@ export class ViewRegistry {
     }
 
     // Check for cached instance
-    let element = shouldCache ? this.instances.get(viewId) : undefined;
+    let element: HTMLElement | null | undefined = shouldCache ? this.instances.get(viewId) : undefined;
 
     if (element) {
       // Reuse cached instance - just show it

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

@@ -1,5 +1,5 @@
 import { html, css } from '@design.estate/dees-element';
-import '../00group-button/dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-layout/dees-panel/dees-panel.js';
 import '@design.estate/dees-wcctools/demotools';
 

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

@@ -301,15 +301,15 @@ export class DeesMobilenavigation extends DeesElement {
     `;
   }
 
-  private windowLayer: DeesWindowLayer;
+  private windowLayer!: DeesWindowLayer;
 
   /**
    * inits the show
    */
   public async show() {
     const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
-    
+    const main = this.shadowRoot!.querySelector('.main');
+
     // Create window layer first (it will get its own z-index)
     if (!this.windowLayer) {
       this.windowLayer = await DeesWindowLayer.createAndShow({
@@ -328,7 +328,7 @@ export class DeesMobilenavigation extends DeesElement {
     zIndexRegistry.register(this, this.mobileNavZIndex);
 
     await domtools.convenience.smartdelay.delayFor(10);
-    main.classList.add('show');
+    main!.classList.add('show');
   }
 
   /**
@@ -336,8 +336,8 @@ export class DeesMobilenavigation extends DeesElement {
    */
   public async hide() {
     const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
-    main.classList.remove('show');
+    const main = this.shadowRoot!.querySelector('.main');
+    main!.classList.remove('show');
     
     // Unregister from z-index registry
     zIndexRegistry.unregister(this);

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

@@ -288,8 +288,8 @@ export const demoFunc = () => html`
       }
       
       if (dataBtn && output) {
-        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
-          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+        dataBtn.addEventListener('clicked', (e: Event) => {
+          output.textContent = `Clicked: Secondary button with data: ${(e as CustomEvent).detail.data}`;
         });
       }
       
@@ -322,9 +322,9 @@ export const demoFunc = () => html`
       const output = elementArg.querySelector('#form-output');
       
       if (form && output) {
-        form.addEventListener('formData', (e: CustomEvent) => {
-          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
-            JSON.stringify(e.detail.data, null, 2);
+        form.addEventListener('formData', (e: Event) => {
+          output.innerHTML = '<strong>Form submitted with data:</strong><br>' +
+            JSON.stringify((e as CustomEvent).detail.data, null, 2);
         });
       }
       

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

@@ -31,10 +31,10 @@ export class DeesButton extends DeesElement {
       return true;
     }
   })
-  accessor text: string;
+  accessor text!: string;
 
   @property()
-  accessor eventDetailData: string;
+  accessor eventDetailData!: string;
 
   @property({
     type: Boolean,
@@ -69,7 +69,7 @@ export class DeesButton extends DeesElement {
   accessor insideForm: boolean = false;
 
   @property({ type: String, reflect: true })
-  accessor icon: string;
+  accessor icon!: string;
 
   @property({ type: String, reflect: true })
   accessor iconPosition: 'left' | 'right' = 'left';

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

@@ -44,8 +44,8 @@ export const demoFunc = () => {
       // Get the chart elements
       const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
       const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
-      let intervalId: number;
-      let connectionsIntervalId: number;
+      let intervalId: number | null;
+      let connectionsIntervalId: number | null;
       let currentDataset = 'system';
 
       // Y-axis formatters for different datasets
@@ -71,7 +71,7 @@ export const demoFunc = () => {
 
       // Generate initial data points for time window
       const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
-        const data = [];
+        const data: Array<{ x: string; y: number }> = [];
         const now = Date.now();
         const pointCount = Math.floor(TIME_WINDOW / interval);
         
@@ -240,10 +240,10 @@ export const demoFunc = () => {
       // Switch dataset
       const switchDataset = (name: string) => {
         currentDataset = name;
-        const dataset = datasets[name];
+        const dataset = (datasets as Record<string, any>)[name];
         chartElement.label = dataset.label;
         chartElement.series = dataset.series;
-        chartElement.yAxisFormatter = formatters[name];
+        chartElement.yAxisFormatter = (formatters as Record<string, any>)[name];
         
         // Set appropriate y-axis scaling
         if (name === 'system') {
@@ -310,30 +310,11 @@ export const demoFunc = () => {
         connectionsLastUpdate = 0;
       };
 
-      // Wire up button click handlers
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.addEventListener('click', () => switchDataset('system'));
-        } else if (text === 'Network Traffic') {
-          button.addEventListener('click', () => switchDataset('network'));
-        } else if (text === 'Sales Data') {
-          button.addEventListener('click', () => switchDataset('sales'));
-        } else if (text === 'Start Live') {
-          button.addEventListener('click', () => startRealtime());
-        } else if (text === 'Stop Live') {
-          button.addEventListener('click', () => stopRealtime());
-        } else if (text === 'Spike Values') {
-          button.addEventListener('click', () => randomizeData());
-        }
-      });
-      
       // Update button states based on current dataset
       const updateButtonStates = () => {
-        const buttons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
-          const text = button.textContent?.trim();
+        const allButtons = elementArg.querySelectorAll('dees-button');
+        allButtons.forEach((button: any) => {
+          const text = button.text?.trim();
           if (text === 'System Usage') {
             button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
           } else if (text === 'Network Traffic') {
@@ -343,41 +324,38 @@ export const demoFunc = () => {
           }
         });
       };
-      
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => { switchDataset('system'); updateButtonStates(); });
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => { switchDataset('network'); updateButtonStates(); });
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => { switchDataset('sales'); updateButtonStates(); });
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+
       // Configure main chart with rolling window
       chartElement.rollingWindow = TIME_WINDOW;
       chartElement.realtimeMode = false; // Will be enabled when starting live updates
       chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
       chartElement.yAxisMax = 100;
       chartElement.autoScrollInterval = 1000; // Auto-scroll every second
-      
+
       // Set initial time window
       setTimeout(() => {
         chartElement.updateTimeWindow();
       }, 100);
       
-      // Update button states when dataset changes
-      const originalSwitchDataset = switchDataset;
-      const switchDatasetWithButtonUpdate = (name: string) => {
-        originalSwitchDataset(name);
-        updateButtonStates();
-      };
-      
-      // Replace switchDataset with the one that updates buttons
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.removeEventListener('click', () => switchDataset('system'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
-        } else if (text === 'Network Traffic') {
-          button.removeEventListener('click', () => switchDataset('network'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
-        } else if (text === 'Sales Data') {
-          button.removeEventListener('click', () => switchDataset('sales'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
-        }
-      });
-      
       // Initialize connections chart with data
       if (connectionsChartElement) {
         const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);

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

@@ -1,60 +1,103 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const chartAreaStyles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
       :host {
+        display: block;
+        height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        font-weight: 400;
+        color: var(--dees-color-text-primary);
         font-size: 14px;
       }
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        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%)')};
-        border-radius: 8px;
-        overflow: hidden;
+      dees-tile {
+        height: 100%;
       }
-
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: left;
-        padding: 16px 24px;
-        z-index: 10;
+      .chartHeader {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 8px 0 16px;
+      }
+      .chartLabel {
+        flex: 1;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
+      }
+      .expandBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        color: var(--dees-color-text-muted);
+        transition: all 0.15s ease;
+        padding: 0;
+      }
+      .expandBtn:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
       .chartContainer {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
+        inset: 0 0 4px 0;
       }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
+      .statsBar {
+        height: 32px;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        width: 100%;
+        box-sizing: border-box;
       }
-      
-      .apexcharts-inner {
-        background: transparent !important;
+      .statsSeries {
+        display: flex;
+        align-items: center;
+        gap: 8px;
       }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
+      .statsSeries + .statsSeries {
+        padding-left: 24px;
+        border-left: 1px solid var(--dees-color-border-default);
+      }
+      .statsColor {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+      .statsName {
+        font-weight: 500;
+        font-size: 11px;
+        color: var(--dees-color-text-secondary);
+        margin-right: 4px;
+      }
+      .statsItem {
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+      }
+      .statsItem strong {
+        color: var(--dees-color-text-primary);
+      }
+      .lw-tooltip {
+        position: absolute;
+        z-index: 100;
+        pointer-events: none;
+        padding: 12px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 12px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        min-width: 140px;
       }
     `,
   ];
-

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

@@ -1,12 +1,31 @@
 import { html, type TemplateResult } from '@design.estate/dees-element';
 import type { DeesChartArea } from './component.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 export const renderChartArea = (component: DeesChartArea): TemplateResult => {
       return html`
-        <div class="mainbox">
-          <div class="chartTitle">${component.label}</div>
+        <dees-tile>
+          <div slot="header" class="chartHeader">
+            <span class="chartLabel">${component.label}</span>
+            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? 'Exit full page' : 'Full page'}">
+              <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
+            </button>
+          </div>
           <div class="chartContainer"></div>
-        </div>
+          ${component.seriesStats.length > 0 ? html`
+            <div slot="footer" class="statsBar">
+              ${component.seriesStats.map(s => html`
+                <div class="statsSeries">
+                  <span class="statsColor" style="background:${s.color}"></span>
+                  <span class="statsName">${s.name}</span>
+                  <span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
+                  <span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
+                  <span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
+                  <span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
+                </div>
+              `)}
+            </div>
+          ` : ''}
+        </dees-tile>
       `;
-  
 };

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

@@ -0,0 +1,158 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { barStyles } from './styles.js';
+import { renderChartBar } from './template.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
+
+export interface IBarSeriesItem {
+  name: string;
+  data: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-bar': DeesChartBar;
+  }
+}
+
+@customElement('dees-chart-bar')
+export class DeesChartBar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor categories: string[] = [];
+
+  @property({ type: Array })
+  accessor series: IBarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor horizontal: boolean = false;
+
+  @property({ type: Boolean })
+  accessor stacked: boolean = false;
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ attribute: false })
+  accessor valueFormatter: (value: number) => string = (val) => `${val}`;
+
+  public static styles = barStyles;
+
+  public render(): TemplateResult {
+    return renderChartBar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('categories') ||
+        changedProperties.has('series') ||
+        changedProperties.has('horizontal') ||
+        changedProperties.has('stacked') ||
+        changedProperties.has('showLegend'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const formatter = this.valueFormatter;
+
+    const categoryAxis: Record<string, any> = {
+      type: 'category',
+      data: this.categories,
+      axisLine: { lineStyle: { color: colors.borderStrong } },
+      axisLabel: { color: colors.textMuted },
+    };
+
+    const valueAxis: Record<string, any> = {
+      type: 'value',
+      axisLine: { show: false },
+      axisLabel: {
+        color: colors.textMuted,
+        formatter: (val: number) => formatter(val),
+      },
+      splitLine: { lineStyle: { color: colors.borderSubtle } },
+    };
+
+    const fillAlpha = this.goBright ? 0.15 : 0.25;
+    const borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+    const noBorderRadius = [0, 0, 0, 0];
+
+    const legendData: Array<{ name: string; itemStyle: { color: string } }> = [];
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      legendData.push({ name: s.name, itemStyle: { color } });
+      return {
+        name: s.name,
+        type: 'bar' as const,
+        data: s.data,
+        stack: this.stacked ? 'total' : undefined,
+        itemStyle: {
+          color: hexToRgba(color, fillAlpha),
+          borderColor: color,
+          borderWidth: 1,
+          borderRadius: this.stacked ? noBorderRadius : borderRadius,
+        },
+        barMaxWidth: 40,
+        barGap: '20%',
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color, fillAlpha + 0.15),
+            borderColor: color,
+            borderWidth: 1.5,
+          },
+        },
+      };
+    });
+
+    // For stacked bars, round the top corners of the last visible series
+    if (this.stacked && seriesData.length > 0) {
+      const last = seriesData[seriesData.length - 1];
+      last.itemStyle.borderRadius = borderRadius;
+    }
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' },
+        formatter: (params: any) => {
+          const items = Array.isArray(params) ? params : [params];
+          let result = `<strong>${items[0].axisValueLabel}</strong><br/>`;
+          for (const p of items) {
+            const solidColor = p.borderColor || p.color;
+            const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+            result += `${marker}${p.seriesName}: <strong>${formatter(p.value)}</strong><br/>`;
+          }
+          return result;
+        },
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10, data: legendData }
+        : { show: false },
+      grid: {
+        left: 16,
+        right: 16,
+        top: 16,
+        bottom: this.showLegend && this.series.length > 1 ? 40 : 16,
+        containLabel: true,
+      },
+      xAxis: this.horizontal ? valueAxis : categoryAxis,
+      yAxis: this.horizontal ? categoryAxis : valueAxis,
+      series: seriesData,
+    };
+  }
+}

ts_web/elements/00group-chart/dees-chart-bar/demo.ts

@@ -0,0 +1,120 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartBar } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const endpointCategories = ['/api/users', '/api/orders', '/api/products', '/api/auth', '/api/search'];
+  const endpointSeries = [
+    { name: 'GET', data: [1240, 890, 720, 2100, 560] },
+    { name: 'POST', data: [320, 450, 180, 890, 40] },
+    { name: 'PUT', data: [90, 210, 150, 30, 10] },
+  ];
+
+  const regionCategories = ['US-East', 'US-West', 'EU', 'Asia', 'Other'];
+  const regionSeries = [
+    { name: 'Requests', data: [4500, 3200, 2800, 1900, 600] },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const vertChart = elementArg.querySelector('#vert-chart') as DeesChartBar;
+      const horizChart = elementArg.querySelector('#horiz-chart') as DeesChartBar;
+      const stackChart = elementArg.querySelector('#stack-chart') as DeesChartBar;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            vertChart.series = endpointSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+            horizChart.series = regionSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+            stackChart.series = endpointSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-bar
+            id="vert-chart"
+            .label=${'Requests by Endpoint'}
+            .categories=${endpointCategories}
+            .series=${endpointSeries}
+            .valueFormatter=${(val: number) => `${val} req`}
+          ></dees-chart-bar>
+
+          <dees-chart-bar
+            id="horiz-chart"
+            .label=${'Traffic by Region'}
+            .categories=${regionCategories}
+            .series=${regionSeries}
+            .horizontal=${true}
+            .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k`}
+          ></dees-chart-bar>
+        </div>
+
+        <dees-chart-bar
+          id="stack-chart"
+          .label=${'Stacked: Requests by Endpoint'}
+          .categories=${endpointCategories}
+          .series=${endpointSeries}
+          .stacked=${true}
+          .valueFormatter=${(val: number) => `${val} req`}
+        ></dees-chart-bar>
+
+        <div class="info">
+          Bar chart with vertical, horizontal, and stacked modes •
+          Click 'Randomize' to update data with animation
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-bar/styles.ts

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const barStyles = [
+  ...echartsBaseStyles,
+  css``,
+];

ts_web/elements/00group-chart/dees-chart-bar/template.ts

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartBar } from './component.js';
+
+export const renderChartBar = (component: DeesChartBar): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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

@@ -0,0 +1,142 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { donutStyles } from './styles.js';
+import { renderChartDonut } from './template.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
+
+export interface IDonutDataItem {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-donut': DeesChartDonut;
+  }
+}
+
+@customElement('dees-chart-donut')
+export class DeesChartDonut extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor data: IDonutDataItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showLabels: boolean = true;
+
+  @property({ type: String })
+  accessor innerRadiusPercent: string = '55%';
+
+  @property({ attribute: false })
+  accessor valueFormatter: (value: number) => string = (val) => `${val}`;
+
+  public static styles = donutStyles;
+
+  public render(): TemplateResult {
+    return renderChartDonut(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('data') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('showLabels') ||
+        changedProperties.has('innerRadiusPercent'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const themeColors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const fillAlpha = this.goBright ? 0.15 : 0.2;
+
+    const legendData: Array<{ name: string; itemStyle: { color: string } }> = [];
+
+    const data = this.data.map((item, index) => {
+      const color = item.color || seriesColors[index % seriesColors.length];
+      legendData.push({ name: item.name, itemStyle: { color } });
+      return {
+        name: item.name,
+        value: item.value,
+        itemStyle: {
+          color: hexToRgba(color, fillAlpha),
+          borderColor: color,
+          borderWidth: 1,
+        },
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color, fillAlpha + 0.15),
+            borderColor: color,
+            borderWidth: 1.5,
+          },
+        },
+      };
+    });
+
+    const formatter = this.valueFormatter;
+
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          const solidColor = params.data?.itemStyle?.borderColor || params.color;
+          const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+          return `${marker}${params.name}: <strong>${formatter(params.value)}</strong> (${params.percent}%)`;
+        },
+      },
+      legend: this.showLegend
+        ? {
+            orient: 'vertical',
+            right: 16,
+            top: 'center',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 12,
+            data: legendData,
+            formatter: (name: string) => {
+              const item = this.data.find((d) => d.name === name);
+              return item ? `${name}  ${formatter(item.value)}` : name;
+            },
+          }
+        : { show: false },
+      series: [
+        {
+          type: 'pie',
+          radius: [this.innerRadiusPercent, '85%'],
+          center: this.showLegend ? ['35%', '50%'] : ['50%', '50%'],
+          avoidLabelOverlap: true,
+          padAngle: 2,
+          itemStyle: {
+            borderRadius: 4,
+          },
+          label: this.showLabels
+            ? {
+                show: true,
+                formatter: '{b}: {d}%',
+                fontSize: 11,
+                color: themeColors.textSecondary,
+                textBorderColor: 'transparent',
+              }
+            : { show: false },
+          data,
+        },
+      ],
+    };
+  }
+}

ts_web/elements/00group-chart/dees-chart-donut/demo.ts

@@ -0,0 +1,127 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartDonut } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const diskData = [
+    { name: 'Documents', value: 42 },
+    { name: 'Media', value: 28 },
+    { name: 'Applications', value: 15 },
+    { name: 'System', value: 10 },
+    { name: 'Other', value: 5 },
+  ];
+
+  const statusData = [
+    { name: 'Healthy', value: 156 },
+    { name: 'Warning', value: 23 },
+    { name: 'Critical', value: 8 },
+    { name: 'Unknown', value: 3 },
+  ];
+
+  const trafficData = [
+    { name: 'API', value: 45200 },
+    { name: 'Static Assets', value: 23100 },
+    { name: 'WebSocket', value: 12800 },
+    { name: 'GraphQL', value: 8900 },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const diskChart = elementArg.querySelector('#disk-chart') as DeesChartDonut;
+      const statusChart = elementArg.querySelector('#status-chart') as DeesChartDonut;
+      const trafficChart = elementArg.querySelector('#traffic-chart') as DeesChartDonut;
+
+      // Wire up buttons
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            diskChart.data = diskData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.5 + Math.random())),
+            }));
+            statusChart.data = statusData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.3 + Math.random() * 1.4)),
+            }));
+            trafficChart.data = trafficData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.5 + Math.random())),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-donut
+            id="disk-chart"
+            .label=${'Disk Usage (GB)'}
+            .data=${diskData}
+            .valueFormatter=${(val: number) => `${val} GB`}
+          ></dees-chart-donut>
+
+          <dees-chart-donut
+            id="status-chart"
+            .label=${'Service Status'}
+            .data=${statusData}
+            .valueFormatter=${(val: number) => `${val} services`}
+            .innerRadiusPercent=${'0%'}
+          ></dees-chart-donut>
+        </div>
+
+        <dees-chart-donut
+          id="traffic-chart"
+          .label=${'Traffic Distribution'}
+          .data=${trafficData}
+          .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k req`}
+        ></dees-chart-donut>
+
+        <div class="info">
+          Donut chart with configurable inner radius (set to 0% for full pie) •
+          Click 'Randomize' to update data with animation
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-donut/styles.ts

@@ -0,0 +1,14 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const donutStyles = [
+  ...echartsBaseStyles,
+  css`
+    :host {
+      height: 360px;
+    }
+    .chartContainer {
+      inset: 12px 0;
+    }
+  `,
+];

ts_web/elements/00group-chart/dees-chart-donut/template.ts

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartDonut } from './component.js';
+
+export const renderChartDonut = (component: DeesChartDonut): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-echarts-base.ts

@@ -0,0 +1,112 @@
+import {
+  DeesElement,
+  property,
+  html,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesServiceLibLoader, type IEchartsBundle, type IEchartsInstance } from '../../services/index.js';
+import { getEchartsThemeOptions } from './dees-chart-echarts-theme.js';
+import '../00group-layout/dees-tile/dees-tile.js';
+
+/**
+ * Abstract base class for ECharts-based chart components.
+ * Handles library loading, chart lifecycle, resize observation, and theme switching.
+ * Subclasses implement `buildOption()` to define their chart configuration.
+ */
+export abstract class DeesChartEchartsBase extends DeesElement {
+  @property()
+  accessor label: string = 'Untitled Chart';
+
+  protected chartInstance: IEchartsInstance | null = null;
+  protected echartsBundle: IEchartsBundle | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+    this.registerGarbageFunction(async () => {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      if (this.chartInstance) {
+        try {
+          this.chartInstance.dispose();
+          this.chartInstance = null;
+        } catch (e) {
+          console.error('Error disposing ECharts instance:', e);
+        }
+      }
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <dees-tile>
+        <div slot="header" class="chartHeader">
+          <span class="chartLabel">${this.label}</span>
+        </div>
+        <div class="chartContainer"></div>
+      </dees-tile>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+    this.echartsBundle = await DeesServiceLibLoader.getInstance().loadEcharts();
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    const chartContainer = this.shadowRoot!.querySelector('.chartContainer') as HTMLDivElement;
+    if (!chartContainer) return;
+
+    try {
+      this.chartInstance = this.echartsBundle.init(chartContainer, null, { renderer: 'svg' });
+      this.updateChart();
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.chartInstance?.resize();
+      });
+      this.resizeObserver.observe(chartContainer);
+    } catch (error) {
+      console.error('Failed to initialize ECharts:', error);
+    }
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.chartInstance) {
+      this.applyTheme();
+    }
+  }
+
+  protected abstract buildOption(): Record<string, any>;
+
+  protected updateChart(): void {
+    if (!this.chartInstance) return;
+    const themeOptions = getEchartsThemeOptions(this.goBright);
+    const chartOption = this.buildOption();
+    // Deep-merge theme defaults with chart-specific options for nested objects
+    const merged = {
+      ...themeOptions,
+      ...chartOption,
+      textStyle: { ...themeOptions.textStyle, ...(chartOption.textStyle || {}) },
+      tooltip: { ...themeOptions.tooltip, ...(chartOption.tooltip || {}) },
+      legend: {
+        ...themeOptions.legend,
+        ...(chartOption.legend || {}),
+        textStyle: { ...(themeOptions.legend?.textStyle || {}), ...(chartOption.legend?.textStyle || {}) },
+      },
+    };
+    this.chartInstance.setOption(merged, true);
+  }
+
+  protected applyTheme(): void {
+    this.updateChart();
+  }
+
+  public async forceResize(): Promise<void> {
+    this.chartInstance?.resize();
+  }
+}

ts_web/elements/00group-chart/dees-chart-echarts-styles.ts

@@ -0,0 +1,36 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+
+export const echartsBaseStyles = [
+  themeDefaultStyles,
+  cssManager.defaultStyles,
+  css`
+    :host {
+      display: block;
+      height: 400px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      color: var(--dees-color-text-primary);
+      font-size: 14px;
+    }
+    dees-tile {
+      height: 100%;
+    }
+    .chartHeader {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 8px 0 16px;
+    }
+    .chartLabel {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.01em;
+      color: var(--dees-color-text-secondary);
+    }
+    .chartContainer {
+      position: absolute;
+      inset: 0;
+    }
+  `,
+];

ts_web/elements/00group-chart/dees-chart-echarts-theme.ts

@@ -0,0 +1,91 @@
+/**
+ * Shared theme utilities for ECharts-based chart components.
+ * Uses the centralized themeDefaults tokens so chart colors stay in sync
+ * with the rest of the dees-catalog design system.
+ *
+ * ECharts renders on <svg> and cannot read CSS custom properties,
+ * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ *
+ * IMPORTANT: All colors passed to ECharts for data series must be hex or rgb/rgba.
+ * ECharts cannot interpolate HSL strings during hover/emphasis animations,
+ * causing them to flash black.
+ */
+
+import { themeDefaults } from '../00theme.js';
+
+const light = themeDefaults.colors.light;
+const dark = themeDefaults.colors.dark;
+
+/**
+ * Series color palette for ECharts charts.
+ * Aligned with the Tailwind/shadcn-inspired palette used throughout the codebase.
+ * All values are hex — ECharts requires this for animation interpolation.
+ */
+const SERIES_COLORS = {
+  dark: [
+    '#60a5fa',  // blue-400   — softer in dark mode
+    '#2dd4bf',  // teal-400
+    '#a78bfa',  // violet-400
+    '#fbbf24',  // amber-400
+    '#34d399',  // emerald-400
+    '#fb7185',  // rose-400
+  ],
+  light: [
+    '#3b82f6',  // blue-500
+    '#14b8a6',  // teal-500
+    '#8b5cf6',  // violet-500
+    '#f59e0b',  // amber-500
+    '#10b981',  // emerald-500
+    '#f43f5e',  // rose-500
+  ],
+};
+
+export function getEchartsSeriesColors(goBright: boolean): string[] {
+  return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
+}
+
+/**
+ * Convert a hex color to an rgba string with the given alpha.
+ */
+export function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
+  const colors = goBright ? light : dark;
+  return {
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: colors.textSecondary,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      fontSize: 12,
+    },
+    // No global `color` array — each component sets per-item/per-series
+    // colors explicitly to avoid conflicts during emphasis animations.
+    tooltip: {
+      backgroundColor: colors.bgPrimary,
+      borderColor: colors.borderDefault,
+      textStyle: {
+        color: colors.textPrimary,
+        fontSize: 12,
+      },
+      confine: true,
+    },
+    legend: {
+      textStyle: {
+        color: colors.textSecondary,
+        fontSize: 12,
+      },
+    },
+  };
+}
+
+/**
+ * Helper to get the resolved theme colors object for use in buildOption().
+ */
+export function getThemeColors(goBright: boolean) {
+  return goBright ? light : dark;
+}

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

@@ -0,0 +1,161 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { gaugeStyles } from './styles.js';
+import { renderChartGauge } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IGaugeThreshold {
+  value: number;
+  color: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-gauge': DeesChartGauge;
+  }
+}
+
+@customElement('dees-chart-gauge')
+export class DeesChartGauge extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Number })
+  accessor value: number = 0;
+
+  @property({ type: Number })
+  accessor min: number = 0;
+
+  @property({ type: Number })
+  accessor max: number = 100;
+
+  @property({ type: String })
+  accessor unit: string = '%';
+
+  @property({ type: Array })
+  accessor thresholds: IGaugeThreshold[] = [];
+
+  @property({ type: Boolean })
+  accessor showTicks: boolean = true;
+
+  public static styles = gaugeStyles;
+
+  public render(): TemplateResult {
+    return renderChartGauge(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('value') ||
+        changedProperties.has('min') ||
+        changedProperties.has('max') ||
+        changedProperties.has('unit') ||
+        changedProperties.has('thresholds') ||
+        changedProperties.has('showTicks'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const primaryColor = seriesColors[0];
+
+    // Build axis line color stops from thresholds
+    let axisLineColors: Array<[number, string]>;
+    if (this.thresholds.length > 0) {
+      const sorted = [...this.thresholds].sort((a, b) => a.value - b.value);
+      axisLineColors = sorted.map((t) => [
+        (t.value - this.min) / (this.max - this.min),
+        t.color,
+      ]);
+      // Ensure we end at 1
+      if (axisLineColors[axisLineColors.length - 1][0] < 1) {
+        axisLineColors.push([1, sorted[sorted.length - 1].color]);
+      }
+    } else {
+      axisLineColors = [[1, primaryColor]];
+    }
+
+    return {
+      series: [
+        {
+          type: 'gauge',
+          min: this.min,
+          max: this.max,
+          startAngle: 220,
+          endAngle: -40,
+          progress: {
+            show: true,
+            width: 14,
+            roundCap: true,
+          },
+          pointer: {
+            show: true,
+            length: '60%',
+            width: 5,
+            itemStyle: {
+              color: 'auto',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              width: 14,
+              color: axisLineColors,
+              opacity: 0.3,
+            },
+          },
+          axisTick: {
+            show: this.showTicks,
+            distance: -20,
+            length: 6,
+            lineStyle: {
+              color: colors.borderStrong,
+              width: 1,
+            },
+          },
+          splitLine: {
+            show: this.showTicks,
+            distance: -24,
+            length: 10,
+            lineStyle: {
+              color: colors.textMuted,
+              width: 2,
+            },
+          },
+          axisLabel: {
+            show: this.showTicks,
+            distance: 30,
+            color: colors.textMuted,
+            fontSize: 11,
+          },
+          detail: {
+            valueAnimation: true,
+            fontSize: 28,
+            fontWeight: 600,
+            offsetCenter: [0, '65%'],
+            color: colors.textPrimary,
+            formatter: `{value}${this.unit}`,
+          },
+          title: {
+            show: false,
+          },
+          data: [
+            {
+              value: this.value,
+            },
+          ],
+        },
+      ],
+    };
+  }
+}

ts_web/elements/00group-chart/dees-chart-gauge/demo.ts

@@ -0,0 +1,125 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartGauge } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const defaultThresholds = [
+    { value: 60, color: 'hsl(142 76% 36%)' },
+    { value: 80, color: 'hsl(38 92% 50%)' },
+    { value: 100, color: 'hsl(0 72% 50%)' },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const cpuGauge = elementArg.querySelector('#cpu-gauge') as DeesChartGauge;
+      const memGauge = elementArg.querySelector('#mem-gauge') as DeesChartGauge;
+      const slaGauge = elementArg.querySelector('#sla-gauge') as DeesChartGauge;
+
+      let animInterval: number | null = null;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Animate') {
+          button.addEventListener('click', () => {
+            if (animInterval) return;
+            animInterval = window.setInterval(() => {
+              cpuGauge.value = Math.round(30 + Math.random() * 60);
+              memGauge.value = Math.round(40 + Math.random() * 50);
+              slaGauge.value = Math.round((95 + Math.random() * 5) * 100) / 100;
+            }, 2000);
+          });
+        } else if (text === 'Stop') {
+          button.addEventListener('click', () => {
+            if (animInterval) {
+              window.clearInterval(animInterval);
+              animInterval = null;
+            }
+          });
+        } else if (text === 'Spike') {
+          button.addEventListener('click', () => {
+            cpuGauge.value = 95;
+            memGauge.value = 88;
+            slaGauge.value = 96.5;
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .gaugeRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Animate</dees-button>
+            <dees-button>Stop</dees-button>
+            <dees-button>Spike</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="gaugeRow">
+          <dees-chart-gauge
+            id="cpu-gauge"
+            .label=${'CPU Usage'}
+            .value=${42}
+            .unit=${'%'}
+            .thresholds=${defaultThresholds}
+          ></dees-chart-gauge>
+
+          <dees-chart-gauge
+            id="mem-gauge"
+            .label=${'Memory Usage'}
+            .value=${67}
+            .unit=${'%'}
+            .thresholds=${defaultThresholds}
+          ></dees-chart-gauge>
+
+          <dees-chart-gauge
+            id="sla-gauge"
+            .label=${'SLA Uptime'}
+            .value=${99.8}
+            .min=${95}
+            .max=${100}
+            .unit=${'%'}
+            .showTicks=${true}
+          ></dees-chart-gauge>
+        </div>
+
+        <div class="info">
+          Gauge chart with animated value transitions and threshold coloring •
+          Click 'Animate' for live updates, 'Spike' to simulate high load
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-gauge/styles.ts

@@ -0,0 +1,11 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const gaugeStyles = [
+  ...echartsBaseStyles,
+  css`
+    :host {
+      height: 320px;
+    }
+  `,
+];

ts_web/elements/00group-chart/dees-chart-gauge/template.ts

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartGauge } from './component.js';
+
+export const renderChartGauge = (component: DeesChartGauge): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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

@@ -8,8 +8,8 @@ export const demoFunc = () => {
       // Get the log elements
       const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
       const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
-      let structuredIntervalId: number;
-      let rawIntervalId: number;
+      let structuredIntervalId: number | null;
+      let rawIntervalId: number | null;
 
       const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
 
@@ -174,7 +174,7 @@ export const demoFunc = () => {
       // Wire up button click handlers
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
         switch (text) {
           case 'Add Structured Log':
             button.addEventListener('click', () => generateRandomLog());

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

@@ -13,6 +13,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chart-log.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 // Type imports (no runtime overhead)
 import type { Terminal } from 'xterm';
@@ -103,37 +104,27 @@ export class DeesChartLog extends DeesElement {
     css`
       :host {
         display: block;
+        height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
 
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        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%)')};
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+      dees-tile {
+        height: 100%;
       }
 
       .header {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
         padding: 8px 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         display: flex;
         align-items: center;
         gap: 12px;
-        flex-shrink: 0;
         flex-wrap: wrap;
       }
 
       .title {
         font-weight: 500;
         font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
       }
 
@@ -150,10 +141,10 @@ export class DeesChartLog extends DeesElement {
         flex: 1;
         padding: 4px 8px;
         font-size: 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         outline: none;
       }
 
@@ -162,7 +153,7 @@ export class DeesChartLog extends DeesElement {
       }
 
       .search-box input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .search-nav {
@@ -173,35 +164,35 @@ export class DeesChartLog extends DeesElement {
       .search-nav button {
         padding: 4px 6px;
         font-size: 11px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 3px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         line-height: 1;
       }
 
       .search-nav button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle {
         padding: 4px 8px;
         font-size: 11px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         transition: all 0.15s;
         white-space: nowrap;
       }
 
       .filter-toggle:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle.active {
@@ -217,11 +208,11 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         padding: 4px 10px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
@@ -229,9 +220,9 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .control-button.active {
@@ -241,10 +232,10 @@ export class DeesChartLog extends DeesElement {
       }
 
       .terminal-container {
-        flex: 1;
+        position: absolute;
+        inset: 0;
         overflow: hidden;
         padding: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
       }
 
       .terminal-container .xterm {
@@ -256,20 +247,21 @@ export class DeesChartLog extends DeesElement {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         font-style: italic;
         font-size: 13px;
       }
 
       .metrics-bar {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        padding: 6px 12px;
+        height: 32px;
+        padding: 0 12px;
         display: flex;
+        align-items: center;
         gap: 16px;
         font-size: 11px;
         font-weight: 500;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .metric {
@@ -307,7 +299,7 @@ export class DeesChartLog extends DeesElement {
 
       .metric.rate {
         margin-left: auto;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .metric.rate::before {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="mainbox">
-        <div class="header">
+      <dees-tile .heading=${this.label}>
+        <div slot="header" class="header">
           <div class="title">${this.label}</div>
           <div class="search-box">
             <input
@@ -367,7 +359,7 @@ export class DeesChartLog extends DeesElement {
 
         ${this.showMetrics
           ? html`
-              <div class="metrics-bar">
+              <div slot="footer" class="metrics-bar">
                 <span class="metric error">errors: ${this.metrics.error}</span>
                 <span class="metric warn">warns: ${this.metrics.warn}</span>
                 <span class="metric info">info: ${this.metrics.info}</span>
@@ -377,7 +369,7 @@ export class DeesChartLog extends DeesElement {
               </div>
             `
           : ''}
-      </div>
+      </dees-tile>
     `;
   }
 
@@ -385,11 +377,23 @@ export class DeesChartLog extends DeesElement {
     this.domtoolsInstance = await this.domtoolsPromise;
     await this.initializeTerminal();
 
-    // Process any initial log entries
-    if (this.logEntries.length > 0) {
+    // initializeTerminal() already replayed logBuffer (from addLog/updateLog).
+    // Now handle logEntries set via property binding before terminal was ready.
+    if (this.logEntries.length > 0 && this.logBuffer.length === 0) {
+      this.logBuffer = [...this.logEntries];
       for (const entry of this.logEntries) {
+        this.updateMetrics(entry.level);
         this.writeLogEntry(entry);
       }
+    } else if (this.logEntries.length > 0 && this.logBuffer.length > 0) {
+      const bufferSet = new Set(this.logBuffer.map(e => `${e.timestamp}|${e.message}`));
+      for (const entry of this.logEntries) {
+        if (!bufferSet.has(`${entry.timestamp}|${entry.message}`)) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+          this.writeLogEntry(entry);
+        }
+      }
     }
   }
 
@@ -445,10 +449,65 @@ export class DeesChartLog extends DeesElement {
     this.rateInterval = setInterval(() => this.calculateRate(), 1000);
 
     this.terminalReady = true;
+
+    // Replay any entries that arrived via updateLog()/addLog() before terminal was ready
+    for (const entry of this.logBuffer) {
+      this.writeLogEntry(entry);
+    }
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.terminal) {
+      this.terminal.options.theme = this.getTerminalTheme();
+    }
+    if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
+      const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
+      const newEntries = this.logEntries;
+
+      // Same content? Skip entirely.
+      if (
+        oldEntries.length === newEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[newEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[newEntries.length - 1].message
+      ) {
+        return;
+      }
+
+      // Append-only? Write only the new tail entries incrementally.
+      if (
+        newEntries.length > oldEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[oldEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[oldEntries.length - 1].message
+      ) {
+        const tailEntries = newEntries.slice(oldEntries.length);
+        for (const entry of tailEntries) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+
+          // Enforce maxEntries
+          if (this.logBuffer.length > this.maxEntries) {
+            this.logBuffer.shift();
+          }
+
+          // Respect filter mode
+          if (!this.filterMode || !this.searchQuery || this.entryMatchesFilter(entry)) {
+            this.writeLogEntry(entry);
+          }
+        }
+        return;
+      }
+
+      // Different content — full re-render
+      this.logBuffer = [...newEntries];
+      this.reRenderFilteredLogs();
+    }
   }
 
   private getTerminalTheme() {
-    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    const isDark = !this.goBright;
     return isDark
       ? {
           background: '#0a0a0a',

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

@@ -0,0 +1,132 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { radarStyles } from './styles.js';
+import { renderChartRadar } from './template.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
+
+export interface IRadarIndicator {
+  name: string;
+  max: number;
+}
+
+export interface IRadarSeriesItem {
+  name: string;
+  values: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-radar': DeesChartRadar;
+  }
+}
+
+@customElement('dees-chart-radar')
+export class DeesChartRadar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor indicators: IRadarIndicator[] = [];
+
+  @property({ type: Array })
+  accessor series: IRadarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor fillArea: boolean = true;
+
+  public static styles = radarStyles;
+
+  public render(): TemplateResult {
+    return renderChartRadar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('indicators') ||
+        changedProperties.has('series') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('fillArea'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+
+    const fillAlpha = this.goBright ? 0.1 : 0.15;
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      return {
+        name: s.name,
+        value: s.values,
+        itemStyle: { color, borderColor: color, borderWidth: 1 },
+        lineStyle: { color, width: 1.5 },
+        areaStyle: this.fillArea ? { color: hexToRgba(color, fillAlpha) } : undefined,
+        symbol: 'circle',
+        symbolSize: 5,
+      };
+    });
+
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        : { show: false },
+      radar: {
+        indicator: this.indicators.map((ind) => ({
+          name: ind.name,
+          max: ind.max,
+        })),
+        shape: 'polygon',
+        splitNumber: 4,
+        axisName: {
+          color: colors.textSecondary,
+          fontSize: 11,
+        },
+        splitArea: {
+          areaStyle: {
+            color: [colors.bgTertiary, colors.bgSecondary],
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+      },
+      series: [
+        {
+          type: 'radar',
+          data: seriesData,
+          emphasis: {
+            lineStyle: {
+              width: 3,
+            },
+          },
+        },
+      ],
+    };
+  }
+}

ts_web/elements/00group-chart/dees-chart-radar/demo.ts

@@ -0,0 +1,119 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const indicators = [
+    { name: 'Latency', max: 100 },
+    { name: 'Throughput', max: 100 },
+    { name: 'Availability', max: 100 },
+    { name: 'Error Rate', max: 100 },
+    { name: 'Saturation', max: 100 },
+    { name: 'Security', max: 100 },
+  ];
+
+  const series = [
+    { name: 'Service A', values: [85, 90, 99, 12, 45, 78] },
+    { name: 'Service B', values: [70, 65, 95, 28, 60, 90] },
+  ];
+
+  const singleIndicators = [
+    { name: 'Speed', max: 10 },
+    { name: 'Reliability', max: 10 },
+    { name: 'Comfort', max: 10 },
+    { name: 'Safety', max: 10 },
+    { name: 'Cost', max: 10 },
+  ];
+
+  const singleSeries = [
+    { name: 'Rating', values: [8.5, 9.2, 7.0, 9.5, 6.0] },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const compChart = elementArg.querySelector('#comparison-chart') as DeesChartRadar;
+      const singleChart = elementArg.querySelector('#single-chart') as DeesChartRadar;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            compChart.series = series.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round(20 + Math.random() * 80)),
+            }));
+            singleChart.series = singleSeries.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round((2 + Math.random() * 8) * 10) / 10),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-radar
+            id="comparison-chart"
+            .label=${'Service Health Comparison'}
+            .indicators=${indicators}
+            .series=${series}
+          ></dees-chart-radar>
+
+          <dees-chart-radar
+            id="single-chart"
+            .label=${'Product Rating'}
+            .indicators=${singleIndicators}
+            .series=${singleSeries}
+            .fillArea=${true}
+          ></dees-chart-radar>
+        </div>
+
+        <div class="info">
+          Radar chart for multi-dimensional comparison •
+          Supports multiple overlay series and configurable fill •
+          Click 'Randomize' to update data
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-radar/styles.ts

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const radarStyles = [
+  ...echartsBaseStyles,
+  css``,
+];

ts_web/elements/00group-chart/dees-chart-radar/template.ts

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+
+export const renderChartRadar = (component: DeesChartRadar): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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

@@ -1,3 +1,7 @@
 // Chart Components
 export * from './dees-chart-area/index.js';
+export * from './dees-chart-bar/index.js';
+export * from './dees-chart-donut/index.js';
+export * from './dees-chart-gauge/index.js';
 export * from './dees-chart-log/index.js';
+export * from './dees-chart-radar/index.js';

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

@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
   DeesElement,
   html,
+  css,
   customElement,
   type TemplateResult,
   property,
@@ -9,6 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 import type { HLJSApi } from 'highlight.js';
 
@@ -17,6 +19,7 @@ import * as smartstring from '@push.rocks/smartstring';
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -38,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
   })
   accessor codeToDisplay: string = '';
 
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+  ];
+
   constructor() {
     super();
   }
@@ -52,28 +60,21 @@ export class DeesDataviewCodebox extends DeesElement {
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
+          box-sizing: border-box;
         }
-        .mainbox {
-          position: relative;
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-          border-radius: 6px;
-          overflow: hidden;
+        dees-tile {
+          color: var(--dees-color-text-primary);
         }
 
         .appbar {
-          position: relative;
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          color: var(--dees-color-text-muted);
           height: 32px;
           display: flex;
           font-size: 13px;
           line-height: 32px;
           justify-content: center;
           align-items: center;
+          padding: 0 16px;
         }
 
         .appbar .fileName {
@@ -84,17 +85,16 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          position: relative;
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          color: var(--dees-color-text-muted);
           height: 28px;
-          font-size: 12px;
+          font-size: 11px;
           line-height: 28px;
           display: flex;
           justify-content: flex-end;
-          align-items: stretch;
-          overflow: hidden;
+          align-items: center;
+          padding: 0 16px;
+          width: 100%;
+          box-sizing: border-box;
         }
 
         .spacesLabel {
@@ -121,14 +121,14 @@ export class DeesDataviewCodebox extends DeesElement {
         .codegrid {
           display: grid;
           grid-template-columns: 50px auto;
-          overflow: hidden;
+          overflow: auto;
         }
 
         .lineNumbers {
-          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          color: var(--dees-color-text-muted);
           padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-right: 1px solid var(--dees-color-border-default);
         }
 
         .lineCounter:last-child {
@@ -191,9 +191,8 @@ export class DeesDataviewCodebox extends DeesElement {
           color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
-      <div
-        class="mainbox"
-        @contextmenu="${(eventArg) => {
+      <dees-tile
+        @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
               name: 'About',
@@ -205,7 +204,7 @@ export class DeesDataviewCodebox extends DeesElement {
           ]);
         }}"
       >
-        <div class="appbar">
+        <div slot="header" class="appbar">
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">
@@ -220,18 +219,18 @@ export class DeesDataviewCodebox extends DeesElement {
           </div>
           <pre><code></code></pre>
         </div>
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
           <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 
   private codeToDisplayStore = '';
   private highlightJs: HLJSApi | null = null;
 
-  public async updated(_changedProperties) {
+  public async updated(_changedProperties: Map<string, any>) {
     super.updated(_changedProperties);
     console.log('highlighting now');
     console.log(this.childNodes);
@@ -257,11 +256,11 @@ export class DeesDataviewCodebox extends DeesElement {
       this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
     }
 
-    const localCodeNode = this.shadowRoot.querySelector('code');
+    const localCodeNode = this.shadowRoot!.querySelector('code');
     const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, {
       language: this.progLang,
       ignoreIllegals: true,
     });
-    localCodeNode.innerHTML = highlightedHtml.value;
+    localCodeNode!.innerHTML = highlightedHtml.value;
   }
 }

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

@@ -50,6 +50,7 @@ export const demoFunc = () => html` <style>
           .statusObject=${{
             id: '1',
             name: 'API Gateway Service',
+            lastUpdated: Date.now(),
             combinedStatus: 'ok',
             combinedStatusText: 'All systems operational',
             details: [
@@ -89,6 +90,7 @@ export const demoFunc = () => html` <style>
           .statusObject=${{
             id: '2',
             name: 'PostgreSQL Cluster',
+            lastUpdated: Date.now() - 3600000,
             combinedStatus: 'partly_ok',
             combinedStatusText: 'Minor issues detected',
             details: [
@@ -128,6 +130,7 @@ export const demoFunc = () => html` <style>
           .statusObject=${{
             id: '3',
             name: 'CI/CD Pipeline',
+            lastUpdated: Date.now() - 86400000,
             combinedStatus: 'not_ok',
             combinedStatusText: 'Build failure',
             details: [

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

@@ -17,6 +17,7 @@ import {
 import * as tsclass from '@tsclass/tsclass';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -29,7 +30,7 @@ export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Data View'];
 
-  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
+  @property({ type: Object }) accessor statusObject!: tsclass.code.IStatusObject;
 
   public static styles = [
     themeDefaultStyles,
@@ -40,35 +41,28 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
       }
 
-      .mainbox {
-        border-radius: 8px;
-        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%)')};
-        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-        min-height: 48px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+      dees-tile {
+        color: var(--dees-color-text-primary);
         cursor: default;
-        overflow: hidden;
       }
 
       .heading {
-        display: grid;
+        display: flex;
         align-items: center;
-        grid-template-columns: 48px auto 100px;
-        height: 56px;
+        gap: 8px;
+        height: 32px;
         padding: 0 16px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       h1 {
         display: block;
-        margin: 0px;
-        padding: 0px 12px;
+        margin: 0;
+        padding: 0;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-secondary);
+        flex: 1;
       }
 
       .statusdot {
@@ -82,23 +76,23 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain {
-        font-size: 12px;
+        font-size: 11px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         text-align: center;
-        padding: 6px 12px;
-        border-radius: 6px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        padding: 4px 10px;
+        border-radius: 4px;
+        color: var(--dees-color-text-muted);
         user-select: none;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .copyMain:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .copyMain:active {
@@ -122,57 +116,86 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        min-height: 60px;
+        display: flex;
         align-items: center;
-        display: grid;
-        grid-template-columns: 48px auto;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
+        gap: 10px;
+        height: 36px;
+        padding: 0 16px;
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         transition: background-color 0.15s ease;
-        padding-right: 16px;
         cursor: context-menu;
       }
 
-      .detail:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+      .detail:last-child {
+        border-bottom: none;
       }
 
-      .detail:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+      .detail:hover {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.06)')};
+      }
+
+      .detail .statusdot {
+        margin: 0;
+        flex-shrink: 0;
       }
 
       .detail .detailsText {
-        padding: 12px;
-        word-break: break-all;
+        display: flex;
+        align-items: baseline;
+        flex: 1;
+        min-width: 0;
       }
 
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
-        margin-bottom: 2px;
+        color: var(--dees-color-text-muted);
         letter-spacing: -0.01em;
+        white-space: nowrap;
+        flex-shrink: 0;
       }
 
       .detail .detailsText .value {
-        font-size: 14px;
+        font-size: 13px;
         font-family: 'Intel One Mono', 'Geist Mono', monospace;
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-        line-height: 1.5;
+        margin-left: auto;
+        text-align: right;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .bottomBar {
+        color: var(--dees-color-text-muted);
+        height: 28px;
+        font-size: 11px;
+        line-height: 28px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomBar .statusLabel {
+        font-weight: 500;
       }
     `,
   ];
 
   render(): TemplateResult {
     return html`
-      <div class="mainbox">
-        <div class="heading">
+      <dees-tile>
+        <div slot="header" class="heading">
           <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
           <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
           <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
         </div>
         ${this.statusObject?.details?.map((detailArg) => {
           return html`
-            <div 
+            <div
               class="detail"
               @contextmenu=${(event: MouseEvent) => {
                 event.preventDefault();
@@ -202,14 +225,19 @@ export class DeesDataviewStatusobject extends DeesElement {
               }}
             >
               <div class="statusdot ${detailArg.status}"></div>
-              <div class="detailsText">
-                <div class="label">${detailArg.name}</div>
-                <div class="value">${detailArg.value}</div>
-              </div>
+              <span class="detailsText">
+                <span class="label">${detailArg.name}</span>
+                <span class="value">${detailArg.value}</span>
+              </span>
             </div>
           `;
         })}
-      </div>
+        <div slot="footer" class="bottomBar">
+          <div class="statusLabel">${this.statusObject?.lastUpdated
+            ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
+            : ''}</div>
+        </div>
+      </dees-tile>
     `;
   }
 
@@ -232,7 +260,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
       
       // Show feedback
-      const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
+      const button = this.shadowRoot!.querySelector('.copyMain') as HTMLElement;
       const originalText = button.textContent;
       button.textContent = 'Copied!';
       

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

@@ -10,6 +10,7 @@ import {
   css,
   unsafeCSS,
   cssManager,
+  containerResponsive,
 } from '@design.estate/dees-element';
 import type { TemplateResult } from '@design.estate/dees-element';
 
@@ -17,6 +18,7 @@ import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import '../../00group-button/dees-button/dees-button.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -93,6 +95,7 @@ export interface IStatsTile {
   actions?: plugins.tsclass.website.IMenuItem[];
 }
 
+@containerResponsive()
 @customElement('dees-statsgrid')
 export class DeesStatsGrid extends DeesElement {
   public static demo = demoFunc;
@@ -157,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
       .grid-title {
         font-size: 16px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
         letter-spacing: -0.01em;
       }
 
@@ -177,40 +180,31 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
-      /* Tile Base Styles */
-      .stats-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: var(--border-radius);
-        padding: var(--tile-padding);
+      /* Tile Base Styles — frame provided by dees-tile, hover via ::part */
+      .stats-tile::part(outer) {
         transition: all var(--transition-duration) ease;
-        cursor: default;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
       }
 
-      .stats-tile:hover {
-        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
+      .stats-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
       .stats-tile.clickable {
         cursor: pointer;
       }
 
-      .stats-tile.clickable:hover {
+      .stats-tile.clickable:hover::part(outer) {
         transform: translateY(-1px);
         box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
       }
 
-      /* Tile Header */
+      /* Tile Header — slotted into dees-tile header */
       .tile-header {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: var(--header-spacing);
+        align-items: center;
+        padding: 0 12px;
+        height: 28px;
         flex-shrink: 0;
       }
 
@@ -230,12 +224,12 @@ export class DeesStatsGrid extends DeesElement {
         flex-shrink: 0;
       }
 
-      /* Tile Content */
+      /* Tile Content — slotted into dees-tile content area */
       .tile-content {
-        min-height: var(--content-min-height);
         display: flex;
         flex-direction: column;
-        flex: 1;
+        padding: 12px;
+        min-height: var(--content-min-height);
       }
 
       .tile-value {
@@ -259,9 +253,10 @@ export class DeesStatsGrid extends DeesElement {
       .tile-description {
         font-size: var(--label-font-size);
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: var(--description-spacing);
         letter-spacing: -0.01em;
-        flex-shrink: 0;
+        padding: 0 12px;
+        height: 24px;
+        line-height: 24px;
       }
 
       /* Gauge Styles */
@@ -286,7 +281,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-background {
         fill: none;
-        stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        stroke: var(--dees-color-border-default);
         stroke-width: 6;
       }
 
@@ -334,7 +329,7 @@ export class DeesStatsGrid extends DeesElement {
       .percentage-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
         margin-top: auto;
@@ -342,7 +337,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
@@ -391,14 +386,14 @@ export class DeesStatsGrid extends DeesElement {
       .multi-percentage-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
 
       .multi-percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 2px;
       }
@@ -469,7 +464,7 @@ export class DeesStatsGrid extends DeesElement {
       .cpu-core-bar-wrapper {
         flex: 1;
         width: 100%;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         position: relative;
         overflow: hidden;
@@ -482,21 +477,21 @@ export class DeesStatsGrid extends DeesElement {
         left: 0;
         right: 0;
         width: 100%;
-        background: ${cssManager.bdTheme('#666666', '#888888')};
+        background: var(--dees-color-text-muted);
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
         border-radius: 2px 2px 0 0;
       }
 
       .cpu-core-bar-fill.low {
-        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        background: var(--dees-color-accent-success);
       }
 
       .cpu-core-bar-fill.medium {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .cpu-core-bar-fill.high {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .cpu-core-label {
@@ -536,24 +531,24 @@ export class DeesStatsGrid extends DeesElement {
       .partition-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
       }
 
       .partition-bar-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
 
       .partition-bar-fill.warning {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .partition-bar-fill.critical {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .partition-stats {
@@ -700,7 +695,7 @@ export class DeesStatsGrid extends DeesElement {
       .disk-health-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
@@ -776,7 +771,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .trend-line {
         fill: none;
-        stroke: ${cssManager.bdTheme('#999999', '#666666')};
+        stroke: var(--dees-color-text-muted);
         stroke-width: 1.5;
         stroke-linejoin: round;
         stroke-linecap: round;
@@ -801,6 +796,38 @@ export class DeesStatsGrid extends DeesElement {
         z-index: 1000;
       }
     `,
+    // Container-responsive: when this statsgrid is narrow
+    cssManager.cssForTablet(css`
+      .stats-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    `, this),
+    cssManager.cssForPhablet(css`
+      :host {
+        --tile-padding: 12px;
+        --value-font-size: 22px;
+        --title-font-size: 12px;
+        --grid-gap: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 8px;
+      }
+      .stats-tile {
+        grid-column: span 1 !important;
+      }
+    `, this),
+    cssManager.cssForPhone(css`
+      :host {
+        --tile-padding: 10px;
+        --value-font-size: 20px;
+        --header-spacing: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 6px;
+      }
+    `, this),
   ];
 
   constructor() {
@@ -844,31 +871,31 @@ export class DeesStatsGrid extends DeesElement {
 
   private renderTile(tile: IStatsTile): TemplateResult {
     const hasActions = tile.actions && tile.actions.length > 0;
-    const clickable = hasActions && tile.actions.length === 1;
+    const clickable = hasActions && tile.actions!.length === 1;
     const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`
-      <div
+      <dees-tile
         class="stats-tile ${clickable ? 'clickable' : ''}"
         style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
         @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
         @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
       >
-        <div class="tile-header">
+        <div slot="header" class="tile-header">
           <h3 class="tile-title">${tile.title}</h3>
           ${tile.icon ? html`
             <dees-icon class="tile-icon" .icon=${tile.icon} size="small"></dees-icon>
           ` : ''}
         </div>
-        
+
         <div class="tile-content">
           ${this.renderTileContent(tile)}
         </div>
-        
+
         ${tile.description && tile.type !== 'trend' ? html`
-          <div class="tile-description">${tile.description}</div>
+          <div slot="footer" class="tile-description">${tile.description}</div>
         ` : ''}
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.demo.ts

@@ -0,0 +1,156 @@
+import { html } from '@design.estate/dees-element';
+import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
+import './dees-storage-browser.js';
+
+// Mock in-memory storage data provider for demo purposes
+class MockStorageDataProvider implements IStorageDataProvider {
+  private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
+
+  constructor() {
+    const now = new Date().toISOString();
+    // Seed with sample data
+    this.objects.set('documents/readme.md', {
+      content: btoa('# Welcome\n\nThis is a demo Storage browser.\n'),
+      contentType: 'text/markdown',
+      size: 42,
+      lastModified: now,
+    });
+    this.objects.set('documents/config.json', {
+      content: btoa('{\n  "name": "demo",\n  "version": "1.0.0"\n}'),
+      contentType: 'application/json',
+      size: 48,
+      lastModified: now,
+    });
+    this.objects.set('documents/notes/todo.txt', {
+      content: btoa('Buy milk\nFix bug #42\nDeploy to production'),
+      contentType: 'text/plain',
+      size: 45,
+      lastModified: now,
+    });
+    this.objects.set('images/logo.png', {
+      content: btoa('fake-png-data'),
+      contentType: 'image/png',
+      size: 24500,
+      lastModified: now,
+    });
+    this.objects.set('images/banner.jpg', {
+      content: btoa('fake-jpg-data'),
+      contentType: 'image/jpeg',
+      size: 156000,
+      lastModified: now,
+    });
+    this.objects.set('scripts/deploy.sh', {
+      content: btoa('#!/bin/bash\necho "Deploying..."\n'),
+      contentType: 'text/plain',
+      size: 34,
+      lastModified: now,
+    });
+    this.objects.set('index.html', {
+      content: btoa('<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World</h1>\n</body>\n</html>'),
+      contentType: 'text/html',
+      size: 72,
+      lastModified: now,
+    });
+    this.objects.set('styles.css', {
+      content: btoa('body { margin: 0; font-family: sans-serif; }'),
+      contentType: 'text/css',
+      size: 44,
+      lastModified: now,
+    });
+  }
+
+  async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
+    const pfx = prefix || '';
+    const objects: IStorageObject[] = [];
+    const prefixes = new Set<string>();
+
+    for (const [key, data] of this.objects) {
+      if (!key.startsWith(pfx)) continue;
+      const rest = key.slice(pfx.length);
+
+      if (delimiter) {
+        const slashIndex = rest.indexOf(delimiter);
+        if (slashIndex >= 0) {
+          prefixes.add(pfx + rest.slice(0, slashIndex + 1));
+        } else {
+          objects.push({ key, size: data.size, lastModified: data.lastModified });
+        }
+      } else {
+        objects.push({ key, size: data.size, lastModified: data.lastModified });
+      }
+    }
+
+    return { objects, prefixes: Array.from(prefixes).sort() };
+  }
+
+  async getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }> {
+    const obj = this.objects.get(key);
+    if (!obj) throw new Error('Not found');
+    return { ...obj };
+  }
+
+  async putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean> {
+    this.objects.set(key, {
+      content: base64Content,
+      contentType,
+      size: atob(base64Content).length,
+      lastModified: new Date().toISOString(),
+    });
+    return true;
+  }
+
+  async deleteObject(bucket: string, key: string): Promise<boolean> {
+    return this.objects.delete(key);
+  }
+
+  async deletePrefix(bucket: string, prefix: string): Promise<boolean> {
+    for (const key of this.objects.keys()) {
+      if (key.startsWith(prefix)) {
+        this.objects.delete(key);
+      }
+    }
+    return true;
+  }
+
+  async getObjectUrl(bucket: string, key: string): Promise<string> {
+    const obj = this.objects.get(key);
+    if (!obj) return '';
+    const blob = new Blob([Uint8Array.from(atob(obj.content), c => c.charCodeAt(0))], { type: obj.contentType });
+    return URL.createObjectURL(blob);
+  }
+
+  async moveObject(bucket: string, sourceKey: string, destKey: string): Promise<{ success: boolean; error?: string }> {
+    const obj = this.objects.get(sourceKey);
+    if (!obj) return { success: false, error: 'Source not found' };
+    this.objects.set(destKey, { ...obj, lastModified: new Date().toISOString() });
+    this.objects.delete(sourceKey);
+    return { success: true };
+  }
+
+  async movePrefix(bucket: string, sourcePrefix: string, destPrefix: string): Promise<{ success: boolean; movedCount?: number; error?: string }> {
+    let count = 0;
+    const toMove = Array.from(this.objects.entries()).filter(([k]) => k.startsWith(sourcePrefix));
+    for (const [key, data] of toMove) {
+      const newKey = destPrefix + key.slice(sourcePrefix.length);
+      this.objects.set(newKey, { ...data, lastModified: new Date().toISOString() });
+      this.objects.delete(key);
+      count++;
+    }
+    return { success: true, movedCount: count };
+  }
+}
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      height: 600px;
+      padding: 16px;
+    }
+  </style>
+  <div class="demo-container">
+    <dees-storage-browser
+      .dataProvider=${new MockStorageDataProvider()}
+      .bucketName=${'demo-bucket'}
+    ></dees-storage-browser>
+  </div>
+`;

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.ts

@@ -0,0 +1,439 @@
+import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoFunc } from './dees-storage-browser.demo.js';
+import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
+import './dees-storage-columns.js';
+import './dees-storage-keys.js';
+import './dees-storage-preview.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-storage-browser': DeesStorageBrowser;
+  }
+}
+
+type TViewType = 'columns' | 'keys';
+
+@customElement('dees-storage-browser')
+export class DeesStorageBrowser extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
+
+  @property({ type: Object })
+  public accessor dataProvider: IStorageDataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  /**
+   * Optional change stream subscription.
+   * Pass a function that takes a callback and returns an unsubscribe function.
+   */
+  @property({ type: Object })
+  public accessor onChangeEvent: ((callback: (event: IStorageChangeEvent) => void) => (() => void)) | null = null;
+
+  @state()
+  private accessor viewType: TViewType = 'columns';
+
+  @state()
+  private accessor currentPrefix: string = '';
+
+  @state()
+  private accessor selectedKey: string = '';
+
+  @state()
+  private accessor refreshKey: number = 0;
+
+  @state()
+  private accessor previewWidth: number = 700;
+
+  @state()
+  private accessor isResizingPreview: boolean = false;
+
+  @state()
+  private accessor recentChangeCount: number = 0;
+
+  @state()
+  private accessor isStreamConnected: boolean = false;
+
+  private changeUnsubscribe: (() => void) | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .browser-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+        margin-bottom: 16px;
+      }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#999')};
+      }
+
+      .breadcrumb-item {
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.15s;
+      }
+
+      .breadcrumb-item:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .breadcrumb-separator {
+        color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+      }
+
+      .view-toggle {
+        display: flex;
+        gap: 4px;
+      }
+
+      .view-btn {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s;
+      }
+
+      .view-btn:hover {
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        color: ${cssManager.bdTheme('#3f3f46', '#aaa')};
+      }
+
+      .view-btn.active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#404040')};
+        color: ${cssManager.bdTheme('#18181b', '#e0e0e0')};
+      }
+
+      .content {
+        flex: 1;
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0;
+        overflow: hidden;
+      }
+
+      .content.has-preview {
+        grid-template-columns: 1fr 4px var(--preview-width, 700px);
+      }
+
+      .resize-divider {
+        width: 4px;
+        background: transparent;
+        cursor: col-resize;
+        transition: background 0.2s;
+      }
+
+      .resize-divider:hover,
+      .resize-divider.active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.2)')};
+      }
+
+      .main-view {
+        overflow: auto;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+      }
+
+      .preview-panel {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+        overflow: hidden;
+        margin-left: 12px;
+      }
+
+      @media (max-width: 1024px) {
+        .content,
+        .content.has-preview {
+          grid-template-columns: 1fr;
+        }
+
+        .preview-panel,
+        .resize-divider {
+          display: none;
+        }
+      }
+
+      .stream-status {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        margin-left: auto;
+        margin-right: 12px;
+      }
+
+      .stream-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#a1a1aa', '#888')};
+      }
+
+      .stream-dot.connected {
+        background: #22c55e;
+      }
+
+      .change-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        background: rgba(245, 158, 11, 0.2);
+        border-radius: 4px;
+        font-size: 11px;
+        color: #f59e0b;
+        margin-right: 12px;
+      }
+
+      .change-indicator.pulse {
+        animation: pulse-orange 1s ease-in-out;
+      }
+
+      @keyframes pulse-orange {
+        0% { background: rgba(245, 158, 11, 0.4); }
+        100% { background: rgba(245, 158, 11, 0.2); }
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.subscribeToChanges();
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.unsubscribeFromChanges();
+  }
+
+  /**
+   * Public method to trigger a refresh of child components
+   */
+  public refresh() {
+    this.refreshKey++;
+  }
+
+  private setViewType(type: TViewType) {
+    this.viewType = type;
+  }
+
+  private navigateToPrefix(prefix: string) {
+    this.currentPrefix = prefix;
+    this.selectedKey = '';
+  }
+
+  private handleKeySelected(e: CustomEvent) {
+    this.selectedKey = e.detail.key;
+  }
+
+  private handleNavigate(e: CustomEvent) {
+    this.navigateToPrefix(e.detail.prefix);
+  }
+
+  private handleObjectDeleted(e: CustomEvent) {
+    this.selectedKey = '';
+    this.refreshKey++;
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('bucketName')) {
+      this.selectedKey = '';
+      this.currentPrefix = '';
+      this.recentChangeCount = 0;
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
+    }
+    if (changedProperties.has('onChangeEvent')) {
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
+    }
+  }
+
+  private subscribeToChanges() {
+    if (!this.onChangeEvent) {
+      this.isStreamConnected = false;
+      return;
+    }
+
+    try {
+      this.changeUnsubscribe = this.onChangeEvent((event: IStorageChangeEvent) => {
+        this.handleChange(event);
+      });
+      this.isStreamConnected = true;
+    } catch (error) {
+      console.warn('[StorageBrowser] Failed to subscribe to changes:', error);
+      this.isStreamConnected = false;
+    }
+  }
+
+  private unsubscribeFromChanges() {
+    if (this.changeUnsubscribe) {
+      this.changeUnsubscribe();
+      this.changeUnsubscribe = null;
+    }
+    this.isStreamConnected = false;
+  }
+
+  private handleChange(event: IStorageChangeEvent) {
+    this.recentChangeCount++;
+    this.refreshKey++;
+  }
+
+  private startPreviewResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizingPreview = true;
+    document.addEventListener('mousemove', this.handlePreviewResize);
+    document.addEventListener('mouseup', this.endPreviewResize);
+  };
+
+  private handlePreviewResize = (e: MouseEvent) => {
+    if (!this.isResizingPreview) return;
+    const contentEl = this.shadowRoot?.querySelector('.content');
+    if (!contentEl) return;
+    const containerRect = contentEl.getBoundingClientRect();
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
+    this.previewWidth = newWidth;
+  };
+
+  private endPreviewResize = () => {
+    this.isResizingPreview = false;
+    document.removeEventListener('mousemove', this.handlePreviewResize);
+    document.removeEventListener('mouseup', this.endPreviewResize);
+  };
+
+  render() {
+    const breadcrumbParts = this.currentPrefix
+      ? this.currentPrefix.split('/').filter(Boolean)
+      : [];
+
+    return html`
+      <div class="browser-container">
+        <div class="toolbar">
+          <div class="breadcrumb">
+            <span
+              class="breadcrumb-item"
+              @click=${() => this.navigateToPrefix('')}
+            >
+              ${this.bucketName}
+            </span>
+            ${breadcrumbParts.map((part, index) => {
+              const prefix = breadcrumbParts.slice(0, index + 1).join('/') + '/';
+              return html`
+                <span class="breadcrumb-separator">/</span>
+                <span
+                  class="breadcrumb-item"
+                  @click=${() => this.navigateToPrefix(prefix)}
+                >
+                  ${part}
+                </span>
+              `;
+            })}
+          </div>
+
+          ${this.onChangeEvent ? html`
+            <div class="stream-status">
+              <span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
+              ${this.isStreamConnected ? 'Live' : 'Offline'}
+            </div>
+          ` : ''}
+          ${this.recentChangeCount > 0
+            ? html`
+                <div class="change-indicator pulse">
+                  ${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
+                </div>
+              `
+            : ''}
+          <div class="view-toggle">
+            <button
+              class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
+              @click=${() => this.setViewType('columns')}
+            >
+              Columns
+            </button>
+            <button
+              class="view-btn ${this.viewType === 'keys' ? 'active' : ''}"
+              @click=${() => this.setViewType('keys')}
+            >
+              List
+            </button>
+          </div>
+        </div>
+
+        <div class="content ${this.selectedKey ? 'has-preview' : ''}" style="--preview-width: ${this.previewWidth}px">
+          <div class="main-view">
+            ${this.viewType === 'columns'
+              ? html`
+                  <dees-storage-columns
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-storage-columns>
+                `
+              : html`
+                  <dees-storage-keys
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-storage-keys>
+                `}
+          </div>
+
+          ${this.selectedKey
+            ? html`
+                <div
+                  class="resize-divider ${this.isResizingPreview ? 'active' : ''}"
+                  @mousedown=${this.startPreviewResize}
+                ></div>
+                <div class="preview-panel">
+                  <dees-storage-preview
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .objectKey=${this.selectedKey}
+                    @object-deleted=${this.handleObjectDeleted}
+                  ></dees-storage-preview>
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-preview.ts

@@ -0,0 +1,540 @@
+import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IStorageDataProvider } from './interfaces.js';
+import { formatSize, getFileName } from './utilities.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-storage-preview': DeesStoragePreview;
+  }
+}
+
+@customElement('dees-storage-preview')
+export class DeesStoragePreview extends DeesElement {
+  @property({ type: Object })
+  public accessor dataProvider: IStorageDataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  @property({ type: String })
+  public accessor objectKey: string = '';
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor saving: boolean = false;
+
+  @state()
+  private accessor content: string = '';
+
+  @state()
+  private accessor originalTextContent: string = '';
+
+  @state()
+  private accessor hasChanges: boolean = false;
+
+  @state()
+  private accessor editing: boolean = false;
+
+  @state()
+  private accessor contentType: string = '';
+
+  @state()
+  private accessor fileSize: number = 0;
+
+  @state()
+  private accessor lastModified: string = '';
+
+  @state()
+  private accessor error: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .preview-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .preview-header {
+        padding: 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+      }
+
+      .preview-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        word-break: break-all;
+      }
+
+      .preview-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .preview-content {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .preview-content dees-preview {
+        width: 100%;
+        height: 100%;
+      }
+
+      .preview-content.code-editor {
+        padding: 0;
+        overflow: hidden;
+      }
+
+      .preview-content.code-editor dees-input-code {
+        height: 100%;
+      }
+
+      .preview-actions {
+        padding: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-btn {
+        flex: 1;
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#404040')};
+        color: ${cssManager.bdTheme('#3f3f46', '#e0e0e0')};
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s;
+      }
+
+      .action-btn:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
+      }
+
+      .action-btn.danger {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: #ef4444;
+        color: #f87171;
+      }
+
+      .action-btn.danger:hover {
+        background: rgba(239, 68, 68, 0.3);
+      }
+
+      .action-btn.primary {
+        background: rgba(59, 130, 246, 0.3);
+        border-color: #3b82f6;
+        color: #60a5fa;
+      }
+
+      .action-btn.primary:hover {
+        background: rgba(59, 130, 246, 0.4);
+      }
+
+      .action-btn.primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-btn.secondary {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+        color: ${cssManager.bdTheme('#71717a', '#aaa')};
+      }
+
+      .action-btn.secondary:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .unsaved-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: rgba(251, 191, 36, 0.1);
+        border: 1px solid rgba(251, 191, 36, 0.3);
+        border-radius: 4px;
+        font-size: 12px;
+        color: #fbbf24;
+      }
+
+      .unsaved-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #fbbf24;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        text-align: center;
+        padding: 24px;
+      }
+
+      .empty-state svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .error-state {
+        padding: 16px;
+        color: #f87171;
+        text-align: center;
+      }
+    `,
+  ];
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
+      if (this.objectKey) {
+        this.loadObject();
+      } else {
+        this.content = '';
+        this.contentType = '';
+        this.error = '';
+        this.originalTextContent = '';
+        this.hasChanges = false;
+        this.editing = false;
+      }
+    }
+  }
+
+  private async loadObject() {
+    if (!this.objectKey || !this.bucketName || !this.dataProvider) return;
+
+    this.loading = true;
+    this.error = '';
+    this.hasChanges = false;
+    this.editing = false;
+
+    try {
+      const result = await this.dataProvider.getObject(this.bucketName, this.objectKey);
+      if (!result) {
+        this.error = 'Object not found';
+        this.loading = false;
+        return;
+      }
+      this.content = result.content || '';
+      this.contentType = result.contentType || '';
+      this.fileSize = result.size || 0;
+      this.lastModified = result.lastModified || '';
+
+      if (this.isText()) {
+        this.originalTextContent = this.getTextContent();
+      }
+    } catch (err) {
+      console.error('Error loading object:', err);
+      this.error = 'Failed to load object';
+    }
+
+    this.loading = false;
+  }
+
+  private formatDate(dateStr: string): string {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  }
+
+  private isImage(): boolean {
+    return this.contentType.startsWith('image/');
+  }
+
+  private isText(): boolean {
+    return (
+      this.contentType.startsWith('text/') ||
+      this.contentType === 'application/json' ||
+      this.contentType === 'application/xml' ||
+      this.contentType === 'application/javascript'
+    );
+  }
+
+  private getTextContent(): string {
+    try {
+      const binaryString = atob(this.content);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      return new TextDecoder('utf-8').decode(bytes);
+    } catch {
+      return 'Unable to decode content';
+    }
+  }
+
+  private async handleDownload() {
+    try {
+      const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
+        type: this.contentType,
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = getFileName(this.objectKey);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Error downloading:', err);
+    }
+  }
+
+  private async handleDelete() {
+    if (!this.dataProvider) return;
+    if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
+
+    try {
+      await this.dataProvider.deleteObject(this.bucketName, this.objectKey);
+      this.dispatchEvent(
+        new CustomEvent('object-deleted', {
+          detail: { key: this.objectKey },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (err) {
+      console.error('Error deleting object:', err);
+    }
+  }
+
+  private getLanguage(): string {
+    const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
+    const languageMap: Record<string, string> = {
+      ts: 'typescript',
+      tsx: 'typescript',
+      js: 'javascript',
+      jsx: 'javascript',
+      mjs: 'javascript',
+      cjs: 'javascript',
+      json: 'json',
+      html: 'html',
+      htm: 'html',
+      css: 'css',
+      scss: 'scss',
+      sass: 'scss',
+      less: 'less',
+      md: 'markdown',
+      markdown: 'markdown',
+      xml: 'xml',
+      yaml: 'yaml',
+      yml: 'yaml',
+      py: 'python',
+      rb: 'ruby',
+      go: 'go',
+      rs: 'rust',
+      java: 'java',
+      c: 'c',
+      cpp: 'cpp',
+      h: 'c',
+      hpp: 'cpp',
+      cs: 'csharp',
+      php: 'php',
+      sh: 'shell',
+      bash: 'shell',
+      zsh: 'shell',
+      sql: 'sql',
+      graphql: 'graphql',
+      gql: 'graphql',
+      dockerfile: 'dockerfile',
+      txt: 'plaintext',
+    };
+    return languageMap[ext] || 'plaintext';
+  }
+
+  private handleContentChange(event: CustomEvent) {
+    const newValue = event.detail as string;
+    this.hasChanges = newValue !== this.originalTextContent;
+  }
+
+  private handleEdit() {
+    this.editing = true;
+  }
+
+  private handleDiscard() {
+    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+    if (codeEditor) {
+      codeEditor.value = this.originalTextContent;
+    }
+    this.hasChanges = false;
+    this.editing = false;
+  }
+
+  private async handleSave() {
+    if (!this.hasChanges || this.saving || !this.dataProvider) return;
+
+    this.saving = true;
+
+    try {
+      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+      const currentContent = codeEditor?.value ?? '';
+
+      const encoder = new TextEncoder();
+      const bytes = encoder.encode(currentContent);
+      const base64Content = btoa(String.fromCharCode(...bytes));
+
+      const success = await this.dataProvider.putObject(
+        this.bucketName,
+        this.objectKey,
+        base64Content,
+        this.contentType
+      );
+
+      if (success) {
+        this.originalTextContent = currentContent;
+        this.hasChanges = false;
+        this.editing = false;
+        this.content = base64Content;
+      }
+    } catch (err) {
+      console.error('Error saving object:', err);
+    }
+
+    this.saving = false;
+  }
+
+  render() {
+    if (!this.objectKey) {
+      return html`
+        <div class="preview-container">
+          <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <p>Select a file to preview</p>
+          </div>
+        </div>
+      `;
+    }
+
+    if (this.loading) {
+      return html`
+        <div class="preview-container">
+          <div class="loading-state">Loading...</div>
+        </div>
+      `;
+    }
+
+    if (this.error) {
+      return html`
+        <div class="preview-container">
+          <div class="error-state">${this.error}</div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="preview-container">
+        <div class="preview-header">
+          <div class="preview-title">${getFileName(this.objectKey)}</div>
+          <div class="preview-meta">
+            <span class="meta-item">${this.contentType}</span>
+            <span class="meta-item">${formatSize(this.fileSize)}</span>
+            <span class="meta-item">${this.formatDate(this.lastModified)}</span>
+            ${this.hasChanges ? html`
+              <span class="unsaved-indicator">
+                <span class="unsaved-dot"></span>
+                Unsaved changes
+              </span>
+            ` : ''}
+          </div>
+        </div>
+
+        <div class="preview-content ${this.editing ? 'code-editor' : ''}">
+          ${this.editing
+            ? html`
+                <dees-input-code
+                  .value=${this.originalTextContent}
+                  .language=${this.getLanguage()}
+                  height="100%"
+                  @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
+                ></dees-input-code>
+              `
+            : this.isText()
+              ? html`
+                  <dees-preview
+                    .textContent=${this.originalTextContent}
+                    .filename=${getFileName(this.objectKey)}
+                    .language=${this.getLanguage()}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+              : html`
+                  <dees-preview
+                    .base64=${this.content}
+                    .mimeType=${this.contentType}
+                    .filename=${getFileName(this.objectKey)}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+          }
+        </div>
+
+        <div class="preview-actions">
+          ${this.editing
+            ? html`
+                <button class="action-btn secondary" @click=${this.handleDiscard}>
+                  ${this.hasChanges ? 'Discard' : 'Cancel'}
+                </button>
+                <button
+                  class="action-btn primary"
+                  @click=${this.handleSave}
+                  ?disabled=${this.saving || !this.hasChanges}
+                >
+                  ${this.saving ? 'Saving...' : 'Save'}
+                </button>
+              `
+            : html`
+                ${this.isText()
+                  ? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
+                  : ''}
+                <button class="action-btn" @click=${this.handleDownload}>Download</button>
+                <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
+              `
+          }
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/00group-dataview/dees-storage-browser/index.ts

@@ -0,0 +1,6 @@
+export * from './dees-storage-browser.js';
+export * from './dees-storage-columns.js';
+export * from './dees-storage-keys.js';
+export * from './dees-storage-preview.js';
+export * from './interfaces.js';
+export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';

ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts

@@ -0,0 +1,37 @@
+/**
+ * Storage Data Provider interface - implement this to connect the storage browser to your backend
+ */
+
+export interface IStorageObject {
+  key: string;
+  size?: number;
+  lastModified?: string;
+  isPrefix?: boolean;
+}
+
+export interface IStorageChangeEvent {
+  type: 'add' | 'modify' | 'delete';
+  key: string;
+  bucket: string;
+  size?: number;
+  lastModified?: Date;
+}
+
+export interface IStorageDataProvider {
+  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }>;
+  getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }>;
+  putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
+  deleteObject(bucket: string, key: string): Promise<boolean>;
+  deletePrefix(bucket: string, prefix: string): Promise<boolean>;
+  getObjectUrl(bucket: string, key: string): Promise<string>;
+  moveObject(bucket: string, sourceKey: string, destKey: string): Promise<{ success: boolean; error?: string }>;
+  movePrefix(bucket: string, sourcePrefix: string, destPrefix: string): Promise<{ success: boolean; movedCount?: number; error?: string }>;
+}
+
+export interface IColumn {
+  prefix: string;
+  objects: IStorageObject[];
+  prefixes: string[];
+  selectedItem: string | null;
+  width: number;
+}

ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts

@@ -0,0 +1,120 @@
+/**
+ * Shared utilities for Storage browser components
+ */
+
+export interface IMoveValidation {
+  valid: boolean;
+  error?: string;
+}
+
+/**
+ * Format a byte size into a human-readable string
+ */
+export function formatSize(bytes?: number): string {
+  if (bytes === undefined || bytes === null) return '-';
+  if (bytes === 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`;
+}
+
+/**
+ * Format a count into a compact human-readable string
+ */
+export function formatCount(count?: number): string {
+  if (count === undefined || count === null) return '';
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return count.toString();
+}
+
+/**
+ * Extract the file name from a path
+ */
+export function getFileName(path: string): string {
+  const parts = path.replace(/\/$/, '').split('/');
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * Validates if a move operation is allowed
+ */
+export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
+  if (sourceKey.endsWith('/')) {
+    if (destPrefix.startsWith(sourceKey)) {
+      return { valid: false, error: 'Cannot move a folder into itself' };
+    }
+  }
+
+  const sourceParent = getParentPrefix(sourceKey);
+  if (sourceParent === destPrefix) {
+    return { valid: false, error: 'Item is already in this location' };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Gets the parent prefix (directory) of a given key
+ */
+export function getParentPrefix(key: string): string {
+  const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
+  const lastSlash = trimmed.lastIndexOf('/');
+  return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
+}
+
+/**
+ * Get content type from file extension
+ */
+export function getContentType(ext: string): string {
+  const contentTypes: Record<string, string> = {
+    json: 'application/json',
+    txt: 'text/plain',
+    html: 'text/html',
+    css: 'text/css',
+    js: 'application/javascript',
+    ts: 'text/typescript',
+    md: 'text/markdown',
+    xml: 'application/xml',
+    yaml: 'text/yaml',
+    yml: 'text/yaml',
+    csv: 'text/csv',
+  };
+  return contentTypes[ext] || 'application/octet-stream';
+}
+
+/**
+ * Get default content for a new file based on extension
+ */
+export function getDefaultContent(ext: string): string {
+  const defaults: Record<string, string> = {
+    json: '{\n  \n}',
+    html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+    md: '# Title\n\n',
+    txt: '',
+  };
+  return defaults[ext] || '';
+}
+
+/**
+ * Parse a prefix into cumulative path segments
+ */
+export function getPathSegments(prefix: string): string[] {
+  if (!prefix) return [];
+  const parts = prefix.split('/').filter(p => p);
+  const segments: string[] = [];
+  let cumulative = '';
+  for (const part of parts) {
+    cumulative += part + '/';
+    segments.push(cumulative);
+  }
+  return segments;
+}

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

@@ -15,6 +15,7 @@ import {
 } from './data.js';
 import { compileLucenePredicate } from './lucene.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
 
@@ -52,12 +53,12 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: String,
   })
-  accessor key: string;
+  accessor key!: string;
 
   @property({
     type: String,
   })
-  accessor label: string;
+  accessor label!: string;
 
   @property({
     type: Boolean,
@@ -83,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
     type: String,
     reflect: true,
   })
-  accessor dataName: string;
+  accessor dataName!: string;
 
 
   @property({
@@ -127,7 +128,7 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: Object,
   })
-  accessor selectedDataRow: T;
+  accessor selectedDataRow!: T;
 
   @property({
     type: Array,
@@ -221,9 +222,8 @@ export class DeesTable<T> extends DeesElement {
     );
     (this as any)._lastViewData = viewData;
     return html`
-      <div class="mainbox">
-        <!-- the heading part -->
-        <div class="header">
+      <dees-tile>
+        <div slot="header" class="header">
           <div class="headingContainer">
             <div class="heading heading1">${this.label || this.heading1}</div>
             <div class="heading heading2">${this.heading2}</div>
@@ -232,7 +232,7 @@ export class DeesTable<T> extends DeesElement {
             ${directives.resolveExec(async () => {
               const resultArray: TemplateResult[] = [];
               for (const action of this.dataActions) {
-                if (!action.type.includes('header')) continue;
+                if (!action.type?.includes('header')) continue;
                 resultArray.push(
                   html`<div
                     class="headerAction"
@@ -359,7 +359,7 @@ export class DeesTable<T> extends DeesElement {
                       if (elementArg.tagName === 'TR') {
                         return elementArg;
                       } else {
-                        return getTr(elementArg.parentElement);
+                        return getTr(elementArg.parentElement!);
                       }
                     };
                     return html`
@@ -393,8 +393,8 @@ export class DeesTable<T> extends DeesElement {
                         }}
                         @drop=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
-                          const newFiles = [];
-                          for (const file of Array.from(eventArg.dataTransfer.files)) {
+                          const newFiles: File[] = [];
+                          for (const file of Array.from(eventArg.dataTransfer!.files)) {
                             this.files.push(file);
                             newFiles.push(file);
                             this.requestUpdate();
@@ -450,7 +450,7 @@ export class DeesTable<T> extends DeesElement {
                               <td
                                 @dblclick=${(e: Event) => {
                                   const dblAction = this.dataActions.find((actionArg) =>
-                                    actionArg.type.includes('doubleClick')
+                                    actionArg.type?.includes('doubleClick')
                                   );
                                   if (this.editableFields.includes(editKey)) {
                                     this.handleCellEditing(e, itemArg, editKey);
@@ -496,7 +496,7 @@ export class DeesTable<T> extends DeesElement {
               </div>
             `
           : html` <div class="noDataSet">No data set!</div> `}
-        <div class="footer">
+        <div slot="footer" class="footer">
           <div class="tableStatistics">
             ${this.data.length} ${this.dataName || 'data rows'} (total) |
             ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
@@ -506,7 +506,7 @@ export class DeesTable<T> extends DeesElement {
             ${directives.resolveExec(async () => {
               const resultArray: TemplateResult[] = [];
               for (const action of this.dataActions) {
-                if (!action.type.includes('footer')) continue;
+                if (!action.type?.includes('footer')) continue;
                 resultArray.push(
                   html`<div
                     class="footerAction"
@@ -528,7 +528,7 @@ export class DeesTable<T> extends DeesElement {
             })}
           </div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 
@@ -540,16 +540,16 @@ export class DeesTable<T> extends DeesElement {
     super.updated(changedProperties);
     this.determineColumnWidths();
     if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
       if (!existing) {
         this.dataActions.unshift({
           name: 'Search',
-          iconName: 'magnifyingGlass',
+          iconName: 'lucide:Search',
           type: ['header'],
           actionFunc: async () => {
             console.log('open search');
-            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
-            searchGrid.classList.toggle('hidden');
+            const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
+            searchGrid!.classList.toggle('hidden');
           }
         });
         console.log(this.dataActions);
@@ -609,7 +609,7 @@ export class DeesTable<T> extends DeesElement {
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(0);
     // Get the table element
-    const table = this.shadowRoot.querySelector('table');
+    const table = this.shadowRoot!.querySelector('table');
     if (!table) return;
 
     // Get the first row's cells to measure the widths
@@ -623,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
         const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
+          this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;
@@ -718,7 +718,7 @@ export class DeesTable<T> extends DeesElement {
     if (!this._rowIdMap.has(key)) {
       this._rowIdMap.set(key, String(++this._rowIdCounter));
     }
-    return this._rowIdMap.get(key);
+    return this._rowIdMap.get(key)!;
   }
 
   private isRowSelected(row: T): boolean {
@@ -795,7 +795,7 @@ export class DeesTable<T> extends DeesElement {
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
     for (const action of this.dataActions) {
-      if (!action.type.includes(typeArg)) continue;
+      if (!action.type?.includes(typeArg)) continue;
       actions.push(action);
     }
     return actions;
@@ -818,7 +818,7 @@ export class DeesTable<T> extends DeesElement {
         input.blur();
       }
       if (saveArg) {
-        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        (itemArg as any)[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
         this.changeSubject.next(this);
       }
       input.remove();

ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -12,17 +12,11 @@ export const tableStyles: CSSResult[] = [
         width: 100%;
       }
 
-      .mainbox {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      dees-tile {
+        color: var(--dees-color-text-primary);
         font-family: ${cssGeistFontFamily};
         font-weight: 400;
         font-size: 14px;
-        display: block;
-        width: 100%;
-        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%)')};
-        border-radius: 8px;
-        overflow: hidden;
         cursor: default;
       }
 
@@ -30,30 +24,31 @@ export const tableStyles: CSSResult[] = [
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 16px 24px;
-        min-height: 64px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 0 16px;
+        height: 40px;
       }
 
       .headingContainer {
         flex: 1;
+        display: flex;
+        align-items: baseline;
       }
 
       .heading {
-        line-height: 1.5;
+        line-height: 1;
       }
 
       .heading1 {
-        font-size: 18px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        letter-spacing: -0.025em;
-      }
-      
-      .heading2 {
         font-size: 14px;
+        font-weight: 500;
+        color: var(--dees-color-text-secondary);
+        letter-spacing: -0.01em;
+      }
+
+      .heading2 {
+        font-size: 12px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 2px;
+        margin-left: 8px;
       }
 
       .headingSeparation {
@@ -70,22 +65,22 @@ export const tableStyles: CSSResult[] = [
       .headerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        font-size: 14px;
+        gap: 4px;
+        padding: 4px 10px;
+        font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .headerAction:hover {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        color: var(--dees-color-text-primary);
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
       }
 
       .headerAction dees-icon {
@@ -98,8 +93,8 @@ export const tableStyles: CSSResult[] = [
         grid-gap: 16px;
         grid-template-columns: 1fr max-content;
         padding: 16px 24px;
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-secondary);
+        border-bottom: 1px solid var(--dees-color-border-default);
         transition: all 0.2s ease;
       }
 
@@ -162,7 +157,7 @@ export const tableStyles: CSSResult[] = [
       
       thead {
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-strong);
       }
       :host([sticky-header]) thead th {
         position: sticky;
@@ -177,7 +172,7 @@ export const tableStyles: CSSResult[] = [
       
       /* Default horizontal lines (bottom border only) */
       tbody tr {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       tbody tr:last-child {
@@ -186,8 +181,8 @@ export const tableStyles: CSSResult[] = [
       
       /* Full horizontal lines when enabled */
       :host([show-horizontal-lines]) tbody tr {
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid var(--dees-color-border-default);
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       :host([show-horizontal-lines]) tbody tr:first-child {
@@ -195,11 +190,11 @@ export const tableStyles: CSSResult[] = [
       }
       
       :host([show-horizontal-lines]) tbody tr:last-child {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       tbody tr:hover {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
       }
       
       /* Column hover effect for better traceability */
@@ -214,7 +209,7 @@ export const tableStyles: CSSResult[] = [
         bottom: 0;
         left: 0;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.15s ease;
@@ -227,41 +222,45 @@ export const tableStyles: CSSResult[] = [
       
       /* Grid mode - shows both vertical and horizontal lines */
       :host([show-grid]) th {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         border-top: none;
       }
       
       :host([show-grid]) td {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         border-top: none;
       }
       
-      :host([show-grid]) th:first-child,
-      :host([show-grid]) td:first-child {
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
       :host([show-grid]) tbody tr:first-child td {
         border-top: none;
       }
 
+      /* Remove edge borders that would double with tile frame */
+      :host([show-grid]) th:last-child,
+      :host([show-grid]) td:last-child {
+        border-right: none;
+      }
+      :host([show-grid]) tbody tr:last-child td {
+        border-bottom: none;
+      }
+
       /* Sticky Actions column (right pinned) */
       thead th.actionsCol,
       tbody td.actionsCol {
         position: sticky;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
       }
       thead th.actionsCol { z-index: 3; }
       tbody td.actionsCol {
         z-index: 1;
-        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: -1px 0 0 0 var(--dees-color-border-default);
       }
       
       tbody tr.selected {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
       }
 
       tbody tr.hasAttachment {
@@ -269,42 +268,49 @@ export const tableStyles: CSSResult[] = [
       }
 
       th {
-        height: 48px;
-        padding: 12px 24px;
+        height: 36px;
+        padding: 8px 16px;
         text-align: left;
         font-weight: 500;
+        font-size: 12px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         letter-spacing: -0.01em;
       }
       
       :host([show-vertical-lines]) th {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       td {
-        padding: 12px 24px;
+        padding: 8px 16px;
         vertical-align: middle;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        font-size: 13px;
+        color: var(--dees-color-text-primary);
       }
       
       :host([show-vertical-lines]) td {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       th:first-child,
       td:first-child {
-        padding-left: 24px;
+        padding-left: 16px;
       }
       
       th:last-child,
       td:last-child {
-        padding-right: 24px;
+        padding-right: 16px;
       }
       
       :host([show-vertical-lines]) th:last-child,
       :host([show-vertical-lines]) td:last-child {
         border-right: none;
       }
+
+      /* Default bottom border on last row removed — tile frame handles it */
+      :host(:not([show-horizontal-lines])) tbody tr:last-child {
+        border-bottom: none;
+      }
       
       .innerCellContainer {
         position: relative;
@@ -321,10 +327,10 @@ export const tableStyles: CSSResult[] = [
         height: calc(100% - 8px);
         padding: 0 12px;
         outline: none;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
@@ -349,9 +355,9 @@ export const tableStyles: CSSResult[] = [
         padding: 6px 8px;
         font-size: 13px;
         border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
       .actionsContainer {
         display: flex;
@@ -389,12 +395,12 @@ export const tableStyles: CSSResult[] = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 52px;
-        padding: 0 24px;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        height: 32px;
+        padding: 0 16px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .tableStatistics {
@@ -409,9 +415,10 @@ export const tableStyles: CSSResult[] = [
       .footerActions .footerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
+        gap: 4px;
+        padding: 2px 8px;
         font-weight: 500;
+        font-size: 11px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         border-radius: 6px;
         cursor: pointer;

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

@@ -3,3 +3,4 @@ export * from './dees-dataview-codebox/index.js';
 export * from './dees-dataview-statusobject/index.js';
 export * from './dees-table/index.js';
 export * from './dees-statsgrid/index.js';
+export * from './dees-storage-browser/index.js';

ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts

@@ -89,7 +89,7 @@ export class DeesProgressbar extends DeesElement {
   }
 
   public async updatePercentage() {
-    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    const progressBarFill = this.shadowRoot!.querySelector('.progressBarFill') as HTMLElement;
     progressBarFill.style.width = `${this.percentage}%`;
   }
 

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

@@ -1,3 +1,85 @@
 import { html } from '@design.estate/dees-element';
 
-export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 24px;
+    }
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .demo-section h3 {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #888;
+    }
+    .demo-row {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Basic Usage</h3>
+      <div class="demo-row">
+        <dees-form-submit>Submit Form</dees-form-submit>
+        <dees-form-submit text="With Text Property"></dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>With Icons (inherited from DeesButton)</h3>
+      <div class="demo-row">
+        <dees-form-submit icon="lucide:send">Submit</dees-form-submit>
+        <dees-form-submit icon="lucide:save" iconPosition="left">Save Form</dees-form-submit>
+        <dees-form-submit icon="lucide:arrow-right" iconPosition="right">Continue</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Button Types</h3>
+      <div class="demo-row">
+        <dees-form-submit type="highlighted" icon="lucide:send">Highlighted</dees-form-submit>
+        <dees-form-submit type="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit type="discreet" icon="lucide:send">Discreet</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Sizes</h3>
+      <div class="demo-row">
+        <dees-form-submit size="small" icon="lucide:send">Small</dees-form-submit>
+        <dees-form-submit size="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit size="large" icon="lucide:send">Large</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>States</h3>
+      <div class="demo-row">
+        <dees-form-submit status="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit status="pending" icon="lucide:send">Pending</dees-form-submit>
+        <dees-form-submit status="success" icon="lucide:check">Success</dees-form-submit>
+        <dees-form-submit status="error" icon="lucide:x">Error</dees-form-submit>
+        <dees-form-submit disabled icon="lucide:send">Disabled</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>In a Form Context</h3>
+      <dees-form>
+        <dees-input-text label="Name" key="name"></dees-input-text>
+        <dees-input-text label="Email" key="email"></dees-input-text>
+        <dees-form-submit icon="lucide:send" type="highlighted">Submit Form</dees-form-submit>
+      </dees-form>
+    </div>
+  </div>
+`;

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

@@ -6,6 +6,7 @@ import {
   css,
   cssManager,
   property,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 import type { DeesForm } from '../dees-form/dees-form.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -21,38 +22,61 @@ export class DeesFormSubmit extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Form', 'Button'];
 
-  @property({
-    type: Boolean,
-    reflect: true,
-  })
+  // =============================================
+  // Properties forwarded to internal dees-button
+  // =============================================
+
+  @property({ type: Boolean, reflect: true })
   accessor disabled = false;
 
-  @property({
-    type: String,
-  })
-  accessor text: string;
+  @property({ type: String })
+  accessor text!: string;
 
-  @property({
-    type: String,
-  })
+  @property({ type: String })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  @property({ type: String, reflect: true })
+  accessor type: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+
+  @property({ type: String, reflect: true })
+  accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
+
+  @property({ type: String })
+  accessor icon!: string;
+
+  @property({ type: String })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
   constructor() {
     super();
   }
-  
-  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-    `];
 
-  public render() {
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      dees-button {
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
     return html`
       <dees-button
-        status="${this.status}"
-        @click="${this.submit}"
-        ?disabled="${this.disabled}"
+        .status=${this.status}
+        .type=${this.type}
+        .size=${this.size}
+        .icon=${this.icon}
+        .iconPosition=${this.iconPosition}
+        .text=${this.text}
+        ?disabled=${this.disabled}
+        @clicked=${this.submit}
       >
-        ${this.text || html`<slot></slot>`}
+        <slot></slot>
       </dees-button>
     `;
   }

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

@@ -57,10 +57,10 @@ export const demoFunc = () => html`
       const outputDiv = elementArg.querySelector('.form-output');
       
       if (form && outputDiv) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Form submitted with data:', data);
-          
+
           // Show processing state
           form.setStatus('pending', 'Processing your registration...');
           outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
@@ -75,7 +75,7 @@ export const demoFunc = () => html`
           await domtools.plugins.smartdelay.delayFor(2000);
           form.reset();
           outputDiv.innerHTML = '<em>Form has been reset</em>';
-        });
+        }) as unknown as EventListener);
         
         // Track individual field changes
         const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
@@ -158,14 +158,14 @@ export const demoFunc = () => html`
         console.log('Horizontal form layout active');
         
         // Monitor filter changes
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           const filters = event.detail.data;
           console.log('Filter applied:', filters);
-          
+
           // Simulate search
           const resultsCount = Math.floor(Math.random() * 100) + 1;
           console.log(`Found ${resultsCount} results with filters:`, filters);
-        });
+        }) as unknown as EventListener);
         
         // Setup real-time filter updates
         const inputs = form.querySelectorAll('[key]');
@@ -224,7 +224,7 @@ export const demoFunc = () => html`
       const statusDiv = elementArg.querySelector('#status-display');
       
       if (form) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Advanced form data:', data);
           
@@ -252,7 +252,7 @@ export const demoFunc = () => html`
           }
           
           console.log('Form data logged:', data);
-        });
+        }) as unknown as EventListener);
         
         // Monitor file uploads
         const fileUpload = form.querySelector('dees-input-fileupload');

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

@@ -1,6 +1,7 @@
 import {
   customElement,
   html,
+  css,
   type TemplateResult,
   DeesElement,
   type CSSResult,
@@ -21,6 +22,10 @@ import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle
 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 { DeesInputTags } from '../../00group-input/dees-input-tags/dees-input-tags.js';
+import { DeesInputList } from '../../00group-input/dees-input-list/dees-input-list.js';
+import { DeesInputWysiwyg } from '../../00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputRichtext } from '../../00group-input/dees-input-richtext/component.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
 import { DeesTable } from '../../00group-dataview/dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
@@ -40,6 +45,10 @@ const FORM_INPUT_TYPES = [
   DeesInputText,
   DeesInputToggle,
   DeesInputTypelist,
+  DeesInputTags,
+  DeesInputList,
+  DeesInputWysiwyg,
+  DeesInputRichtext,
   DeesTable,
 ];
 
@@ -57,6 +66,10 @@ export type TFormInputElement =
   | DeesInputText
   | DeesInputToggle
   | DeesInputTypelist
+  | DeesInputTags
+  | DeesInputList
+  | DeesInputWysiwyg
+  | DeesInputRichtext
   | DeesTable<any>;
 
 declare global {
@@ -81,13 +94,25 @@ export class DeesForm extends DeesElement {
   @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
   accessor horizontalLayout: boolean = false;
 
+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      :host([horizontal-layout]) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      <style>
-        :host {
-          display: contents;
-        }
-      </style>
       <slot></slot>
     `;
   }
@@ -110,13 +135,14 @@ export class DeesForm extends DeesElement {
   }
 
   public getFormElements(): Array<TFormInputElement> {
-    return Array.from(this.children).filter((child) =>
+    // Use querySelectorAll('*') to find form inputs nested inside wrapper elements (e.g. <div>)
+    return Array.from(this.querySelectorAll('*')).filter((child) =>
       FORM_INPUT_TYPES.includes(child.constructor as any)
     ) as unknown as TFormInputElement[];
   }
 
   public getSubmitButton(): DeesFormSubmit | undefined {
-    return Array.from(this.children).find(
+    return Array.from(this.querySelectorAll('*')).find(
       (child) => child instanceof DeesFormSubmit
     ) as DeesFormSubmit;
   }
@@ -130,8 +156,9 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
-    if (this.getSubmitButton()) {
-      this.getSubmitButton().disabled = !requiredOK;
+    const submitButton = this.getSubmitButton();
+    if (submitButton) {
+      submitButton.disabled = !requiredOK;
     }
   }
 
@@ -174,6 +201,7 @@ export class DeesForm extends DeesElement {
   ) {
     const inputChildren = this.getFormElements();
     const submitButton = this.getSubmitButton();
+    if (!submitButton) return;
 
     switch (visualStateArg) {
       case 'normal':
@@ -214,7 +242,6 @@ export class DeesForm extends DeesElement {
    */
   reset() {
     const inputChildren = this.getFormElements();
-    const submitButton = this.getSubmitButton();
 
     for (const inputChild of inputChildren) {
       inputChild.value = null;

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

@@ -31,10 +31,10 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
    * Common properties for all inputs
    */
   @property({ type: String })
-  accessor key: string;
+  accessor key!: string;
 
   @property({ type: String })
-  accessor label: string;
+  accessor label!: string;
 
   @property({ type: Boolean })
   accessor required: boolean = false;
@@ -43,7 +43,7 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
   accessor disabled: boolean = false;
 
   @property({ type: String })
-  accessor description: string;
+  accessor description!: string;
 
   /**
    * Common styles for all input components
@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
         /* CSS Variables for consistent spacing */
         :host {
           --dees-input-spacing-unit: 8px;
-          --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-          --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
           --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
         }
 
-        /* Default vertical stacking mode (for forms) */
+        /* Default block display with no margins - spacing is container-driven */
         :host {
           display: block;
           margin: 0;
-          margin-bottom: var(--dees-input-vertical-gap);
-        }
-
-        /* Last child in container should have no bottom margin */
-        :host(:last-child) {
-          margin-bottom: 0;
         }
 
         /* Horizontal layout mode - activated by attribute */
         :host([layout-mode="horizontal"]) {
           display: inline-block;
-          margin: 0;
-          margin-right: var(--dees-input-horizontal-gap);
-          margin-bottom: 0;
         }
 
-        :host([layout-mode="horizontal"]:last-child) {
-          margin-right: 0;
-        }
-
-        /* Auto mode - inherit from parent dees-form if present */
-
         /* Label position variations */
         :host([label-position="left"]) .input-wrapper {
           display: grid;

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

@@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   }
 
   public focus(): void {
-    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    const checkboxDiv = this.shadowRoot!.querySelector('.checkbox');
     if (checkboxDiv) {
       (checkboxDiv as any).focus();
     }

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

@@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 
@@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         min-height: 0;
       }
 
-      .code-container {
-        display: flex;
-        flex-direction: column;
+      dees-tile {
         flex: 1;
         min-height: 0;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
       }
 
       .toolbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
         gap: 8px;
       }
 
@@ -149,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: all 0.15s ease;
       }
 
       .language-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-dropdown {
@@ -166,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
         top: 100%;
         left: 0;
         margin-top: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         z-index: 100;
@@ -180,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 8px 12px;
         font-size: 12px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: background 0.15s ease;
       }
 
       .language-option:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-option.selected {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-active);
       }
 
       .toolbar-button {
@@ -202,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
         border: none;
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.success {
@@ -221,9 +214,8 @@ export class DeesInputCode extends DeesInputBase<string> {
       }
 
       .editor-wrapper {
-        position: relative;
-        flex: 1;
-        min-height: 0;
+        position: absolute;
+        inset: 0;
       }
 
       dees-workspace-monaco {
@@ -234,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .toolbar-divider {
         width: 1px;
         height: 20px;
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 
@@ -256,8 +248,8 @@ export class DeesInputCode extends DeesInputBase<string> {
       </style>
       <div class="input-wrapper">
         <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
-        <div class="code-container">
-          <div class="toolbar">
+        <dees-tile>
+          <div slot="header" class="toolbar">
             <div class="toolbar-left">
               <div class="language-selector">
                 <button
@@ -322,7 +314,7 @@ export class DeesInputCode extends DeesInputBase<string> {
               @content-change=${this.handleContentChange}
             ></dees-workspace-monaco>
           </div>
-        </div>
+        </dees-tile>
       </div>
     `;
   }
@@ -610,20 +602,20 @@ export class DeesInputCode extends DeesInputBase<string> {
         {
           name: 'Cancel',
           action: async (modalRef) => {
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
         {
           name: 'Save & Close',
           action: async (modalRef) => {
             // Get the editor content from the modal
-            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+            modalEditorElement = modalRef!.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
             if (modalEditorElement) {
               const editor = await modalEditorElement.editorDeferred.promise;
               const newValue = editor.getValue();
               this.setValue(newValue);
             }
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
       ],

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

@@ -47,9 +47,9 @@ export const demoFunc = () => html`
       const datePicker = elementArg.querySelector('dees-input-datepicker');
       
       if (datePicker) {
-        datePicker.addEventListener('change', (event: CustomEvent) => {
+        datePicker.addEventListener('change', ((event: CustomEvent) => {
           console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
@@ -66,17 +66,17 @@ export const demoFunc = () => html`
       const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
       
       if (dateTimePicker) {
-        dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+        dateTimePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('24h format datetime:', value);
-        });
+        }) as EventListener);
       }
       
       if (appointmentPicker) {
-        appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+        appointmentPicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('12h format datetime:', value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
@@ -102,14 +102,14 @@ export const demoFunc = () => html`
       const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
       
       timezonePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           console.log(`${target.label} value:`, target.value);
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} formatted:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
@@ -140,7 +140,7 @@ export const demoFunc = () => html`
       
       if (futureDatePicker) {
         // Show the min/max constraints in action
-        futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+        futureDatePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           if (value) {
             const selectedDate = new Date(value);
@@ -148,7 +148,7 @@ export const demoFunc = () => html`
             const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
             console.log(`Selected date is ${daysDiff} days from today`);
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
@@ -171,14 +171,14 @@ export const demoFunc = () => html`
       
       const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
       datePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           // Log the formatted value that's displayed in the input
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} format:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
@@ -268,7 +268,7 @@ export const demoFunc = () => html`
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Generate weekend dates for the current month
       const generateWeekends = () => {
-        const weekends = [];
+        const weekends: string[] = [];
         const now = new Date();
         const year = now.getFullYear();
         const month = now.getMonth();
@@ -286,7 +286,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.disabledDates = generateWeekends();
+        (picker as DeesInputDatepicker).disabledDates = generateWeekends();
         console.log('Disabled weekend dates for current month');
       }
     }}>
@@ -344,7 +344,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.events = sampleEvents;
+        (picker as DeesInputDatepicker).events = sampleEvents;
         console.log('Calendar events loaded:', sampleEvents);
       }
     }}>
@@ -371,7 +371,7 @@ export const demoFunc = () => html`
       const output = elementArg.querySelector('#event-output');
       
       if (picker && output) {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           const value = target.value;
           if (value) {
@@ -379,16 +379,16 @@ export const demoFunc = () => html`
             // Get the formatted value from the input element
             const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
             const formattedValue = input?.value || 'N/A';
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Event triggered!</strong><br>
               ISO Value: ${value}<br>
               Formatted: ${formattedValue}<br>
               Date object: ${date.toLocaleString()}
             `;
           } else {
-            output.innerHTML = '<em>Date cleared</em>';
+            (output as HTMLElement).innerHTML = '<em>Date cleared</em>';
           }
-        });
+        }) as EventListener);
         
         picker.addEventListener('blur', () => {
           console.log('Datepicker lost focus');

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

@@ -31,6 +31,12 @@ export const demoFunc = () => html`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .spacer {
         height: 200px;
         display: flex;
@@ -50,43 +56,45 @@ export const demoFunc = () => html`
       
       // Log when country changes
       if (countryDropdown) {
-        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        countryDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Country selected:', event.detail);
-        });
+        }) as EventListener);
       }
       
       // Log when role changes
       if (roleDropdown) {
-        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        roleDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Role selected:', event.detail);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <dees-input-dropdown
-          .label=${'Select Country'}
-          .options=${[
-            { option: 'United States', key: 'us' },
-            { option: 'Canada', key: 'ca' },
-            { option: 'Germany', key: 'de' },
-            { option: 'France', key: 'fr' },
-            { option: 'United Kingdom', key: 'uk' },
-            { option: 'Australia', key: 'au' },
-            { option: 'Japan', key: 'jp' },
-            { option: 'Brazil', key: 'br' }
-          ]}
-          .selectedOption=${{ option: 'United States', key: 'us' }}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Select Role'}
-          .options=${[
-            { option: 'Administrator', key: 'admin' },
-            { option: 'Editor', key: 'editor' },
-            { option: 'Viewer', key: 'viewer' },
-            { option: 'Guest', key: 'guest' }
-          ]}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Select Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+              { option: 'Australia', key: 'au' },
+              { option: 'Japan', key: 'jp' },
+              { option: 'Brazil', key: 'br' }
+            ]}
+            .selectedOption=${{ option: 'United States', key: 'us' }}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Select Role'}
+            .options=${[
+              { option: 'Administrator', key: 'admin' },
+              { option: 'Editor', key: 'editor' },
+              { option: 'Viewer', key: 'viewer' },
+              { option: 'Guest', key: 'guest' }
+            ]}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -95,9 +103,9 @@ export const demoFunc = () => html`
       const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (priorityDropdown) {
-        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        priorityDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log(`Priority changed to: ${event.detail.option}`);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
@@ -120,10 +128,10 @@ export const demoFunc = () => html`
       
       // Log all changes from horizontal dropdowns
       dropdowns.forEach((dropdown) => {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const label = dropdown.getAttribute('label');
           console.log(`${label}: ${event.detail.option}`);
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
@@ -176,24 +184,26 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <dees-input-dropdown
-          .label=${'Required Field'}
-          .required=${true}
-          .options=${[
-            { option: 'Option A', key: 'a' },
-            { option: 'Option B', key: 'b' },
-            { option: 'Option C', key: 'c' }
-          ]}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Disabled Dropdown'}
-          .disabled=${true}
-          .options=${[
-            { option: 'Cannot Select', key: 'disabled' }
-          ]}
-          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Required Field'}
+            .required=${true}
+            .options=${[
+              { option: 'Option A', key: 'a' },
+              { option: 'Option B', key: 'b' },
+              { option: 'Option C', key: 'c' }
+            ]}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Disabled Dropdown'}
+            .disabled=${true}
+            .options=${[
+              { option: 'Cannot Select', key: 'disabled' }
+            ]}
+            .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -206,9 +216,9 @@ export const demoFunc = () => html`
       const dropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (dropdown) {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Bottom dropdown selected:', event.detail);
-        });
+        }) as EventListener);
         
         // Note: The dropdown automatically detects available space
         // and opens upward when near the bottom of the viewport
@@ -238,16 +248,16 @@ export const demoFunc = () => html`
         output.innerHTML = '<em>Select a product to see details...</em>';
         
         // Handle dropdown changes
-        dropdown.addEventListener('change', (event: CustomEvent) => {
+        dropdown.addEventListener('change', ((event: CustomEvent) => {
           if (event.detail.value) {
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Selected:</strong> ${event.detail.value.option}<br>
               <strong>Key:</strong> ${event.detail.value.key}<br>
               <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
               <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
             `;
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
@@ -271,20 +281,20 @@ export const demoFunc = () => html`
       const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
       
       if (form) {
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           console.log('Form submitted with data:', event.detail.data);
-        });
+        }) as EventListener);
       }
       
       if (projectTypeDropdown && frameworkDropdown) {
         // Filter frameworks based on project type
-        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        projectTypeDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const selectedType = event.detail.key;
           console.log(`Project type changed to: ${selectedType}`);
-          
+
           // In a real app, you could filter the framework options based on project type
           // For demo purposes, we just log the change
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>

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

@@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   accessor options: { option: string; key: string; payload?: any }[] = [];
 
   @property()
-  accessor selectedOption: { option: string; key: string; payload?: any } = null;
+  accessor selectedOption: { option: string; key: string; payload?: any } | null = null;
 
   // Add value property for form compatibility
   public get value() {
     return this.selectedOption;
   }
 
-  public set value(val: { option: string; key: string; payload?: any }) {
+  public set value(val: { option: string; key: string; payload?: any } | null) {
     this.selectedOption = val;
   }
 
@@ -372,7 +372,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     
     if (this.isOpened) {
       // Check available space and set position
-      const selectedBox = this.shadowRoot.querySelector('.selectedBox') as HTMLElement;
+      const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
       const rect = selectedBox.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
       const spaceAbove = rect.top;
@@ -382,7 +382,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       
       // Focus search input if present
       await this.updateComplete;
-      const searchInput = this.shadowRoot.querySelector('.search input') as HTMLInputElement;
+      const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
       if (searchInput) {
         searchInput.focus();
       }
@@ -455,7 +455,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     }
   }
 
-  public getValue(): { option: string; key: string; payload?: any } {
+  public getValue(): { option: string; key: string; payload?: any } | null {
     return this.selectedOption;
   }
 

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

@@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   accessor maxFiles: number = 0; // 0 means no limit
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   accessor validationMessage: string = '';
 
@@ -266,7 +266,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.addEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.addEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 
@@ -275,7 +275,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 

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

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .payment-group {
           display: flex;
           align-items: center;
@@ -24,16 +30,18 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <dees-input-iban 
-          .label=${'Bank Account IBAN'} 
-          .description=${'Enter your International Bank Account Number'}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Verified IBAN'} 
-          .description=${'This IBAN has been verified'}
-          .value=${'DE89370400440532013000'}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Bank Account IBAN'}
+            .description=${'Enter your International Bank Account Number'}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Verified IBAN'}
+            .description=${'This IBAN has been verified'}
+            .value=${'DE89370400440532013000'}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
@@ -53,18 +61,20 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <dees-input-iban 
-          .label=${'Payment Account'} 
-          .description=${'Required for processing payments'}
-          .required=${true}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Locked IBAN'} 
-          .description=${'This IBAN cannot be changed'}
-          .value=${'FR1420041010050500013M02606'}
-          .disabled=${true}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Payment Account'}
+            .description=${'Required for processing payments'}
+            .required=${true}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Locked IBAN'}
+            .description=${'This IBAN cannot be changed'}
+            .value=${'FR1420041010050500013M02606'}
+            .disabled=${true}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>

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

@@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
 
   public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(_changedProperties);
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (deesInputText && deesInputText.changeSubject) {
       deesInputText.changeSubject.subscribe(() => {
         this.changeSubject.next(this);
@@ -81,8 +81,10 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
       }
     }
     this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
-    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
+    if (deesInputText) {
+      deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    }
   }
 
   public getValue(): string {

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

@@ -9,7 +9,6 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../00group-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -130,13 +129,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .list-item {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
         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: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
-        overflow: hidden; /* Prevent animation from affecting scroll bounds */
+        overflow: hidden;
       }
 
       .list-item:last-of-type {
@@ -181,8 +180,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .drag-handle dees-icon {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
       }
 
       .item-content {
@@ -195,15 +194,15 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .item-text {
         flex: 1;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 13px;
+        line-height: 18px;
         word-break: break-word;
       }
 
       .item-edit-input {
         flex: 1;
-        padding: 4px 8px;
-        font-size: 14px;
+        padding: 3px 6px;
+        font-size: 13px;
         font-family: inherit;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
@@ -222,8 +221,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
         border-radius: 4px;
         background: transparent;
         border: none;
@@ -262,34 +261,29 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .action-button dees-icon {
-        width: 14px;
-        height: 14px;
+        width: 13px;
+        height: 13px;
       }
 
       .add-item-container {
         display: flex;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
         background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
         border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .add-input {
         flex: 1;
-        padding: 8px 12px;
-        font-size: 14px;
+        padding: 4px 8px;
+        font-size: 13px;
+        line-height: 18px;
         font-family: inherit;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
+        background: transparent;
+        border: none;
         outline: none;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        transition: all 0.15s ease;
-      }
-
-      .add-input:focus {
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-        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)')};
+        min-width: 0;
       }
 
       .add-input::placeholder {
@@ -302,29 +296,54 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .add-button {
-        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .add-button:hover:not(:disabled) {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .add-button:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+
+      .add-button dees-icon {
+        width: 14px;
+        height: 14px;
       }
 
       .empty-state {
-        padding: 32px 16px;
+        padding: 16px 10px;
         text-align: center;
         color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
-        font-size: 14px;
-        font-style: italic;
+        font-size: 13px;
       }
 
       .validation-message {
         color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
       }
 
       .description {
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
       }
 
       /* Scrollbar styling */
@@ -429,13 +448,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                 @keydown=${this.handleAddKeyDown}
                 ?disabled=${this.disabled}
               />
-              <dees-button
+              <button
                 class="add-button"
                 @click=${this.addItem}
                 ?disabled=${!this.inputValue.trim()}
               >
-                <dees-icon .icon=${'lucide:plus'}></dees-icon> Add
-              </dees-button>
+                <dees-icon .icon=${'lucide:plus'}></dees-icon>
+              </button>
             </div>
           ` : ''}
         </div>

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

@@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   private indicatorInitialized = false;
 
   public async setIndicator() {
-    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+    const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator');
     const selectedIndex = this.options.indexOf(this.selectedOption);
-    
+
     // If no valid selection, hide indicator
     if (selectedIndex === -1 || !indicator) {
       if (indicator) {
@@ -221,8 +221,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
       }
       return;
     }
-    
-    const option: HTMLDivElement = this.shadowRoot.querySelector(
+
+    const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
       `.option:nth-child(${selectedIndex + 2})`
     );
     

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

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -24,18 +30,20 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <dees-input-phone 
-          .label=${'Phone Number'} 
-          .description=${'Enter your phone number with country code'}
-          .value=${'5551234567'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Contact Phone'} 
-          .description=${'Required for account verification'}
-          .required=${true}
-          .placeholder=${'+1 (555) 000-0000'}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'Phone Number'}
+            .description=${'Enter your phone number with country code'}
+            .value=${'5551234567'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Contact Phone'}
+            .description=${'Required for account verification'}
+            .required=${true}
+            .placeholder=${'+1 (555) 000-0000'}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,17 +63,19 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <dees-input-phone 
-          .label=${'International Contact'} 
-          .description=${'Automatically formats international numbers'}
-          .value=${'441234567890'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Emergency Contact'} 
-          .value=${'911'}
-          .disabled=${true}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'International Contact'}
+            .description=${'Automatically formats international numbers'}
+            .value=${'441234567890'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Emergency Contact'}
+            .value=${'911'}
+            .disabled=${true}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>

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

@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
     }
     
     // Subscribe to the inner input's changes
-    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (innerInput && innerInput.changeSubject) {
       innerInput.changeSubject.subscribe(() => {
         this.changeSubject.next(this);

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

@@ -14,6 +14,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .shopping-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -60,17 +66,19 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <dees-input-quantityselector
-          .label=${'Quantity'}
-          .description=${'Select the desired quantity'}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Items in Cart'}
-          .description=${'Adjust the quantity of items'}
-          .value=${3}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Quantity'}
+            .description=${'Select the desired quantity'}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Items in Cart'}
+            .description=${'Adjust the quantity of items'}
+            .value=${3}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -169,19 +177,21 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <dees-input-quantityselector
-          .label=${'Number of Licenses'}
-          .description=${'Select how many licenses you need'}
-          .required=${true}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Fixed Quantity'}
-          .description=${'This quantity cannot be changed'}
-          .disabled=${true}
-          .value=${5}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Number of Licenses'}
+            .description=${'Select how many licenses you need'}
+            .required=${true}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Fixed Quantity'}
+            .description=${'This quantity cannot be changed'}
+            .disabled=${true}
+            .value=${5}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>

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

@@ -23,6 +23,12 @@ export const demoFunc = () => html`
           margin-bottom: 0;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .demo-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -60,20 +66,22 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <dees-input-radiogroup
-          .label=${'Do you agree with the terms?'}
-          .options=${['Yes', 'No', 'Maybe']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Yes'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Experience Level'}
-          .options=${['Beginner', 'Intermediate', 'Expert']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Intermediate'}
-          .description=${'Select your experience level with web development'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Do you agree with the terms?'}
+            .options=${['Yes', 'No', 'Maybe']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Yes'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Experience Level'}
+            .options=${['Beginner', 'Intermediate', 'Expert']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Intermediate'}
+            .description=${'Select your experience level with web development'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -132,30 +140,32 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <dees-input-radiogroup
-          .label=${'Theme Preference'}
-          .options=${[
-            { option: 'Light Theme', key: 'light', payload: 'light' },
-            { option: 'Dark Theme', key: 'dark', payload: 'dark' },
-            { option: 'System Default', key: 'system', payload: 'auto' }
-          ]}
-          .selectedOption=${'dark'}
-          .description=${'Choose how the application should appear'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Notification Frequency'}
-          .options=${['All Notifications', 'Important Only', 'None']}
-          .selectedOption=${'Important Only'}
-          .description=${'Control how often you receive notifications'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Language'}
-          .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
-          .selectedOption=${'English'}
-          .direction=${'horizontal'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Theme Preference'}
+            .options=${[
+              { option: 'Light Theme', key: 'light', payload: 'light' },
+              { option: 'Dark Theme', key: 'dark', payload: 'dark' },
+              { option: 'System Default', key: 'system', payload: 'auto' }
+            ]}
+            .selectedOption=${'dark'}
+            .description=${'Choose how the application should appear'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Notification Frequency'}
+            .options=${['All Notifications', 'Important Only', 'None']}
+            .selectedOption=${'Important Only'}
+            .description=${'Control how often you receive notifications'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Language'}
+            .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
+            .selectedOption=${'English'}
+            .direction=${'horizontal'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>

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

@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   accessor direction: 'vertical' | 'horizontal' = 'vertical';
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   // Form compatibility
   public get value() {
@@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   }
 
   private focusNextOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const nextIndex = (currentIndex + 1) % radioCircles.length;
     (radioCircles[nextIndex] as HTMLElement).focus();
   }
 
   private focusPreviousOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
     (radioCircles[prevIndex] as HTMLElement).focus();
   }

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

@@ -16,6 +16,7 @@ import {
 
 import type { Editor } from '@tiptap/core';
 import { DeesServiceLibLoader, type ITiptapBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -58,11 +59,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
   @state()
   accessor wordCount: number = 0;
 
-  private editorElement: HTMLElement;
-  private linkInputElement: HTMLInputElement;
+  private editorElement!: HTMLElement;
+  private linkInputElement!: HTMLInputElement;
   private tiptapBundle: ITiptapBundle | null = null;
 
-  public editor: Editor;
+  public editor!: Editor;
 
   public static styles = richtextStyles;
 
@@ -235,9 +236,10 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     // Load Tiptap from CDN
     this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap();
 
-    this.editorElement = this.shadowRoot.querySelector('.editor-content');
-    this.linkInputElement = this.shadowRoot.querySelector('.link-input input');
+    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
+    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
+    this.requestUpdate();
   }
 
   private initializeEditor(): void {
@@ -269,6 +271,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       onUpdate: ({ editor }) => {
         this.value = editor.getHTML();
         this.updateWordCount();
+        this.changeSubject.next(this.value);
         this.dispatchEvent(
           new CustomEvent('input', {
             detail: { value: this.value },

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

@@ -1,7 +1,9 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const richtextStyles = [
+    themeDefaultStyles,
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
@@ -20,25 +22,18 @@ export const richtextStyles = [
         margin-bottom: 8px;
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
-      .editor-container {
-        display: flex;
-        flex-direction: column;
-        min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        overflow: hidden;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      dees-tile {
+        min-height: 200px;
       }
 
-      .editor-container:hover {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
-      .editor-container.focused {
+      dees-tile.focused::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
       }
@@ -47,9 +42,7 @@ export const richtextStyles = [
         display: flex;
         flex-wrap: wrap;
         gap: 4px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
         align-items: center;
         position: relative;
       }
@@ -77,8 +70,8 @@ export const richtextStyles = [
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .toolbar-button.active {
@@ -94,22 +87,24 @@ export const richtextStyles = [
       .toolbar-divider {
         width: 1px;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 
       .editor-content {
-        flex: 1;
+        position: absolute;
+        inset: 0;
         padding: 16px;
         overflow-y: auto;
-        min-height: var(--min-height, 200px);
       }
 
       .editor-content .ProseMirror {
         outline: none;
         line-height: 1.6;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         min-height: 100%;
+        white-space: pre-wrap;
+        word-wrap: break-word;
       }
 
       .editor-content .ProseMirror p {
@@ -156,7 +151,7 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 4px solid var(--dees-color-border-default);
         margin: 1em 0;
         padding-left: 1em;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -164,12 +159,12 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 3px;
         padding: 0.2em 0.4em;
         font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.9em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .editor-content .ProseMirror pre {
@@ -199,14 +194,15 @@ export const richtextStyles = [
       }
 
       .editor-footer {
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
         display: flex;
         justify-content: space-between;
         align-items: center;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .word-count {
@@ -219,8 +215,8 @@ export const richtextStyles = [
         top: 100%;
         left: 0;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         padding: 12px;
@@ -234,12 +230,12 @@ export const richtextStyles = [
       .link-input input {
         width: 100%;
         padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         outline: none;
         font-size: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
@@ -256,19 +252,19 @@ export const richtextStyles = [
 
       .link-input-buttons button {
         padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        background: var(--dees-color-bg-primary);
         cursor: pointer;
         font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
         font-weight: 500;
       }
 
       .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .link-input-buttons button.primary {
@@ -289,7 +285,7 @@ export const richtextStyles = [
         line-height: 1.4;
       }
 
-      :host([disabled]) .editor-container {
+      :host([disabled]) dees-tile {
         opacity: 0.6;
         cursor: not-allowed;
       }