@idp.global/catalog 2.1.1 → 3.0.0

package/dist_ts_web/elements/index.js

@@ -34,4 +34,6 @@ export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDIn0=
+export * from './idp-sso-connection-form.js';
+export * from './idp-scim-token-panel.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYywyQkFBMkIsQ0FBQyJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '2.1.1',
+  version: '3.0.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

package/ts_web/elements/idp-admin-shell.ts

@@ -8,8 +8,12 @@ import './idp-toggle.js';
 import './idp-delegation-section.js';
 import './idp-admin-sidebar.js';
 import './idp-admin-overview.js';
+import './idp-sso-connection-form.js';
+import './idp-scim-token-panel.js';
 import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
 import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
+import type { IIdpSsoConnectionItem, IIdpSsoSpDetails } from './idp-sso-connection-form.js';
+import type { IIdpScimTokenItem } from './idp-scim-token-panel.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,6 +31,7 @@ export type TIdpAdminPage =
   | 'org-settings'
   | 'org-members'
   | 'org-apps'
+  | 'org-sso'
   | 'support'
   | 'ga-users'
   | 'ga-orgs'
@@ -917,6 +922,18 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor gaUsers: IIdpAdminGaUser[] = [];
 
+  @property({ type: Array })
+  public accessor ssoConnections: IIdpSsoConnectionItem[] = [];
+
+  @property({ type: Object })
+  public accessor ssoSpDetails: IIdpSsoSpDetails | null = null;
+
+  @property({ type: Array })
+  public accessor scimTokens: IIdpScimTokenItem[] = [];
+
+  @property({ type: Object })
+  public accessor scimCreatedToken: { label: string; plaintextToken: string } | null = null;
+
   @property({ type: Object })
   public accessor overviewData: IIdpAdminOverviewData | null = null;
 
@@ -2220,6 +2237,25 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private renderOrgSso(): TemplateResult {
+    return html`
+      ${this.renderPageHeader('SSO & Provisioning', 'Enterprise single sign-on and automated user provisioning for this organisation.')}
+      <div class="body narrow-body">
+        <div class="list-stack">
+          <idp-sso-connection-form
+            .connections=${this.ssoConnections}
+            .spDetails=${this.ssoSpDetails}
+          ></idp-sso-connection-form>
+          <idp-scim-token-panel
+            .tokens=${this.scimTokens}
+            .createdToken=${this.scimCreatedToken}
+            scimBaseUrl=${this.ssoSpDetails?.scimBaseUrl || ''}
+          ></idp-scim-token-panel>
+        </div>
+      </div>
+    `;
+  }
+
   private renderSupport(): TemplateResult {
     const services = [
       ['Account Recovery', 'Lost access to your account or locked out of your organisation? Our team will verify your identity and restore access securely.', 'EUR149', 'per incident', 'key', '1-2 business days'],
@@ -2409,6 +2445,7 @@ export class IdpAdminShell extends DeesElement {
       'org-settings': () => this.renderOrgSettings(),
       'org-members': () => this.renderOrgMembers(),
       'org-apps': () => this.renderOrgApps(),
+      'org-sso': () => this.renderOrgSso(),
       support: () => this.renderSupport(),
       'ga-users': () => this.renderGAUsers(),
       'ga-orgs': () => this.renderGAOrgs(),

package/ts_web/elements/idp-admin-sidebar.ts

@@ -444,6 +444,7 @@ export class IdpAdminSidebar extends DeesElement {
     { id: 'org-settings', label: 'Settings', icon: 'settings' },
     { id: 'org-members', label: 'Members', icon: 'users' },
     { id: 'org-apps', label: 'OAuth Apps', icon: 'box' },
+    { id: 'org-sso', label: 'SSO & Provisioning', icon: 'key' },
   ];
 
   private supportNav: TNavItem[] = [

package/ts_web/elements/idp-button.ts

@@ -57,6 +57,16 @@ export class IdpButton extends DeesElement {
   @property({ type: Boolean, reflect: true })
   public accessor loading = false;
 
+  /**
+   * When set, the button renders as a real anchor so it works as a link
+   * (new-tab, middle-click, crawlers) without any host-side click wiring.
+   */
+  @property({ type: String })
+  public accessor href = '';
+
+  @property({ type: String })
+  public accessor target = '';
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -69,10 +79,12 @@ export class IdpButton extends DeesElement {
       :host([block]) {
         display: block;
       }
-      :host([block]) button {
+      :host([block]) button,
+      :host([block]) a {
         width: 100%;
       }
-      button {
+      button,
+      a {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -87,10 +99,16 @@ export class IdpButton extends DeesElement {
         cursor: pointer;
         transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
       }
-      button:active:not(:disabled) {
+      a {
+        text-decoration: none;
+        box-sizing: border-box;
+      }
+      button:active:not(:disabled),
+      a:active {
         transform: translateY(1px);
       }
-      button:focus-visible {
+      button:focus-visible,
+      a:focus-visible {
         outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
         outline-offset: 2px;
       }
@@ -212,12 +230,22 @@ export class IdpButton extends DeesElement {
   ];
 
   public render(): TemplateResult {
+    const contentTemplate = html`
+      ${this.loading
+        ? html`<span class="spinner" aria-hidden="true"></span>`
+        : this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
+      <slot></slot>
+    `;
+    if (this.href && !this.disabled) {
+      return html`
+        <a class="${this.variant} ${this.size} ${this.shape === 'rect' ? 'rect' : ''}" href=${this.href} target=${this.target || ''} part="button">
+          ${contentTemplate}
+        </a>
+      `;
+    }
     return html`
       <button class="${this.variant} ${this.size} ${this.shape === 'rect' ? 'rect' : ''}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
-        ${this.loading
-          ? html`<span class="spinner" aria-hidden="true"></span>`
-          : this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
-        <slot></slot>
+        ${contentTemplate}
       </button>
     `;
   }

package/ts_web/elements/idp-landing-hero.ts

@@ -1,4 +1,4 @@
-import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, css, property, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-button.js';
 import './idp-screenshot-placeholder.js';
@@ -14,6 +14,12 @@ export class IdpLandingHero extends DeesElement {
   public static demo = () => html`<idp-landing-hero></idp-landing-hero>`;
   public static demoGroups = ['idp.global v5 composed surfaces'];
 
+  @property({ type: String })
+  public accessor claimHref = '';
+
+  @property({ type: String })
+  public accessor secondaryHref = '';
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -100,8 +106,8 @@ export class IdpLandingHero extends DeesElement {
             Anchored to Cardano, so it can never be erased or taken away.
           </p>
           <div class="hero-actions">
-            <idp-button variant="accent" size="lg">Claim your identity</idp-button>
-            <idp-button variant="link" size="lg">See how it works</idp-button>
+            <idp-button variant="accent" size="lg" href=${this.claimHref}>Claim your identity</idp-button>
+            <idp-button variant="link" size="lg" href=${this.secondaryHref}>See how it works</idp-button>
           </div>
           <div class="hero-fine">
             <span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span>

package/ts_web/elements/idp-landing-page.ts

@@ -1,4 +1,4 @@
-import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, css, property, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-badge.js';
 import './idp-button.js';
@@ -12,11 +12,47 @@ declare global {
   }
 }
 
+export interface IIdpLandingLinks {
+  signIn: string;
+  claim: string;
+  docs: string;
+  github: string;
+  contact: string;
+}
+
 @customElement('idp-landing-page')
 export class IdpLandingPage extends DeesElement {
   public static demo = () => html`<idp-landing-page></idp-landing-page>`;
   public static demoGroups = ['idp.global v5 full pages'];
 
+  /**
+   * Real navigation targets for the page chrome. Consumers override any subset;
+   * labels without a link target stay presentational.
+   */
+  @property({ type: Object })
+  public accessor links: Partial<IIdpLandingLinks> = {};
+
+  private getLinks(): IIdpLandingLinks {
+    return {
+      signIn: 'https://idp.global/login',
+      claim: 'https://idp.global/register',
+      docs: 'https://about.idp.global/docs',
+      github: 'https://code.foss.global/idp.global/idp.global',
+      contact: 'mailto:hello@task.vc',
+      ...this.links,
+    };
+  }
+
+  private scrollToSection(eventArg: Event, sectionIdArg: string) {
+    eventArg.preventDefault();
+    if (sectionIdArg === 'product') {
+      // the product screenshot lives inside the hero's shadow root
+      this.shadowRoot?.querySelector('idp-landing-hero')?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      return;
+    }
+    this.shadowRoot?.getElementById(sectionIdArg)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -767,20 +803,28 @@ export class IdpLandingPage extends DeesElement {
   ];
 
   private renderNav() {
+    const links = this.getLinks();
+    const sections = [
+      ['product', 'Product'],
+      ['features', 'Features'],
+      ['chain', 'On-chain'],
+      ['pricing', 'Pricing'],
+      ['developers', 'Developers'],
+    ] as const;
     return html`
       <div class="nav-shell">
         <nav>
-          <a class="logo" href="#">idp<span class="logo-dot"></span>global</a>
+          <a class="logo" href="#" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'product')}>idp<span class="logo-dot"></span>global</a>
           <div class="nav-links">
-            <a href="#product">Product</a>
-            <a href="#features">Features</a>
-            <a href="#chain">On-chain</a>
-            <a href="#pricing">Pricing</a>
-            <a href="#developers">Developers</a>
+            ${sections.map(
+              ([sectionId, label]) => html`
+                <a href="#${sectionId}" @click=${(eventArg: Event) => this.scrollToSection(eventArg, sectionId)}>${label}</a>
+              `,
+            )}
           </div>
           <div class="actions">
-            <a class="nav-signin">Sign in</a>
-            <idp-button variant="accent" size="sm">Claim identity</idp-button>
+            <a class="nav-signin" href=${links.signIn}>Sign in</a>
+            <idp-button variant="accent" size="sm" href=${links.claim}>Claim identity</idp-button>
           </div>
         </nav>
       </div>
@@ -977,6 +1021,7 @@ export class IdpLandingPage extends DeesElement {
   }
 
   private renderPricing() {
+    const links = this.getLinks();
     const tiers = [
       {
         name: 'Personal',
@@ -992,6 +1037,7 @@ export class IdpLandingPage extends DeesElement {
           'Recovery via your other devices',
         ],
         cta: 'Claim your identity',
+        ctaHref: links.claim,
         variant: 'tint',
         featured: false,
       },
@@ -1009,6 +1055,7 @@ export class IdpLandingPage extends DeesElement {
           'SSO & SCIM included, no upsell',
         ],
         cta: 'Start an organisation',
+        ctaHref: links.claim,
         variant: 'accent',
         featured: true,
       },
@@ -1026,6 +1073,7 @@ export class IdpLandingPage extends DeesElement {
           'Priority engineering & SLA',
         ],
         cta: 'Talk to us',
+        ctaHref: links.contact,
         variant: 'tint',
         featured: false,
       },
@@ -1051,7 +1099,7 @@ export class IdpLandingPage extends DeesElement {
                   <div class="price">${tierArg.price}<span class="sub">${tierArg.sub}</span></div>
                   <div class="price-note">${tierArg.note}</div>
                   <ul class="tier-list">${tierArg.items.map((itemArg) => html`<li>${itemArg}</li>`)}</ul>
-                  <idp-button variant=${tierArg.variant as any}>${tierArg.cta}</idp-button>
+                  <idp-button variant=${tierArg.variant as any} href=${tierArg.ctaHref}>${tierArg.cta}</idp-button>
                 </div>
               `,
             )}
@@ -1077,8 +1125,8 @@ export class IdpLandingPage extends DeesElement {
               <p>One CLI. Standard OAuth 2 &amp; OIDC. Native SDKs for Node, Python, Swift, Kotlin, Go, Rust.</p>
               <div class="dev-tags">${tags.map((tagArg) => html`<span class="dev-tag">${tagArg}</span>`)}</div>
               <div class="dev-actions">
-                <idp-button variant="accent" icon="lucide:github">View on GitHub</idp-button>
-                <idp-button variant="link">Read the docs</idp-button>
+                <idp-button variant="accent" icon="lucide:github" href=${this.getLinks().github}>View on GitHub</idp-button>
+                <idp-button variant="link" href=${this.getLinks().docs}>Read the docs</idp-button>
               </div>
             </div>
             <div class="terminal">
@@ -1115,7 +1163,7 @@ export class IdpLandingPage extends DeesElement {
 
   private renderManifesto() {
     return html`
-      <section class="manifesto">
+      <section class="manifesto" id="manifesto">
         <div class="wrap">
           <div class="eyebrow sm" style="margin-bottom: 24px;">Why we built this</div>
           <q>Identity should not be a product the user is sold. It should be a permanent <em>fact</em>, owned by the person it describes.</q>
@@ -1135,8 +1183,8 @@ export class IdpLandingPage extends DeesElement {
             we disappear.
           </p>
           <div class="cta-actions">
-            <idp-button variant="accent" size="lg">Claim your identity</idp-button>
-            <idp-button variant="link" size="lg">Read the manifesto</idp-button>
+            <idp-button variant="accent" size="lg" href=${this.getLinks().claim}>Claim your identity</idp-button>
+            <idp-button variant="link" size="lg" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'manifesto')}>Read the manifesto</idp-button>
           </div>
         </div>
       </section>
@@ -1144,17 +1192,30 @@ export class IdpLandingPage extends DeesElement {
   }
 
   private renderFooter() {
+    const links = this.getLinks();
+    const labelHrefs: Record<string, string> = {
+      Documentation: links.docs,
+      'API reference': links.docs,
+      'Self-hosting': links.docs,
+      GitHub: links.github,
+    };
     const cols = [
       ['Product', ['For individuals', 'For organisations', 'Enterprise', 'Cardano sync', 'Changelog']],
       ['Developers', ['Documentation', 'API reference', 'Self-hosting', 'SDKs', 'GitHub']],
       ['Company', ['Manifesto', 'Blog', 'Security', 'Privacy', 'Terms']],
     ] as const;
+    const renderFooterLink = (labelArg: string) =>
+      labelHrefs[labelArg]
+        ? html`<a href=${labelHrefs[labelArg]}>${labelArg}</a>`
+        : labelArg === 'Manifesto'
+          ? html`<a href="#manifesto" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'manifesto')}>${labelArg}</a>`
+          : html`<a>${labelArg}</a>`;
     return html`
       <footer>
         <div class="wrap-wide">
           <div class="footer-cols">
             <div class="footer-brand">
-              <a class="logo" href="#">idp<span class="logo-dot"></span>global</a>
+              <a class="logo" href="#" @click=${(eventArg: Event) => this.scrollToSection(eventArg, 'product')}>idp<span class="logo-dot"></span>global</a>
               <p>
                 An open identity provider for everyone — from individuals to enterprises. Anchored on Cardano. Built in
                 the open. Yours forever.
@@ -1165,14 +1226,14 @@ export class IdpLandingPage extends DeesElement {
               (colArg) => html`
                 <div class="footer-col">
                   <h4>${colArg[0]}</h4>
-                  <ul>${colArg[1].map((linkArg) => html`<li><a>${linkArg}</a></li>`)}</ul>
+                  <ul>${colArg[1].map((linkArg) => html`<li>${renderFooterLink(linkArg)}</li>`)}</ul>
                 </div>
               `,
             )}
           </div>
           <div class="footer-bottom">
             <span>© 2026 idp.global · MIT · Anchored to Cardano</span>
-            <span class="links"><a>Status</a><a>Twitter</a><a>GitHub</a><a>Discord</a></span>
+            <span class="links"><a>Status</a><a href=${links.github}>GitHub</a></span>
           </div>
         </div>
       </footer>
@@ -1183,7 +1244,10 @@ export class IdpLandingPage extends DeesElement {
     return html`
       <div class="page">
         ${this.renderNav()}
-        <idp-landing-hero></idp-landing-hero>
+        <idp-landing-hero
+          claimHref=${this.getLinks().claim}
+          secondaryHref=${this.getLinks().docs}
+        ></idp-landing-hero>
         ${this.renderProof()}
         ${this.renderFeatures()}
         ${this.renderChain()}