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,145 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
+
+export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
+export type TIdpButtonSize = 'sm' | 'md' | 'lg';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-button': IdpButton;
+  }
+}
+
+@customElement('idp-button')
+export class IdpButton extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+      <idp-button>Default</idp-button>
+      <idp-button variant="accent">Approve</idp-button>
+      <idp-button variant="outline">Deny</idp-button>
+      <idp-button variant="ghost">Ghost</idp-button>
+      <idp-button variant="destructive">Delete</idp-button>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor variant: TIdpButtonVariant = 'default';
+
+  @property({ type: String })
+  public accessor size: TIdpButtonSize = 'md';
+
+  @property({ type: String })
+  public accessor icon = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        font-family: var(--idp-font);
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
+      }
+      button:active:not(:disabled) {
+        transform: translateY(1px);
+      }
+      button:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
+        outline-offset: 2px;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .sm {
+        height: 32px;
+        padding: 0 12px;
+        font-size: 13px;
+      }
+      .md {
+        height: 38px;
+        padding: 0 14px;
+        font-size: 14px;
+      }
+      .lg {
+        height: 44px;
+        padding: 0 18px;
+        font-size: 15px;
+      }
+      .default {
+        background: var(--idp-primary);
+        color: var(--idp-primary-fg);
+      }
+      .default:hover:not(:disabled) {
+        opacity: 0.88;
+      }
+      .accent {
+        background: var(--idp-accent);
+        color: #fff;
+        box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
+      }
+      .accent:hover:not(:disabled) {
+        background: var(--idp-accent-hover);
+      }
+      .secondary {
+        background: var(--idp-muted);
+        color: var(--idp-fg);
+        border-color: var(--idp-border);
+      }
+      .outline {
+        background: transparent;
+        color: var(--idp-fg);
+        border-color: var(--idp-border);
+      }
+      .outline:hover:not(:disabled), .secondary:hover:not(:disabled), .ghost:hover:not(:disabled) {
+        background: var(--idp-muted);
+      }
+      .ghost {
+        background: transparent;
+        color: var(--idp-fg);
+      }
+      .destructive {
+        background: var(--idp-destructive);
+        color: #fff;
+      }
+      idp-icon {
+        flex: 0 0 auto;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <button class="${this.variant} ${this.size}" ?disabled=${this.disabled} part="button">
+        ${this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
+        <slot></slot>
+      </button>
+    `;
+  }
+}