@idp.global/catalog 1.2.0 → 2.0.0

package/dist_ts_web/elements/idp-mobile-showcase.js

@@ -302,7 +302,7 @@ let IdpMobileShowcase = (() => {
             return html `
       <div class="showcase">
         <header class="head">
-          <div class="badge"><span class="dot"></span>Mobile redesign - v3 - shadcn tokens</div>
+          <div class="badge"><span class="dot"></span>Mobile redesign - v5 - Apple system</div>
           <h1>A personal identity provider, built across every device you carry.</h1>
           <p>Same four-platform architecture: flat surfaces, 1px borders, neutral palette, and blue accent used only where action is expected.</p>
           <div class="tokens">

package/dist_ts_web/elements/idp-screenshot-placeholder.d.ts

@@ -0,0 +1,23 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export type TIdpScreenshotPlaceholderVariant = 'hero' | 'tile' | 'tile-short';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-screenshot-placeholder': IdpScreenshotPlaceholder;
+    }
+}
+/**
+ * A striped, dashed slot that stands in for a real product screenshot until one
+ * is dropped in. Mirrors the `.ph` placeholders in the v5 marketing design. The
+ * diagonal stripe is derived from `--idp-fg` so it reads correctly in light and
+ * dark without a theme attribute.
+ */
+export declare class IdpScreenshotPlaceholder extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor variant: TIdpScreenshotPlaceholderVariant;
+    accessor kicker: string;
+    accessor label: string;
+    accessor meta: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-screenshot-placeholder.js

@@ -0,0 +1,192 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+/**
+ * A striped, dashed slot that stands in for a real product screenshot until one
+ * is dropped in. Mirrors the `.ph` placeholders in the v5 marketing design. The
+ * diagonal stripe is derived from `--idp-fg` so it reads correctly in light and
+ * dark without a theme attribute.
+ */
+let IdpScreenshotPlaceholder = (() => {
+    let _classDecorators = [customElement('idp-screenshot-placeholder')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _kicker_decorators;
+    let _kicker_initializers = [];
+    let _kicker_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _meta_decorators;
+    let _meta_initializers = [];
+    let _meta_extraInitializers = [];
+    var IdpScreenshotPlaceholder = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _variant_decorators = [property({ type: String })];
+            _kicker_decorators = [property({ type: String })];
+            _label_decorators = [property({ type: String })];
+            _meta_decorators = [property({ type: String })];
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(this, null, _kicker_decorators, { kind: "accessor", name: "kicker", static: false, private: false, access: { has: obj => "kicker" in obj, get: obj => obj.kicker, set: (obj, value) => { obj.kicker = value; } }, metadata: _metadata }, _kicker_initializers, _kicker_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _meta_decorators, { kind: "accessor", name: "meta", static: false, private: false, access: { has: obj => "meta" in obj, get: obj => obj.meta, set: (obj, value) => { obj.meta = value; } }, metadata: _metadata }, _meta_initializers, _meta_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpScreenshotPlaceholder = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; max-width: 900px;">
+      <idp-screenshot-placeholder
+        variant="tile"
+        label="Approval inbox"
+        meta="push approval list UI"
+        style="flex: 1 1 320px;"
+      ></idp-screenshot-placeholder>
+      <idp-screenshot-placeholder
+        variant="tile-short"
+        label="Identity card"
+        meta="NFC tap-to-auth credential"
+        style="flex: 1 1 320px;"
+      ></idp-screenshot-placeholder>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 primitives'];
+        #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'tile');
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #kicker_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _kicker_initializers, 'screenshot placeholder'));
+        get kicker() { return this.#kicker_accessor_storage; }
+        set kicker(value) { this.#kicker_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _kicker_extraInitializers), __runInitializers(this, _label_initializers, ''));
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #meta_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _meta_initializers, ''));
+        get meta() { return this.#meta_accessor_storage; }
+        set meta(value) { this.#meta_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      .ph {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 300px;
+        padding: 24px;
+        border: 1.5px dashed var(--idp-border);
+        border-radius: 16px;
+        background-color: var(--idp-bg-2);
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 9px,
+          color-mix(in srgb, var(--idp-fg) 6%, transparent) 9px 10px
+        );
+        text-align: center;
+      }
+      .ph.hero {
+        min-height: 560px;
+        border-radius: 22px;
+      }
+      .ph.tile {
+        min-height: 300px;
+      }
+      .ph.tile-short {
+        min-height: 196px;
+      }
+      .ph-inner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+      }
+      .ph-kicker {
+        margin-bottom: 4px;
+        padding: 3px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-card);
+        color: var(--idp-fg-3);
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .ph-title {
+        color: var(--idp-fg-2);
+        font-size: 17px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .ph-meta {
+        color: var(--idp-fg-3);
+        font-family: var(--idp-mono);
+        font-size: 11.5px;
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="ph ${this.variant}">
+        <div class="ph-inner">
+          ${this.kicker ? html `<div class="ph-kicker">${this.kicker}</div>` : html ``}
+          ${this.label ? html `<div class="ph-title">${this.label}</div>` : html ``}
+          ${this.meta ? html `<div class="ph-meta">${this.meta}</div>` : html ``}
+        </div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _meta_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpScreenshotPlaceholder = _classThis;
+})();
+export { IdpScreenshotPlaceholder };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLXNjcmVlbnNob3QtcGxhY2Vob2xkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaWRwLXNjcmVlbnNob3QtcGxhY2Vob2xkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQVUvQzs7Ozs7R0FLRztJQUVVLHdCQUF3Qjs0QkFEcEMsYUFBYSxDQUFDLDRCQUE0QixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7d0NBQW5CLFNBQVEsV0FBVzs7OzttQ0FtQnRELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztrQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2lDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQVIzQiwwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUE0QztZQUduRSx1S0FBZ0IsTUFBTSw2QkFBTixNQUFNLHVGQUE0QjtZQUdsRCxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFNO1lBRzNCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQU07WUE3QjVCLDZLQTJHQzs7OztRQTFHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7O0dBZTlCLENBQUM7UUFDSyxNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUd4RCwyRUFBNEQsTUFBTSxFQUFDO1FBQW5FLElBQWdCLE9BQU8sNkNBQTRDO1FBQW5FLElBQWdCLE9BQU8sbURBQTRDO1FBR25FLCtIQUF5Qix3QkFBd0IsR0FBQztRQUFsRCxJQUFnQixNQUFNLDRDQUE0QjtRQUFsRCxJQUFnQixNQUFNLGtEQUE0QjtRQUdsRCw0SEFBd0IsRUFBRSxHQUFDO1FBQTNCLElBQWdCLEtBQUssMkNBQU07UUFBM0IsSUFBZ0IsS0FBSyxpREFBTTtRQUczQix5SEFBdUIsRUFBRSxHQUFDO1FBQTFCLElBQWdCLElBQUksMENBQU07UUFBMUIsSUFBZ0IsSUFBSSxnREFBTTtRQUVuQixNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNERGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTt1QkFDUSxJQUFJLENBQUMsT0FBTzs7WUFFdkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLDBCQUEwQixJQUFJLENBQUMsTUFBTSxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFO1lBQ3hFLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSx5QkFBeUIsSUFBSSxDQUFDLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTtZQUNyRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsd0JBQXdCLElBQUksQ0FBQyxJQUFJLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7OztLQUd6RSxDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBMUdVLHVEQUF3Qjs7Ozs7U0FBeEIsd0JBQXdCIn0=

package/dist_ts_web/elements/index.d.ts

@@ -3,6 +3,7 @@ export * from './idp-icon.js';
 export * from './idp-button.js';
 export * from './idp-badge.js';
 export * from './idp-card.js';
+export * from './idp-screenshot-placeholder.js';
 export * from './idp-input.js';
 export * from './idp-checkbox.js';
 export * from './idp-form.js';

package/dist_ts_web/elements/index.js

@@ -3,6 +3,7 @@ export * from './idp-icon.js';
 export * from './idp-button.js';
 export * from './idp-badge.js';
 export * from './idp-card.js';
+export * from './idp-screenshot-placeholder.js';
 export * from './idp-input.js';
 export * from './idp-checkbox.js';
 export * from './idp-form.js';
@@ -18,4 +19,4 @@ 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYywwQkFBMEIsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDIn0=

package/dist_ts_web/elements/tokens.d.ts

@@ -1,4 +1,4 @@
-export declare const idpAccent = "#3B82F6";
+export declare const idpAccent = "#007AFF";
 export declare const idpTheme: {
     bg: string;
     fg: string;

package/dist_ts_web/elements/tokens.js

@@ -1,5 +1,5 @@
 import { css, cssManager } from '@design.estate/dees-element';
-export const idpAccent = '#3B82F6';
+export const idpAccent = '#007AFF';
 export const idpTheme = {
     bg: 'var(--idp-bg)',
     fg: 'var(--idp-fg)',
@@ -18,64 +18,72 @@ export const idpTheme = {
     warn: 'var(--idp-warn)',
     radius: 'var(--idp-radius)',
 };
+/*
+ * idp.global tokens — Apple system theme.
+ * Light = systemGray6 canvas on white cards; dark = true-black on elevated grays.
+ * System-blue accent, SF Pro type, continuous-corner radii.
+ * The --sh-* layer is the console/product register; the --idp-* aliases map onto it
+ * so every consumer inherits new values without renames. Marketing (landing)
+ * components layer their own white-canvas surfaces on top of these shared tokens.
+ */
 export const idpBaseStyles = css `
   :host {
-    --sh-bg: ${cssManager.bdTheme('#FAFAF9', '#0A0A0A')};
-    --sh-bg-2: ${cssManager.bdTheme('#F4F4F2', '#111111')};
-    --sh-card: ${cssManager.bdTheme('#FFFFFF', '#121212')};
-    --sh-card-2: ${cssManager.bdTheme('#F8F8F7', '#161616')};
-    --sh-muted: ${cssManager.bdTheme('#F1F1EF', '#161616')};
-    --sh-muted-fg: ${cssManager.bdTheme('#71717A', 'hsl(0 0% 55%)')};
-    --sh-fg: ${cssManager.bdTheme('#0A0A0A', '#FAFAFA')};
-    --sh-fg-2: ${cssManager.bdTheme('#3F3F46', '#D4D4D8')};
-    --sh-fg-3: ${cssManager.bdTheme('#52525B', 'hsl(0 0% 70%)')};
-    --sh-fg-4: ${cssManager.bdTheme('#A1A1AA', 'hsl(0 0% 35%)')};
-    --sh-border: ${cssManager.bdTheme('#E4E4E7', '#262626')};
-    --sh-border-soft: ${cssManager.bdTheme('#EDEDEC', '#1C1C1C')};
-    --sh-border-strong: ${cssManager.bdTheme('#D4D4D8', '#333333')};
-    --sh-input: ${cssManager.bdTheme('#FFFFFF', '#161616')};
-    --sh-input-bg: ${cssManager.bdTheme('#FFFFFF', '#0A0A0A')};
-    --sh-hover: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
-    --sh-primary: ${cssManager.bdTheme('#18181B', '#FAFAFA')};
-    --sh-primary-fg: ${cssManager.bdTheme('#FAFAFA', '#18181B')};
-    --sh-accent: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
-    --sh-accent-h: ${cssManager.bdTheme('#0069F2', '#60A5FA')};
+    --sh-bg: ${cssManager.bdTheme('#F5F5F7', '#000000')};
+    --sh-bg-2: ${cssManager.bdTheme('#EFEFF1', '#0A0A0A')};
+    --sh-card: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sh-card-2: ${cssManager.bdTheme('#F5F5F7', '#161617')};
+    --sh-muted: ${cssManager.bdTheme('rgba(118,118,128,0.10)', 'rgba(120,120,128,0.20)')};
+    --sh-muted-fg: ${cssManager.bdTheme('#6E6E73', '#98989D')};
+    --sh-fg: ${cssManager.bdTheme('#1D1D1F', '#F5F5F7')};
+    --sh-fg-2: ${cssManager.bdTheme('#424245', '#D1D1D6')};
+    --sh-fg-3: ${cssManager.bdTheme('#6E6E73', '#98989D')};
+    --sh-fg-4: ${cssManager.bdTheme('#AEAEB2', '#636366')};
+    --sh-border: ${cssManager.bdTheme('#D2D2D7', '#38383A')};
+    --sh-border-soft: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.10)')};
+    --sh-border-strong: ${cssManager.bdTheme('#C6C6C8', '#48484A')};
+    --sh-input: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sh-input-bg: ${cssManager.bdTheme('#FFFFFF', '#000000')};
+    --sh-hover: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.06)')};
+    --sh-primary: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-primary-fg: #FFFFFF;
+    --sh-accent: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-accent-h: ${cssManager.bdTheme('#0066CC', '#409CFF')};
     --sh-accent-fg: #FFFFFF;
-    --sh-accent-soft: ${cssManager.bdTheme('#E6EFFB', 'rgba(59,130,246,0.15)')};
-    --sh-accent-soft-fg: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
-    --sh-accent-ring: ${cssManager.bdTheme('rgba(0,80,185,0.2)', 'rgba(59,130,246,0.35)')};
-    --sh-ok: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
-    --sh-ok-bg: ${cssManager.bdTheme('#F0FDF4', 'rgba(20,83,45,0.4)')};
-    --sh-ok-border: ${cssManager.bdTheme('#BBF7D0', 'rgba(74,222,128,0.25)')};
-    --sh-warn: ${cssManager.bdTheme('#B45309', '#FBBF24')};
-    --sh-warn-bg: ${cssManager.bdTheme('#FEF9C3', 'rgba(69,26,3,0.6)')};
-    --sh-warn-border: ${cssManager.bdTheme('#FDE68A', 'rgba(251,191,36,0.25)')};
-    --sh-err: ${cssManager.bdTheme('#DC2626', '#F87171')};
-    --sh-err-bg: ${cssManager.bdTheme('#FEF2F2', 'rgba(69,10,10,0.6)')};
-    --sh-err-border: ${cssManager.bdTheme('#FECACA', 'rgba(248,113,113,0.25)')};
-    --sh-info: ${cssManager.bdTheme('#1E40AF', '#93BBFD')};
-    --sh-info-bg: ${cssManager.bdTheme('#EFF6FF', 'rgba(59,130,246,0.15)')};
-    --sh-info-border: ${cssManager.bdTheme('#BFDBFE', 'rgba(59,130,246,0.3)')};
-    --sh-destructive: #EF4444;
-    --sh-ring: ${cssManager.bdTheme('#A1A1AA', '#3B82F6')};
-    --sh-radius: 8px;
-    --sh-radius-lg: 12px;
-    --sh-chart-1: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
-    --sh-chart-2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
-    --sh-chart-3: ${cssManager.bdTheme('#DC2626', '#F87171')};
-    --sh-chart-4: ${cssManager.bdTheme('#B45309', '#FBBF24')};
-    --sh-chart-5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
-    --sh-grid: ${cssManager.bdTheme('#E4E4E7', '#262626')};
-    --sh-grid-soft: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
-    --sh-spark-up: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
-    --sh-spark-down: ${cssManager.bdTheme('#DC2626', '#F87171')};
-    --sh-spark-info: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
-    --sh-d1: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
-    --sh-d2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
-    --sh-d3: ${cssManager.bdTheme('#B45309', '#FBBF24')};
-    --sh-d4: ${cssManager.bdTheme('#DC2626', '#F87171')};
-    --sh-d5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
-    --sh-d6: ${cssManager.bdTheme('#0891B2', '#22D3EE')};
+    --sh-accent-soft: ${cssManager.bdTheme('#E8F1FF', 'rgba(10,132,255,0.22)')};
+    --sh-accent-soft-fg: ${cssManager.bdTheme('#0066CC', '#6CB6FF')};
+    --sh-accent-ring: ${cssManager.bdTheme('rgba(0,122,255,0.25)', 'rgba(10,132,255,0.40)')};
+    --sh-ok: ${cssManager.bdTheme('#248A3D', '#30D158')};
+    --sh-ok-bg: ${cssManager.bdTheme('#E9F9EE', 'rgba(48,209,88,0.16)')};
+    --sh-ok-border: ${cssManager.bdTheme('rgba(52,199,89,0.38)', 'rgba(48,209,88,0.32)')};
+    --sh-warn: ${cssManager.bdTheme('#B25E00', '#FF9F0A')};
+    --sh-warn-bg: ${cssManager.bdTheme('#FFF3E0', 'rgba(255,159,10,0.16)')};
+    --sh-warn-border: ${cssManager.bdTheme('rgba(255,149,0,0.38)', 'rgba(255,159,10,0.32)')};
+    --sh-err: ${cssManager.bdTheme('#D70015', '#FF453A')};
+    --sh-err-bg: ${cssManager.bdTheme('#FFECEB', 'rgba(255,69,58,0.16)')};
+    --sh-err-border: ${cssManager.bdTheme('rgba(255,59,48,0.32)', 'rgba(255,69,58,0.32)')};
+    --sh-info: ${cssManager.bdTheme('#0066CC', '#6CB6FF')};
+    --sh-info-bg: ${cssManager.bdTheme('#E8F1FF', 'rgba(10,132,255,0.16)')};
+    --sh-info-border: ${cssManager.bdTheme('rgba(0,122,255,0.30)', 'rgba(10,132,255,0.30)')};
+    --sh-destructive: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-ring: ${cssManager.bdTheme('#C6C6C8', '#48484A')};
+    --sh-radius: 10px;
+    --sh-radius-lg: 14px;
+    --sh-chart-1: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-chart-2: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-chart-3: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-chart-4: ${cssManager.bdTheme('#FF9500', '#FF9F0A')};
+    --sh-chart-5: ${cssManager.bdTheme('#5856D6', '#BF5AF2')};
+    --sh-grid: ${cssManager.bdTheme('#D2D2D7', '#38383A')};
+    --sh-grid-soft: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.05)')};
+    --sh-spark-up: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-spark-down: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-spark-info: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-d1: ${cssManager.bdTheme('#007AFF', '#5AC8FA')};
+    --sh-d2: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-d3: ${cssManager.bdTheme('#FF9500', '#FFD60A')};
+    --sh-d4: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-d5: ${cssManager.bdTheme('#5856D6', '#BF5AF2')};
+    --sh-d6: ${cssManager.bdTheme('#5AC8FA', '#64D2FF')};
 
     --idp-bg: var(--sh-bg);
     --idp-bg-2: var(--sh-bg-2);
@@ -118,73 +126,79 @@ export const idpBaseStyles = css `
     --idp-spark-info: var(--sh-spark-info);
     --idp-radius: var(--sh-radius);
     --idp-radius-lg: var(--sh-radius-lg);
-    --idp-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --idp-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
-    --idp-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-    --idp-serif: 'Instrument Serif', Georgia, serif;
+    --idp-radius-pill: 980px;
+    --idp-nav-bg: ${cssManager.bdTheme('rgba(255,255,255,0.72)', 'rgba(22,22,23,0.72)')};
+    --idp-term-bg: ${cssManager.bdTheme('#1D1D1F', '#161617')};
+    --idp-font: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --idp-display: -apple-system, 'SF Pro Display', system-ui, 'Segoe UI', sans-serif;
+    --idp-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+    --idp-serif: 'SF Pro Display', -apple-system, Georgia, serif;
     font-family: var(--idp-font);
-    font-feature-settings: "cv11", "ss03";
     font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   :host([theme="dark"]),
   :host([dark]) {
-    --sh-bg: #0A0A0A;
-    --sh-bg-2: #111111;
-    --sh-card: #121212;
-    --sh-card-2: #161616;
-    --sh-muted: #161616;
-    --sh-muted-fg: hsl(0 0% 55%);
-    --sh-fg: #FAFAFA;
-    --sh-fg-2: #D4D4D8;
-    --sh-fg-3: hsl(0 0% 70%);
-    --sh-fg-4: hsl(0 0% 35%);
-    --sh-border: #262626;
-    --sh-border-soft: #1C1C1C;
-    --sh-border-strong: #333333;
-    --sh-input: #161616;
-    --sh-input-bg: #0A0A0A;
-    --sh-hover: rgba(255,255,255,0.04);
-    --sh-primary: #FAFAFA;
-    --sh-primary-fg: #18181B;
-    --sh-accent: #3B82F6;
-    --sh-accent-h: #60A5FA;
+    --sh-bg: #000000;
+    --sh-bg-2: #0A0A0A;
+    --sh-card: #1C1C1E;
+    --sh-card-2: #161617;
+    --sh-muted: rgba(120,120,128,0.20);
+    --sh-muted-fg: #98989D;
+    --sh-fg: #F5F5F7;
+    --sh-fg-2: #D1D1D6;
+    --sh-fg-3: #98989D;
+    --sh-fg-4: #636366;
+    --sh-border: #38383A;
+    --sh-border-soft: rgba(255,255,255,0.10);
+    --sh-border-strong: #48484A;
+    --sh-input: #1C1C1E;
+    --sh-input-bg: #000000;
+    --sh-hover: rgba(255,255,255,0.06);
+    --sh-primary: #0A84FF;
+    --sh-primary-fg: #FFFFFF;
+    --sh-accent: #0A84FF;
+    --sh-accent-h: #409CFF;
     --sh-accent-fg: #FFFFFF;
-    --sh-accent-soft: rgba(59,130,246,0.15);
-    --sh-accent-soft-fg: #93BBFD;
-    --sh-accent-ring: rgba(59,130,246,0.35);
-    --sh-ok: #4ADE80;
-    --sh-ok-bg: rgba(20,83,45,0.4);
-    --sh-ok-border: rgba(74,222,128,0.25);
-    --sh-warn: #FBBF24;
-    --sh-warn-bg: rgba(69,26,3,0.6);
-    --sh-warn-border: rgba(251,191,36,0.25);
-    --sh-err: #F87171;
-    --sh-err-bg: rgba(69,10,10,0.6);
-    --sh-err-border: rgba(248,113,113,0.25);
-    --sh-info: #93BBFD;
-    --sh-info-bg: rgba(59,130,246,0.15);
-    --sh-info-border: rgba(59,130,246,0.3);
-    --sh-destructive: #EF4444;
-    --sh-ring: #3B82F6;
-    --sh-chart-1: #3B82F6;
-    --sh-chart-2: #4ADE80;
-    --sh-chart-3: #F87171;
-    --sh-chart-4: #FBBF24;
-    --sh-chart-5: #A78BFA;
-    --sh-grid: #262626;
-    --sh-grid-soft: rgba(255,255,255,0.04);
-    --sh-spark-up: #4ADE80;
-    --sh-spark-down: #F87171;
-    --sh-spark-info: #93BBFD;
-    --sh-d1: #93BBFD;
-    --sh-d2: #4ADE80;
-    --sh-d3: #FBBF24;
-    --sh-d4: #F87171;
-    --sh-d5: #A78BFA;
-    --sh-d6: #22D3EE;
+    --sh-accent-soft: rgba(10,132,255,0.22);
+    --sh-accent-soft-fg: #6CB6FF;
+    --sh-accent-ring: rgba(10,132,255,0.40);
+    --sh-ok: #30D158;
+    --sh-ok-bg: rgba(48,209,88,0.16);
+    --sh-ok-border: rgba(48,209,88,0.32);
+    --sh-warn: #FF9F0A;
+    --sh-warn-bg: rgba(255,159,10,0.16);
+    --sh-warn-border: rgba(255,159,10,0.32);
+    --sh-err: #FF453A;
+    --sh-err-bg: rgba(255,69,58,0.16);
+    --sh-err-border: rgba(255,69,58,0.32);
+    --sh-info: #6CB6FF;
+    --sh-info-bg: rgba(10,132,255,0.16);
+    --sh-info-border: rgba(10,132,255,0.30);
+    --sh-destructive: #FF453A;
+    --sh-ring: #48484A;
+    --sh-chart-1: #0A84FF;
+    --sh-chart-2: #30D158;
+    --sh-chart-3: #FF453A;
+    --sh-chart-4: #FF9F0A;
+    --sh-chart-5: #BF5AF2;
+    --sh-grid: #38383A;
+    --sh-grid-soft: rgba(255,255,255,0.05);
+    --sh-spark-up: #30D158;
+    --sh-spark-down: #FF453A;
+    --sh-spark-info: #0A84FF;
+    --sh-d1: #5AC8FA;
+    --sh-d2: #30D158;
+    --sh-d3: #FFD60A;
+    --sh-d4: #FF453A;
+    --sh-d5: #BF5AF2;
+    --sh-d6: #64D2FF;
+    --idp-nav-bg: rgba(22,22,23,0.72);
+    --idp-term-bg: #161617;
   }
 `;
 export const idpElementStyles = [cssManager.defaultStyles, idpBaseStyles];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9rZW5zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3Rva2Vucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTlELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxTQUFTLENBQUM7QUFFbkMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHO0lBQ3RCLEVBQUUsRUFBRSxlQUFlO0lBQ25CLEVBQUUsRUFBRSxlQUFlO0lBQ25CLEtBQUssRUFBRSxrQkFBa0I7SUFDekIsT0FBTyxFQUFFLHFCQUFxQjtJQUM5QixNQUFNLEVBQUUsbUJBQW1CO0lBQzNCLElBQUksRUFBRSxpQkFBaUI7SUFDdkIsT0FBTyxFQUFFLG9CQUFvQjtJQUM3QixTQUFTLEVBQUUsdUJBQXVCO0lBQ2xDLE1BQU0sRUFBRSxtQkFBbUI7SUFDM0IsV0FBVyxFQUFFLHlCQUF5QjtJQUN0QyxVQUFVLEVBQUUsd0JBQXdCO0lBQ3BDLElBQUksRUFBRSxpQkFBaUI7SUFDdkIsV0FBVyxFQUFFLHdCQUF3QjtJQUNyQyxFQUFFLEVBQUUsZUFBZTtJQUNuQixJQUFJLEVBQUUsaUJBQWlCO0lBQ3ZCLE1BQU0sRUFBRSxtQkFBbUI7Q0FDNUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLENBQUE7O2VBRWpCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQztpQkFDdEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO2lCQUN4QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7bUJBQ3RDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQztrQkFDekMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO3FCQUNyQyxVQUFV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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9rZW5zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3Rva2Vucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTlELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxTQUFTLENBQUM7QUFFbkMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHO0lBQ3RCLEVBQUUsRUFBRSxlQUFlO0lBQ25CLEVBQUUsRUFBRSxlQUFlO0lBQ25CLEtBQUssRUFBRSxrQkFBa0I7SUFDekIsT0FBTyxFQUFFLHFCQUFxQjtJQUM5QixNQUFNLEVBQUUsbUJBQW1CO0lBQzNCLElBQUksRUFBRSxpQkFBaUI7SUFDdkIsT0FBTyxFQUFFLG9CQUFvQjtJQUM3QixTQUFTLEVBQUUsdUJBQXVCO0lBQ2xDLE1BQU0sRUFBRSxtQkFBbUI7SUFDM0IsV0FBVyxFQUFFLHlCQUF5QjtJQUN0QyxVQUFVLEVBQUUsd0JBQXdCO0lBQ3BDLElBQUksRUFBRSxpQkFBaUI7SUFDdkIsV0FBVyxFQUFFLHdCQUF3QjtJQUNyQyxFQUFFLEVBQUUsZUFBZTtJQUNuQixJQUFJLEVBQUUsaUJBQWlCO0lBQ3ZCLE1BQU0sRUFBRSxtQkFBbUI7Q0FDNUIsQ0FBQztBQUVGOzs7Ozs7O0dBT0c7QUFDSCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsR0FBRyxDQUFBOztlQUVqQixVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7aUJBQ3RDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQztpQkFDeEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO21CQUN0QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7a0JBQ3pDLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsd0JB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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@idp.global/catalog",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "private": false,
-  "description": "Web component catalog for idp.global, based on the v3 product design language.",
+  "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {
     ".": "./dist_ts_web/index.js"
   },
@@ -19,17 +19,16 @@
     "lucide": "^1.16.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.1",
-    "@git.zone/tsbundle": "^2.10.4",
+    "@git.zone/tsbuild": "^4.4.2",
+    "@git.zone/tsbundle": "^2.11.0",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
     "@types/node": "^25.9.0"
   },
   "files": [
     "ts_web/**/*",
-    "dist/**/*",
-    "dist_*/**/*",
     "dist_ts_web/**/*",
+    "dist_bundle/**/*",
     "assets/**/*",
     "html/**/*",
     "license",

package/readme.md

@@ -1,6 +1,6 @@
 # @idp.global/catalog
 
-Web component catalog for idp.global, based on the v3 product design language.
+Web component catalog for idp.global, based on the v5 Apple-system 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.
 
@@ -44,9 +44,10 @@ import type {
 
 | Element | Purpose |
 | --- | --- |
-| `idp-button` | Product button variants |
+| `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 |
@@ -65,7 +66,7 @@ import type {
 
 ## 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.
+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
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 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.'
 }