@idp.global/catalog 1.1.1

package/ts_web/elements/idp-approval-card.ts

@@ -0,0 +1,182 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-approval-card': IdpApprovalCard;
+  }
+}
+
+@customElement('idp-approval-card')
+export class IdpApprovalCard extends DeesElement {
+  public static demo = () => html`
+    <idp-approval-card
+      app-name="GitHub"
+      app-initials="GH"
+      app-color="#24292F"
+      request-text="Sign in to github.com"
+      location="Berlin · DE"
+      device="Safari · MacBook Pro"
+      risk="trusted"
+      time-label="now"
+    ></idp-approval-card>
+  `;
+  public static demoGroups = ['idp.global v3 approval surfaces'];
+
+  @property({ type: String, attribute: 'app-name' })
+  public accessor appName = 'GitHub';
+
+  @property({ type: String, attribute: 'app-initials' })
+  public accessor appInitials = 'GH';
+
+  @property({ type: String, attribute: 'app-color' })
+  public accessor appColor = '#24292F';
+
+  @property({ type: String, attribute: 'request-text' })
+  public accessor requestText = 'Sign in to github.com';
+
+  @property({ type: String })
+  public accessor location = 'Berlin · DE';
+
+  @property({ type: String })
+  public accessor device = 'Safari · MacBook Pro';
+
+  @property({ type: String })
+  public accessor risk: 'trusted' | 'warning' | 'low' = 'trusted';
+
+  @property({ type: String, attribute: 'time-label' })
+  public accessor timeLabel = 'now';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor primary = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .card {
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        padding: 14px;
+        color: var(--idp-fg);
+      }
+      :host([primary]) .card {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 92%);
+      }
+      .top {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        background: var(--app-color);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 750;
+        letter-spacing: -0.03em;
+        flex: 0 0 auto;
+      }
+      .body {
+        flex: 1;
+        min-width: 0;
+      }
+      .line {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      .app {
+        font-size: 14px;
+        font-weight: 650;
+        letter-spacing: -0.02em;
+      }
+      .time, .sub, .meta {
+        color: var(--idp-muted-fg);
+      }
+      .time {
+        font-size: 12px;
+      }
+      .sub {
+        margin-top: 1px;
+        font-size: 13px;
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+        margin-top: 9px;
+        font-size: 12px;
+      }
+      .meta-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+      }
+      idp-button:first-child {
+        flex: 1;
+      }
+      idp-button:last-child {
+        flex: 2;
+      }
+    `,
+  ];
+
+  private dispatchAction(actionArg: 'approve' | 'deny') {
+    this.dispatchEvent(new CustomEvent(`idp-${actionArg}`, {
+      detail: {
+        appName: this.appName,
+        requestText: this.requestText,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    const badgeVariant = this.risk === 'warning' ? 'warn' : 'ok';
+    const badgeText = this.risk === 'warning' ? 'new network' : 'trusted';
+    return html`
+      <article class="card" style="--app-color: ${this.appColor}">
+        <div class="top">
+          <div class="avatar">${this.appInitials}</div>
+          <div class="body">
+            <div class="line">
+              <div class="app">${this.appName}</div>
+              <div class="time">${this.timeLabel}</div>
+            </div>
+            <div class="sub">${this.requestText}</div>
+            <div class="meta">
+              <span class="meta-item"><idp-icon name="location" size="12"></idp-icon>${this.location}</span>
+              <span class="meta-item"><idp-icon name="laptop" size="12"></idp-icon>${this.device}</span>
+              <idp-badge variant=${badgeVariant as any}>${badgeText}</idp-badge>
+            </div>
+          </div>
+        </div>
+        <div class="actions">
+          <idp-button variant="outline" @click=${() => this.dispatchAction('deny')}>Deny</idp-button>
+          <idp-button variant="accent" icon="check" @click=${() => this.dispatchAction('approve')}>Approve</idp-button>
+        </div>
+      </article>
+    `;
+  }
+}

package/ts_web/elements/idp-badge.ts

@@ -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>`;
+  }
+}

package/ts_web/elements/idp-button.ts

@@ -0,0 +1,166 @@
+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: String })
+  public accessor type: 'button' | 'submit' | 'reset' = 'button';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor loading = 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: var(--idp-accent-fg);
+        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: var(--idp-accent-fg);
+      }
+      idp-icon {
+        flex: 0 0 auto;
+      }
+      .spinner {
+        width: 13px;
+        height: 13px;
+        border: 2px solid currentColor;
+        border-right-color: transparent;
+        border-radius: 999px;
+        animation: spin 700ms linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <button class="${this.variant} ${this.size}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
+        ${this.loading
+          ? html`<span class="spinner" aria-hidden="true"></span>`
+          : this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
+        <slot></slot>
+      </button>
+    `;
+  }
+}

package/ts_web/elements/idp-card.ts

@@ -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>
+    `;
+  }
+}

package/ts_web/elements/idp-checkbox.ts

@@ -0,0 +1,143 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-checkbox': IdpCheckbox;
+  }
+}
+
+@customElement('idp-checkbox')
+export class IdpCheckbox extends DeesElement {
+  public static demo = () => html`<idp-checkbox label="I agree to the terms" required></idp-checkbox>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor label = '';
+
+  @property({ type: String })
+  public accessor name = '';
+
+  @property({ type: String })
+  public accessor key = '';
+
+  @property({ type: String })
+  public accessor value = 'on';
+
+  @property({ type: String })
+  public accessor hint = '';
+
+  @property({ type: String })
+  public accessor error = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor checked = false;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor required = false;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      label {
+        display: grid;
+        grid-template-columns: 18px 1fr;
+        gap: 10px;
+        align-items: start;
+        color: var(--idp-fg);
+        font-size: 13px;
+        line-height: 1.4;
+        cursor: pointer;
+      }
+      input {
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        margin: 0;
+        border: 1px solid var(--idp-border);
+        border-radius: 5px;
+        background: var(--idp-card);
+        cursor: pointer;
+        transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+      }
+      input:checked {
+        border-color: var(--idp-accent);
+        background: var(--idp-accent);
+        box-shadow: inset 0 0 0 3px var(--idp-card);
+      }
+      input:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
+        outline-offset: 2px;
+      }
+      input[aria-invalid='true'] {
+        border-color: var(--idp-destructive);
+      }
+      input:disabled,
+      :host([disabled]) label {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+      .copy {
+        display: grid;
+        gap: 4px;
+      }
+      .hint,
+      .error {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+      }
+      .error {
+        color: var(--idp-destructive);
+      }
+    `,
+  ];
+
+  public validate() {
+    if (this.required && !this.checked) {
+      this.error = `${this.label || this.name || 'This field'} is required.`;
+      return false;
+    }
+
+    this.error = '';
+    return true;
+  }
+
+  private handleChange(eventArg: Event) {
+    this.checked = (eventArg.target as HTMLInputElement).checked;
+    if (this.error) {
+      this.validate();
+    }
+    this.dispatchEvent(new CustomEvent('idp-checkbox-change', {
+      detail: { name: this.name || this.key, key: this.key || this.name, checked: this.checked, value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <label>
+        <input
+          type="checkbox"
+          name=${this.name || this.key}
+          value=${this.value}
+          ?checked=${this.checked}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          @change=${this.handleChange}
+        />
+        <span class="copy">
+          <span>${this.label}</span>
+          ${this.error ? html`<span class="error">${this.error}</span>` : this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
+        </span>
+      </label>
+    `;
+  }
+}