This package turns the current identity product direction into reusable custom elements for landing pages, approval surfaces, account/admin shells, mobile passport previews, and full-page product showcases.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Install

pnpm add @idp.global/catalog

Usage

Import the package once in your frontend entrypoint so the custom elements are registered.

import '@idp.global/catalog';

Then compose the elements in HTML, Lit, or any framework that can render custom elements.

<idp-landing-hero></idp-landing-hero>
<idp-approval-card app-name="GitHub" request-text="Sign in to github.com"></idp-approval-card>
<idp-mobile-showcase></idp-mobile-showcase>

The package also exports the TypeScript types for the interactive elements and admin shell events, so applications can strongly type idp-submit, idp-select, account-management, and OIDC administration handlers.

import type {
  IIdpFormSubmitEventDetail,
  IIdpSelectOption,
  IIdpAdminNavigateEventDetail,
  IIdpAdminGaAppConfigureEventDetail,
  IIdpAdminGaAppRotateSecretEventDetail,
  IIdpAdminGaAppSecretDismissEventDetail,
  IIdpAdminClientSecret,
} from '@idp.global/catalog';

idp-admin-shell dispatches idp-admin-ga-app-configure for safe OIDC client configuration and idp-admin-ga-app-rotate-secret for confidential-client secret rotation. After the host supplies the one-time result through .oidcClientSecret, the shell displays the plaintext secret until the user confirms secure storage through idp-admin-ga-app-secret-dismiss. The host must clear the property on dismissal and must not persist the plaintext secret.

Element Surface

Element	Purpose
`idp-button`	Pill buttons (`accent`, `tint`, `link`, `outline`, `ghost`, `secondary`, `destructive`, `default`)
`idp-badge`	Small status labels and pills
`idp-card`	Bordered content containers
`idp-screenshot-placeholder`	Striped stand-in for a real product screenshot
`idp-input`	Text, password, and email inputs
`idp-checkbox`	Required consent and boolean inputs
`idp-form`	Form composition with validation, status, and `idp-submit` events
`idp-form-submit`	Full-width catalog submit action for `idp-form`
`idp-select`	Select/dropdown controls with `idp-select` events
`idp-toggle`	Compact boolean controls
`idp-icon`	Bundled monochrome identity icons
`idp-approval-card`	Approve/deny identity request cards
`idp-inbox-preview`	Mobile approval inbox previews
`idp-mobile-frame`	iOS-style product screenshots
`idp-dashboard-window`	Desktop dashboard preview window
`idp-admin-shell`	Account, organization, and platform OIDC administration shell
`idp-landing-hero`	Public landing hero section
`idp-landing-page`	Full public landing page composition
`idp-mobile-showcase`	Mobile, watch, tablet, and desktop showcase composition

Design Language

The catalog uses shared tokens from ts_web/elements/tokens.ts for color, type, spacing, borders, and product chrome. The visual system is an Apple-flavoured design language: a light, system-blue theme with a full dark mode, SF Pro type, continuous-corner radii, and pill-shaped controls across the landing, admin, and mobile surfaces.

Scope

This package is component-only. It does not perform authentication, store sessions, call the idp.global backend, or implement business logic. Use it together with @idp.global/sdk/browser and @idp.global/interfaces when you need live identity behavior.

Admin activity surfaces accept TIdpAdminActivity, an alias of the structured @idp.global/interfaces activity DTO. Activity rendering uses finite actions, outcomes, target types, and reason codes; it does not accept record IDs, free-text descriptions, IP addresses, user agents, or generic metadata. The current union includes global-administrator grant and removal lifecycle events emitted by the platform administration API.

import {
  formatAdminActivityDetail,
  formatAdminActivityTitle,
  getAdminActivityTone,
  type TIdpAdminActivity,
} from '@idp.global/catalog';

const activity: TIdpAdminActivity = {
  action: 'passkey_login',
  timestamp: Date.now(),
  outcome: 'succeeded',
  targetType: 'passkey',
  facts: null,
};

const title = formatAdminActivityTitle(activity);
const detail = formatAdminActivityDetail(activity);
const statusColor = getAdminActivityTone(activity);

The npm package publishes ESM component modules, declarations, and assets. The local showcase HTML and its browser bundle are development artifacts and are not part of the npm tarball.

Development

pnpm install
pnpm run build
pnpm test

The source entrypoint is ts_web/index.ts; it exports the element catalog from ts_web/elements/index.ts.

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the license file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

readme.md

@idp.global/catalog