@idp.global/catalog 1.1.1

package/ts_web/elements/idp-mobile-frame.ts

@@ -0,0 +1,137 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-mobile-frame': IdpMobileFrame;
+  }
+}
+
+@customElement('idp-mobile-frame')
+export class IdpMobileFrame extends DeesElement {
+  public static demo = () => html`
+    <idp-mobile-frame>
+      <div style="height: 100%; background: #fff; padding: 72px 20px 20px; box-sizing: border-box;">Screen content</div>
+    </idp-mobile-frame>
+  `;
+  public static demoGroups = ['idp.global v3 device frames'];
+
+  @property({ type: String })
+  public accessor time = '9:41';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor dark = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      .device {
+        position: relative;
+        width: 402px;
+        height: 874px;
+        max-width: 100%;
+        border-radius: 48px;
+        overflow: hidden;
+        background: var(--idp-bg);
+        box-shadow: 0 40px 80px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.12);
+      }
+      .island {
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        z-index: 50;
+        width: 126px;
+        height: 37px;
+        transform: translateX(-50%);
+        border-radius: 24px;
+        background: #000;
+      }
+      .status {
+        position: absolute;
+        inset: 0 0 auto;
+        z-index: 40;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 18px 28px 0;
+        box-sizing: border-box;
+        color: var(--idp-fg);
+        font-size: 15px;
+        font-weight: 650;
+        pointer-events: none;
+      }
+      .status-icons {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+      }
+      .bar {
+        width: 4px;
+        border-radius: 999px;
+        background: currentColor;
+      }
+      .screen {
+        height: 100%;
+        overflow: hidden;
+      }
+      .home {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 60;
+        height: 34px;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 8px;
+        pointer-events: none;
+      }
+      .home::before {
+        content: '';
+        width: 139px;
+        height: 5px;
+        border-radius: 100px;
+        background: color-mix(in srgb, var(--idp-fg), transparent 72%);
+      }
+      @media (max-width: 520px) {
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .device {
+          width: 100%;
+          height: auto;
+          aspect-ratio: 402 / 874;
+          border-radius: 0;
+        }
+        .island {
+          display: none;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="device">
+        <div class="island"></div>
+        <div class="status">
+          <span>${this.time}</span>
+          <span class="status-icons" aria-hidden="true">
+            <span class="bar" style="height: 5px"></span>
+            <span class="bar" style="height: 8px"></span>
+            <span class="bar" style="height: 11px"></span>
+            <span style="width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px;"></span>
+          </span>
+        </div>
+        <div class="screen"><slot></slot></div>
+        <div class="home"></div>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/idp-mobile-showcase.ts

@@ -0,0 +1,295 @@
+import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-inbox-preview.js';
+import './idp-mobile-frame.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-mobile-showcase': IdpMobileShowcase;
+  }
+}
+
+@customElement('idp-mobile-showcase')
+export class IdpMobileShowcase extends DeesElement {
+  public static demo = () => html`<idp-mobile-showcase></idp-mobile-showcase>`;
+  public static demoGroups = ['idp.global v3 full pages'];
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .showcase {
+        min-height: 100vh;
+        padding: 56px;
+        background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--idp-fg), transparent 92%) 1px, transparent 0) 0 0 / 24px 24px, var(--idp-bg);
+        color: var(--idp-fg);
+      }
+      .head {
+        max-width: 1180px;
+        margin: 0 auto 44px;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 16px;
+        padding: 4px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 999px;
+        background: var(--idp-card);
+        color: var(--idp-fg-3);
+        font-size: 11px;
+        font-weight: 500;
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--idp-ok);
+      }
+      h1 {
+        max-width: 900px;
+        margin: 0 0 14px;
+        font-family: var(--idp-display);
+        font-size: clamp(36px, 5vw, 56px);
+        font-weight: 750;
+        letter-spacing: -0.035em;
+        line-height: 1.05;
+      }
+      p {
+        max-width: 680px;
+        margin: 0;
+        color: var(--idp-fg-3);
+        font-size: 16px;
+        line-height: 1.55;
+      }
+      .tokens {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24px;
+        margin-top: 24px;
+        padding: 16px;
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        background: var(--idp-card);
+      }
+      .token-label {
+        margin-bottom: 4px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .token-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 550;
+      }
+      .swatch {
+        width: 18px;
+        height: 18px;
+        border-radius: 5px;
+        background: var(--swatch);
+        border: 1px solid var(--idp-border);
+      }
+      .section {
+        max-width: 1180px;
+        margin: 0 auto 56px;
+      }
+      .section-title {
+        margin-bottom: 18px;
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .phones {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(300px, 402px));
+        gap: 28px;
+        align-items: start;
+      }
+      .multi {
+        display: grid;
+        grid-template-columns: 280px minmax(0, 1fr) 360px;
+        gap: 28px;
+        align-items: start;
+      }
+      .watch, .ipad, .mac {
+        border: 1px solid var(--idp-border);
+        background: var(--idp-card);
+        box-shadow: 0 20px 50px color-mix(in srgb, var(--idp-fg), transparent 92%);
+      }
+      .watch {
+        width: 236px;
+        height: 286px;
+        display: grid;
+        place-items: center;
+        border-radius: 60px;
+        background: #09090b;
+        color: #fafafa;
+      }
+      .watch-screen {
+        width: 178px;
+        display: grid;
+        gap: 12px;
+        text-align: center;
+      }
+      .watch-app {
+        color: #a1a1aa;
+        font-family: var(--idp-mono);
+        font-size: 10px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .watch-title {
+        font-size: 18px;
+        font-weight: 700;
+      }
+      .watch-actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+      .watch-actions button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        height: 34px;
+        border: 1px solid #27272a;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fafafa;
+      }
+      .watch-actions .approve {
+        background: #3b82f6;
+        border-color: #3b82f6;
+      }
+      .ipad {
+        min-height: 520px;
+        overflow: hidden;
+        border-radius: 26px;
+      }
+      .ipad-shell {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        min-height: 520px;
+      }
+      .ipad-sidebar {
+        padding: 18px;
+        border-right: 1px solid var(--idp-border);
+        background: var(--idp-card-2);
+      }
+      .ipad-main {
+        padding: 22px;
+      }
+      .ipad-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        margin-top: 16px;
+        padding: 16px;
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        background: var(--idp-card);
+      }
+      .mac {
+        overflow: hidden;
+        border-radius: 14px;
+      }
+      .mac-bar {
+        display: flex;
+        gap: 6px;
+        padding: 11px 14px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .tdot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      .mac-body {
+        display: grid;
+        gap: 12px;
+        padding: 18px;
+      }
+      .mac-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        background: var(--idp-card);
+      }
+      .inline-muted {
+        color: var(--idp-muted-fg);
+      }
+      .watch-muted {
+        color: #a1a1aa;
+      }
+      .row-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      @media (max-width: 1120px) {
+        .multi {
+          grid-template-columns: 1fr;
+        }
+      }
+      @media (max-width: 900px) {
+        .showcase {
+          padding: 28px;
+        }
+        .phones {
+          grid-template-columns: 1fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="showcase">
+        <header class="head">
+          <div class="badge"><span class="dot"></span>Mobile redesign - v3 - shadcn tokens</div>
+          <h1>A personal identity provider, built across every device you carry.</h1>
+          <p>Same four-platform architecture: flat surfaces, 1px borders, neutral palette, and blue accent used only where action is expected.</p>
+          <div class="tokens">
+            ${[
+              ['Primary', '#18181b', 'zinc-900'],
+              ['Accent', '#0050b9', 'idp blue'],
+              ['Muted', '#f4f4f2', 'paper muted'],
+              ['Border', '#e4e4e7', 'zinc-200'],
+            ].map((tokenArg) => html`<div><div class="token-label">${tokenArg[0]}</div><div class="token-value"><span class="swatch" style="--swatch:${tokenArg[1]}"></span>${tokenArg[2]}</div></div>`)}
+          </div>
+        </header>
+        <section class="section">
+          <div class="section-title">iPhone</div>
+          <div class="phones"><idp-inbox-preview></idp-inbox-preview><idp-inbox-preview dark></idp-inbox-preview></div>
+        </section>
+        <section class="section">
+          <div class="section-title">Watch, iPad, Mac</div>
+          <div class="multi">
+            <div class="watch"><div class="watch-screen"><div class="watch-app">idp.global</div><idp-icon name="shield" size="28" style="margin:0 auto;color:var(--idp-accent-hover)"></idp-icon><div class="watch-title">GitHub wants access</div><div class="watch-muted" style="font-size:12px;">repo:read - Berlin</div><div class="watch-actions"><button><idp-icon name="x" size="13"></idp-icon>Deny</button><button class="approve"><idp-icon name="check" size="13"></idp-icon>Approve</button></div></div></div>
+            <div class="ipad"><div class="ipad-shell"><aside class="ipad-sidebar"><strong>Inbox</strong><p>3 pending approvals</p><div class="ipad-card"><idp-icon name="globe" size="16"></idp-icon><div><strong>GitHub OAuth</strong><br/><span class="inline-muted">repo:read - now</span></div></div><div class="ipad-card"><idp-icon name="cloud" size="16"></idp-icon><div><strong>Hetzner Cloud</strong><br/><span class="inline-muted">new network - 8m</span></div></div></aside><main class="ipad-main"><h2>Approval detail</h2><p>Full context before a sensitive action is approved.</p><div class="ipad-card"><idp-icon name="laptop" size="16"></idp-icon><div><strong>Device</strong><br/>MacBook Pro - Safari - Berlin, DE</div></div><div class="ipad-card"><idp-icon name="key" size="16"></idp-icon><div><strong>Requested scopes</strong><br/>openid, profile, email, repo:read</div></div></main></div></div>
+            <div class="mac"><div class="mac-bar"><span class="tdot" style="background:#ff5f57"></span><span class="tdot" style="background:#ffbd2e"></span><span class="tdot" style="background:#28c840"></span></div><div class="mac-body"><strong>Menu bar approvals</strong><div class="mac-row"><span class="row-label"><idp-icon name="globe" size="15"></idp-icon>GitHub OAuth</span><idp-button variant="accent" size="sm" icon="check">Approve</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="nfc" size="15"></idp-icon>NFC tap - door 4F</span><idp-button variant="ghost" size="sm" icon="chevron-right">Review</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="key" size="15"></idp-icon>Key rotation</span><idp-button variant="ghost" size="sm" icon="shield">Confirm</idp-button></div></div></div>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/idp-select.ts

@@ -0,0 +1,119 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+export interface IIdpSelectOption {
+  option: string;
+  key: string;
+  payload?: string;
+}
+
+export interface IIdpSelectEventDetail {
+  key: string;
+  payload?: string;
+  selectedOption: IIdpSelectOption | null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-select': IdpSelect;
+  }
+}
+
+@customElement('idp-select')
+export class IdpSelect extends DeesElement {
+  public static demo = () => html`
+    <idp-select
+      label="Organization"
+      .options=${[
+        { option: 'Lossless GmbH', key: 'lossless', payload: 'lossless' },
+        { option: '+ Create new...', key: '__create_new__', payload: '__create_new__' },
+      ]}
+    ></idp-select>
+  `;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor label = '';
+
+  @property({ type: String })
+  public accessor placeholder = 'Select...';
+
+  @property({ type: Array })
+  public accessor options: IIdpSelectOption[] = [];
+
+  @property({ type: Object })
+  public accessor selectedOption: IIdpSelectOption | null = null;
+
+  @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;
+      }
+      select {
+        width: 100%;
+        height: 36px;
+        box-sizing: border-box;
+        padding: 0 34px 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;
+        cursor: pointer;
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      select:focus {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 86%);
+      }
+      select:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  private handleChange(eventArg: Event) {
+    const key = (eventArg.target as HTMLSelectElement).value;
+    const selectedOption = this.options.find((optionArg) => optionArg.key === key) || null;
+    this.selectedOption = selectedOption;
+    this.dispatchEvent(new CustomEvent<IIdpSelectEventDetail>('idp-select', {
+      detail: {
+        key,
+        payload: selectedOption?.payload,
+        selectedOption,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <label>
+        ${this.label ? html`<span class="label">${this.label}</span>` : html``}
+        <select .value=${this.selectedOption?.key || ''} ?disabled=${this.disabled} @change=${this.handleChange}>
+          <option value="" disabled>${this.placeholder}</option>
+          ${this.options.map((optionArg) => html`
+            <option value=${optionArg.key}>${optionArg.option}</option>
+          `)}
+        </select>
+      </label>
+    `;
+  }
+}

package/ts_web/elements/idp-toggle.ts

@@ -0,0 +1,77 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-toggle': IdpToggle;
+  }
+}
+
+@customElement('idp-toggle')
+export class IdpToggle extends DeesElement {
+  public static demo = () => html`<idp-toggle checked></idp-toggle>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: Boolean, reflect: true })
+  public accessor checked = false;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      button {
+        width: 36px;
+        height: 20px;
+        border: none;
+        border-radius: 999px;
+        padding: 2px;
+        background: var(--idp-border);
+        cursor: pointer;
+        transition: background 150ms ease;
+      }
+      :host([checked]) button {
+        background: var(--idp-accent);
+      }
+      :host([disabled]) button {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .knob {
+        width: 16px;
+        height: 16px;
+        border-radius: 999px;
+        background: #fff;
+        box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
+        transition: transform 150ms ease;
+      }
+      :host([checked]) .knob {
+        transform: translateX(16px);
+      }
+    `,
+  ];
+
+  private toggle() {
+    if (this.disabled) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent('idp-toggle-change', {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <button role="switch" aria-checked=${this.checked} ?disabled=${this.disabled} @click=${this.toggle}>
+        <div class="knob"></div>
+      </button>
+    `;
+  }
+}

package/ts_web/elements/index.ts

@@ -0,0 +1,20 @@
+export * from './tokens.js';
+export * from './idp-icon.js';
+export * from './idp-button.js';
+export * from './idp-badge.js';
+export * from './idp-card.js';
+export * from './idp-input.js';
+export * from './idp-checkbox.js';
+export * from './idp-form.js';
+export * from './idp-form-submit.js';
+export * from './idp-select.js';
+export * from './idp-data-table.js';
+export * from './idp-toggle.js';
+export * from './idp-approval-card.js';
+export * from './idp-mobile-frame.js';
+export * from './idp-inbox-preview.js';
+export * from './idp-dashboard-window.js';
+export * from './idp-admin-shell.js';
+export * from './idp-landing-hero.js';
+export * from './idp-landing-page.js';
+export * from './idp-mobile-showcase.js';