update

ts_web/elements/dees-label.ts

@@ -32,20 +32,43 @@ export class DeesLabel extends DeesElement {
   })
   public description: string;
 
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public required: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
       .label {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        display: inline-block;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         font-size: 14px;
-        margin-bottom: 8px;
+        font-weight: 500;
+        line-height: 1.5;
+        margin-bottom: 6px;
         cursor: default;
         user-select: none;
+        letter-spacing: -0.01em;
       }
+
+      .required {
+        color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
+        margin-left: 2px;
+      }
+
       dees-icon {
         display: inline-block;
-        font-size: 14px;
-        transform: translateY(1.5px);
+        font-size: 12px;
+        transform: translateY(1px);
+        margin-left: 4px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        cursor: help;
       }
     `,
   ];
@@ -56,9 +79,10 @@ export class DeesLabel extends DeesElement {
         ? html`
             <div class="label">
               ${this.label}
+              ${this.required ? html`<span class="required">*</span>` : ''}
               ${this.description
                 ? html`
-                    <dees-icon .iconFA=${'circleInfo'}></dees-icon>
+                    <dees-icon .iconName=${'lucideInfo'}></dees-icon>
                     <dees-speechbubble .text=${this.description}></dees-speechbubble>
                   `
                 : html``}