update

ts_web/elements/dees-panel.ts

@@ -25,35 +25,112 @@ export class DeesPanel extends DeesElement {
   @property({ type: String })
   public subtitle: string = '';
 
+  @property({ type: String })
+  public variant: 'default' | 'outline' | 'ghost' = 'default';
+
+  @property({ type: String })
+  public size: 'sm' | 'md' | 'lg' = 'md';
+
+  @property({ attribute: false })
+  public runAfterRender?: (elementArg: HTMLElement) => void | Promise<void>;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
       :host {
         display: block;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
-        border-radius: 8px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border-radius: 6px;
         padding: 24px;
-        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
-        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      /* Variant: default */
+      :host([variant="default"]) {
+        box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
+      }
+
+      /* Variant: outline */
+      :host([variant="outline"]) {
+        background: transparent;
+        box-shadow: none;
+      }
+
+      /* Variant: ghost */
+      :host([variant="ghost"]) {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        padding: 16px;
+      }
+
+      /* Size variations */
+      :host([size="sm"]) {
+        padding: 16px;
+      }
+
+      :host([size="lg"]) {
+        padding: 32px;
+      }
+
+      .header {
+        margin-bottom: 16px;
+      }
+
+      .header:empty {
+        display: none;
       }
 
       .title {
-        margin: 0 0 8px 0;
+        margin: 0;
         font-size: 18px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
         letter-spacing: -0.025em;
+        line-height: 1.5;
+      }
+
+      /* Title size variations */
+      :host([size="sm"]) .title {
+        font-size: 16px;
+      }
+
+      :host([size="lg"]) .title {
+        font-size: 20px;
       }
 
       .subtitle {
-        margin: 0 0 16px 0;
+        margin: 4px 0 0 0;
         font-size: 14px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        letter-spacing: -0.01em;
+        letter-spacing: -0.006em;
+        line-height: 1.5;
+      }
+
+      /* Subtitle size variations */
+      :host([size="sm"]) .subtitle {
+        font-size: 13px;
+      }
+
+      :host([size="lg"]) .subtitle {
+        font-size: 15px;
+        margin-top: 6px;
       }
 
       .content {
-        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 84.9%)')};
+        font-size: 14px;
+        line-height: 1.6;
+      }
+
+      /* Content size variations */
+      :host([size="sm"]) .content {
+        font-size: 13px;
+      }
+
+      :host([size="lg"]) .content {
+        font-size: 15px;
       }
 
       /* Remove margins from first and last children */
@@ -64,16 +141,57 @@ export class DeesPanel extends DeesElement {
       .content ::slotted(*:last-child) {
         margin-bottom: 0;
       }
+
+      /* Interactive states for default variant */
+      :host([variant="default"]:hover) {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+      }
+
+      /* Interactive states for outline variant */
+      :host([variant="outline"]:hover) {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 7.8%)')};
+      }
+
+      /* Interactive states for ghost variant */
+      :host([variant="ghost"]:hover) {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      /* Focus states */
+      :host(:focus-within) {
+        outline: none;
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+      }
+
+      /* Nested panels spacing */
+      ::slotted(dees-panel) {
+        margin-top: 16px;
+      }
+
+      ::slotted(dees-panel:first-child) {
+        margin-top: 0;
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      ${this.title ? html`<h3 class="title">${this.title}</h3>` : ''}
-      ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : ''}
+      <div class="header">
+        ${this.title ? html`<h3 class="title">${this.title}</h3>` : ''}
+        ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : ''}
+      </div>
       <div class="content">
         <slot></slot>
       </div>
     `;
   }
+
+  public async firstUpdated() {
+    if (this.runAfterRender) {
+      await this.runAfterRender(this);
+    }
+  }
 }