@idp.global/catalog 2.0.0 → 2.1.0

package/dist_ts_web/elements/idp-app-pair.d.ts

@@ -0,0 +1,19 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-brand-mark.js';
+import './idp-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-app-pair': IdpAppPair;
+    }
+}
+export declare class IdpAppPair extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor appName: string;
+    accessor appLogoUrl: string;
+    accessor appColor: string;
+    accessor size: number;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get appInitials();
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-app-pair.js

@@ -0,0 +1,187 @@
+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';
+import './idp-brand-mark.js';
+import './idp-icon.js';
+let IdpAppPair = (() => {
+    let _classDecorators = [customElement('idp-app-pair')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _appName_decorators;
+    let _appName_initializers = [];
+    let _appName_extraInitializers = [];
+    let _appLogoUrl_decorators;
+    let _appLogoUrl_initializers = [];
+    let _appLogoUrl_extraInitializers = [];
+    let _appColor_decorators;
+    let _appColor_initializers = [];
+    let _appColor_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    var IdpAppPair = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _appName_decorators = [property({ type: String })];
+            _appLogoUrl_decorators = [property({ type: String })];
+            _appColor_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: Number })];
+            __esDecorate(this, null, _appName_decorators, { kind: "accessor", name: "appName", static: false, private: false, access: { has: obj => "appName" in obj, get: obj => obj.appName, set: (obj, value) => { obj.appName = value; } }, metadata: _metadata }, _appName_initializers, _appName_extraInitializers);
+            __esDecorate(this, null, _appLogoUrl_decorators, { kind: "accessor", name: "appLogoUrl", static: false, private: false, access: { has: obj => "appLogoUrl" in obj, get: obj => obj.appLogoUrl, set: (obj, value) => { obj.appLogoUrl = value; } }, metadata: _metadata }, _appLogoUrl_initializers, _appLogoUrl_extraInitializers);
+            __esDecorate(this, null, _appColor_decorators, { kind: "accessor", name: "appColor", static: false, private: false, access: { has: obj => "appColor" in obj, get: obj => obj.appColor, set: (obj, value) => { obj.appColor = value; } }, metadata: _metadata }, _appColor_initializers, _appColor_extraInitializers);
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpAppPair = _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; flex-direction: column; gap: 18px;">
+      <idp-app-pair appName="design.estate"></idp-app-pair>
+      <idp-app-pair appName="task.vc" appColor="#34C759"></idp-app-pair>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 auth'];
+        #appName_accessor_storage = __runInitializers(this, _appName_initializers, '');
+        get appName() { return this.#appName_accessor_storage; }
+        set appName(value) { this.#appName_accessor_storage = value; }
+        #appLogoUrl_accessor_storage = (__runInitializers(this, _appName_extraInitializers), __runInitializers(this, _appLogoUrl_initializers, ''));
+        get appLogoUrl() { return this.#appLogoUrl_accessor_storage; }
+        set appLogoUrl(value) { this.#appLogoUrl_accessor_storage = value; }
+        #appColor_accessor_storage = (__runInitializers(this, _appLogoUrl_extraInitializers), __runInitializers(this, _appColor_initializers, '#6D5EFC'));
+        get appColor() { return this.#appColor_accessor_storage; }
+        set appColor(value) { this.#appColor_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _appColor_extraInitializers), __runInitializers(this, _size_initializers, 44));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: flex;
+        justify-content: center;
+      }
+      .pair {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .app-tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 12px;
+        color: #fff;
+        font-family: var(--idp-font);
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
+        overflow: hidden;
+      }
+      .app-tile img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .connector {
+        position: relative;
+        width: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .connector::before {
+        content: '';
+        position: absolute;
+        left: 4px;
+        right: 4px;
+        top: 50%;
+        border-top: 1.5px dashed var(--idp-border);
+      }
+      .swap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 999px;
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        color: var(--idp-fg-3);
+      }
+    `,
+        ];
+        get appInitials() {
+            return this.appName
+                .split(/[\s.]+/)
+                .filter(Boolean)
+                .map((wordArg) => wordArg[0])
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+        }
+        render() {
+            return html `
+      <span class="pair">
+        <span
+          class="app-tile"
+          style="width: ${this.size}px; height: ${this.size}px; font-size: ${Math.round(this.size * 0.33)}px; background: ${this.appColor};"
+        >
+          ${this.appLogoUrl ? html `<img src=${this.appLogoUrl} alt=${this.appName} />` : this.appInitials}
+        </span>
+        <span class="connector" style="height: ${this.size}px;">
+          <span class="swap"><idp-icon name="lucide:ArrowLeftRight" size="13"></idp-icon></span>
+        </span>
+        <idp-brand-mark size=${this.size}></idp-brand-mark>
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _size_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpAppPair = _classThis;
+})();
+export { IdpAppPair };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWFwcC1wYWlyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1hcHAtcGFpci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxlQUFlLENBQUM7SUFTVixVQUFVOzRCQUR0QixhQUFhLENBQUMsY0FBYyxDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7MEJBQW5CLFNBQVEsV0FBVzs7OzttQ0FTeEMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3NDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBUjNCLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQU07WUFHN0IsbUxBQWdCLFVBQVUsNkJBQVYsVUFBVSwrRkFBTTtZQUdoQyw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFhO1lBR3JDLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQU07WUFuQjVCLDZLQTJHQzs7OztRQTFHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7R0FLOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBR2xELDJFQUEwQixFQUFFLEVBQUM7UUFBN0IsSUFBZ0IsT0FBTyw2Q0FBTTtRQUE3QixJQUFnQixPQUFPLG1EQUFNO1FBRzdCLHVJQUE2QixFQUFFLEdBQUM7UUFBaEMsSUFBZ0IsVUFBVSxnREFBTTtRQUFoQyxJQUFnQixVQUFVLHNEQUFNO1FBR2hDLHNJQUEyQixTQUFTLEdBQUM7UUFBckMsSUFBZ0IsUUFBUSw4Q0FBYTtRQUFyQyxJQUFnQixRQUFRLG9EQUFhO1FBR3JDLDRIQUF1QixFQUFFLEdBQUM7UUFBMUIsSUFBZ0IsSUFBSSwwQ0FBTTtRQUExQixJQUFnQixJQUFJLGdEQUFNO1FBRW5CLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBdURGO1NBQ0YsQ0FBQztRQUVGLElBQVksV0FBVztZQUNyQixPQUFPLElBQUksQ0FBQyxPQUFPO2lCQUNoQixLQUFLLENBQUMsUUFBUSxDQUFDO2lCQUNmLE1BQU0sQ0FBQyxPQUFPLENBQUM7aUJBQ2YsR0FBRyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7aUJBQzVCLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO2lCQUNYLElBQUksQ0FBQyxFQUFFLENBQUM7aUJBQ1IsV0FBVyxFQUFFLENBQUM7UUFDbkIsQ0FBQztRQUVNLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7OzswQkFJVyxJQUFJLENBQUMsSUFBSSxlQUFlLElBQUksQ0FBQyxJQUFJLGtCQUFrQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixJQUFJLENBQUMsUUFBUTs7WUFFN0gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLFlBQVksSUFBSSxDQUFDLFVBQVUsUUFBUSxJQUFJLENBQUMsT0FBTyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXOztpREFFeEQsSUFBSSxDQUFDLElBQUk7OzsrQkFHM0IsSUFBSSxDQUFDLElBQUk7O0tBRW5DLENBQUM7UUFDSixDQUFDOzs7Ozs7WUExR1UsdURBQVU7Ozs7O1NBQVYsVUFBVSJ9

package/dist_ts_web/elements/idp-auth-card.d.ts

@@ -0,0 +1,17 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-auth-card': IdpAuthCard;
+    }
+}
+export declare class IdpAuthCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor heading: string;
+    accessor description: string;
+    accessor width: number;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private accessor hasFooterContent;
+    render(): TemplateResult;
+    private handleFooterSlotChange;
+}

package/dist_ts_web/elements/idp-auth-card.js

@@ -0,0 +1,180 @@
+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, state, customElement, css } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+let IdpAuthCard = (() => {
+    let _classDecorators = [customElement('idp-auth-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _heading_decorators;
+    let _heading_initializers = [];
+    let _heading_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _hasFooterContent_decorators;
+    let _hasFooterContent_initializers = [];
+    let _hasFooterContent_extraInitializers = [];
+    var IdpAuthCard = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _heading_decorators = [property({ type: String })];
+            _description_decorators = [property({ type: String })];
+            _width_decorators = [property({ type: Number })];
+            _hasFooterContent_decorators = [state()];
+            __esDecorate(this, null, _heading_decorators, { kind: "accessor", name: "heading", static: false, private: false, access: { has: obj => "heading" in obj, get: obj => obj.heading, set: (obj, value) => { obj.heading = value; } }, metadata: _metadata }, _heading_initializers, _heading_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(this, null, _hasFooterContent_decorators, { kind: "accessor", name: "hasFooterContent", static: false, private: false, access: { has: obj => "hasFooterContent" in obj, get: obj => obj.hasFooterContent, set: (obj, value) => { obj.hasFooterContent = value; } }, metadata: _metadata }, _hasFooterContent_initializers, _hasFooterContent_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpAuthCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="background: var(--sh-bg, #f5f5f7); padding: 40px; display: flex; justify-content: center;">
+      <idp-auth-card heading="Sign in" description="to continue to console.idp.global">
+        <idp-brand-mark wordmark slot="top"></idp-brand-mark>
+        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+          <idp-input size="lg" icon="mail" placeholder="you@example.com"></idp-input>
+          <idp-button variant="accent" shape="rect" block icon="arrow-up">Continue</idp-button>
+        </div>
+        <span slot="footer">By continuing you agree to the Terms and Privacy Notice.</span>
+      </idp-auth-card>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 auth'];
+        #heading_accessor_storage = __runInitializers(this, _heading_initializers, '');
+        get heading() { return this.#heading_accessor_storage; }
+        set heading(value) { this.#heading_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _heading_extraInitializers), __runInitializers(this, _description_initializers, ''));
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #width_accessor_storage = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _width_initializers, 360));
+        get width() { return this.#width_accessor_storage; }
+        set width(value) { this.#width_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      .card {
+        max-width: calc(100vw - 32px);
+        margin: 0 auto;
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 22px;
+        box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.04);
+        padding: 30px 26px;
+        font-family: var(--idp-font);
+        color: var(--idp-fg);
+      }
+      .top {
+        display: flex;
+        justify-content: center;
+      }
+      .top ::slotted(*) {
+        margin: 0 auto;
+      }
+      h2 {
+        margin: 18px 0 0;
+        font-size: 21px;
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        line-height: 1.2;
+        text-align: center;
+        text-wrap: balance;
+        color: var(--idp-fg);
+      }
+      .description {
+        margin: 7px 0 0;
+        font-size: 13.5px;
+        line-height: 1.5;
+        color: var(--idp-fg-3);
+        text-align: center;
+        text-wrap: pretty;
+      }
+      .footer {
+        display: block;
+        margin-top: 14px;
+        font-size: 11px;
+        line-height: 1.5;
+        color: var(--sh-fg-4);
+        text-align: center;
+        text-wrap: pretty;
+      }
+      .footer:not(.has-content) {
+        display: none;
+      }
+    `,
+        ];
+        #hasFooterContent_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _hasFooterContent_initializers, false));
+        get hasFooterContent() { return this.#hasFooterContent_accessor_storage; }
+        set hasFooterContent(value) { this.#hasFooterContent_accessor_storage = value; }
+        render() {
+            return html `
+      <section class="card" part="card" style="width: ${this.width}px;">
+        <div class="top"><slot name="top"></slot></div>
+        ${this.heading ? html `<h2>${this.heading}</h2>` : html ``}
+        ${this.description ? html `<p class="description">${this.description}</p>` : html ``}
+        <slot></slot>
+        <div class="footer ${this.hasFooterContent ? 'has-content' : ''}">
+          <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+        </div>
+      </section>
+    `;
+        }
+        handleFooterSlotChange(eventArg) {
+            const slot = eventArg.target;
+            this.hasFooterContent = slot.assignedNodes({ flatten: true }).length > 0;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _hasFooterContent_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpAuthCard = _classThis;
+})();
+export { IdpAuthCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWF1dGgtY2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYXV0aC1jYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDMUgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBU2xDLFdBQVc7NEJBRHZCLGFBQWEsQ0FBQyxlQUFlLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozs7Ozs7OzsyQkFBbkIsU0FBUSxXQUFXOzs7O21DQWV6QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7dUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzRDQTREMUIsS0FBSyxFQUFFO1lBakVSLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQU07WUFHN0Isc0xBQWdCLFdBQVcsNkJBQVgsV0FBVyxpR0FBTTtZQUdqQyxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFPO1lBNEQ1QixxTUFBaUIsZ0JBQWdCLDZCQUFoQixnQkFBZ0IsMkdBQVM7WUFsRjVDLDZLQXNHQzs7OztRQXJHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7R0FXOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBR2xELDJFQUEwQixFQUFFLEVBQUM7UUFBN0IsSUFBZ0IsT0FBTyw2Q0FBTTtRQUE3QixJQUFnQixPQUFPLG1EQUFNO1FBRzdCLHlJQUE4QixFQUFFLEdBQUM7UUFBakMsSUFBZ0IsV0FBVyxpREFBTTtRQUFqQyxJQUFnQixXQUFXLHVEQUFNO1FBR2pDLGlJQUF3QixHQUFHLEdBQUM7UUFBNUIsSUFBZ0IsS0FBSywyQ0FBTztRQUE1QixJQUFnQixLQUFLLGlEQUFPO1FBRXJCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBb0RGO1NBQ0YsQ0FBQztRQUdGLGlKQUFvQyxLQUFLLEdBQUM7UUFBMUMsSUFBaUIsZ0JBQWdCLHNEQUFTO1FBQTFDLElBQWlCLGdCQUFnQiw0REFBUztRQUVuQyxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7d0RBQ3lDLElBQUksQ0FBQyxLQUFLOztVQUV4RCxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsT0FBTyxJQUFJLENBQUMsT0FBTyxPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFO1VBQ3RELElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSwwQkFBMEIsSUFBSSxDQUFDLFdBQVcsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7NkJBRTdELElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxFQUFFOzRDQUMzQixJQUFJLENBQUMsc0JBQXNCOzs7S0FHbEUsQ0FBQztRQUNKLENBQUM7UUFFTyxzQkFBc0IsQ0FBQyxRQUFlO1lBQzVDLE1BQU0sSUFBSSxHQUFHLFFBQVEsQ0FBQyxNQUF5QixDQUFDO1lBQ2hELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUMzRSxDQUFDOzs7Ozs7WUFyR1UsdURBQVc7Ozs7O1NBQVgsV0FBVyJ9

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

@@ -0,0 +1,17 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-avatar': IdpAvatar;
+    }
+}
+export declare class IdpAvatar extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor name: string;
+    accessor initials: string;
+    accessor size: number;
+    accessor src: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get resolvedInitials();
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-avatar.js

@@ -0,0 +1,151 @@
+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';
+let IdpAvatar = (() => {
+    let _classDecorators = [customElement('idp-avatar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _initials_decorators;
+    let _initials_initializers = [];
+    let _initials_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _src_decorators;
+    let _src_initializers = [];
+    let _src_extraInitializers = [];
+    var IdpAvatar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [property({ type: String })];
+            _initials_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: Number })];
+            _src_decorators = [property({ type: String })];
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _initials_decorators, { kind: "accessor", name: "initials", static: false, private: false, access: { has: obj => "initials" in obj, get: obj => obj.initials, set: (obj, value) => { obj.initials = value; } }, metadata: _metadata }, _initials_initializers, _initials_extraInitializers);
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _src_decorators, { kind: "accessor", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpAvatar = _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: 12px; align-items: center;">
+      <idp-avatar name="Alex Mercer"></idp-avatar>
+      <idp-avatar name="Jane Doe" size="30"></idp-avatar>
+      <idp-avatar initials="SR" size="22"></idp-avatar>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 primitives'];
+        #name_accessor_storage = __runInitializers(this, _name_initializers, '');
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #initials_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _initials_initializers, ''));
+        get initials() { return this.#initials_accessor_storage; }
+        set initials(value) { this.#initials_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _initials_extraInitializers), __runInitializers(this, _size_initializers, 38));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #src_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _src_initializers, ''));
+        get src() { return this.#src_accessor_storage; }
+        set src(value) { this.#src_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+      }
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 999px;
+        overflow: hidden;
+        background: var(--sh-accent-soft);
+        color: var(--sh-accent-soft-fg);
+        font-family: var(--idp-font);
+        font-weight: 650;
+        letter-spacing: -0.3px;
+        user-select: none;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `,
+        ];
+        get resolvedInitials() {
+            if (this.initials) {
+                return this.initials.slice(0, 2).toUpperCase();
+            }
+            return this.name
+                .split(' ')
+                .filter(Boolean)
+                .map((wordArg) => wordArg[0])
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+        }
+        render() {
+            return html `
+      <span
+        class="avatar"
+        style="width: ${this.size}px; height: ${this.size}px; font-size: ${Math.round(this.size * 0.38)}px;"
+      >
+        ${this.src ? html `<img src=${this.src} alt=${this.name} />` : this.resolvedInitials}
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _src_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpAvatar = _classThis;
+})();
+export { IdpAvatar };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWF2YXRhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYXZhdGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7SUFTbEMsU0FBUzs0QkFEckIsYUFBYSxDQUFDLFlBQVksQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7O3lCQUFuQixTQUFRLFdBQVc7Ozs7Z0NBVXZDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7K0JBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQVIzQixpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQU07WUFHOUIsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBTTtZQUcxQiw4SkFBZ0IsR0FBRyw2QkFBSCxHQUFHLGlGQUFNO1lBcEIzQiw2S0F5RUM7Ozs7UUF4RVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7OztHQU05QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQscUVBQXVCLEVBQUUsRUFBQztRQUExQixJQUFnQixJQUFJLDBDQUFNO1FBQTFCLElBQWdCLElBQUksZ0RBQU07UUFHMUIsZ0lBQTJCLEVBQUUsR0FBQztRQUE5QixJQUFnQixRQUFRLDhDQUFNO1FBQTlCLElBQWdCLFFBQVEsb0RBQU07UUFHOUIsNEhBQXVCLEVBQUUsR0FBQztRQUExQixJQUFnQixJQUFJLDBDQUFNO1FBQTFCLElBQWdCLElBQUksZ0RBQU07UUFHMUIsc0hBQXNCLEVBQUUsR0FBQztRQUF6QixJQUFnQixHQUFHLHlDQUFNO1FBQXpCLElBQWdCLEdBQUcsK0NBQU07UUFFbEIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBdUJGO1NBQ0YsQ0FBQztRQUVGLElBQVksZ0JBQWdCO1lBQzFCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO2dCQUNsQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNqRCxDQUFDO1lBQ0QsT0FBTyxJQUFJLENBQUMsSUFBSTtpQkFDYixLQUFLLENBQUMsR0FBRyxDQUFDO2lCQUNWLE1BQU0sQ0FBQyxPQUFPLENBQUM7aUJBQ2YsR0FBRyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7aUJBQzVCLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO2lCQUNYLElBQUksQ0FBQyxFQUFFLENBQUM7aUJBQ1IsV0FBVyxFQUFFLENBQUM7UUFDbkIsQ0FBQztRQUVNLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7O3dCQUdTLElBQUksQ0FBQyxJQUFJLGVBQWUsSUFBSSxDQUFDLElBQUksa0JBQWtCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7O1VBRTdGLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxZQUFZLElBQUksQ0FBQyxHQUFHLFFBQVEsSUFBSSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCOztLQUV0RixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBeEVVLHVEQUFTOzs7OztTQUFULFNBQVMifQ==

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

@@ -1,4 +1,5 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-icon.js';
 export type TIdpBadgeVariant = 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline';
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,6 +10,7 @@ export declare class IdpBadge extends DeesElement {
     static demo: () => TemplateResult<1>;
     static demoGroups: string[];
     accessor variant: TIdpBadgeVariant;
+    accessor icon: string;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
 }