@design.estate/dees-catalog 1.11.6 → 1.11.7

package/readme.md

@@ -1,432 +1,1395 @@
-# @design.estate/dees-catalog 🎨
-> **A comprehensive web components library built with TypeScript and LitElement**  
-> 75+ Production-ready UI components for building modern web applications with consistent design and behavior
+# @design.estate/dees-catalog
+A comprehensive web components library built with TypeScript and LitElement, providing 75+ UI components for building modern web applications with consistent design and behavior.
 
-[![npm version](https://img.shields.io/npm/v/@design.estate/dees-catalog.svg)](https://www.npmjs.com/package/@design.estate/dees-catalog)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
-[![Web Components](https://img.shields.io/badge/Web%20Components-Ready-green.svg)](https://www.webcomponents.org/)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+## Development Guide
+For developers working on this library, please refer to the [UI Components Playbook](readme.playbook.md) for comprehensive patterns, best practices, and architectural guidelines.
 
-## 🚀 Quick Start
+## Install
+To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager:
 
 ```bash
-# Install with npm
 npm install @design.estate/dees-catalog
+```
+
+## Components Overview
+
+| Category | Components |
+|----------|------------|
+| Core UI | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
+| Forms | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
+| Layout | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiMainselector`](#deesappuimainselector), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| Data Display | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| Visualization | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
+| Dialogs & Overlays | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
+| Navigation | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
+| Development | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| Auth & Utilities | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
+| Shopping | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
+
+## Detailed Component Documentation
+
+### Core UI Components
 
-# Or with pnpm (recommended)
-pnpm add @design.estate/dees-catalog
+#### `DeesButton`
+A versatile button component supporting multiple styles and states.
 
-# Or with yarn
-yarn add @design.estate/dees-catalog
+```typescript
+// Basic usage
+const button = document.createElement('dees-button');
+button.text = 'Click me';
+
+// With options
+<dees-button
+  type="highlighted"  // Options: normal, highlighted, discreet
+  status="pending"    // Options: normal, pending, success, error
+  disabled={false}    // Optional: disables the button
+  @click=${handleClick}
+>Click me</dees-button>
 ```
 
-### Basic Usage
+#### `DeesBadge`
+Display status indicators or counts with customizable styles.
 
 ```typescript
-// Import components you need
-import { DeesButton, DeesForm, DeesInputText } from '@design.estate/dees-catalog';
+<dees-badge
+  type="success"  // Options: default, primary, success, warning, error
+  text="New"      // Text to display
+  rounded        // Optional: applies rounded corners
+></dees-badge>
+```
 
-// Use in your HTML or framework
-<dees-form @formData=${handleSubmit}>
-  <dees-input-text 
-    label="Your Name" 
-    required
-  ></dees-input-text>
-  <dees-button type="highlighted">
-    Submit
-  </dees-button>
-</dees-form>
+#### `DeesChips`
+Interactive chips/tags with selection capabilities.
+
+```typescript
+<dees-chips
+  selectionMode="multiple"  // Options: none, single, multiple
+  chipsAreRemovable        // Optional: allows removing chips
+  .selectableChips=${[
+    { key: 'tag1', value: 'Important' },
+    { key: 'tag2', value: 'Urgent' }
+  ]}
+  @selection-change=${handleSelection}
+></dees-chips>
 ```
 
-## 📦 What's Inside?
+#### `DeesIcon`
+Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
-### Component Categories at a Glance
+```typescript
+// FontAwesome icons - use 'fa:' prefix
+<dees-icon
+  icon="fa:check"       // FontAwesome icon with fa: prefix
+  iconSize="24"         // Size in pixels
+  color="#22c55e"       // Optional: custom color
+></dees-icon>
+
+// Lucide icons - use 'lucide:' prefix  
+<dees-icon
+  icon="lucide:menu"    // Lucide icon with lucide: prefix
+  iconSize="24"         // Size in pixels
+  color="#007bff"       // Optional: custom color
+  strokeWidth="2"       // Optional: stroke width for Lucide icons
+></dees-icon>
+
+// Legacy API (deprecated but still supported)
+<dees-icon
+  iconFA="check"        // Without prefix - assumes FontAwesome
+></dees-icon>
+```
 
-| 🎯 Category | 📊 Count | 🔥 Popular Components |
-|------------|----------|----------------------|
-| **Core UI** | 15+ | Buttons, Icons, Badges, Labels, Panels |
-| **Forms** | 20+ | Text Input, Dropdown, Date Picker, WYSIWYG Editor |
-| **Layout** | 12+ | App Shell, Navigation, Dashboard Grid |
-| **Data Display** | 8+ | Tables, Charts, Stats Grid, Pagination |
-| **Overlays** | 5+ | Modals, Context Menus, Toasts |
-| **Development** | 6+ | Code Editor, Terminal, Markdown Editor |
+#### `DeesLabel`
+Text label component with optional icon and status indicators.
 
-## 🌟 Key Features
+```typescript
+<dees-label
+  text="Status"         // Label text
+  icon="info-circle"    // Optional: icon name
+  type="info"           // Options: default, info, success, warning, error
+  size="medium"         // Options: small, medium, large
+></dees-label>
+```
 
-- ✅ **100% TypeScript** - Full type safety and IntelliSense support
-- 🎨 **Theme System** - Built-in light/dark theme support
-- 📱 **Responsive** - Mobile-first design approach
-- ♿ **Accessible** - ARIA compliant with keyboard navigation
-- 🚀 **Performance** - Lazy loading and optimized rendering
-- 🔧 **Customizable** - CSS variables and property APIs
-- 🧩 **Framework Agnostic** - Works with any framework or vanilla JS
-- 📖 **Well Documented** - Comprehensive demos and examples
+#### `DeesSpinner`
+Loading indicator with customizable appearance.
 
-## 💡 Component Highlights
+```typescript
+<dees-spinner
+  size="medium"         // Options: small, medium, large
+  type="primary"        // Options: primary, secondary, light, dark
+  overlay              // Optional: adds a full-screen overlay
+></dees-spinner>
+```
 
-### 🎯 Core UI Components
+#### `DeesToast`
+Notification toast messages with various styles, positions, and auto-dismiss functionality.
 
-#### Buttons & Actions
 ```typescript
-// Beautiful button with multiple styles
-<dees-button 
-  type="highlighted"  // normal | highlighted | discreet
-  status="pending"    // normal | pending | success | error
-  @click=${handleClick}
->
-  Click Me
-</dees-button>
+// Programmatic usage
+DeesToast.show({
+  message: 'Operation successful',
+  type: 'success',      // Options: info, success, warning, error
+  duration: 3000,       // Time in milliseconds before auto-dismiss
+  position: 'top-right' // Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
+});
+
+// Convenience methods
+DeesToast.info('Information message');
+DeesToast.success('Success message');
+DeesToast.warning('Warning message');
+DeesToast.error('Error message');
+
+// Advanced control
+const toast = await DeesToast.show({
+  message: 'Processing...',
+  type: 'info',
+  duration: 0  // No auto-dismiss
+});
+
+// Later dismiss programmatically
+toast.dismiss();
+
+// Component usage (not typically used directly)
+<dees-toast
+  message="Changes saved"
+  type="success"
+  duration="3000"
+></dees-toast>
+```
+
+Key Features:
+- Multiple toast types with distinct icons and colors
+- 6 position options for flexible placement
+- Auto-dismiss with visual progress indicator
+- Manual dismiss by clicking
+- Smooth animations and transitions
+- Automatic stacking of multiple toasts
+- Theme-aware styling
+- Programmatic control
+
+#### `DeesButtonExit`
+Exit/close button component with consistent styling.
 
-// Button groups for related actions
+```typescript
+<dees-button-exit
+  @click=${handleClose}
+></dees-button-exit>
+```
+
+#### `DeesButtonGroup`
+Container for grouping related buttons together.
+
+```typescript
 <dees-button-group
   .buttons=${[
-    { text: 'Save', type: 'highlighted', action: save },
-    { text: 'Cancel', type: 'normal', action: cancel }
+    { text: 'Save', type: 'highlighted', action: handleSave },
+    { text: 'Cancel', type: 'normal', action: handleCancel }
   ]}
+  spacing="medium"    // Options: small, medium, large
 ></dees-button-group>
 ```
 
-#### Icons with Library Prefixes
+#### `DeesHeading`
+Consistent heading component with level and styling options.
+
 ```typescript
-// FontAwesome icons
-<dees-icon icon="fa:check" iconSize="24"></dees-icon>
+<dees-heading
+  level={1}           // 1-6 for H1-H6
+  text="Page Title"
+  .subheading=${'Optional subtitle'}
+  centered           // Optional: center alignment
+></dees-heading>
+```
 
-// Lucide icons  
-<dees-icon icon="lucide:menu" iconSize="24"></dees-icon>
+#### `DeesHint`
+Hint/tooltip component for providing contextual help.
+
+```typescript
+<dees-hint
+  text="This field is required"
+  type="info"        // Options: info, warning, error, success
+  position="top"     // Options: top, bottom, left, right
+></dees-hint>
 ```
 
-#### Toast Notifications
+#### `DeesPanel`
+Container component for grouping related content with optional title and actions.
+
 ```typescript
-// Show toast notifications programmatically
-DeesToast.success('Changes saved successfully!');
-DeesToast.error('Something went wrong');
-DeesToast.info('New update available');
+<dees-panel
+  .title=${'Panel Title'}
+  .subtitle=${'Optional subtitle'}
+  collapsible        // Optional: allow collapse/expand
+  collapsed={false}  // Initial collapsed state
+  .actions=${[
+    { icon: 'settings', action: handleSettings }
+  ]}
+>
+  <!-- Panel content -->
+</dees-panel>
+```
 
-// Advanced control
-const toast = await DeesToast.show({
-  message: 'Processing...',
-  type: 'info',
-  duration: 0  // No auto-dismiss
-});
-// Later...
-toast.dismiss();
+#### `DeesSearchbar`
+Search input component with suggestions and search handling.
+
+```typescript
+<dees-searchbar
+  placeholder="Search..."
+  .suggestions=${['item1', 'item2', 'item3']}
+  showClearButton    // Show clear button when has value
+  @search=${handleSearch}
+  @suggestion-select=${handleSuggestionSelect}
+></dees-searchbar>
 ```
 
-### 📝 Form Components
-
-#### Complete Form System
-```typescript
-<dees-form @formData=${(e) => console.log('Form data:', e.detail)}>
-  <!-- Text input with validation -->
-  <dees-input-text
-    key="email"
-    label="Email"
-    required
-    validationRegex="^[^@]+@[^@]+\.[^@]+$"
-  ></dees-input-text>
-
-  <!-- Date picker with constraints -->
-  <dees-input-datepicker
-    key="eventDate"
-    label="Event Date"
-    minDate="2025-01-01"
-    enableTime
-  ></dees-input-datepicker>
-
-  <!-- List management (NEW!) -->
-  <dees-input-list
-    key="features"
-    label="Product Features"
-    placeholder="Add feature..."
-    sortable
-    minItems={3}
-    maxItems={10}
-  ></dees-input-list>
-
-  <!-- Rich text editor -->
-  <dees-input-wysiwyg
-    key="description"
-    label="Description"
-  ></dees-input-wysiwyg>
+#### `DeesWindowcontrols`
+Window control buttons (minimize, maximize, close) for desktop-like applications.
+
+```typescript
+<dees-windowcontrols
+  .controls=${['minimize', 'maximize', 'close']}
+  @minimize=${handleMinimize}
+  @maximize=${handleMaximize}
+  @close=${handleClose}
+></dees-windowcontrols>
+```
+
+### Form Components
+
+#### `DeesForm`
+Container component for form elements with built-in validation and data handling.
 
+```typescript
+<dees-form
+  @formData=${(e) => handleFormData(e.detail)}  // Emitted when form is submitted
+  @formValidation=${(e) => handleValidation(e.detail)}  // Emitted during validation
+>
+  <dees-input-text required></dees-input-text>
   <dees-form-submit>Submit</dees-form-submit>
 </dees-form>
 ```
 
-### 🏗️ Layout Components
+#### `DeesInputText`
+Text input field with validation and formatting options.
+
+```typescript
+<dees-input-text
+  key="email"           // Unique identifier for form data
+  label="Email"         // Input label
+  value="initial@value.com"  // Initial value
+  required             // Makes the field required
+  disabled            // Disables the input
+  placeholder="Enter your email"
+></dees-input-text>
+```
+
+#### `DeesInputCheckbox`
+Checkbox input component for boolean values.
+
+```typescript
+<dees-input-checkbox
+  key="terms"
+  label="Accept Terms"
+  checked             // Initial checked state
+  required
+  @change=${handleChange}
+></dees-input-checkbox>
+```
+
+#### `DeesInputDropdown`
+Dropdown selection component with search and filtering capabilities.
+
+```typescript
+<dees-input-dropdown
+  key="country"
+  label="Select Country"
+  .options=${[
+    { key: 'us', option: 'United States' },
+    { key: 'uk', option: 'United Kingdom' }
+  ]}
+  searchable          // Enables search functionality
+  multiple           // Allows multiple selections
+></dees-input-dropdown>
+```
+
+#### `DeesInputFileupload`
+File upload component with drag-and-drop support.
+
+```typescript
+<dees-input-fileupload
+  key="documents"
+  label="Upload Files"
+  multiple            // Allow multiple file selection
+  accept=".pdf,.doc"  // Accepted file types
+  maxSize="5MB"      // Maximum file size
+  @upload=${handleUpload}
+></dees-input-fileupload>
+```
+
+#### `DeesInputIban`
+Specialized input for IBAN (International Bank Account Number) with validation.
+
+```typescript
+<dees-input-iban
+  key="bankAccount"
+  label="IBAN"
+  country="DE"        // Default country format
+  required
+  @validate=${handleIbanValidation}
+></dees-input-iban>
+```
+
+#### `DeesInputPhone`
+Phone number input with country code selection and formatting.
+
+```typescript
+<dees-input-phone
+  key="phone"
+  label="Phone Number"
+  defaultCountry="US"  // Default country code
+  required
+  @validate=${handlePhoneValidation}
+></dees-input-phone>
+```
+
+#### `DeesInputQuantitySelector`
+Numeric input with increment/decrement controls.
+
+```typescript
+<dees-input-quantity-selector
+  key="quantity"
+  label="Quantity"
+  min="0"             // Minimum value
+  max="100"           // Maximum value
+  step="1"            // Increment/decrement step
+  value="1"           // Initial value
+></dees-input-quantity-selector>
+```
+
+#### `DeesInputMultitoggle`
+Multi-state toggle button group.
+
+```typescript
+<dees-input-multitoggle
+  key="status"
+  label="Status"
+  .options=${[
+    { key: 'active', label: 'Active' },
+    { key: 'pending', label: 'Pending' },
+    { key: 'inactive', label: 'Inactive' }
+  ]}
+  value="active"      // Initial selected value
+></dees-input-multitoggle>
+```
+
+#### `DeesInputRadiogroup`
+Radio button group for single-choice selections with internal state management.
+
+```typescript
+<dees-input-radiogroup
+  key="plan"
+  label="Select Plan"
+  .options=${['Free', 'Pro', 'Enterprise']}
+  selectedOption="Pro"
+  required
+  @change=${handlePlanChange}
+></dees-input-radiogroup>
+
+// With custom option objects
+<dees-input-radiogroup
+  key="priority"
+  label="Priority Level"
+  .options=${[
+    { key: 'low', label: 'Low Priority' },
+    { key: 'medium', label: 'Medium Priority' },
+    { key: 'high', label: 'High Priority' }
+  ]}
+  selectedOption="medium"
+></dees-input-radiogroup>
+```
+
+#### `DeesInputTags`
+Tag input component for managing lists of tags with auto-complete and validation.
+
+```typescript
+<dees-input-tags
+  key="skills"
+  label="Skills"
+  .value=${['JavaScript', 'TypeScript', 'CSS']}
+  placeholder="Add a skill..."
+  .suggestions=${[
+    'JavaScript', 'TypeScript', 'Python', 'Go', 'Rust',
+    'React', 'Vue', 'Angular', 'Node.js', 'Docker'
+  ]}
+  maxTags={10}  // Optional: limit number of tags
+  required
+  @change=${handleTagsChange}
+></dees-input-tags>
+```
+
+Key Features:
+- Add tags by pressing Enter or typing comma/semicolon
+- Remove tags with click or backspace
+- Auto-complete suggestions with keyboard navigation
+- Maximum tag limit support
+- Full theme support
+- Form validation integration
+
+#### `DeesInputTypelist`
+Dynamic list input for managing arrays of typed values.
+
+```typescript
+<dees-input-typelist
+  key="features"
+  label="Product Features"
+  placeholder="Add a feature..."
+  .value=${['Feature 1', 'Feature 2']}
+  @change=${handleFeaturesChange}
+></dees-input-typelist>
+```
+
+#### `DeesInputDatepicker`
+Date and time picker component with calendar interface and manual typing support.
+
+```typescript
+<dees-input-datepicker
+  key="eventDate"
+  label="Event Date"
+  placeholder="YYYY-MM-DD"
+  value="2025-01-15T14:30:00Z"  // ISO string format
+  dateFormat="YYYY-MM-DD"        // Display format (default: YYYY-MM-DD)
+  enableTime={true}              // Enable time selection
+  timeFormat="24h"               // Options: 24h, 12h
+  minuteIncrement={15}           // Time step in minutes
+  minDate="2025-01-01"          // Minimum selectable date
+  maxDate="2025-12-31"          // Maximum selectable date
+  .disabledDates=${[            // Array of disabled dates
+    '2025-01-10', 
+    '2025-01-11'
+  ]}
+  weekStartsOn={1}              // 0 = Sunday, 1 = Monday
+  required
+  @change=${handleDateChange}
+></dees-input-datepicker>
+```
+
+Key Features:
+- Interactive calendar popup
+- Manual date typing with multiple formats
+- Optional time selection
+- Configurable date format
+- Min/max date constraints
+- Disable specific dates
+- Keyboard navigation
+- Today button
+- Clear functionality
+- 12/24 hour time formats
+- Theme-aware styling
+- Live parsing and validation
+
+Manual Input Formats:
+```typescript
+// Date formats supported
+"2023-12-20"     // ISO format (YYYY-MM-DD)
+"20.12.2023"     // European format (DD.MM.YYYY)
+"12/20/2023"     // US format (MM/DD/YYYY)
+
+// Date with time (add space and time after any date format)
+"2023-12-20 14:30"
+"20.12.2023 9:45"
+"12/20/2023 16:00"
+```
+
+The component automatically parses and validates input as you type, updating the internal date value when a valid date is recognized.
+
+#### `DeesInputSearchselect`
+Search-enabled dropdown selection component.
+
+```typescript
+<dees-input-searchselect
+  key="category"
+  label="Select Category"
+  placeholder="Search categories..."
+  .options=${[
+    { key: 'tech', label: 'Technology' },
+    { key: 'health', label: 'Healthcare' },
+    { key: 'finance', label: 'Finance' }
+  ]}
+  required
+  @change=${handleCategoryChange}
+></dees-input-searchselect>
+```
+
+#### `DeesInputRichtext`
+Rich text editor with formatting toolbar powered by TipTap.
+
+```typescript
+<dees-input-richtext
+  key="content"
+  label="Article Content"
+  .value=${htmlContent}
+  placeholder="Start writing..."
+  minHeight={300}      // Minimum editor height
+  showWordCount={true} // Show word/character count
+  @change=${handleContentChange}
+></dees-input-richtext>
+```
+
+Key Features:
+- Full formatting toolbar (bold, italic, underline, strike, etc.)
+- Heading levels (H1-H6)
+- Lists (bullet, ordered)
+- Links with URL editing
+- Code blocks and inline code
+- Blockquotes
+- Horizontal rules
+- Undo/redo support
+- Word and character count
+- HTML output
+
+#### `DeesInputWysiwyg`
+Advanced block-based editor with slash commands and rich content blocks.
+
+```typescript
+<dees-input-wysiwyg
+  key="document"
+  label="Document Editor"
+  .value=${documentContent}
+  outputFormat="html"  // Options: html, markdown, json
+  @change=${handleDocumentChange}
+></dees-input-wysiwyg>
+```
+
+Key Features:
+- Slash commands for quick formatting
+- Block-based editing (paragraphs, headings, lists, etc.)
+- Drag and drop block reordering
+- Multiple output formats
+- Keyboard shortcuts
+- Collaborative editing ready
+- Extensible block types
+
+#### `DeesFormSubmit`
+Submit button component specifically designed for `DeesForm`.
+
+```typescript
+<dees-form-submit
+  disabled            // Optional: disable submit button
+  status="normal"     // Options: normal, pending, success, error
+>Submit Form</dees-form-submit>
+```
+
+### Layout Components
+
+#### `DeesAppuiBase`
+Base container component for application layout structure with integrated appbar, menu system, and content areas.
 
-#### Application Shell
 ```typescript
-// Complete application layout with one component
 <dees-appui-base
-  .appbarMenuItems=${menuItems}
-  .appbarBreadcrumbs=${'Home > Dashboard'}
-  .mainmenuTabs=${tabs}
-  .user=${{ name: 'John Doe', status: 'online' }}
+  // Appbar configuration
+  .appbarMenuItems=${[
+    {
+      name: 'File',
+      action: async () => {},  // No-op for parent menu items
+      submenu: [
+        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => {} },
+        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => {} },
+        { divider: true },
+        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => {} }
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => {} },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => {} }
+      ]
+    }
+  ]}
+  .appbarBreadcrumbs=${'Dashboard > Overview'}
+  .appbarTheme=${'dark'}
+  .appbarUser=${{ name: 'John Doe', status: 'online' }}
+  .appbarShowSearch=${true}
+  .appbarShowWindowControls=${true}
+  
+  // Main menu configuration (left sidebar)
+  .mainmenuTabs=${[
+    { key: 'dashboard', iconName: 'lucide:home', action: () => {} },
+    { key: 'projects', iconName: 'lucide:folder', action: () => {} },
+    { key: 'settings', iconName: 'lucide:settings', action: () => {} }
+  ]}
+  .mainmenuSelectedTab=${selectedTab}
+  
+  // Selector configuration (second sidebar)
+  .mainselectorOptions=${[
+    { key: 'Overview', action: () => {} },
+    { key: 'Components', action: () => {} },
+    { key: 'Services', action: () => {} }
+  ]}
+  .mainselectorSelectedOption=${selectedOption}
+  
+  // Main content tabs
+  .maincontentTabs=${[
+    { key: 'tab1', iconName: 'lucide:file', action: () => {} }
+  ]}
+  
+  // Event handlers
+  @appbar-menu-select=${(e) => handleMenuSelect(e.detail)}
+  @appbar-breadcrumb-navigate=${(e) => handleBreadcrumbNav(e.detail)}
+  @appbar-search-click=${() => handleSearch()}
+  @appbar-user-menu-open=${() => handleUserMenu()}
+  @mainmenu-tab-select=${(e) => handleTabSelect(e.detail)}
+  @mainselector-option-select=${(e) => handleOptionSelect(e.detail)}
 >
   <div slot="maincontent">
-    <!-- Your app content -->
+    <!-- Your main application content goes here -->
   </div>
 </dees-appui-base>
 ```
 
-#### Dashboard Grid
+Key Features:
+- **Integrated Layout System**: Automatically arranges appbar, sidebars, and content area
+- **Centralized Configuration**: Pass properties to all child components from one place
+- **Event Propagation**: All child component events are re-emitted for easy handling
+- **Responsive Grid**: Uses CSS Grid for flexible, responsive layout
+- **Slot Support**: Main content area supports custom content via slots
+
+#### `DeesAppuiMainmenu`
+Main navigation menu component for application-wide navigation.
+
 ```typescript
-// Drag-and-drop dashboard widgets
-<dees-dashboardgrid
-  .widgets=${[
+<dees-appui-mainmenu
+  .menuItems=${[
     {
-      id: 'sales',
-      title: 'Sales Overview',
-      x: 0, y: 0, w: 4, h: 3,
-      content: html`<sales-chart></sales-chart>`
+      key: 'dashboard',
+      label: 'Dashboard',
+      icon: 'home',
+      action: () => handleNavigation('dashboard')
     },
     {
-      id: 'stats',
-      title: 'Statistics',
-      x: 4, y: 0, w: 4, h: 3,
-      content: html`<dees-statsgrid .tiles=${stats}></dees-statsgrid>`
+      key: 'settings',
+      label: 'Settings',
+      icon: 'cog',
+      action: () => handleNavigation('settings')
+    }
+  ]}
+  collapsed           // Optional: show collapsed version
+  position="left"     // Options: left, right
+></dees-appui-mainmenu>
+```
+
+#### `DeesAppuiMainselector`
+Secondary navigation component for sub-section selection.
+
+```typescript
+<dees-appui-mainselector
+  .items=${[
+    {
+      key: 'section1',
+      label: 'Section 1',
+      icon: 'folder',
+      action: () => selectSection('section1')
     }
   ]}
-  editable
-></dees-dashboardgrid>
+  selectedKey="section1"  // Currently selected section
+  @selection-change=${handleSectionChange}
+></dees-appui-mainselector>
 ```
 
-### 📊 Data Display
+#### `DeesAppuiMaincontent`
+Main content area with tab management support.
+
+```typescript
+<dees-appui-maincontent
+  .tabs=${[
+    {
+      key: 'tab1',
+      label: 'Tab 1',
+      content: html`<div>Tab 1 Content</div>`,
+      action: () => handleTabAction('tab1')
+    }
+  ]}
+  selectedTab="tab1"     // Currently active tab
+  @tab-change=${handleTabChange}
+></dees-appui-maincontent>
+```
+
+#### `DeesAppuiAppbar`
+Professional application bar component with hierarchical menus, breadcrumb navigation, and user account management.
+
+```typescript
+<dees-appui-appbar
+  .menuItems=${[
+    {
+      name: 'File',
+      action: async () => {},  // No-op for parent menu items
+      submenu: [
+        { 
+          name: 'New File', 
+          shortcut: 'Cmd+N', 
+          iconName: 'file-plus', 
+          action: async () => handleNewFile() 
+        },
+        { 
+          name: 'Open...', 
+          shortcut: 'Cmd+O', 
+          iconName: 'folder-open', 
+          action: async () => handleOpen() 
+        },
+        { divider: true },  // Menu separator
+        { 
+          name: 'Save', 
+          shortcut: 'Cmd+S', 
+          iconName: 'save', 
+          action: async () => handleSave(),
+          disabled: true  // Disabled state
+        }
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => handleUndo() },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => handleRedo() }
+      ]
+    }
+  ]}
+  .breadcrumbs=${'Project > src > components > AppBar.ts'}
+  .breadcrumbSeparator=${' > '}
+  .showWindowControls=${true}
+  .showSearch=${true}
+  .theme=${'dark'}  // Options: 'light' | 'dark'
+  .user=${{
+    name: 'John Doe',
+    avatar: '/path/to/avatar.jpg',  // Optional
+    status: 'online'  // Options: 'online' | 'offline' | 'busy' | 'away'
+  }}
+  @menu-select=${(e) => handleMenuSelect(e.detail.item)}
+  @breadcrumb-navigate=${(e) => handleBreadcrumbClick(e.detail)}
+  @search-click=${() => handleSearchClick()}
+  @user-menu-open=${() => handleUserMenuOpen()}
+></dees-appui-appbar>
+```
+
+Key Features:
+- **Hierarchical Menu System**
+  - Top-level text-only menus (following desktop UI standards)
+  - Dropdown submenus with icons and keyboard shortcuts
+  - Support for nested submenus
+  - Menu dividers for visual grouping
+  - Disabled state support
+  
+- **Keyboard Navigation**
+  - Tab navigation between top-level items
+  - Arrow keys for dropdown navigation (Up/Down in dropdowns, Left/Right between top items)
+  - Enter to select items
+  - Escape to close dropdowns
+  - Home/End keys for first/last item
+  
+- **Breadcrumb Navigation**
+  - Customizable breadcrumb trail
+  - Configurable separator
+  - Click events for navigation
+  
+- **User Account Section**
+  - User avatar with fallback to initials
+  - Status indicator (online, offline, busy, away)
+  - Click handler for user menu
+  
+- **Visual Features**
+  - Light and dark theme support
+  - Smooth animations and transitions
+  - Window controls integration
+  - Search icon with click handler
+  - Responsive layout using CSS Grid
+  
+- **Accessibility**
+  - Full ARIA support (menubar, menuitem roles)
+  - Keyboard navigation
+  - Focus management
+  - Screen reader compatible
+
+### Data Display Components
+
+#### `DeesTable`
+Advanced table component with sorting, filtering, and action support.
 
-#### Advanced Tables
 ```typescript
 <dees-table
-  .data=${users}
-  .displayFunction=${(user) => ({
-    Name: user.name,
-    Email: user.email,
-    Role: user.role,
-    Status: html`<dees-badge type="${user.active ? 'success' : 'error'}">
-      ${user.active ? 'Active' : 'Inactive'}
-    </dees-badge>`
+  .data=${tableData}
+  .displayFunction=${(item) => ({
+    name: item.name,
+    date: item.date,
+    amount: item.amount,
+    description: item.description
   })}
   .dataActions=${[
-    { name: 'Edit', icon: 'fa:edit', action: editUser },
-    { name: 'Delete', icon: 'fa:trash', action: deleteUser }
+    {
+      name: 'Edit',
+      icon: 'edit',
+      action: (item) => handleEdit(item)
+    },
+    {
+      name: 'Delete',
+      icon: 'trash',
+      action: (item) => handleDelete(item)
+    }
   ]}
-  searchable
+  heading1="Transactions"
+  heading2="Recent Activity"
+  searchable           // Enable search functionality
+  dataName="transaction"  // Name for single data item
+  @selection-change=${handleSelectionChange}
 ></dees-table>
 ```
 
-#### Statistics Grid
+##### DeesTable (Updated)
+
+Newer features available in `dees-table`:
+- Schema-first columns or `displayFunction` rendering
+- Sorting via header clicks with `aria-sort` + `sortChange`
+- Global search with Lucene-like syntax; modes: `table`, `data`, `server`
+- Per-column quick filters row; `showColumnFilters` and `column.filterable=false`
+- Selection: `none` | `single` | `multi`, with select-all and `selectionChange`
+- Sticky header + internal scroll (`stickyHeader`, `--table-max-height`)
+- Rich actions: header/in-row/contextmenu/footer/doubleClick; pinned Actions column
+- Editable cells via `editableFields`
+- Drag & drop files onto rows
+
+#### `DeesDataviewCodebox`
+Code display component with syntax highlighting and line numbers.
+
+```typescript
+<dees-dataview-codebox
+  progLang="typescript"  // Programming language for syntax highlighting
+  .codeToDisplay=${`
+    import { html } from '@design.estate/dees-element';
+    
+    export const myComponent = () => {
+      return html`<div>Hello World</div>`;
+    };
+  `}
+></dees-dataview-codebox>
+```
+
+#### `DeesDataviewStatusobject`
+Status display component for complex objects with nested status indicators.
+
+```typescript
+<dees-dataview-statusobject
+  .statusObject=${{
+    id: '1',
+    name: 'System Status',
+    combinedStatus: 'partly_ok',
+    combinedStatusText: 'Partially OK',
+    details: [
+      {
+        name: 'Database',
+        value: 'Connected',
+        status: 'ok',
+        statusText: 'OK'
+      },
+      {
+        name: 'API Service',
+        value: 'Degraded',
+        status: 'partly_ok',
+        statusText: 'Partially OK'
+      }
+    ]
+  }}
+></dees-dataview-statusobject>
+```
+
+#### `DeesPdf`
+PDF viewer component with navigation and zoom controls.
+
+```typescript
+<dees-pdf
+  source="path/to/document.pdf"  // URL or base64 encoded PDF
+  page={1}            // Current page number
+  scale={1.0}         // Zoom level
+  .controls=${[       // Optional: customize available controls
+    'zoom',
+    'download',
+    'print',
+    'navigation'
+  ]}
+  @page-change=${handlePageChange}
+  @document-loaded=${handleDocumentLoaded}
+></dees-pdf>
+```
+
+#### `DeesStatsGrid`
+A responsive grid component for displaying statistical data with various visualization types including numbers, gauges, percentages, and trends.
+
 ```typescript
 <dees-statsgrid
   .tiles=${[
     {
-      title: 'Revenue',
+      id: 'revenue',
+      title: 'Total Revenue',
       value: 125420,
       unit: '$',
       type: 'number',
-      description: '+12.5% from last month'
+      icon: 'faDollarSign',
+      description: '+12.5% from last month',
+      color: '#22c55e',
+      actions: [
+        {
+          name: 'View Details',
+          iconName: 'faChartLine',
+          action: async () => {
+            console.log('Viewing revenue details');
+          }
+        },
+        {
+          name: 'Export Data',
+          iconName: 'faFileExport',
+          action: async () => {
+            console.log('Exporting revenue data');
+          }
+        }
+      ]
     },
     {
+      id: 'cpu',
       title: 'CPU Usage',
       value: 73,
       type: 'gauge',
+      icon: 'faMicrochip',
       gaugeOptions: {
+        min: 0,
+        max: 100,
         thresholds: [
           { value: 0, color: '#22c55e' },
+          { value: 60, color: '#f59e0b' },
           { value: 80, color: '#ef4444' }
         ]
       }
+    },
+    {
+      id: 'storage',
+      title: 'Storage Used',
+      value: 65,
+      type: 'percentage',
+      icon: 'faHardDrive',
+      description: '650 GB of 1 TB',
+      color: '#3b82f6'
+    },
+    {
+      id: 'requests',
+      title: 'API Requests',
+      value: '1.2k',
+      unit: '/min',
+      type: 'trend',
+      icon: 'faServer',
+      trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
+    },
+    {
+      id: 'uptime',
+      title: 'System Uptime',
+      value: '99.95%',
+      type: 'text',
+      icon: 'faCheckCircle',
+      color: '#22c55e',
+      description: 'Last 30 days'
     }
   ]}
+  .gridActions=${[
+    {
+      name: 'Refresh',
+      iconName: 'faSync',
+      action: async () => {
+        console.log('Refreshing stats...');
+      }
+    },
+    {
+      name: 'Export Report',
+      iconName: 'faFileExport',
+      action: async () => {
+        console.log('Exporting stats report...');
+      }
+    }
+  ]}
+  .minTileWidth=${250}  // Minimum tile width in pixels
+  .gap=${16}            // Gap between tiles in pixels
 ></dees-statsgrid>
 ```
 
-### 🎭 Overlays & Dialogs
+#### `DeesPagination`
+Pagination component for navigating through large datasets.
+
+```typescript
+<dees-pagination
+  totalItems={500}
+  itemsPerPage={20}
+  currentPage={1}
+  maxVisiblePages={7}  // Maximum page numbers to display
+  @page-change=${handlePageChange}
+></dees-pagination>
+```
+
+### Visualization Components
+
+#### `DeesChartArea`
+Area chart component built on ApexCharts for visualizing time-series data.
+
+```typescript
+<dees-chart-area
+  label="System Usage"    // Chart title
+  .series=${[
+    {
+      name: 'CPU',
+      data: [
+        { x: '2025-01-15T03:00:00', y: 25 },
+        { x: '2025-01-15T07:00:00', y: 30 },
+        { x: '2025-01-15T11:00:00', y: 20 }
+      ]
+    },
+    {
+      name: 'Memory',
+      data: [
+        { x: '2025-01-15T03:00:00', y: 10 },
+        { x: '2025-01-15T07:00:00', y: 12 },
+        { x: '2025-01-15T11:00:00', y: 10 }
+      ]
+    }
+  ]}
+></dees-chart-area>
+```
+
+#### `DeesChartLog`
+Specialized chart component for visualizing log data and events.
 
-#### Modal Dialogs
 ```typescript
+<dees-chart-log
+  label="System Events"
+  .data=${[
+    {
+      timestamp: '2025-01-15T03:00:00',
+      event: 'Server Start',
+      type: 'info'
+    },
+    {
+      timestamp: '2025-01-15T03:15:00',
+      event: 'Error Detected',
+      type: 'error'
+    }
+  ]}
+  .filters=${['info', 'warning', 'error']}  // Event types to display
+  @event-click=${handleEventClick}
+></dees-chart-log>
+```
+
+### Dialogs & Overlays Components
+
+#### `DeesModal`
+Modal dialog component with customizable content and actions.
+
+```typescript
+// Programmatic usage
 DeesModal.createAndShow({
   heading: 'Confirm Action',
   content: html`
-    <p>Are you sure you want to proceed?</p>
+    <dees-form>
+      <dees-input-text
+        .label=${'Enter reason'}
+      ></dees-input-text>
+    </dees-form>
   `,
   menuOptions: [
     {
       name: 'Cancel',
-      action: async (modal) => modal.destroy()
+      action: async (modal) => {
+        modal.destroy();
+        return null;
+      }
     },
     {
       name: 'Confirm',
       action: async (modal) => {
-        await performAction();
+        // Handle confirmation
         modal.destroy();
+        return null;
       }
     }
   ]
 });
-```
 
-## 🎨 Theme System
+// Component usage
+<dees-modal
+  heading="Settings"
+  .content=${settingsContent}
+  .menuOptions=${actions}
+></dees-modal>
+```
 
-All components support automatic theme switching:
+#### `DeesContextmenu`
+Context menu component for right-click actions.
 
 ```typescript
-// Components automatically adapt to light/dark themes
-// Use the cssManager for theme-aware colors
-import { cssManager } from '@design.estate/dees-catalog';
-
-css`
-  .my-element {
-    background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
-    color: ${cssManager.bdTheme('#000', '#fff')};
-  }
-`
+<dees-contextmenu
+  .items=${[
+    {
+      label: 'Edit',
+      icon: 'edit',
+      action: () => handleEdit()
+    },
+    {
+      label: 'Delete',
+      icon: 'trash',
+      action: () => handleDelete()
+    }
+  ]}
+  position="right"    // Options: right, left, auto
+  @item-click=${handleMenuItemClick}
+></dees-contextmenu>
 ```
 
-## 🔧 Development
+#### `DeesSpeechbubble`
+Tooltip-style speech bubble component for contextual information.
+
+```typescript
+// Programmatic usage
+const bubble = await DeesSpeechbubble.createAndShow(
+  referenceElement,    // Element to attach to
+  'Helpful information about this feature'
+);
+
+// Component usage
+<dees-speechbubble
+  .reffedElement=${targetElement}
+  text="Click here to continue"
+></dees-speechbubble>
+```
 
-### Prerequisites
-- Node.js 18+
-- pnpm (recommended) or npm
+#### `DeesWindowlayer`
+Base overlay component used by modal dialogs and other overlay components.
 
-### Setup
-```bash
-# Clone the repository
-git clone https://github.com/design-estate/dees-catalog.git
+```typescript
+// Programmatic usage
+const layer = await DeesWindowLayer.createAndShow({
+  blur: true,    // Enable backdrop blur
+});
 
-# Install dependencies
-pnpm install
+// Component usage
+<dees-windowlayer
+  .options=${{
+    blur: true
+  }}
+  @clicked=${handleOverlayClick}
+>
+  <div class="content">
+    <!-- Overlay content -->
+  </div>
+</dees-windowlayer>
+```
 
-# Build the project
-pnpm run build
+### Navigation Components
 
-# Run in development mode
-pnpm run watch
+#### `DeesStepper`
+Multi-step navigation component for guided user flows.
 
-# Run tests
-pnpm test
+```typescript
+<dees-stepper
+  .steps=${[
+    {
+      key: 'personal',
+      label: 'Personal Info',
+      content: html`<div>Personal Information Form</div>`,
+      validation: () => validatePersonalInfo()
+    },
+    {
+      key: 'address',
+      label: 'Address',
+      content: html`<div>Address Form</div>`,
+      validation: () => validateAddress()
+    },
+    {
+      key: 'confirm',
+      label: 'Confirmation',
+      content: html`<div>Review and Confirm</div>`
+    }
+  ]}
+  currentStep="personal"
+  @step-change=${handleStepChange}
+  @complete=${handleComplete}
+></dees-stepper>
 ```
 
-### Project Structure
-```
-dees-catalog/
-├── ts_web/
-│   ├── elements/       # All component implementations
-│   │   ├── dees-*.ts   # Component files
-│   │   └── *.demo.ts  # Component demos
-│   ├── pages/         # Demo showcase pages
-│   └── index.ts       # Main exports
-├── dist_ts_web/       # Built distribution files
-└── test/              # Test files
+#### `DeesProgressbar`
+Progress indicator component for tracking completion status.
+
+```typescript
+<dees-progressbar
+  value={75}           // Current progress (0-100)
+  label="Uploading"    // Optional label
+  showPercentage      // Display percentage
+  type="determinate"  // Options: determinate, indeterminate
+  status="normal"     // Options: normal, success, warning, error
+  @progress=${handleProgress}
+></dees-progressbar>
 ```
 
-## 📚 Documentation
+### Development Components
 
-### Component Demos
-Each component includes a built-in demo accessible via the static `.demo` property:
+#### `DeesEditor`
+Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
 
 ```typescript
-import { DeesButton } from '@design.estate/dees-catalog';
+<dees-editor
+  .value=${code}
+  @change=${handleCodeChange}
+  .language=${'typescript'}
+  .theme=${'vs-dark'}
+  .options=${{
+    lineNumbers: true,
+    minimap: { enabled: true },
+    autoClosingBrackets: 'always'
+  }}
+></dees-editor>
+```
+
+#### `DeesEditorMarkdown`
+Markdown editor component with live preview.
 
-// Access the component's demo
-const demoHTML = DeesButton.demo();
+```typescript
+<dees-editor-markdown
+  .value=${markdown}
+  @change=${handleMarkdownChange}
+  .options=${{
+    preview: true,
+    toolbar: true,
+    spellcheck: true,
+    autosave: true
+  }}
+></dees-editor-markdown>
 ```
 
-### Interactive Playground
-For a complete interactive playground with all components:
+#### `DeesEditorMarkdownoutlet`
+Markdown preview component for rendering markdown content.
 
-1. Clone the repository
-2. Run `pnpm install && pnpm run build`
-3. Open the demo pages in `dist_ts_web/pages/`
+```typescript
+<dees-editor-markdownoutlet
+  .markdown=${markdownContent}
+  .theme=${'github'}  // Options: github, dark, custom
+  .plugins=${['mermaid', 'highlight']}  // Optional plugins
+  allowHtml={false}   // Security: disable raw HTML
+></dees-editor-markdownoutlet>
+```
 
-### TypeScript Support
-Full TypeScript definitions are included. Your IDE will provide:
-- 🔍 IntelliSense for all properties and methods
-- 📝 JSDoc comments with usage examples
-- ✅ Type checking for component properties
-- 🎯 Auto-imports and code completion
+#### `DeesTerminal`
+Terminal emulator component for command-line interface.
 
-## 🤝 Contributing
+```typescript
+<dees-terminal
+  .commands=${{
+    'echo': (args) => `Echo: ${args.join(' ')}`,
+    'help': () => 'Available commands: echo, help'
+  }}
+  .prompt=${'$'}
+  .welcomeMessage=${'Welcome! Type "help" for available commands.'}
+  .historySize=${100}
+  .autoFocus={true}
+></dees-terminal>
+```
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+#### `DeesUpdater`
+Component for managing application updates and version control.
 
-### Development Workflow
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/amazing-feature`
-3. Make your changes and add tests
-4. Ensure all tests pass: `pnpm test`
-5. Commit with conventional commits: `git commit -m 'feat: add amazing feature'`
-6. Push and create a Pull Request
+```typescript
+<dees-updater
+  .currentVersion=${'1.5.2'}
+  .checkInterval=${3600000}  // Check every hour
+  .autoUpdate=${false}
+  @update-available=${handleUpdateAvailable}
+  @update-progress=${handleUpdateProgress}
+></dees-updater>
+```
 
-## 🐛 Troubleshooting
+### Auth & Utilities Components
 
-### Common Issues
+#### `DeesSimpleAppdash`
+Simple application dashboard component for quick prototyping.
 
-**Issue: Components not rendering**
 ```typescript
-// Ensure you're importing from the correct path
-import '@design.estate/dees-catalog/dist_ts_web/elements/dees-button.js';
-// Or use the bundled version
-import '@design.estate/dees-catalog';
+<dees-simple-appdash
+  .appTitle=${'My Application'}
+  .menuItems=${[
+    { name: 'Dashboard', icon: 'home', route: '/dashboard' },
+    { name: 'Settings', icon: 'settings', route: '/settings' }
+  ]}
+  .user=${{
+    name: 'John Doe',
+    role: 'Administrator'
+  }}
+  @menu-select=${handleMenuSelect}
+>
+  <!-- Dashboard content -->
+</dees-simple-appdash>
 ```
 
-**Issue: TypeScript errors**
+#### `DeesSimpleLogin`
+Simple login form component with validation and customization.
+
 ```typescript
-// Add to tsconfig.json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true
-  }
-}
+<dees-simple-login
+  .appName=${'My Application'}
+  .logo=${'./assets/logo.png'}
+  .backgroundImage=${'./assets/background.jpg'}
+  .fields=${['username', 'password']}  // Options: username, email, password
+  showForgotPassword
+  showRememberMe
+  @login=${handleLogin}
+  @forgot-password=${handleForgotPassword}
+></dees-simple-login>
 ```
 
-**Issue: Styles not applying**
-```html
-<!-- Components use Shadow DOM, styles are encapsulated -->
-<!-- Use CSS custom properties for theming -->
-<style>
-  dees-button {
-    --button-background: #007bff;
-    --button-color: white;
-  }
-</style>
-```
+### Shopping Components
 
-## 🔗 Links & Resources
+#### `DeesShoppingProductcard`
+Product card component for e-commerce applications.
 
-- 📖 [Full Documentation](https://design.estate/docs/dees-catalog)
-- 🎮 [Interactive Demo](https://design.estate/demo/dees-catalog)
-- 📦 [NPM Package](https://www.npmjs.com/package/@design.estate/dees-catalog)
-- 🐛 [Issue Tracker](https://github.com/design-estate/dees-catalog/issues)
-- 💬 [Discussions](https://github.com/design-estate/dees-catalog/discussions)
+```typescript
+<dees-shopping-productcard
+  .productData=${{
+    name: 'Premium Headphones',
+    category: 'Electronics',
+    description: 'High-quality wireless headphones with noise cancellation',
+    price: 199.99,
+    originalPrice: 249.99,  // Shows strikethrough price
+    currency: '$',
+    inStock: true,
+    stockText: 'In Stock',  // Custom stock text
+    imageUrl: '/images/headphones.jpg',
+    iconName: 'lucide:headphones' // Fallback icon if no image
+  }}
+  quantity={1}               // Current quantity
+  showQuantitySelector={true} // Show quantity selector
+  selectable={false}         // Enable selection mode
+  selected={false}           // Selection state
+  @quantityChange=${(e) => handleQuantityChange(e.detail)}
+  @selectionChange=${(e) => handleSelectionChange(e.detail)}
+></dees-shopping-productcard>
+```
 
-## 📄 License
+## License and Legal Information
 
-This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](./license) file within this repository.
+This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.
 
-**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.
+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.
 
-## ® Trademarks
+### Trademarks
 
-This project is owned and maintained by **Task Venture Capital GmbH**. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
 
-## 🏢 Company Information
+### Company Information
 
-**Task Venture Capital GmbH**  
-Registered at District Court Bremen HRB 35230 HB, Germany
+Task Venture Capital GmbH
+Registered at District court Bremen HRB 35230 HB, Germany
 
-For any legal inquiries or if you require further information, please contact us via email at **hello@task.vc**.
+For any legal inquiries or if you require 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.
-
----
-
-<div align="center">
-  <p>Built with ❤️ by <a href="https://task.vc">Task Venture Capital GmbH</a></p>
-  <p>
-    <a href="https://github.com/design-estate/dees-catalog/stargazers">⭐ Star us on GitHub</a> •
-    <a href="https://twitter.com/taskventure">🐦 Follow on Twitter</a> •
-    <a href="https://www.linkedin.com/company/task-venture-capital">💼 LinkedIn</a>
-  </p>
-</div>