@design.estate/dees-catalog 3.74.2 → 3.76.0

package/package.json

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

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -610,26 +610,26 @@ export class DeesTable<T> extends DeesElement {
         <div class="searchGrid hidden">
           <dees-input-text
             .label=${'lucene syntax search'}
-            .description=${`
+            .infoText=${`
               You can use the lucene syntax to search for data, e.g.:
-              
+
               \`\`\`
               name: "john" AND age: 18
               \`\`\`
-              
+
             `}
           ></dees-input-text>
           <dees-input-multitoggle
             .label=${'search mode'}
             .options=${['table', 'data', 'server']}
             .selectedOption=${'table'}
-            .description=${`
+            .infoText=${`
               There are three basic modes:
-              
+
               * table: only searches data already in the table
               * data: searches original data, ignoring table transforms
               * server: searches data on the server
-              
+
             `}
           ></dees-input-multitoggle>
         </div>

package/ts_web/elements/00group-form/dees-form/dees-form.demo.ts

@@ -92,7 +92,7 @@ export const demoFunc = () => html`
             .required=${true} 
             key="firstName" 
             label="First Name"
-            .description=${'Your given name'}
+            .infoText=${'Your given name'}
           ></dees-input-text>
           
           <dees-input-text 
@@ -105,7 +105,7 @@ export const demoFunc = () => html`
             .required=${true} 
             key="email" 
             label="Email Address"
-            .description=${'We will use this to contact you'}
+            .infoText=${'We will use this to contact you'}
           ></dees-input-text>
           
           <dees-input-dropdown
@@ -126,7 +126,7 @@ export const demoFunc = () => html`
             key="password"
             label="Password"
             isPasswordBool
-            .description=${'Minimum 8 characters'}
+            .infoText=${'Minimum 8 characters'}
           ></dees-input-text>
           
           <dees-input-checkbox
@@ -300,7 +300,7 @@ export const demoFunc = () => html`
           <dees-input-fileupload
             key="documents"
             .label=${'Upload Documents'}
-            .description=${'PDF, DOC, or DOCX files up to 10MB'}
+            .infoText=${'PDF, DOC, or DOCX files up to 10MB'}
           ></dees-input-fileupload>
           
           <dees-form-submit>Submit Application</dees-form-submit>

package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -1,6 +1,7 @@
 import {
   DeesElement,
   property,
+  html,
   css,
   type CSSResult,
   cssManager,
@@ -42,6 +43,9 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
   @property({ type: Boolean })
   accessor disabled: boolean = false;
 
+  @property({ type: String })
+  accessor infoText!: string;
+
   @property({ type: String })
   accessor description!: string;
 
@@ -90,6 +94,14 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
         :host([label-position="none"]) dees-label {
           display: none;
         }
+
+        /* Description text below input */
+        .descriptionText {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 1.4;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        }
       `,
     ];
   }
@@ -155,6 +167,14 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
     this.disabled = false;
   }
 
+  /**
+   * Renders the description text below the input.
+   * Call ${this.renderDescription()} at the end of your render template.
+   */
+  public renderDescription() {
+    return this.description ? html`<div class="descriptionText">${this.description}</div>` : '';
+  }
+
   /**
    * Abstract method that child classes must implement to get their value
    */

package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -147,12 +147,6 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
           color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         }
 
-        /* Description */
-        .description-text {
-          font-size: 12px;
-          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-          line-height: 1.5;
-        }
     `,
   ];
 
@@ -185,7 +179,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
           </div>
           <div class="label-container">
             ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
-            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+            ${this.renderDescription()}
           </div>
         </div>
       </div>

package/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -284,7 +284,7 @@ export class DeesInputCode extends DeesInputBase<string> {
         }
       </style>
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <dees-tile>
           <div slot="header" class="toolbar">
             <div class="toolbar-left">
@@ -362,6 +362,7 @@ export class DeesInputCode extends DeesInputBase<string> {
             </div>
           </div>
         </dees-tile>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-datepicker/template.ts

@@ -4,7 +4,7 @@ import type { DeesInputDatepicker } from './component.js';
 export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult => {
       return html`
         <div class="input-wrapper">
-          <dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
+          <dees-label .label=${component.label} .infoText=${component.infoText} .required=${component.required}></dees-label>
           <div class="input-container">
             <input
               type="text"
@@ -27,6 +27,7 @@ export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult
               <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
             </div>
           </div>
+          ${component.renderDescription()}
         </div>
       `;
 

package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -72,6 +72,7 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-dropdown
             .label=${'Select Country'}
+            .description=${'Choose the country where your business is registered'}
             .options=${[
               { option: 'United States', key: 'us' },
               { option: 'Canada', key: 'ca' },

package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -168,7 +168,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <div class="maincontainer">
           <div
             class="selectedBox ${this.isOpened ? 'open' : ''} ${this.disabled ? 'disabled' : ''}"
@@ -179,6 +179,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
             ${this.selectedOption?.option || 'Select an option'}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -73,7 +73,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       <div class="input-wrapper">
         <dees-label
           .label=${this.label}
-          .description=${this.description}
+          .infoText=${this.infoText}
           .required=${this.required}
         ></dees-label>
         <dees-tile
@@ -114,6 +114,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         ${this.validationMessage
           ? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
           : html``}
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts

@@ -59,14 +59,15 @@ export const demoFunc = () => html`
           <div class="demo-stack">
             <dees-input-fileupload
               .label=${'Attachments'}
-              .description=${'Upload supporting documents for your request'}
+              .infoText=${'Upload supporting documents for your request'}
+              .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
               .accept=${'image/*,.pdf,.zip'}
               .maxSize=${10 * 1024 * 1024}
             ></dees-input-fileupload>
 
             <dees-input-fileupload
               .label=${'Brand assets'}
-              .description=${'Upload high-resolution imagery (JPG/PNG)'}
+              .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
               .accept=${'image/jpeg,image/png'}
               .multiple=${false}
               .maxSize=${5 * 1024 * 1024}
@@ -77,14 +78,14 @@ export const demoFunc = () => html`
           <div class="demo-stack">
             <dees-input-fileupload
               .label=${'Audio uploads'}
-              .description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
+              .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
               .accept=${'audio/*'}
               .maxSize=${25 * 1024 * 1024}
             ></dees-input-fileupload>
 
             <dees-input-fileupload
               .label=${'Disabled example'}
-              .description=${'Uploader is disabled while moderation is pending'}
+              .infoText=${'Uploader is disabled while moderation is pending'}
               .disabled=${true}
             ></dees-input-fileupload>
           </div>
@@ -100,7 +101,7 @@ export const demoFunc = () => html`
             <div class="demo-stack">
               <dees-input-text
                 .label=${'Project name'}
-                .description=${'How should we refer to this project internally?'}
+                .infoText=${'How should we refer to this project internally?'}
                 .required=${true}
                 .key=${'projectName'}
               ></dees-input-text>
@@ -114,7 +115,7 @@ export const demoFunc = () => html`
 
               <dees-input-fileupload
                 .label=${'Statement of work'}
-                .description=${'Upload a signed statement of work (PDF, max 15MB)'}
+                .infoText=${'Upload a signed statement of work (PDF, max 15MB)'}
                 .required=${true}
                 .accept=${'application/pdf'}
                 .maxSize=${15 * 1024 * 1024}
@@ -124,7 +125,7 @@ export const demoFunc = () => html`
 
               <dees-input-fileupload
                 .label=${'Creative references'}
-                .description=${'Optional. Upload up to five visual references'}
+                .infoText=${'Optional. Upload up to five visual references'}
                 .accept=${'image/*'}
                 .maxFiles=${5}
                 .maxSize=${8 * 1024 * 1024}
@@ -133,7 +134,7 @@ export const demoFunc = () => html`
 
               <dees-input-text
                 .label=${'Notes'}
-                .description=${'Add optional context for reviewers'}
+                .infoText=${'Add optional context for reviewers'}
                 .inputType=${'textarea'}
                 .key=${'notes'}
               ></dees-input-text>

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

@@ -33,12 +33,13 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-iban
             .label=${'Bank Account IBAN'}
-            .description=${'Enter your International Bank Account Number'}
+            .infoText=${'Enter your International Bank Account Number'}
+            .description=${'Your IBAN can be found on your bank statement'}
           ></dees-input-iban>
 
           <dees-input-iban
             .label=${'Verified IBAN'}
-            .description=${'This IBAN has been verified'}
+            .infoText=${'This IBAN has been verified'}
             .value=${'DE89370400440532013000'}
           ></dees-input-iban>
         </div>
@@ -64,13 +65,13 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-iban
             .label=${'Payment Account'}
-            .description=${'Required for processing payments'}
+            .infoText=${'Required for processing payments'}
             .required=${true}
           ></dees-input-iban>
 
           <dees-input-iban
             .label=${'Locked IBAN'}
-            .description=${'This IBAN cannot be changed'}
+            .infoText=${'This IBAN cannot be changed'}
             .value=${'FR1420041010050500013M02606'}
             .disabled=${true}
           ></dees-input-iban>
@@ -81,7 +82,7 @@ export const demoFunc = () => html`
         <dees-form>
           <dees-input-text .label=${'Recipient Name'} .required=${true}></dees-input-text>
           <dees-input-iban .label=${'Recipient IBAN'} .required=${true}></dees-input-iban>
-          <dees-input-text .label=${'Transfer Reference'} .description=${'Optional reference for the transfer'}></dees-input-text>
+          <dees-input-text .label=${'Transfer Reference'} .infoText=${'Optional reference for the transfer'}></dees-input-text>
           <dees-input-text .label=${'Amount'} .inputType=${'number'} .required=${true}></dees-input-text>
         </dees-form>
       </dees-panel>

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

@@ -44,7 +44,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label || 'IBAN'} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label || 'IBAN'} .infoText=${this.infoText}></dees-label>
         <dees-input-text
           .value=${this.value}
           .disabled=${this.disabled}
@@ -64,6 +64,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
             this.validateIban(eventArg);
           }}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -373,13 +373,6 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         line-height: 1.4;
       }
 
-      .description {
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 12px;
-        margin-top: 4px;
-        line-height: 1.4;
-      }
-
       /* Scrollbar styling */
       .list-items::-webkit-scrollbar {
         width: 8px;
@@ -546,9 +539,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
           <div class="validation-message">${this.validationText}</div>
         ` : ''}
         
-        ${this.description ? html`
-          <div class="description">${this.description}</div>
-        ` : ''}
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts

@@ -55,7 +55,8 @@ export const demoFunc = () => html`
         
         <dees-input-multitoggle
           .label=${'Display Mode'}
-          .description=${'Choose how content is displayed'}
+          .infoText=${'Choose how content is displayed'}
+          .description=${'This setting affects how items appear on your dashboard'}
           .options=${['List View', 'Grid View', 'Compact']}
           .selectedOption=${'Grid View'}
         ></dees-input-multitoggle>
@@ -64,7 +65,7 @@ export const demoFunc = () => html`
         
         <dees-input-multitoggle
           .label=${'T-Shirt Size'}
-          .description=${'Select your preferred size'}
+          .infoText=${'Select your preferred size'}
           .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
           .selectedOption=${'M'}
         ></dees-input-multitoggle>
@@ -76,7 +77,7 @@ export const demoFunc = () => html`
         
         <dees-input-multitoggle
           .label=${'Notifications'}
-          .description=${'Enable or disable push notifications'}
+          .infoText=${'Enable or disable push notifications'}
           .type=${'boolean'}
           .selectedOption=${'true'}
         ></dees-input-multitoggle>
@@ -85,7 +86,7 @@ export const demoFunc = () => html`
         
         <dees-input-multitoggle
           .label=${'Theme Mode'}
-          .description=${'Switch between light and dark theme'}
+          .infoText=${'Switch between light and dark theme'}
           .type=${'boolean'}
           .booleanTrueName=${'Dark'}
           .booleanFalseName=${'Light'}
@@ -134,7 +135,7 @@ export const demoFunc = () => html`
         
         <dees-input-multitoggle
           .label=${'Account Type'}
-          .description=${'This setting is locked'}
+          .infoText=${'This setting is locked'}
           .options=${['Free', 'Pro', 'Enterprise']}
           .selectedOption=${'Enterprise'}
           .disabled=${true}

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -146,7 +146,7 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <div class="mainbox">
           <div class="selections">
           <div class="indicator"></div>
@@ -158,6 +158,7 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
           )}
           </div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts

@@ -33,13 +33,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-phone
             .label=${'Phone Number'}
-            .description=${'Enter your phone number with country code'}
+            .infoText=${'Enter your phone number with country code'}
+            .description=${'Include country code for international numbers'}
             .value=${'5551234567'}
           ></dees-input-phone>
 
           <dees-input-phone
             .label=${'Contact Phone'}
-            .description=${'Required for account verification'}
+            .infoText=${'Required for account verification'}
             .required=${true}
             .placeholder=${'+1 (555) 000-0000'}
           ></dees-input-phone>
@@ -66,7 +67,7 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-phone
             .label=${'International Contact'}
-            .description=${'Automatically formats international numbers'}
+            .infoText=${'Automatically formats international numbers'}
             .value=${'441234567890'}
           ></dees-input-phone>
 

package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts

@@ -47,7 +47,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <dees-input-text
           .value=${this.formattedPhone}
           .disabled=${this.disabled}
@@ -55,6 +55,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
           .placeholder=${this.placeholder}
           @input=${(event: InputEvent) => this.handlePhoneInput(event)}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts

@@ -69,13 +69,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-quantityselector
             .label=${'Quantity'}
-            .description=${'Select the desired quantity'}
+            .infoText=${'Select the desired quantity'}
+            .description=${'Minimum order quantity is 1 item'}
             .value=${1}
           ></dees-input-quantityselector>
 
           <dees-input-quantityselector
             .label=${'Items in Cart'}
-            .description=${'Adjust the quantity of items'}
+            .infoText=${'Adjust the quantity of items'}
             .value=${3}
           ></dees-input-quantityselector>
         </div>
@@ -180,14 +181,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-quantityselector
             .label=${'Number of Licenses'}
-            .description=${'Select how many licenses you need'}
+            .infoText=${'Select how many licenses you need'}
             .required=${true}
             .value=${1}
           ></dees-input-quantityselector>
 
           <dees-input-quantityselector
             .label=${'Fixed Quantity'}
-            .description=${'This quantity cannot be changed'}
+            .infoText=${'This quantity cannot be changed'}
             .disabled=${true}
             .value=${5}
           ></dees-input-quantityselector>
@@ -204,7 +205,7 @@ export const demoFunc = () => html`
           ></dees-input-dropdown>
           <dees-input-quantityselector
             .label=${'Quantity'}
-            .description=${'Number of licenses'}
+            .infoText=${'Number of licenses'}
             .value=${1}
           ></dees-input-quantityselector>
           <dees-input-text

package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts

@@ -129,7 +129,7 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        ${this.label ? html`<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>` : ''}
+        ${this.label ? html`<dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>` : ''}
         <div 
           class="quantity-container ${this.disabled ? 'disabled' : ''}"
           data-min="${this.value <= 0}"
@@ -162,6 +162,7 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
             aria-label="Increase quantity"
           >+</div>
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts

@@ -189,14 +189,6 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
         line-height: 20px;
       }
 
-      .description-text {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 10px;
-        line-height: 1.5;
-        letter-spacing: -0.003em;
-      }
-
       /* Validation styles */
       :host([validationState="invalid"]) .radio-circle {
         border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
@@ -256,7 +248,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
             `;
           })}
         </div>
-        ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-input/dees-input-richtext/styles.ts

@@ -278,13 +278,6 @@ export const richtextStyles = [
         border-color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
-      .description {
-        margin-top: 8px;
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        line-height: 1.4;
-      }
-
       :host([disabled]) dees-tile {
         opacity: 0.6;
         cursor: not-allowed;

package/ts_web/elements/00group-input/dees-input-richtext/template.ts

@@ -26,7 +26,7 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
                 `
               : ''}
           </dees-tile>
-          ${component.description ? html`<div class="description">${component.description}</div>` : ''}
+          ${component.renderDescription()}
         </div>
       `;
 

package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts

@@ -210,14 +210,6 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         line-height: 1.5;
       }
 
-      /* Description styles */
-      .description {
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
-      }
-
       /* Scrollbar styling */
       .suggestions-dropdown::-webkit-scrollbar {
         width: 8px;
@@ -302,9 +294,7 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
           <div class="validation-message">${this.validationText}</div>
         ` : ''}
         
-        ${this.description ? html`
-          <div class="description">${this.description}</div>
-        ` : ''}
+        ${this.renderDescription()}
       </div>
     `;
   }