diff --git a/readme.md b/readme.md
index 83fcc23..8b6518e 100644
--- a/readme.md
+++ b/readme.md
@@ -59,8 +59,8 @@ For developers working on this library, please refer to the [UI Components Playb
| **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), [`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) |
+| **Media & Thumbnails** | [`DeesThumbnailPdf`](#deesthumbnailpdf), [`DeesThumbnailImage`](#deesthumbnailimage), [`DeesThumbnailAudio`](#deesthumbnailaudio), [`DeesThumbnailVideo`](#deesthumbnalvideo), [`DeesThumbnailNote`](#deesthumbnailnote), [`DeesThumbnailFolder`](#deesthumbnailfolder), [`DeesPreview`](#deespreview), [`DeesPdfViewer`](#deespdfviewer), [`DeesImageViewer`](#deesimageviewer), [`DeesAudioViewer`](#deesaudioviewer), [`DeesVideoViewer`](#deesvideoviewer) |
+| **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartBar`](#deeschartbar), [`DeesChartDonut`](#deeschartdonut), [`DeesChartGauge`](#deeschartgauge), [`DeesChartRadar`](#deeschartradar), [`DeesChartLog`](#deeschartlog) |
| **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
| **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
| **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
@@ -143,14 +143,13 @@ Display icons from FontAwesome and Lucide icon libraries with library prefixes.
```
#### `DeesLabel`
-Text label component with optional icon and status indicators.
+Text label component with optional required indicator and info tooltip. Used internally by all input components.
```typescript
```
@@ -321,7 +320,7 @@ Container component for form elements with built-in validation and data handling
```
#### `DeesInputText`
-Text input field with validation and formatting options.
+Text input field with validation, info tooltips, description text, and context menu (Cut/Copy/Paste/Select All).
```typescript
{ // Auto-validates on every keystroke
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (emailRegex.test(value)) {
+ return { valid: true, message: 'Email is valid' };
+ }
+ return { valid: false, message: 'Please enter a valid email' };
+ }}
>
```
+> 💡 **All input components** share these common properties from `DeesInputBase`: `key`, `label`, `required`, `disabled`, `infoText`, `description`, `layoutMode`, `labelPosition`.
+
#### `DeesInputCheckbox`
Checkbox input component for boolean values.
@@ -1780,7 +1789,7 @@ interface ITileFolderItem {
## 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.
@@ -1798,5 +1807,3 @@ 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.
diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
index 2be59ad..7ca59fe 100644
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
@@ -31,12 +31,6 @@ export const demoFunc = () => html`
flex-wrap: wrap;
}
- .input-group {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
.spacer {
height: 200px;
display: flex;
diff --git a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
index 74e18bc..c359598 100644
--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
@@ -13,12 +13,6 @@ export const demoFunc = () => html`
margin: 0 auto;
}
- .input-group {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
.payment-group {
display: flex;
align-items: center;
diff --git a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
index fef4326..74e0acf 100644
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
@@ -13,12 +13,6 @@ export const demoFunc = () => html`
margin: 0 auto;
}
- .input-group {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
.horizontal-group {
display: flex;
align-items: center;
diff --git a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
index 255e2cc..8c75c79 100644
--- a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
@@ -14,12 +14,6 @@ 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));
diff --git a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
index 8335087..e95f0ed 100644
--- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
@@ -23,12 +23,6 @@ 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));
diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
index 0c524b8..820acd8 100644
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
@@ -30,12 +30,6 @@ export const demoFunc = () => html`
flex-wrap: wrap;
}
- .input-group {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
diff --git a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
index c43651a..a64723a 100644
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
@@ -13,12 +13,6 @@ export const demoFunc = () => html`
margin: 0 auto;
}
- .input-group {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
.horizontal-group {
display: flex;
gap: 24px;