feat(structure): adjust

ts_web/elements/dees-label/dees-label.demo.ts

@@ -0,0 +1,7 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <dees-label .label=${'a label'}></dees-label>
+  `;
+}

ts_web/elements/dees-label/dees-label.ts

@@ -0,0 +1,94 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
+import {
+  customElement,
+  html,
+  css,
+  cssManager,
+  DeesElement,
+  property,
+  unsafeCSS,
+  query,
+} from '@design.estate/dees-element';
+
+import { demoFunc } from './dees-label.demo.js';
+
+@customElement('dees-label')
+export class DeesLabel extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  accessor label = '';
+
+  @property({
+    type: String,
+    reflect: true,
+  })
+  accessor description: string;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  accessor required: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
+      .label {
+        display: inline-block;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        font-size: 14px;
+        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: 12px;
+        transform: translateY(1px);
+        margin-left: 4px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        cursor: help;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      ${this.label
+        ? html`
+            <div class="label">
+              ${this.label}
+              ${this.required ? html`<span class="required">*</span>` : ''}
+              ${this.description
+                ? html`
+                    <dees-icon .icon=${'lucide:info'}></dees-icon>
+                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
+                  `
+                : html``}
+            </div>
+          `
+        : html``}
+    `;
+  }
+}