diff --git a/changelog.md b/changelog.md
index ef38fed..5669c8c 100644
--- a/changelog.md
+++ b/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
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index b029935..8891bb5 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/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.'
}
diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
index 5d71441..0dc6905 100644
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
+++ b/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)')};
}
diff --git a/ts_web/elements/00group-layout/dees-label/dees-label.ts b/ts_web/elements/00group-layout/dees-label/dees-label.ts
index c810131..7eb69fd 100644
--- a/ts_web/elements/00group-layout/dees-label/dees-label.ts
+++ b/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`*` : ''}
${this.description
? html`
-