v3.74.0

changelog.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 2026-04-12 - 3.74.0 - feat(input-text)
+add validated success state and text editing context menu to text inputs
+
+- show a delayed checkmark confirmation for successful validation and hide inline validation text afterward
+- move IBAN validation handling into the shared text input validation function
+- improve the email validation demo to use a stricter regex-based check
+- add cut, copy, paste, and select-all context menu actions for text inputs
+
+## 2026-04-12 - 3.73.2 - fix(input,label)
+correct validation state attribute handling in text inputs and refine label description icon styling
+
+- Change dees-input-text validationState to reflect as a string attribute and align validation selectors with the emitted host attribute
+- Wrap the dees-label description icon in a dedicated container to improve sizing, hover feedback, and alignment
+
+## 2026-04-12 - 3.73.1 - fix(dees-label)
+align label content and icon consistently using inline flex layout
+
+- change the label container from inline-block to inline-flex with centered alignment
+- remove icon-specific vertical transform in favor of layout-based alignment
+
+## 2026-04-12 - 3.73.0 - feat(dees-label)
+expand dees-label demo coverage and update supporting dependencies
+
+- replace the minimal dees-label demo with a structured showcase for basic, required, description, combined, and empty-label states
+- add themed demo styling and inline annotations to better document component behavior
+- update @design.estate/dees-wcctools, lucide, and @types/node dependency versions
+
 ## 2026-04-12 - 3.72.1 - fix(dees-stepper)
 improve stepper exit animation timing for cancel confirmation flow
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.72.1",
+  "version": "3.74.0",
   "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",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.5.4",
     "@design.estate/dees-element": "^2.2.4",
-    "@design.estate/dees-wcctools": "^3.8.0",
+    "@design.estate/dees-wcctools": "^3.8.2",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",
@@ -35,10 +35,10 @@
     "@tiptap/starter-kit": "^2.23.0",
     "@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.577.0",
+    "lightweight-charts": "^5.1.0",
+    "lucide": "^1.8.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
@@ -50,7 +50,7 @@
     "@git.zone/tstest": "^3.6.3",
     "@git.zone/tswatch": "^3.3.2",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^25.5.0"
+    "@types/node": "^25.6.0"
   },
   "files": [
     "ts/**/*",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.2.4
         version: 2.2.4
       '@design.estate/dees-wcctools':
-        specifier: ^3.8.0
-        version: 3.8.0
+        specifier: ^3.8.2
+        version: 3.8.2
       '@fortawesome/fontawesome-svg-core':
         specifier: ^7.2.0
         version: 7.2.0
@@ -75,8 +75,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0
       lucide:
-        specifier: ^0.577.0
-        version: 0.577.0
+        specifier: ^1.8.0
+        version: 1.8.0
       monaco-editor:
         specifier: 0.55.1
         version: 0.55.1
@@ -106,8 +106,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0
       '@types/node':
-        specifier: ^25.5.0
-        version: 25.5.0
+        specifier: ^25.6.0
+        version: 25.6.0
 
 packages:
 
@@ -323,8 +323,8 @@ packages:
   '@design.estate/dees-element@2.2.4':
     resolution: {integrity: sha512-O9cA6flBMMd+pBwMQrZXwAWel9yVxgokolb+Em6gvkXxPJ0P/B5UDn4Vc2d4ts3ta55PTBm+l2dPeDVGx/bl7Q==}
 
-  '@design.estate/dees-wcctools@3.8.0':
-    resolution: {integrity: sha512-CC14iVKUrguzD9jIrdPBd9fZ4egVJEZMxl5y8iy0l7WLumeoYvGsoXj5INVkRPLRVLqziIdi4Je1hXqHt2NU+g==}
+  '@design.estate/dees-wcctools@3.8.2':
+    resolution: {integrity: sha512-A55XHeWExxxojdERAmedrZeyTGeK01ax5ct46VbjMeH65HbgBiTF4EOHfS6rjdTp+9VD3vXd0efhzyOxOS6uFw==}
 
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
@@ -2121,11 +2121,11 @@ packages:
   '@types/node@16.9.1':
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
 
-  '@types/node@22.19.15':
-    resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
+  '@types/node@22.19.17':
+    resolution: {integrity: sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==}
 
-  '@types/node@25.5.0':
-    resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==}
+  '@types/node@25.6.0':
+    resolution: {integrity: sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==}
 
   '@types/randomatic@3.1.5':
     resolution: {integrity: sha512-VCwCTw6qh1pRRw+5rNTAwqPmf6A+hdrkdM7dBpZVmhl7g+em3ONXlYK/bWPVKqVGMWgP0d1bog8Vc/X6zRwRRQ==}
@@ -3054,6 +3054,9 @@ packages:
   lucide@0.577.0:
     resolution: {integrity: sha512-PpC/m5eOItp/WU/GlQPFBXDOhq6HibL73KzYP37OX3LM7VmzWQF8voEj8QRWUFvy9FIKfeDQkWYoyS1D/MdWFA==}
 
+  lucide@1.8.0:
+    resolution: {integrity: sha512-JjV/QnadgFLj1Pyu9IKl0lknrolFEzo04B64QcYLLeRzZl/iEHpdbSrRRKbyXcv45SZNv+WGjIUCT33e7xHO6Q==}
+
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -4002,8 +4005,8 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici-types@7.18.2:
-    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+  undici-types@7.19.2:
+    resolution: {integrity: sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==}
 
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
@@ -4708,7 +4711,7 @@ snapshots:
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
-      '@design.estate/dees-wcctools': 3.8.0
+      '@design.estate/dees-wcctools': 3.8.2
       '@fortawesome/fontawesome-svg-core': 7.2.0
       '@fortawesome/free-brands-svg-icons': 7.2.0
       '@fortawesome/free-regular-svg-icons': 7.2.0
@@ -4784,7 +4787,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@3.8.0':
+  '@design.estate/dees-wcctools@3.8.2':
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
@@ -5257,7 +5260,7 @@ snapshots:
       '@inquirer/figures': 1.0.15
       '@inquirer/type': 2.0.0
       '@types/mute-stream': 0.0.4
-      '@types/node': 22.19.15
+      '@types/node': 22.19.17
       '@types/wrap-ansi': 3.0.0
       ansi-escapes: 4.3.2
       cli-width: 4.1.0
@@ -7235,7 +7238,7 @@ snapshots:
 
   '@types/clean-css@4.2.11':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
       source-map: 0.6.1
 
   '@types/debug@4.1.12':
@@ -7245,7 +7248,7 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/hast@3.0.4':
     dependencies:
@@ -7265,7 +7268,7 @@ snapshots:
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/linkify-it@5.0.0': {}
 
@@ -7288,21 +7291,21 @@ snapshots:
 
   '@types/mute-stream@0.0.4':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/node-forge@1.3.14':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/node@16.9.1': {}
 
-  '@types/node@22.19.15':
+  '@types/node@22.19.17':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@25.5.0':
+  '@types/node@25.6.0':
     dependencies:
-      undici-types: 7.18.2
+      undici-types: 7.19.2
 
   '@types/randomatic@3.1.5': {}
 
@@ -7314,11 +7317,11 @@ snapshots:
 
   '@types/tar-stream@3.1.4':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/through2@2.0.41':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/trusted-types@2.0.7': {}
 
@@ -7344,11 +7347,11 @@ snapshots:
 
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 25.5.0
+      '@types/node': 25.6.0
     optional: true
 
   '@ungap/structured-clone@1.3.0': {}
@@ -8300,6 +8303,8 @@ snapshots:
 
   lucide@0.577.0: {}
 
+  lucide@1.8.0: {}
+
   make-dir@3.1.0:
     dependencies:
       semver: 6.3.1
@@ -9570,7 +9575,7 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.18.2: {}
+  undici-types@7.19.2: {}
 
   unified@11.0.5:
     dependencies:

ts_web/00_commitinfo_data.ts

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

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

@@ -50,6 +50,16 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
           .disabled=${this.disabled}
           .required=${this.required}
           .placeholder=${'DE89 3704 0044 0532 0130 00'}
+          .validationFunction=${(value: string) => {
+            const normalized = value.replace(/ /g, '');
+            if (normalized.length === 0) {
+              return { valid: true, message: '' };
+            }
+            const isValid = ibantools.isValidIBAN(normalized);
+            return isValid
+              ? { valid: true, message: 'IBAN is valid' }
+              : { valid: false, message: 'Please enter a valid IBAN' };
+          }}
           @input=${(eventArg: InputEvent) => {
             this.validateIban(eventArg);
           }}
@@ -81,10 +91,6 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
       }
     }
     this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
-    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-text/dees-input-text.demo.ts

@@ -210,39 +210,7 @@ export const demoFunc = () => html`
       </dees-panel>
     </dees-demowrapper>
     
-    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Demonstrate validation states
-      const requiredInput = elementArg.querySelector('dees-input-text[required]') as DeesInputText;
-      const disabledInput = elementArg.querySelector('dees-input-text[disabled]') as DeesInputText;
-      const errorInput = elementArg.querySelector('dees-input-text[validationState="invalid"]') as DeesInputText;
-      
-      if (requiredInput) {
-        // Show validation on blur for empty required field
-        requiredInput.addEventListener('blur', () => {
-          if (!requiredInput.getValue()) {
-            console.log('Required field is empty!');
-          }
-        });
-      }
-      
-      if (disabledInput) {
-        console.log('Disabled input cannot be edited');
-      }
-      
-      if (errorInput) {
-        console.log('Error input shows validation message:', errorInput.validationText);
-        
-        // Simulate fixing the error
-        errorInput.addEventListener('changeSubject', () => {
-          const value = errorInput.getValue();
-          if (value.includes('@') && value.includes('.')) {
-            errorInput.validationState = 'valid';
-            errorInput.validationText = '';
-            console.log('Email validation passed!');
-          }
-        });
-      }
-    }}>
+    <dees-demowrapper>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
         <div class="input-group">
           <dees-input-text
@@ -258,10 +226,15 @@ export const demoFunc = () => html`
           ></dees-input-text>
 
           <dees-input-text
-            .label=${'Field with Error'}
+            .label=${'Email with Validation'}
             .value=${'invalid@'}
-            .validationText=${'Please enter a valid email address'}
-            .validationState=${'invalid'}
+            .validationFunction=${(value: string) => {
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (emailRegex.test(value)) {
+                return { valid: true, message: 'Email address is valid' };
+              }
+              return { valid: false, message: 'Please enter a valid email address' };
+            }}
           ></dees-input-text>
         </div>
       </dees-panel>

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

@@ -7,11 +7,13 @@ import {
   customElement,
   type TemplateResult,
   property,
+  state,
   html,
   cssManager,
   css,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -44,7 +46,7 @@ export class DeesInputText extends DeesInputBase {
   accessor showPasswordBool = false;
 
   @property({
-    type: Boolean,
+    type: String,
     reflect: true,
   })
   accessor validationState!: 'valid' | 'warn' | 'invalid';
@@ -54,8 +56,8 @@ export class DeesInputText extends DeesInputBase {
   })
   accessor validationText: string = '';
 
-  @property({})
-  accessor validationFunction!: (value: string) => boolean;
+  @property({ attribute: false })
+  accessor validationFunction!: (value: string) => { valid: boolean; message?: string };
 
   @property({
     type: Boolean,
@@ -63,6 +65,11 @@ export class DeesInputText extends DeesInputBase {
   })
   accessor vintegrated: boolean = false;
 
+  @property({ attribute: false })
+  accessor validConfirmed: boolean = false;
+
+  private validTimeout: ReturnType<typeof setTimeout> | undefined;
+
   public static styles = [
     themeDefaultStyles,
     ...DeesInputBase.baseStyles,
@@ -145,6 +152,33 @@ export class DeesInputText extends DeesInputBase {
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
+      /* Valid checkmark icon */
+      .validIcon {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        pointer-events: none;
+      }
+
+      .validIcon.show {
+        opacity: 1;
+      }
+
+      .validIcon dees-icon {
+        font-size: 14px;
+        color: white;
+      }
+
       /* Validation styles */
       .validationContainer {
         margin-top: 4px;
@@ -156,7 +190,7 @@ export class DeesInputText extends DeesInputBase {
         overflow: hidden;
       }
 
-      .validationContainer.error {
+      .validationContainer.invalid {
         background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
         color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
       }
@@ -172,31 +206,31 @@ export class DeesInputText extends DeesInputBase {
       }
 
       /* Error state for input */
-      :host([validation-state="invalid"]) input {
+      :host([validationstate="invalid"]) input {
         border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
       }
 
-      :host([validation-state="invalid"]) input:focus {
+      :host([validationstate="invalid"]) input:focus {
         border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
       }
 
       /* Warning state for input */
-      :host([validation-state="warn"]) input {
+      :host([validationstate="warn"]) input {
         border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
       }
 
-      :host([validation-state="warn"]) input:focus {
+      :host([validationstate="warn"]) input:focus {
         border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
       }
 
       /* Valid state for input */
-      :host([validation-state="valid"]) input {
+      :host([validationstate="valid"]) input {
         border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
       }
 
-      :host([validation-state="valid"]) input:focus {
+      :host([validationstate="valid"]) input:focus {
         border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
       }
@@ -239,9 +273,9 @@ export class DeesInputText extends DeesInputBase {
         input {
           font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
           letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
-          padding-right: ${this.isPasswordBool ? '48px' : '12px'};
+          padding-right: ${this.isPasswordBool ? '48px' : this.validConfirmed ? '40px' : '12px'};
         }
-        ${this.validationText
+        ${this.validationText && !this.validConfirmed
           ? css`
               .validationContainer {
                 height: auto;
@@ -275,9 +309,12 @@ export class DeesInputText extends DeesInputBase {
                 </div>
               `
             : html``}
+          <div class="validIcon ${this.validConfirmed ? 'show' : ''}">
+            <dees-icon .icon=${'lucide:Check'}></dees-icon>
+          </div>
           ${this.validationText
             ? html`
-                <div class="validationContainer ${this.validationState || 'error'}">
+                <div class="validationContainer ${this.validationState || 'invalid'}">
                   ${this.validationText}
                 </div>
               `
@@ -288,15 +325,97 @@ export class DeesInputText extends DeesInputBase {
   }
 
   firstUpdated() {
-    // Input event handling is already done in updateValue method
+    if (this.validationFunction && this.value) {
+      const result = this.validationFunction(this.value);
+      this.validationState = result.valid ? 'valid' : 'invalid';
+      this.validationText = result.message || '';
+      if (result.valid) {
+        this.validConfirmed = false;
+        this.validTimeout = setTimeout(() => {
+          this.validConfirmed = true;
+          this.validationState = undefined as any;
+        }, 500);
+      }
+    }
   }
 
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
+    if (this.validationFunction) {
+      const result = this.validationFunction(this.value);
+      this.validationState = result.valid ? 'valid' : 'invalid';
+      this.validationText = result.message || '';
+      if (result.valid) {
+        this.validConfirmed = false;
+        clearTimeout(this.validTimeout);
+        this.validTimeout = setTimeout(() => {
+          this.validConfirmed = true;
+          this.validationState = undefined as any;
+        }, 500);
+      } else {
+        clearTimeout(this.validTimeout);
+        this.validConfirmed = false;
+      }
+    }
     this.changeSubject.next(this);
   }
 
+  public getContextMenuItems() {
+    const input = this.shadowRoot!.querySelector('input')!;
+    const hasSelection = input.selectionStart !== input.selectionEnd;
+    return [
+      {
+        name: 'Cut',
+        iconName: 'lucide:Scissors',
+        shortcut: 'Cmd+X',
+        disabled: !hasSelection,
+        action: async () => {
+          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
+          await navigator.clipboard.writeText(selected);
+          const start = input.selectionStart!;
+          this.value = this.value.substring(0, start) + this.value.substring(input.selectionEnd!);
+          input.value = this.value;
+          input.setSelectionRange(start, start);
+          this.changeSubject.next(this);
+        },
+      },
+      {
+        name: 'Copy',
+        iconName: 'lucide:Copy',
+        shortcut: 'Cmd+C',
+        disabled: !hasSelection,
+        action: async () => {
+          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
+          await navigator.clipboard.writeText(selected);
+        },
+      },
+      {
+        name: 'Paste',
+        iconName: 'lucide:ClipboardPaste',
+        shortcut: 'Cmd+V',
+        action: async () => {
+          const text = await navigator.clipboard.readText();
+          const start = input.selectionStart!;
+          const end = input.selectionEnd!;
+          this.value = this.value.substring(0, start) + text + this.value.substring(end);
+          input.value = this.value;
+          input.setSelectionRange(start + text.length, start + text.length);
+          this.changeSubject.next(this);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Select All',
+        iconName: 'lucide:TextCursorInput',
+        shortcut: 'Cmd+A',
+        action: async () => {
+          input.select();
+        },
+      },
+    ];
+  }
+
   public getValue(): string {
     return this.value;
   }

ts_web/elements/00group-layout/dees-label/dees-label.demo.ts

@@ -1,7 +1,128 @@
-import { html, cssManager } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 
-export const demoFunc = () => {
-  return html`
-    <dees-label .label=${'a label'}></dees-label>
-  `;
-}
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .demo-section {
+        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
+        border-radius: 8px;
+        padding: 24px;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+      }
+
+      .demo-section h3 {
+        margin-top: 0;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .demo-section p {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-bottom: 16px;
+        font-size: 13px;
+      }
+
+      .label-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .label-row {
+        display: flex;
+        align-items: baseline;
+        gap: 16px;
+      }
+
+      .label-row .annotation {
+        font-size: 12px;
+        font-family: monospace;
+        color: ${cssManager.bdTheme('#888', '#666')};
+        flex-shrink: 0;
+        min-width: 200px;
+      }
+    `}
+  </style>
+
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Basic Label</h3>
+      <p>A simple text label with no additional indicators.</p>
+      <div class="label-grid">
+        <div class="label-row">
+          <span class="annotation">label="Username"</span>
+          <dees-label .label=${'Username'}></dees-label>
+        </div>
+        <div class="label-row">
+          <span class="annotation">label="Email Address"</span>
+          <dees-label .label=${'Email Address'}></dees-label>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Required Indicator</h3>
+      <p>When <code>required</code> is set, a red asterisk appears after the label text.</p>
+      <div class="label-grid">
+        <div class="label-row">
+          <span class="annotation">required=${'{true}'}</span>
+          <dees-label .label=${'Full Name'} .required=${true}></dees-label>
+        </div>
+        <div class="label-row">
+          <span class="annotation">required=${'{false}'} (default)</span>
+          <dees-label .label=${'Nickname'} .required=${false}></dees-label>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Description (Info Icon)</h3>
+      <p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
+      <div class="label-grid">
+        <div class="label-row">
+          <span class="annotation">description="..."</span>
+          <dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
+        </div>
+        <div class="label-row">
+          <span class="annotation">short description</span>
+          <dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Required + Description</h3>
+      <p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
+      <div class="label-grid">
+        <div class="label-row">
+          <span class="annotation">required + description</span>
+          <dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
+        </div>
+        <div class="label-row">
+          <span class="annotation">required + description</span>
+          <dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Empty Label</h3>
+      <p>When <code>label</code> is empty or not set, nothing is rendered. The element below has no label text:</p>
+      <div class="label-grid">
+        <div class="label-row">
+          <span class="annotation">label="" (empty)</span>
+          <dees-label .label=${''}></dees-label>
+        </div>
+      </div>
+    </div>
+  </div>
+`;

ts_web/elements/00group-layout/dees-label/dees-label.ts

@@ -50,7 +50,8 @@ export class DeesLabel extends DeesElement {
       }
 
       .label {
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         font-size: 14px;
         font-weight: 500;
@@ -66,13 +67,26 @@ export class DeesLabel extends DeesElement {
         margin-left: 2px;
       }
 
-      dees-icon {
-        display: inline-block;
-        font-size: 12px;
-        transform: translateY(1px);
-        margin-left: 4px;
+      .description-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        margin: -6px 0 -6px 2px;
+        border-radius: 4px;
+        cursor: default;
+        transition: background 0.15s ease, color 0.15s ease;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        cursor: help;
+      }
+
+      .description-icon:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 80%)')};
+      }
+
+      .description-icon dees-icon {
+        font-size: 14px;
       }
     `,
   ];
@@ -86,7 +100,9 @@ export class DeesLabel extends DeesElement {
               ${this.required ? html`<span class="required">*</span>` : ''}
               ${this.description
                 ? html`
-                    <dees-icon .icon=${'lucide:info'}></dees-icon>
+                    <div class="description-icon">
+                      <dees-icon .icon=${'lucide:info'}></dees-icon>
+                    </div>
                     <dees-speechbubble .text=${this.description}></dees-speechbubble>
                   `
                 : html``}