feat(catalog): add initial idp.global component catalog with primitives, composed views, and full-page showcases

2026-05-03 10:11:06 +00:00
commit cd5eac437c
35 changed files with 11775 additions and 0 deletions
@@ -0,0 +1,76 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-card': IdpCard;
+  }
+}
+
+@customElement('idp-card')
+export class IdpCard extends DeesElement {
+  public static demo = () => html`<idp-card headline="Card title" description="Muted supporting text.">Card content</idp-card>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor headline = '';
+
+  @property({ type: String })
+  public accessor description = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor elevated = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .card {
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius-lg);
+        color: var(--idp-fg);
+        padding: 20px;
+      }
+      :host([elevated]) .card {
+        box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.28);
+      }
+      .head {
+        display: flex;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 16px;
+      }
+      .headline {
+        font-size: 14px;
+        font-weight: 650;
+        line-height: 1.35;
+      }
+      .description {
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+        line-height: 1.5;
+        margin-top: 3px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <section class="card" part="card">
+        ${this.headline || this.description ? html`
+          <div class="head">
+            <div>
+              ${this.headline ? html`<div class="headline">${this.headline}</div>` : html``}
+              ${this.description ? html`<div class="description">${this.description}</div>` : html``}
+            </div>
+            <slot name="action"></slot>
+          </div>
+        ` : html``}
+        <slot></slot>
+      </section>
+    `;
+  }
+}