@idp.global/catalog 1.1.1

package/ts_web/elements/idp-icon.ts

@@ -0,0 +1,263 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import * as lucideIcons from 'lucide';
+import {
+  Activity,
+  ArrowUp,
+  Bell,
+  Bolt,
+  Box,
+  Building2,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Cloud,
+  Copy,
+  CreditCard,
+  Fingerprint,
+  Globe,
+  Grid2x2,
+  Home,
+  Key,
+  Laptop,
+  Lock,
+  LogOut,
+  Mail,
+  MapPin,
+  Monitor,
+  MonitorSmartphone,
+  Nfc,
+  Phone,
+  Plus,
+  Power,
+  QrCode,
+  Search,
+  Settings,
+  Shield,
+  SmartphoneNfc,
+  SquarePen,
+  Trash2,
+  TriangleAlert,
+  User,
+  Users,
+  Wallet,
+  X,
+  createElement,
+  type IconNode,
+} from 'lucide';
+import { idpElementStyles } from './tokens.js';
+
+export type TIdpIconName =
+  | 'activity'
+  | 'alert'
+  | 'alert-triangle'
+  | 'arrow-up'
+  | 'bell'
+  | 'bolt'
+  | 'box'
+  | 'building'
+  | 'building2'
+  | 'building-2'
+  | 'check'
+  | 'chevron'
+  | 'chevron-down'
+  | 'chevron-right'
+  | 'clock'
+  | 'cloud'
+  | 'copy'
+  | 'credit'
+  | 'device'
+  | 'edit'
+  | 'fingerprint'
+  | 'gear'
+  | 'globe'
+  | 'grid'
+  | 'home'
+  | 'key'
+  | 'laptop'
+  | 'location'
+  | 'lock'
+  | 'logout'
+  | 'mail'
+  | 'monitor'
+  | 'monitor-smartphone'
+  | 'nfc'
+  | 'phone'
+  | 'plus'
+  | 'power'
+  | 'qr'
+  | 'search'
+  | 'settings'
+  | 'shield'
+  | 'smartphone-nfc'
+  | 'trash'
+  | 'user'
+  | 'users'
+  | 'wallet'
+  | 'waveform'
+  | 'x'
+  | `lucide:${string}`;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-icon': IdpIcon;
+  }
+}
+
+const iconNodes: Record<string, IconNode> = {
+  activity: Activity,
+  alert: TriangleAlert,
+  'alert-triangle': TriangleAlert,
+  'arrow-up': ArrowUp,
+  bell: Bell,
+  bolt: Bolt,
+  box: Box,
+  building: Building2,
+  building2: Building2,
+  'building-2': Building2,
+  check: Check,
+  chevron: ChevronRight,
+  'chevron-down': ChevronDown,
+  'chevron-right': ChevronRight,
+  clock: Clock,
+  cloud: Cloud,
+  copy: Copy,
+  credit: CreditCard,
+  device: MonitorSmartphone,
+  edit: SquarePen,
+  fingerprint: Fingerprint,
+  gear: Settings,
+  globe: Globe,
+  grid: Grid2x2,
+  home: Home,
+  key: Key,
+  laptop: Laptop,
+  location: MapPin,
+  lock: Lock,
+  logout: LogOut,
+  mail: Mail,
+  monitor: Monitor,
+  'monitor-smartphone': MonitorSmartphone,
+  nfc: Nfc,
+  phone: Phone,
+  plus: Plus,
+  power: Power,
+  qr: QrCode,
+  search: Search,
+  settings: Settings,
+  shield: Shield,
+  'smartphone-nfc': SmartphoneNfc,
+  trash: Trash2,
+  user: User,
+  users: Users,
+  wallet: Wallet,
+  waveform: Activity,
+  x: X,
+};
+
+const toKebab = (valueArg: string): string => valueArg
+  .replace(/^lucide:/, '')
+  .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+  .toLowerCase();
+
+const toLucideExportName = (valueArg: string): string => valueArg
+  .replace(/^lucide:/i, '')
+  .split(/[-_: ]+/)
+  .filter(Boolean)
+  .map((partArg) => `${partArg.charAt(0).toUpperCase()}${partArg.slice(1)}`)
+  .join('');
+
+@customElement('idp-icon')
+export class IdpIcon extends DeesElement {
+  public static demo = () => html`<idp-icon name="shield"></idp-icon>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor name: TIdpIconName = 'shield';
+
+  @property({ type: Number })
+  public accessor size = 18;
+
+  private lastRenderKey = '';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: currentColor;
+        line-height: 0;
+        vertical-align: middle;
+      }
+      #iconContainer {
+        width: var(--icon-size);
+        height: var(--icon-size);
+      }
+      #iconContainer svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 1.75;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `,
+  ];
+
+  private resolveIconNode(): IconNode {
+    const rawName = String(this.name || 'shield');
+    const iconName = toKebab(rawName);
+    const aliasNode = iconNodes[iconName];
+    if (aliasNode) {
+      return aliasNode;
+    }
+
+    const exportName = toLucideExportName(rawName);
+    const lucideNode = (lucideIcons as Record<string, unknown>)[exportName];
+    if (Array.isArray(lucideNode)) {
+      return lucideNode as IconNode;
+    }
+
+    return Shield;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div id="iconContainer" style="--icon-size: ${this.size}px"></div>
+    `;
+  }
+
+  public updated(): void {
+    const renderKey = `${this.name}:${this.size}`;
+    if (this.lastRenderKey === renderKey) {
+      return;
+    }
+
+    this.lastRenderKey = renderKey;
+
+    const container = this.shadowRoot?.querySelector('#iconContainer');
+    if (!container) {
+      return;
+    }
+
+    container.innerHTML = '';
+    const iconElement = createElement(this.resolveIconNode(), {
+      color: 'currentColor',
+      size: this.size,
+      strokeWidth: 1.75,
+    });
+    iconElement.setAttribute('aria-hidden', 'true');
+    container.appendChild(iconElement);
+  }
+}

package/ts_web/elements/idp-inbox-preview.ts

@@ -0,0 +1,192 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-approval-card.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-mobile-frame.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-inbox-preview': IdpInboxPreview;
+  }
+}
+
+@customElement('idp-inbox-preview')
+export class IdpInboxPreview extends DeesElement {
+  public static demo = () => html`<idp-inbox-preview></idp-inbox-preview>`;
+  public static demoGroups = ['idp.global v3 approval surfaces'];
+
+  @property({ type: Boolean, reflect: true })
+  public accessor dark = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      idp-mobile-frame {
+        --idp-bg: #ffffff;
+      }
+      :host([dark]) idp-mobile-frame {
+        --idp-bg: #09090b;
+        --idp-fg: #fafafa;
+      }
+      .screen {
+        height: 100%;
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+        box-sizing: border-box;
+        padding-top: 58px;
+        display: flex;
+        flex-direction: column;
+      }
+      .header {
+        padding: 0 20px 14px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .brandline {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 650;
+      }
+      .brandmark {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        background: var(--idp-primary);
+        color: var(--idp-primary-fg);
+      }
+      h2 {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 760;
+        letter-spacing: -0.04em;
+      }
+      .summary {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 6px;
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+      }
+      .list {
+        display: grid;
+        gap: 10px;
+        padding: 14px 16px 120px;
+        overflow: auto;
+      }
+      .earlier {
+        margin: 10px 0 2px;
+        color: var(--idp-muted-fg);
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        font-size: 13px;
+      }
+      .row-icon {
+        width: 26px;
+        height: 26px;
+        border-radius: 7px;
+        background: var(--idp-muted);
+        color: var(--idp-ok);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .row-sub {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        margin-top: 1px;
+      }
+      .tabbar {
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        bottom: 24px;
+        z-index: 80;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 4px;
+        padding: 8px;
+        border: 1px solid color-mix(in srgb, var(--idp-border), transparent 20%);
+        border-radius: 22px;
+        background: color-mix(in srgb, var(--idp-card), transparent 8%);
+        box-shadow: 0 16px 36px rgb(0 0 0 / 0.16);
+        backdrop-filter: blur(24px) saturate(170%);
+      }
+      .tab {
+        display: grid;
+        place-items: center;
+        gap: 3px;
+        min-height: 44px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 600;
+      }
+      .tab.active {
+        color: var(--idp-accent);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <idp-mobile-frame ?dark=${this.dark}>
+        <div class="screen">
+          <header class="header">
+            <div class="brandline">
+              <div class="brand"><span class="brandmark"><idp-icon name="shield" size="14"></idp-icon></span>idp.global</div>
+              <idp-button variant="ghost" size="sm" icon="search" aria-label="Search"></idp-button>
+            </div>
+            <h2>Inbox</h2>
+            <div class="summary"><idp-badge variant="ok">3 pending</idp-badge><span>oldest 8 min ago</span></div>
+          </header>
+          <div class="list">
+            <idp-approval-card primary app-name="GitHub" app-initials="GH" app-color="#24292F" request-text="Sign in to github.com" location="Berlin · DE" device="Safari · MBP" time-label="now"></idp-approval-card>
+            <idp-approval-card app-name="Lufthansa.com" app-initials="LH" app-color="#05164D" request-text="Verify identity" location="Berlin · DE" device="iPhone 15 Pro" time-label="2m"></idp-approval-card>
+            <idp-approval-card app-name="Hetzner Cloud" app-initials="HZ" app-color="#D50C2D" request-text="Sign in to console" location="Falkenstein · DE" device="Firefox · Windows" risk="warning" time-label="8m"></idp-approval-card>
+            <div class="earlier">Earlier today</div>
+            ${['Notion · Approved 11:42', 'Apple ID · Approved 09:18', 'reddit.com · Denied 08:57'].map((itemArg) => html`
+              <div class="row">
+                <div class="row-icon"><idp-icon name="check" size="15"></idp-icon></div>
+                <div>
+                  <div>${itemArg.split(' · ')[0]}</div>
+                  <div class="row-sub">${itemArg.split(' · ')[1]}</div>
+                </div>
+              </div>
+            `)}
+          </div>
+          <nav class="tabbar">
+            <div class="tab active"><idp-icon name="bell" size="18"></idp-icon>Inbox</div>
+            <div class="tab"><idp-icon name="clock" size="18"></idp-icon>History</div>
+            <div class="tab"><idp-icon name="device" size="18"></idp-icon>Devices</div>
+            <div class="tab"><idp-icon name="user" size="18"></idp-icon>Identity</div>
+          </nav>
+        </div>
+      </idp-mobile-frame>
+    `;
+  }
+}

package/ts_web/elements/idp-input.ts

@@ -0,0 +1,151 @@
+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 name = '';
+
+  @property({ type: String })
+  public accessor key = '';
+
+  @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: String })
+  public accessor autocomplete = '';
+
+  @property({ type: String })
+  public accessor error = '';
+
+  @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;
+        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;
+      }
+      input[aria-invalid='true'] {
+        border-color: var(--idp-destructive);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-destructive), transparent 86%);
+      }
+      .hint,
+      .error {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      .error {
+        color: var(--idp-destructive);
+      }
+    `,
+  ];
+
+  public focus() {
+    this.shadowRoot?.querySelector('input')?.focus();
+  }
+
+  public validate() {
+    const input = this.shadowRoot?.querySelector('input');
+    if (this.required && !this.value.trim()) {
+      this.error = `${this.label || this.name || 'This field'} is required.`;
+      return false;
+    }
+
+    if (input && !input.checkValidity()) {
+      this.error = input.validationMessage;
+      return false;
+    }
+
+    this.error = '';
+    return true;
+  }
+
+  private handleInput(eventArg: Event) {
+    this.value = (eventArg.target as HTMLInputElement).value;
+    if (this.error) {
+      this.validate();
+    }
+    this.dispatchEvent(new CustomEvent('idp-input-change', {
+      detail: { name: this.name || this.key, key: this.key || this.name, 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}
+          name=${this.name || this.key}
+          type=${this.type}
+          placeholder=${this.placeholder}
+          autocomplete=${this.autocomplete}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          @input=${this.handleInput}
+        />
+        ${this.error ? html`<span class="error">${this.error}</span>` : this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
+      </label>
+    `;
+  }
+}