diff --git a/readme.md b/readme.md
index 66d3452..d20f0fe 100644
--- a/readme.md
+++ b/readme.md
@@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog
| Category | Components |
|----------|------------|
-| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
-| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
-| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
-| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
+| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
+| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
+| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
| Visualization | `DeesChartArea`, `DeesChartLog` |
| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
-| Navigation | `DeesStepper`, `DeesProgressbar` |
-| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
+| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
+| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
+| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
## Detailed Component Documentation
@@ -149,6 +150,93 @@ Key Features:
- Theme-aware styling
- Programmatic control
+#### `DeesButtonExit`
+Exit/close button component with consistent styling.
+
+```typescript
+
+```
+
+#### `DeesButtonGroup`
+Container for grouping related buttons together.
+
+```typescript
+
+```
+
+#### `DeesHeading`
+Consistent heading component with level and styling options.
+
+```typescript
+
+```
+
+#### `DeesHint`
+Hint/tooltip component for providing contextual help.
+
+```typescript
+
+```
+
+#### `DeesPanel`
+Container component for grouping related content with optional title and actions.
+
+```typescript
+
+
+
+```
+
+#### `DeesSearchbar`
+Search input component with suggestions and search handling.
+
+```typescript
+
+```
+
+#### `DeesWindowcontrols`
+Window control buttons (minimize, maximize, close) for desktop-like applications.
+
+```typescript
+
+```
+
### Form Components
#### `DeesForm`
@@ -207,22 +295,6 @@ Dropdown selection component with search and filtering capabilities.
>
```
-#### `DeesInputRadio`
-Radio button group for single-choice selections.
-
-```typescript
-
-```
-
#### `DeesInputFileupload`
File upload component with drag-and-drop support.
@@ -293,6 +365,121 @@ Multi-state toggle button group.
>
```
+#### `DeesInputRadiogroup`
+Radio button group for single-choice selections with internal state management.
+
+```typescript
+
+
+// With custom option objects
+
+```
+
+#### `DeesInputTags`
+Tag input component for managing lists of tags with auto-complete and validation.
+
+```typescript
+
+```
+
+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
+
+```
+
+#### `DeesInputRichtext`
+Rich text editor with formatting toolbar powered by TipTap.
+
+```typescript
+
+```
+
+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
+
+```
+
+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`.
@@ -622,6 +809,91 @@ Best Practices:
- Test with screen readers
- Maintain focus management
+#### `DeesAppuiActivitylog`
+Activity log component for displaying system events and user actions.
+
+```typescript
+
+```
+
+#### `DeesAppuiProfiledropdown`
+User profile dropdown component with status and menu options.
+
+```typescript
+ {} },
+ { name: 'Settings', iconName: 'settings', action: async () => {} },
+ { divider: true },
+ { name: 'Logout', iconName: 'logOut', action: async () => {} }
+ ]}
+ @status-change=${handleStatusChange}
+>
+```
+
+#### `DeesAppuiTabs`
+Tab navigation component for organizing content sections.
+
+```typescript
+Overview content`
+ },
+ {
+ key: 'details',
+ label: 'Details',
+ icon: 'info',
+ content: html`Details content
`
+ }
+ ]}
+ selectedTab="overview"
+ @tab-change=${handleTabChange}
+>
+```
+
+#### `DeesAppuiView`
+View container component for consistent page layouts.
+
+```typescript
+
+
+
+```
+
#### `DeesMobileNavigation`
Responsive navigation component for mobile devices.
@@ -982,6 +1254,27 @@ setInterval(() => {
}, 3000);
```
+#### `DeesPagination`
+Pagination component for navigating through large datasets.
+
+```typescript
+
+```
+
+Key Features:
+- Page number navigation
+- Previous/next buttons
+- Jump to first/last page
+- Configurable items per page
+- Responsive design
+- Keyboard navigation support
+
### Visualization Components
#### `DeesChartArea`
@@ -1306,52 +1599,6 @@ Key Features:
- Animation support
- Accessibility features
-#### `DeesMobileNavigation`
-Mobile-optimized navigation component with touch support.
-
-```typescript
-// Programmatic usage
-DeesMobilenavigation.createAndShow([
- {
- name: 'Home',
- action: async (nav) => {
- // Handle navigation
- return null;
- }
- },
- {
- name: 'Settings',
- action: async (nav) => {
- // Handle navigation
- return null;
- }
- }
-]);
-
-// Component usage
- handleNavigation('profile')
- },
- {
- name: 'Settings',
- action: (nav) => handleNavigation('settings')
- }
- ]}
->
-```
-
-Key Features:
-- Touch-friendly interface
-- Slide-in animation
-- Backdrop overlay
-- Single instance management
-- Custom menu items
-- Responsive design
-
Best Practices:
1. Stepper Implementation
@@ -1368,13 +1615,6 @@ Best Practices:
- Performance monitoring
- Error state handling
-3. Mobile Navigation
- - Touch-optimized targets
- - Clear visual hierarchy
- - Smooth animations
- - Gesture support
- - Responsive behavior
-
Common Use Cases:
1. Stepper
@@ -1391,13 +1631,6 @@ Common Use Cases:
- Task completion
- Step progression
-3. Mobile Navigation
- - Responsive menus
- - App navigation
- - Settings access
- - User actions
- - Context switching
-
Accessibility Considerations:
- Keyboard navigation support
- ARIA labels and roles
@@ -1461,6 +1694,26 @@ Key Features:
- Spellcheck integration
- Auto-save functionality
+#### `DeesEditorMarkdownoutlet`
+Markdown preview component for rendering markdown content.
+
+```typescript
+
+```
+
+Key Features:
+- Safe markdown rendering
+- Multiple themes
+- Plugin support (mermaid diagrams, syntax highlighting)
+- XSS protection
+- Custom CSS injection
+- Responsive images
+
#### `DeesTerminal`
Terminal emulator component for command-line interface.
@@ -1606,6 +1859,60 @@ Accessibility Features:
- Focus management
- ARIA attributes
+### Auth & Utilities Components
+
+#### `DeesSimpleAppdash`
+Simple application dashboard component for quick prototyping.
+
+```typescript
+
+
+
+```
+
+Key Features:
+- Quick setup dashboard layout
+- Built-in navigation
+- User profile section
+- Responsive design
+- Minimal configuration
+
+#### `DeesSimpleLogin`
+Simple login form component with validation and customization.
+
+```typescript
+
+```
+
+Key Features:
+- Customizable fields
+- Built-in validation
+- Remember me option
+- Forgot password link
+- Custom branding
+- Responsive layout
+- Loading states
+
## 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 file within this repository.