@idp.global/catalog

Web component catalog for idp.global, based on the v3 product design language.

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, and account-management handlers.

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

Element Surface

Element	Purpose
`idp-button`	Product button variants
`idp-badge`	Small status labels and pills
`idp-card`	Bordered content containers
`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 and organization admin layout preview
`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 intentionally product-facing: dark identity surfaces, sharp admin panels, mobile passport cards, and high-contrast approval states.

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.

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.

4.9 KiB Raw Blame History