feat(input): separate label info tooltips from description text across input components

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
    */