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,101 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-input': IdpInput;
+  }
+}
+
+@customElement('idp-input')
+export class IdpInput extends DeesElement {
+  public static demo = () => html`<idp-input label="Email" placeholder="user@example.com"></idp-input>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor label = '';
+
+  @property({ type: String })
+  public accessor hint = '';
+
+  @property({ type: String })
+  public accessor value = '';
+
+  @property({ type: String })
+  public accessor placeholder = '';
+
+  @property({ type: String })
+  public accessor type = 'text';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      label {
+        display: grid;
+        gap: 6px;
+      }
+      .label {
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 500;
+      }
+      input {
+        width: 100%;
+        height: 36px;
+        box-sizing: border-box;
+        padding: 0 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        outline: none;
+        background: var(--idp-card);
+        color: var(--idp-fg);
+        font-family: var(--idp-font);
+        font-size: 13px;
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      input:focus {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 86%);
+      }
+      input:disabled {
+        opacity: 0.5;
+      }
+      .hint {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        line-height: 1.4;
+      }
+    `,
+  ];
+
+  private handleInput(eventArg: Event) {
+    this.value = (eventArg.target as HTMLInputElement).value;
+    this.dispatchEvent(new CustomEvent('idp-input-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <label>
+        ${this.label ? html`<span class="label">${this.label}</span>` : html``}
+        <input
+          .value=${this.value}
+          type=${this.type}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+        />
+        ${this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
+      </label>
+    `;
+  }
+}