v3.73.2

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.73.1",
+  "version": "3.73.2",
   "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",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.73.1',
+  version: '3.73.2',
   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-text/dees-input-text.ts

@@ -44,7 +44,7 @@ export class DeesInputText extends DeesInputBase {
   accessor showPasswordBool = false;
 
   @property({
-    type: Boolean,
+    type: String,
     reflect: true,
   })
   accessor validationState!: 'valid' | 'warn' | 'invalid';
@@ -172,31 +172,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)')};
       }

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

@@ -67,11 +67,26 @@ export class DeesLabel extends DeesElement {
         margin-left: 2px;
       }
 
-      dees-icon {
-        font-size: 12px;
-        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;
       }
     `,
   ];
@@ -85,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``}