@idp.global/catalog 1.2.0 → 2.0.0

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@idp.global/catalog',
-    version: '1.2.0',
-    description: 'Web component catalog for idp.global, based on the v3 product design language.'
+    version: '2.0.0',
+    description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUscUJBQXFCO0lBQzNCLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSxnRkFBZ0Y7Q0FDOUYsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUscUJBQXFCO0lBQzNCLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSxxRkFBcUY7Q0FDbkcsQ0FBQSJ9

package/dist_ts_web/elements/idp-badge.js

@@ -62,7 +62,7 @@ let IdpBadge = (() => {
       <idp-badge variant="error">Denied</idp-badge>
     </div>
   `;
-        static demoGroups = ['idp.global v3 primitives'];
+        static demoGroups = ['idp.global v5 primitives'];
         #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'default');
         get variant() { return this.#variant_accessor_storage; }
         set variant(value) { this.#variant_accessor_storage = value; }
@@ -75,15 +75,15 @@ let IdpBadge = (() => {
       .badge {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 2px 8px;
+        gap: 5px;
+        padding: 3px 9px;
         border: 1px solid transparent;
-        border-radius: 999px;
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        font-weight: 600;
+        border-radius: var(--idp-radius-pill);
+        font-family: var(--idp-font);
+        font-size: 12px;
+        font-weight: 590;
         letter-spacing: -0.01em;
-        line-height: 16px;
+        line-height: 15px;
       }
       .default {
         background: var(--idp-muted);
@@ -108,9 +108,6 @@ let IdpBadge = (() => {
         color: var(--idp-error);
         border-color: var(--idp-error-border);
       }
-      .accent {
-        border-color: var(--idp-info-border);
-      }
       .outline {
         background: transparent;
         color: var(--idp-fg);
@@ -132,4 +129,4 @@ let IdpBadge = (() => {
     return IdpBadge = _classThis;
 })();
 export { IdpBadge };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1iYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBV2xDLFFBQVE7NEJBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozt3QkFBbkIsU0FBUSxXQUFXOzs7O21DQVl0QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFDM0IsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBK0I7WUFieEQsNktBdUVDOzs7O1FBdEVRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztHQVE5QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQsMkVBQTRDLFNBQVMsRUFBQztRQUF0RCxJQUFnQixPQUFPLDZDQUErQjtRQUF0RCxJQUFnQixPQUFPLG1EQUErQjtRQUUvQyxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBZ0RGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQSxzQkFBc0IsSUFBSSxDQUFDLE9BQU8sd0JBQXdCLENBQUM7UUFDeEUsQ0FBQzs7Ozs7O1lBdEVVLHVEQUFROzs7OztTQUFSLFFBQVEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1iYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBV2xDLFFBQVE7NEJBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozt3QkFBbkIsU0FBUSxXQUFXOzs7O21DQVl0QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFDM0IsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBK0I7WUFieEQsNktBb0VDOzs7O1FBbkVRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztHQVE5QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQsMkVBQTRDLFNBQVMsRUFBQztRQUF0RCxJQUFnQixPQUFPLDZDQUErQjtRQUF0RCxJQUFnQixPQUFPLG1EQUErQjtRQUUvQyxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNkNGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQSxzQkFBc0IsSUFBSSxDQUFDLE9BQU8sd0JBQXdCLENBQUM7UUFDeEUsQ0FBQzs7Ozs7O1lBbkVVLHVEQUFROzs7OztTQUFSLFFBQVEifQ==

package/dist_ts_web/elements/idp-button.d.ts

@@ -1,6 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import './idp-icon.js';
-export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
+export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent' | 'tint' | 'link';
 export type TIdpButtonSize = 'sm' | 'md' | 'lg';
 declare global {
     interface HTMLElementTagNameMap {

package/dist_ts_web/elements/idp-button.js

@@ -80,15 +80,16 @@ let IdpButton = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static demo = () => html `
-    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-      <idp-button>Default</idp-button>
-      <idp-button variant="accent">Approve</idp-button>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+      <idp-button variant="accent">Claim identity</idp-button>
+      <idp-button variant="tint">Talk to us</idp-button>
       <idp-button variant="outline">Deny</idp-button>
       <idp-button variant="ghost">Ghost</idp-button>
+      <idp-button variant="link">See how it works</idp-button>
       <idp-button variant="destructive">Delete</idp-button>
     </div>
   `;
-        static demoGroups = ['idp.global v3 primitives'];
+        static demoGroups = ['idp.global v5 primitives'];
         #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'default');
         get variant() { return this.#variant_accessor_storage; }
         set variant(value) { this.#variant_accessor_storage = value; }
@@ -122,9 +123,10 @@ let IdpButton = (() => {
         justify-content: center;
         gap: 6px;
         border: 1px solid transparent;
-        border-radius: 6px;
+        border-radius: var(--idp-radius-pill);
         font-family: var(--idp-font);
         font-weight: 500;
+        line-height: 1.4;
         letter-spacing: -0.01em;
         white-space: nowrap;
         cursor: pointer;
@@ -142,19 +144,16 @@ let IdpButton = (() => {
         cursor: not-allowed;
       }
       .sm {
-        height: 32px;
-        padding: 0 12px;
-        font-size: 13px;
+        padding: 6px 14px;
+        font-size: 14px;
       }
       .md {
-        height: 38px;
-        padding: 0 14px;
-        font-size: 14px;
+        padding: 8px 18px;
+        font-size: 17px;
       }
       .lg {
-        height: 44px;
-        padding: 0 18px;
-        font-size: 15px;
+        padding: 11px 24px;
+        font-size: 19px;
       }
       .default {
         background: var(--idp-primary);
@@ -166,11 +165,35 @@ let IdpButton = (() => {
       .accent {
         background: var(--idp-accent);
         color: var(--idp-accent-fg);
-        box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
       }
       .accent:hover:not(:disabled) {
         background: var(--idp-accent-hover);
       }
+      .tint {
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+      }
+      .tint:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--idp-accent-soft), var(--idp-accent) 12%);
+      }
+      .link {
+        background: transparent;
+        color: var(--idp-accent);
+        padding: 0;
+        border-radius: 0;
+      }
+      .link:hover:not(:disabled) {
+        text-decoration: underline;
+      }
+      .link::after {
+        content: '›';
+        font-size: 1.15em;
+        line-height: 0;
+        transition: transform 160ms ease;
+      }
+      .link:hover:not(:disabled)::after {
+        transform: translateX(2px);
+      }
       .secondary {
         background: var(--idp-muted);
         color: var(--idp-fg);
@@ -231,4 +254,4 @@ let IdpButton = (() => {
     return IdpButton = _classThis;
 })();
 export { IdpButton };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQVlWLFNBQVM7NEJBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt5QkFBbkIsU0FBUSxXQUFXOzs7O21DQVl2QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO21DQUcxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQWQzQywwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFnQztZQUd2RCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUF3QjtZQUc1QyxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQTJDO1lBRy9ELDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQVM7WUFHakMsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBUztZQTVCbEMsNktBZ0pDOzs7O1FBL0lRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztHQVE5QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQsMkVBQTZDLFNBQVMsRUFBQztRQUF2RCxJQUFnQixPQUFPLDZDQUFnQztRQUF2RCxJQUFnQixPQUFPLG1EQUFnQztRQUd2RCwySEFBdUMsSUFBSSxHQUFDO1FBQTVDLElBQWdCLElBQUksMENBQXdCO1FBQTVDLElBQWdCLElBQUksZ0RBQXdCO1FBRzVDLHdIQUF1QixFQUFFLEdBQUM7UUFBMUIsSUFBZ0IsSUFBSSwwQ0FBTTtRQUExQixJQUFnQixJQUFJLGdEQUFNO1FBRzFCLHdIQUFzRCxRQUFRLEdBQUM7UUFBL0QsSUFBZ0IsSUFBSSwwQ0FBMkM7UUFBL0QsSUFBZ0IsSUFBSSxnREFBMkM7UUFHL0QsZ0lBQTJCLEtBQUssR0FBQztRQUFqQyxJQUFnQixRQUFRLDhDQUFTO1FBQWpDLElBQWdCLFFBQVEsb0RBQVM7UUFHakMsa0lBQTBCLEtBQUssR0FBQztRQUFoQyxJQUFnQixPQUFPLDZDQUFTO1FBQWhDLElBQWdCLE9BQU8sbURBQVM7UUFFekIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW1HRjtTQUNGLENBQUM7UUFFSyxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7dUJBQ1EsSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUMsSUFBSSxVQUFVLElBQUksQ0FBQyxJQUFJLGNBQWMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsT0FBTztVQUNwRyxJQUFJLENBQUMsT0FBTztnQkFDWixDQUFDLENBQUMsSUFBSSxDQUFBLGtEQUFrRDtnQkFDeEQsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxrQkFBa0IsSUFBSSxDQUFDLElBQVcsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFOzs7S0FHMUYsQ0FBQztRQUNKLENBQUM7Ozs7OztZQS9JVSx1REFBUzs7Ozs7U0FBVCxTQUFTIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQVlWLFNBQVM7NEJBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt5QkFBbkIsU0FBUSxXQUFXOzs7O21DQWF2QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO21DQUcxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQWQzQywwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFnQztZQUd2RCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUF3QjtZQUc1QyxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQTJDO1lBRy9ELDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQVM7WUFHakMsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBUztZQTdCbEMsNktBdUtDOzs7O1FBdEtRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7R0FTOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBR3hELDJFQUE2QyxTQUFTLEVBQUM7UUFBdkQsSUFBZ0IsT0FBTyw2Q0FBZ0M7UUFBdkQsSUFBZ0IsT0FBTyxtREFBZ0M7UUFHdkQsMkhBQXVDLElBQUksR0FBQztRQUE1QyxJQUFnQixJQUFJLDBDQUF3QjtRQUE1QyxJQUFnQixJQUFJLGdEQUF3QjtRQUc1Qyx3SEFBdUIsRUFBRSxHQUFDO1FBQTFCLElBQWdCLElBQUksMENBQU07UUFBMUIsSUFBZ0IsSUFBSSxnREFBTTtRQUcxQix3SEFBc0QsUUFBUSxHQUFDO1FBQS9ELElBQWdCLElBQUksMENBQTJDO1FBQS9ELElBQWdCLElBQUksZ0RBQTJDO1FBRy9ELGdJQUEyQixLQUFLLEdBQUM7UUFBakMsSUFBZ0IsUUFBUSw4Q0FBUztRQUFqQyxJQUFnQixRQUFRLG9EQUFTO1FBR2pDLGtJQUEwQixLQUFLLEdBQUM7UUFBaEMsSUFBZ0IsT0FBTyw2Q0FBUztRQUFoQyxJQUFnQixPQUFPLG1EQUFTO1FBRXpCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBeUhGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTt1QkFDUSxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxJQUFJLFVBQVUsSUFBSSxDQUFDLElBQUksY0FBYyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxPQUFPO1VBQ3BHLElBQUksQ0FBQyxPQUFPO2dCQUNaLENBQUMsQ0FBQyxJQUFJLENBQUEsa0RBQWtEO2dCQUN4RCxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLGtCQUFrQixJQUFJLENBQUMsSUFBVyx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7OztLQUcxRixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBdEtVLHVEQUFTOzs7OztTQUFULFNBQVMifQ==

package/dist_ts_web/elements/idp-landing-hero.d.ts

@@ -1,7 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import './idp-button.js';
-import './idp-dashboard-window.js';
-import './idp-icon.js';
+import './idp-screenshot-placeholder.js';
 declare global {
     interface HTMLElementTagNameMap {
         'idp-landing-hero': IdpLandingHero;

package/dist_ts_web/elements/idp-landing-hero.js

@@ -35,8 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-button.js';
-import './idp-dashboard-window.js';
-import './idp-icon.js';
+import './idp-screenshot-placeholder.js';
 let IdpLandingHero = (() => {
     let _classDecorators = [customElement('idp-landing-hero')];
     let _classDescriptor;
@@ -52,127 +51,77 @@ let IdpLandingHero = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static demo = () => html `<idp-landing-hero></idp-landing-hero>`;
-        static demoGroups = ['idp.global v3 composed surfaces'];
+        static demoGroups = ['idp.global v5 composed surfaces'];
         static styles = [
             ...idpElementStyles,
             css `
       :host {
         display: block;
-      }
-      .hero {
-        position: relative;
-        overflow: hidden;
-        background: var(--idp-bg);
+        background: var(--idp-card);
         color: var(--idp-fg);
-        border-bottom: 1px solid var(--idp-border-soft);
-      }
-      .grid {
-        position: absolute;
-        inset: 0;
-        background-image: linear-gradient(to right, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px);
-        background-size: 56px 56px;
-        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
-        pointer-events: none;
       }
-      .glow {
-        position: absolute;
-        top: -220px;
-        left: 50%;
-        width: 900px;
-        height: 600px;
-        transform: translateX(-50%);
-        background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 60%);
-        pointer-events: none;
-      }
-      .inner {
-        position: relative;
-        z-index: 1;
-        max-width: 1240px;
-        margin: 0 auto;
-        padding: 96px 32px 0;
+      .hero {
+        padding: 84px 0 0;
         text-align: center;
       }
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 7px;
-        margin-bottom: 28px;
-        padding: 5px 12px 5px 8px;
-        border: 1px solid var(--idp-border);
-        border-radius: 999px;
-        background: var(--idp-muted);
-        color: var(--idp-fg-3);
-        font-size: 12px;
+      .wrap {
+        max-width: 1024px;
+        margin: 0 auto;
+        padding: 0 22px;
       }
-      .pill {
-        padding: 2px 7px;
-        border-radius: 999px;
-        background: rgba(59,130,246,0.18);
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-mono);
-        font-size: 10px;
+      .hero-tag {
+        margin-bottom: 6px;
+        color: var(--idp-accent);
+        font-size: 21px;
         font-weight: 600;
-        letter-spacing: 0.04em;
+        letter-spacing: -0.02em;
       }
       h1 {
-        margin: 0 0 24px;
-        font-size: clamp(44px, 6.5vw, 78px);
+        max-width: 16ch;
+        margin: 0 auto 22px;
         font-family: var(--idp-display);
+        font-size: clamp(48px, 7vw, 96px);
         font-weight: 700;
-        letter-spacing: -0.035em;
-        line-height: 0.96;
-      }
-      h1 em {
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-serif);
-        font-style: italic;
-        font-weight: 400;
+        line-height: 1.04;
+        letter-spacing: -0.025em;
       }
-      .sub {
-        max-width: 660px;
-        margin: 0 auto 36px;
+      .hero-sub {
+        max-width: 600px;
+        margin: 0 auto 28px;
         color: var(--idp-fg-3);
-        font-size: clamp(16px, 1.6vw, 19px);
-        line-height: 1.55;
+        font-size: clamp(19px, 2vw, 24px);
+        font-weight: 400;
+        line-height: 1.4;
+        letter-spacing: -0.01em;
       }
-      .actions {
+      .hero-actions {
         display: flex;
-        gap: 12px;
+        gap: 26px;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
-        margin-bottom: 20px;
       }
-      .fineprint {
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        letter-spacing: 0.04em;
+      .hero-fine {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 22px;
+        color: var(--idp-fg-3);
+        font-size: 13px;
       }
-      .fineprint span + span::before {
-        content: '*';
+      .hero-fine span + span::before {
+        content: '·';
         margin: 0 10px;
+        color: var(--idp-fg-3);
       }
       .product {
-        position: relative;
-        max-width: 1180px;
-        margin: 72px auto 0;
-        padding: 0 32px;
-      }
-      .product-glow {
-        position: absolute;
-        inset: 30% 10% -10%;
-        background: radial-gradient(ellipse, rgba(59,130,246,0.25) 0%, transparent 60%);
-        filter: blur(40px);
-        pointer-events: none;
-      }
-      idp-dashboard-window {
-        position: relative;
-        z-index: 1;
+        max-width: 1100px;
+        margin: 60px auto 0;
+        padding: 0 22px;
       }
       @media (max-width: 760px) {
-        .inner {
-          padding: 72px 20px 0;
+        .hero {
+          padding: 64px 0 0;
         }
       }
     `,
@@ -180,22 +129,28 @@ let IdpLandingHero = (() => {
         render() {
             return html `
       <section class="hero">
-        <div class="grid"></div>
-        <div class="glow"></div>
-        <div class="inner">
-          <div class="badge"><span class="pill">v3.81</span>Cardano-anchored identity, now self-hostable</div>
-          <h1>One identity.<br/><em>Any scale.</em> Yours forever.</h1>
-          <p class="sub">An open identity provider for everyone, from a single person to a global enterprise. Anchored to the Cardano blockchain so it can never be erased, taken away, or quietly deprecated.</p>
-          <div class="actions">
-            <idp-button variant="accent" size="lg" icon="shield">Claim your identity - free</idp-button>
-            <idp-button variant="ghost" size="lg" icon="globe">View source</idp-button>
+        <div class="wrap">
+          <div class="hero-tag">idp.global</div>
+          <h1>One identity. Any scale.<br />Yours forever.</h1>
+          <p class="hero-sub">
+            An open identity provider for everyone — from a single person to a global enterprise.
+            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>
           </div>
-          <div class="fineprint"><span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span></div>
-          <div class="product">
-            <div class="product-glow"></div>
-            <idp-dashboard-window></idp-dashboard-window>
+          <div class="hero-fine">
+            <span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span>
           </div>
         </div>
+        <div class="product" id="product">
+          <idp-screenshot-placeholder
+            variant="hero"
+            label="Console dashboard"
+            meta="console.idp.global / overview · 1100 × 620"
+          ></idp-screenshot-placeholder>
+        </div>
       </section>
     `;
         }
@@ -206,4 +161,4 @@ let IdpLandingHero = (() => {
     return IdpLandingHero = _classThis;
 })();
 export { IdpLandingHero };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWxhbmRpbmctaGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtbGFuZGluZy1oZXJvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ3pHLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sMkJBQTJCLENBQUM7QUFDbkMsT0FBTyxlQUFlLENBQUM7SUFTVixjQUFjOzRCQUQxQixhQUFhLENBQUMsa0JBQWtCLENBQUM7Ozs7c0JBQ0UsV0FBVzs4QkFBbkIsU0FBUSxXQUFXOzs7O1lBQS9DLDZLQXVKQzs7OztRQXRKUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQSx1Q0FBdUMsQ0FBQztRQUNoRSxNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsaUNBQWlDLENBQUMsQ0FBQztRQUV4RCxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBd0hGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW1CVixDQUFDO1FBQ0osQ0FBQzs7WUF0SlUsdURBQWM7Ozs7O1NBQWQsY0FBYyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWxhbmRpbmctaGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtbGFuZGluZy1oZXJvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ3pHLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8saUNBQWlDLENBQUM7SUFTNUIsY0FBYzs0QkFEMUIsYUFBYSxDQUFDLGtCQUFrQixDQUFDOzs7O3NCQUNFLFdBQVc7OEJBQW5CLFNBQVEsV0FBVzs7OztZQUEvQyw2S0EyR0M7Ozs7UUExR1EsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsdUNBQXVDLENBQUM7UUFDaEUsTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLGlDQUFpQyxDQUFDLENBQUM7UUFFeEQsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FzRUY7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBeUJWLENBQUM7UUFDSixDQUFDOztZQTFHVSx1REFBYzs7Ozs7U0FBZCxjQUFjIn0=

package/dist_ts_web/elements/idp-landing-page.d.ts

@@ -2,6 +2,7 @@ import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import './idp-badge.js';
 import './idp-button.js';
 import './idp-icon.js';
+import './idp-screenshot-placeholder.js';
 import './idp-landing-hero.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -13,9 +14,13 @@ export declare class IdpLandingPage extends DeesElement {
     static demoGroups: string[];
     static styles: import("@design.estate/dees-element").CSSResult[];
     private renderNav;
+    private renderProof;
     private renderFeatures;
     private renderChain;
     private renderPricing;
     private renderDevelopers;
+    private renderManifesto;
+    private renderCta;
+    private renderFooter;
     render(): TemplateResult;
 }