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,84 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+export type TIdpBadgeVariant = 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-badge': IdpBadge;
+  }
+}
+
+@customElement('idp-badge')
+export class IdpBadge extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <idp-badge>Default</idp-badge>
+      <idp-badge variant="accent">Admin</idp-badge>
+      <idp-badge variant="ok">Trusted</idp-badge>
+      <idp-badge variant="warn">New network</idp-badge>
+      <idp-badge variant="error">Denied</idp-badge>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor variant: TIdpBadgeVariant = 'default';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        border: 1px solid transparent;
+        border-radius: 999px;
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        line-height: 16px;
+      }
+      .default {
+        background: var(--idp-muted);
+        color: var(--idp-muted-fg);
+      }
+      .accent {
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+      }
+      .ok {
+        background: var(--idp-ok-bg);
+        color: var(--idp-ok);
+        border-color: var(--idp-ok-border);
+      }
+      .warn {
+        background: var(--idp-warn-bg);
+        color: var(--idp-warn);
+        border-color: var(--idp-warn-border);
+      }
+      .error {
+        background: var(--idp-error-bg);
+        color: var(--idp-error);
+        border-color: var(--idp-error-border);
+      }
+      .accent {
+        border-color: var(--idp-info-border);
+      }
+      .outline {
+        background: transparent;
+        color: var(--idp-fg);
+        border-color: var(--idp-border);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`<span class="badge ${this.variant}"><slot></slot></span>`;
+  }
+}