@idp.global/catalog 1.2.1 → 2.1.0

package/ts_web/elements/idp-input.ts

@@ -1,5 +1,8 @@
 import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
+
+export type TIdpInputSize = 'md' | 'lg';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -9,8 +12,14 @@ declare global {
 
 @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'];
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 14px; max-width: 340px;">
+      <idp-input label="Email" placeholder="user@example.com"></idp-input>
+      <idp-input size="lg" icon="mail" placeholder="you@example.com"></idp-input>
+      <idp-input size="lg" icon="lock" type="password" placeholder="Password"></idp-input>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
 
   @property({ type: String })
   public accessor label = '';
@@ -45,6 +54,12 @@ export class IdpInput extends DeesElement {
   @property({ type: Boolean, reflect: true })
   public accessor disabled = false;
 
+  @property({ type: String, reflect: true })
+  public accessor size: TIdpInputSize = 'md';
+
+  @property({ type: String })
+  public accessor icon = '';
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -85,6 +100,33 @@ export class IdpInput extends DeesElement {
         border-color: var(--idp-destructive);
         box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-destructive), transparent 86%);
       }
+      .field {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      .field idp-icon {
+        position: absolute;
+        left: 13px;
+        color: var(--idp-fg-3);
+        pointer-events: none;
+      }
+      :host([size='lg']) input {
+        height: 44px;
+        border-width: 1.5px;
+        border-radius: 12px;
+        padding: 0 14px;
+        font-size: 14px;
+      }
+      :host([size='lg']) .field idp-icon + input {
+        padding-left: 40px;
+      }
+      :host([size='md']) .field idp-icon + input {
+        padding-left: 34px;
+      }
+      :host([size='lg']) input:focus {
+        box-shadow: 0 0 0 3px var(--sh-accent-ring);
+      }
       .hint,
       .error {
         color: var(--idp-muted-fg);
@@ -133,17 +175,20 @@ export class IdpInput extends DeesElement {
     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}
-        />
+        <span class="field">
+          ${this.icon ? html`<idp-icon name=${this.icon as any} size=${this.size === 'lg' ? 17 : 14}></idp-icon>` : 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}
+          />
+        </span>
         ${this.error ? html`<span class="error">${this.error}</span>` : this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
       </label>
     `;

package/ts_web/elements/idp-option-row.ts

@@ -0,0 +1,184 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
+
+export type TIdpOptionRowTrailing = 'chevron' | 'check' | 'none';
+export type TIdpOptionRowTileTone = 'default' | 'accent';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-option-row': IdpOptionRow;
+  }
+}
+
+@customElement('idp-option-row')
+export class IdpOptionRow extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 10px; max-width: 340px;">
+      <idp-option-row icon="fingerprint" label="Passkey · Face ID" description="Recommended — no password to remember" active trailing="none"></idp-option-row>
+      <idp-option-row icon="phone" label="Push approvals" description="Alex's iPhone 15 Pro" trailing="check"></idp-option-row>
+      <idp-option-row icon="user" label="Your name and email" description="alex@lossless.com" interactive="false" tileTone="accent" tileSize="30" trailing="check"></idp-option-row>
+      <idp-option-row label="Alex Mercer" description="alex@lossless.com">
+        <idp-avatar slot="leading" name="Alex Mercer"></idp-avatar>
+      </idp-option-row>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor icon = '';
+
+  @property({ type: String })
+  public accessor label = '';
+
+  @property({ type: String })
+  public accessor description = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor active = false;
+
+  @property({
+    converter: (valueArg) => valueArg !== 'false' && valueArg !== null,
+  })
+  public accessor interactive = true;
+
+  @property({ type: String })
+  public accessor trailing: TIdpOptionRowTrailing = 'chevron';
+
+  @property({ type: String })
+  public accessor tileTone: TIdpOptionRowTileTone = 'default';
+
+  @property({ type: Number })
+  public accessor tileSize = 34;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 11px 13px;
+        border-radius: 13px;
+        border: 1.5px solid var(--idp-border);
+        background: var(--idp-card);
+        font-family: var(--idp-font);
+        text-align: left;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .row.interactive {
+        cursor: pointer;
+        transition: border-color 120ms ease, background 120ms ease;
+      }
+      .row.interactive:hover {
+        background: var(--sh-hover);
+      }
+      .row.interactive:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
+        outline-offset: 2px;
+      }
+      :host([active]) .row {
+        border-color: var(--idp-accent);
+        background: var(--idp-accent-soft);
+      }
+      .tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 9px;
+        background: var(--idp-muted);
+        color: var(--idp-fg-2);
+      }
+      .tile.accent {
+        background: var(--idp-accent-soft);
+        color: var(--sh-accent-soft-fg);
+      }
+      :host([active]) .tile {
+        background: var(--idp-card);
+        color: var(--idp-accent);
+      }
+      .body {
+        flex: 1;
+        min-width: 0;
+      }
+      .label {
+        font-size: 13.5px;
+        font-weight: 600;
+        color: var(--idp-fg);
+      }
+      .description {
+        font-size: 12px;
+        color: var(--idp-fg-3);
+        margin-top: 1px;
+        line-height: 1.4;
+      }
+      .trailing {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        color: var(--sh-fg-4);
+      }
+      .trailing.check {
+        color: var(--idp-ok);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="row ${this.interactive ? 'interactive' : ''}"
+        role=${this.interactive ? 'button' : 'listitem'}
+        tabindex=${this.interactive ? '0' : '-1'}
+        @click=${this.handleSelect}
+        @keydown=${this.handleKeydown}
+      >
+        <slot name="leading">
+          ${this.icon
+            ? html`
+                <span
+                  class="tile ${this.tileTone === 'accent' ? 'accent' : ''}"
+                  style="width: ${this.tileSize}px; height: ${this.tileSize}px;"
+                >
+                  <idp-icon name=${this.icon as any} size=${Math.round(this.tileSize / 2)}></idp-icon>
+                </span>
+              `
+            : html``}
+        </slot>
+        <div class="body">
+          <div class="label">${this.label}</div>
+          ${this.description ? html`<div class="description">${this.description}</div>` : html``}
+        </div>
+        <slot name="trailing">
+          ${this.trailing === 'chevron'
+            ? html`<span class="trailing"><idp-icon name="chevron-right" size="16"></idp-icon></span>`
+            : this.trailing === 'check'
+              ? html`<span class="trailing check"><idp-icon name="check" size="15"></idp-icon></span>`
+              : html``}
+        </slot>
+      </div>
+    `;
+  }
+
+  private handleSelect() {
+    if (!this.interactive) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('idp-option-select', { bubbles: true, composed: true }));
+  }
+
+  private handleKeydown(eventArg: KeyboardEvent) {
+    if (!this.interactive) {
+      return;
+    }
+    if (eventArg.key === 'Enter' || eventArg.key === ' ') {
+      eventArg.preventDefault();
+      this.handleSelect();
+    }
+  }
+}

package/ts_web/elements/idp-otp-input.ts

@@ -0,0 +1,204 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+export interface IIdpOtpChangeEventDetail {
+  value: string;
+  complete: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-otp-input': IdpOtpInput;
+  }
+}
+
+@customElement('idp-otp-input')
+export class IdpOtpInput extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 18px; max-width: 340px;">
+      <idp-otp-input></idp-otp-input>
+      <idp-otp-input length="4"></idp-otp-input>
+      <idp-otp-input error="That code didn't match. Try again."></idp-otp-input>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: Number })
+  public accessor length = 6;
+
+  @property({ type: String })
+  public accessor value = '';
+
+  @property({ type: String })
+  public accessor name = '';
+
+  @property({ type: String })
+  public accessor key = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  @property({ type: String })
+  public accessor error = '';
+
+  @property({ type: Boolean })
+  public accessor required = true;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .boxes {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+      }
+      input {
+        width: 44px;
+        height: 52px;
+        border-radius: 12px;
+        background: var(--idp-card);
+        border: 1.5px solid var(--idp-border);
+        color: var(--idp-fg);
+        font-family: var(--idp-font);
+        font-size: 22px;
+        font-weight: 600;
+        text-align: center;
+        outline: none;
+        padding: 0;
+        caret-color: var(--idp-accent);
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      input:focus {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px var(--sh-accent-ring);
+      }
+      input:disabled {
+        opacity: 0.5;
+      }
+      .has-error input {
+        border-color: var(--idp-error);
+      }
+      .error {
+        margin: 8px 0 0;
+        font-size: 12px;
+        color: var(--idp-error);
+        text-align: center;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const digits = Array.from({ length: this.length }, (unused, indexArg) => this.value[indexArg] || '');
+    return html`
+      <div class="boxes ${this.error ? 'has-error' : ''}">
+        ${digits.map(
+          (digitArg, indexArg) => html`
+            <input
+              type="text"
+              inputmode="numeric"
+              maxlength="1"
+              autocomplete=${indexArg === 0 ? 'one-time-code' : 'off'}
+              .value=${digitArg}
+              ?disabled=${this.disabled}
+              aria-label="Digit ${indexArg + 1} of ${this.length}"
+              @input=${(eventArg: InputEvent) => this.handleInput(eventArg, indexArg)}
+              @keydown=${(eventArg: KeyboardEvent) => this.handleKeydown(eventArg, indexArg)}
+              @paste=${(eventArg: ClipboardEvent) => this.handlePaste(eventArg)}
+            />
+          `
+        )}
+      </div>
+      ${this.error ? html`<p class="error">${this.error}</p>` : html``}
+    `;
+  }
+
+  private get inputs(): HTMLInputElement[] {
+    return Array.from(this.shadowRoot?.querySelectorAll('input') || []);
+  }
+
+  private handleInput(eventArg: InputEvent, indexArg: number) {
+    const input = eventArg.target as HTMLInputElement;
+    const digits = input.value.replace(/\D/g, '');
+    // browser OTP autofill may drop the whole code into the first box
+    if (digits.length > 1) {
+      this.fillFrom(digits, indexArg);
+      return;
+    }
+    input.value = digits;
+    this.syncValueFromInputs();
+    if (digits && indexArg < this.length - 1) {
+      this.inputs[indexArg + 1]?.focus();
+    }
+  }
+
+  private handlePaste(eventArg: ClipboardEvent) {
+    eventArg.preventDefault();
+    const digits = (eventArg.clipboardData?.getData('text') || '').replace(/\D/g, '');
+    if (digits) {
+      this.fillFrom(digits, 0);
+    }
+  }
+
+  private fillFrom(digitsArg: string, startIndexArg: number) {
+    const inputs = this.inputs;
+    for (let offset = 0; offset < digitsArg.length && startIndexArg + offset < this.length; offset++) {
+      inputs[startIndexArg + offset].value = digitsArg[offset];
+    }
+    const nextIndex = Math.min(startIndexArg + digitsArg.length, this.length - 1);
+    inputs[nextIndex]?.focus();
+    this.syncValueFromInputs();
+  }
+
+  private handleKeydown(eventArg: KeyboardEvent, indexArg: number) {
+    const inputs = this.inputs;
+    if (eventArg.key === 'Backspace') {
+      eventArg.preventDefault();
+      if (inputs[indexArg].value) {
+        inputs[indexArg].value = '';
+      } else if (indexArg > 0) {
+        inputs[indexArg - 1].value = '';
+        inputs[indexArg - 1].focus();
+      }
+      this.syncValueFromInputs();
+    } else if (eventArg.key === 'ArrowLeft' && indexArg > 0) {
+      inputs[indexArg - 1].focus();
+    } else if (eventArg.key === 'ArrowRight' && indexArg < this.length - 1) {
+      inputs[indexArg + 1].focus();
+    }
+  }
+
+  private syncValueFromInputs() {
+    this.value = this.inputs.map((inputArg) => inputArg.value).join('');
+    this.error = '';
+    const complete = this.value.length === this.length;
+    const detail: IIdpOtpChangeEventDetail = { value: this.value, complete };
+    this.dispatchEvent(new CustomEvent('idp-otp-change', { detail, bubbles: true, composed: true }));
+    if (complete) {
+      this.dispatchEvent(new CustomEvent('idp-otp-complete', { detail, bubbles: true, composed: true }));
+    }
+  }
+
+  public focus() {
+    const firstEmpty = Math.min(this.value.length, this.length - 1);
+    this.inputs[firstEmpty]?.focus();
+  }
+
+  public clear() {
+    this.value = '';
+    this.error = '';
+    this.updateComplete.then(() => this.inputs[0]?.focus());
+  }
+
+  public validate(): boolean {
+    if (this.required && this.value.length !== this.length) {
+      this.error = `Enter the ${this.length}-digit code.`;
+      return false;
+    }
+    this.error = '';
+    return true;
+  }
+}

package/ts_web/elements/idp-progress-bar.ts

@@ -0,0 +1,69 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-progress-bar': IdpProgressBar;
+  }
+}
+
+@customElement('idp-progress-bar')
+export class IdpProgressBar extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 14px; max-width: 320px;">
+      <idp-progress-bar value="35"></idp-progress-bar>
+      <idp-progress-bar value="82"></idp-progress-bar>
+      <idp-progress-bar indeterminate></idp-progress-bar>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
+
+  @property({ type: Number })
+  public accessor value = 0;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor indeterminate = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .track {
+        width: 100%;
+        height: 6px;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-muted);
+        overflow: hidden;
+      }
+      .fill {
+        height: 100%;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-accent);
+        transition: width 300ms ease;
+      }
+      :host([indeterminate]) .fill {
+        width: 40%;
+        animation: slide 1.2s ease-in-out infinite;
+      }
+      @keyframes slide {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(350%);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const clamped = Math.max(0, Math.min(100, this.value));
+    return html`
+      <div class="track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${this.indeterminate ? '' : String(clamped)}>
+        <div class="fill" style=${this.indeterminate ? '' : `width: ${clamped}%;`}></div>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/idp-signed-in-pill.ts

@@ -0,0 +1,55 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-avatar.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-signed-in-pill': IdpSignedInPill;
+  }
+}
+
+@customElement('idp-signed-in-pill')
+export class IdpSignedInPill extends DeesElement {
+  public static demo = () => html`
+    <idp-signed-in-pill name="Alex Mercer"></idp-signed-in-pill>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor name = '';
+
+  @property({ type: String })
+  public accessor label = 'Signed in as';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 9px;
+        padding: 7px 12px 7px 8px;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        font-family: var(--idp-font);
+        font-size: 12.5px;
+        font-weight: 550;
+        color: var(--idp-fg-2);
+        white-space: nowrap;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <span class="pill">
+        <idp-avatar name=${this.name} size="22"></idp-avatar>
+        <span>${this.label} ${this.name}</span>
+      </span>
+    `;
+  }
+}

package/ts_web/elements/idp-spinner.ts

@@ -0,0 +1,56 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-spinner': IdpSpinner;
+  }
+}
+
+@customElement('idp-spinner')
+export class IdpSpinner extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 16px; align-items: center;">
+      <idp-spinner size="16"></idp-spinner>
+      <idp-spinner></idp-spinner>
+      <idp-spinner size="34"></idp-spinner>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
+
+  @property({ type: Number })
+  public accessor size = 28;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .spinner {
+        border-radius: 999px;
+        border-style: solid;
+        border-color: var(--idp-muted);
+        border-top-color: var(--idp-accent);
+        animation: spin 700ms linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const borderWidth = Math.max(2, Math.round(this.size / 11));
+    return html`
+      <span
+        class="spinner"
+        role="status"
+        aria-label="Loading"
+        style="width: ${this.size}px; height: ${this.size}px; border-width: ${borderWidth}px;"
+      ></span>
+    `;
+  }
+}