@idp.global/catalog 2.0.0 → 2.1.1

package/dist_ts_web/elements/idp-badge.js

@@ -34,6 +34,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { DeesElement, html, property, customElement, css } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
 let IdpBadge = (() => {
     let _classDecorators = [customElement('idp-badge')];
     let _classDescriptor;
@@ -43,12 +44,17 @@ let IdpBadge = (() => {
     let _variant_decorators;
     let _variant_initializers = [];
     let _variant_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
     var IdpBadge = 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 })];
+            _icon_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, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             IdpBadge = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -66,6 +72,9 @@ let IdpBadge = (() => {
         #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'default');
         get variant() { return this.#variant_accessor_storage; }
         set variant(value) { this.#variant_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _icon_initializers, ''));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
         static styles = [
             ...idpElementStyles,
             css `
@@ -116,11 +125,11 @@ let IdpBadge = (() => {
     `,
         ];
         render() {
-            return html `<span class="badge ${this.variant}"><slot></slot></span>`;
+            return html `<span class="badge ${this.variant}">${this.icon ? html `<idp-icon name=${this.icon} size="11"></idp-icon>` : html ``}<slot></slot></span>`;
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _variant_extraInitializers);
+            __runInitializers(this, _icon_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
@@ -129,4 +138,4 @@ let IdpBadge = (() => {
     return IdpBadge = _classThis;
 })();
 export { IdpBadge };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1iYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBV2xDLFFBQVE7NEJBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozt3QkFBbkIsU0FBUSxXQUFXOzs7O21DQVl0QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFDM0IsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBK0I7WUFieEQsNktBb0VDOzs7O1FBbkVRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztHQVE5QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQsMkVBQTRDLFNBQVMsRUFBQztRQUF0RCxJQUFnQixPQUFPLDZDQUErQjtRQUF0RCxJQUFnQixPQUFPLG1EQUErQjtRQUUvQyxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNkNGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQSxzQkFBc0IsSUFBSSxDQUFDLE9BQU8sd0JBQXdCLENBQUM7UUFDeEUsQ0FBQzs7Ozs7O1lBbkVVLHVEQUFROzs7OztTQUFSLFFBQVEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1iYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8sZUFBZSxDQUFDO0lBV1YsUUFBUTs0QkFEcEIsYUFBYSxDQUFDLFdBQVcsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7O3dCQUFuQixTQUFRLFdBQVc7Ozs7bUNBWXRDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBRjNCLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQStCO1lBR3RELGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQU07WUFoQjVCLDZLQXVFQzs7OztRQXRFUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7R0FROUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBR3hELDJFQUE0QyxTQUFTLEVBQUM7UUFBdEQsSUFBZ0IsT0FBTyw2Q0FBK0I7UUFBdEQsSUFBZ0IsT0FBTyxtREFBK0I7UUFHdEQsMkhBQXVCLEVBQUUsR0FBQztRQUExQixJQUFnQixJQUFJLDBDQUFNO1FBQTFCLElBQWdCLElBQUksZ0RBQU07UUFFbkIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTZDRjtTQUNGLENBQUM7UUFFSyxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUEsc0JBQXNCLElBQUksQ0FBQyxPQUFPLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLGtCQUFrQixJQUFJLENBQUMsSUFBVyx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUUsc0JBQXNCLENBQUM7UUFDOUosQ0FBQzs7Ozs7O1lBdEVVLHVEQUFROzs7OztTQUFSLFFBQVEifQ==

package/dist_ts_web/elements/idp-brand-mark.d.ts

@@ -0,0 +1,16 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-brand-mark': IdpBrandMark;
+    }
+}
+export declare class IdpBrandMark extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor size: number;
+    accessor wordmark: boolean;
+    accessor label: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-brand-mark.js

@@ -0,0 +1,139 @@
+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-icon.js';
+let IdpBrandMark = (() => {
+    let _classDecorators = [customElement('idp-brand-mark')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _wordmark_decorators;
+    let _wordmark_initializers = [];
+    let _wordmark_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    var IdpBrandMark = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({ type: Number })];
+            _wordmark_decorators = [property({ type: Boolean })];
+            _label_decorators = [property({ type: String })];
+            __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, _wordmark_decorators, { kind: "accessor", name: "wordmark", static: false, private: false, access: { has: obj => "wordmark" in obj, get: obj => obj.wordmark, set: (obj, value) => { obj.wordmark = value; } }, metadata: _metadata }, _wordmark_initializers, _wordmark_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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpBrandMark = _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: 18px; align-items: center;">
+      <idp-brand-mark></idp-brand-mark>
+      <idp-brand-mark wordmark></idp-brand-mark>
+      <idp-brand-mark size="44"></idp-brand-mark>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 primitives'];
+        #size_accessor_storage = __runInitializers(this, _size_initializers, 30);
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #wordmark_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _wordmark_initializers, false));
+        get wordmark() { return this.#wordmark_accessor_storage; }
+        set wordmark(value) { this.#wordmark_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _wordmark_extraInitializers), __runInitializers(this, _label_initializers, 'idp.global'));
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+      }
+      .brand {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        background: var(--idp-accent);
+        color: #fff;
+        box-shadow: 0 2px 6px var(--sh-accent-ring);
+      }
+      .wordmark {
+        font-family: var(--idp-font);
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: -0.4px;
+        color: var(--idp-fg);
+        white-space: nowrap;
+      }
+    `,
+        ];
+        render() {
+            const radius = Math.round(this.size * 0.27);
+            return html `
+      <span class="brand">
+        <span
+          class="tile"
+          style="width: ${this.size}px; height: ${this.size}px; border-radius: ${radius}px;"
+        >
+          <idp-icon name="shield" size=${Math.round(this.size * 0.55)}></idp-icon>
+        </span>
+        ${this.wordmark ? html `<span class="wordmark">${this.label}</span>` : html ``}
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _label_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpBrandMark = _classThis;
+})();
+export { IdpBrandMark };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJyYW5kLW1hcmsuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaWRwLWJyYW5kLW1hcmsudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQVNWLFlBQVk7NEJBRHhCLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7OzRCQUFuQixTQUFRLFdBQVc7Ozs7Z0NBVTFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO2lDQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFMM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBTTtZQUcxQiw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFTO1lBR2pDLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQWdCO1lBakJ2Qyw2S0FnRUM7Ozs7UUEvRFEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7OztHQU05QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQscUVBQXVCLEVBQUUsRUFBQztRQUExQixJQUFnQixJQUFJLDBDQUFNO1FBQTFCLElBQWdCLElBQUksZ0RBQU07UUFHMUIsZ0lBQTJCLEtBQUssR0FBQztRQUFqQyxJQUFnQixRQUFRLDhDQUFTO1FBQWpDLElBQWdCLFFBQVEsb0RBQVM7UUFHakMsOEhBQXdCLFlBQVksR0FBQztRQUFyQyxJQUFnQixLQUFLLDJDQUFnQjtRQUFyQyxJQUFnQixLQUFLLGlEQUFnQjtRQUU5QixNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EwQkY7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsQ0FBQztZQUM1QyxPQUFPLElBQUksQ0FBQTs7OzswQkFJVyxJQUFJLENBQUMsSUFBSSxlQUFlLElBQUksQ0FBQyxJQUFJLHNCQUFzQixNQUFNOzt5Q0FFOUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQzs7VUFFM0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLDBCQUEwQixJQUFJLENBQUMsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFOztLQUUvRSxDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBL0RVLHVEQUFZOzs7OztTQUFaLFlBQVkifQ==

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

@@ -2,6 +2,7 @@ import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import './idp-icon.js';
 export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent' | 'tint' | 'link';
 export type TIdpButtonSize = 'sm' | 'md' | 'lg';
+export type TIdpButtonShape = 'pill' | 'rect';
 declare global {
     interface HTMLElementTagNameMap {
         'idp-button': IdpButton;
@@ -12,6 +13,8 @@ export declare class IdpButton extends DeesElement {
     static demoGroups: string[];
     accessor variant: TIdpButtonVariant;
     accessor size: TIdpButtonSize;
+    accessor shape: TIdpButtonShape;
+    accessor block: boolean;
     accessor icon: string;
     accessor type: 'button' | 'submit' | 'reset';
     accessor disabled: boolean;

package/dist_ts_web/elements/idp-button.js

@@ -47,6 +47,12 @@ let IdpButton = (() => {
     let _size_decorators;
     let _size_initializers = [];
     let _size_extraInitializers = [];
+    let _shape_decorators;
+    let _shape_initializers = [];
+    let _shape_extraInitializers = [];
+    let _block_decorators;
+    let _block_initializers = [];
+    let _block_extraInitializers = [];
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
@@ -65,12 +71,16 @@ let IdpButton = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _variant_decorators = [property({ type: String })];
             _size_decorators = [property({ type: String })];
+            _shape_decorators = [property({ type: String })];
+            _block_decorators = [property({ type: Boolean, reflect: true })];
             _icon_decorators = [property({ type: String })];
             _type_decorators = [property({ type: String })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _loading_decorators = [property({ type: Boolean, reflect: true })];
             __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, _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, _shape_decorators, { kind: "accessor", name: "shape", static: false, private: false, access: { has: obj => "shape" in obj, get: obj => obj.shape, set: (obj, value) => { obj.shape = value; } }, metadata: _metadata }, _shape_initializers, _shape_extraInitializers);
+            __esDecorate(this, null, _block_decorators, { kind: "accessor", name: "block", static: false, private: false, access: { has: obj => "block" in obj, get: obj => obj.block, set: (obj, value) => { obj.block = value; } }, metadata: _metadata }, _block_initializers, _block_extraInitializers);
             __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
@@ -96,7 +106,13 @@ let IdpButton = (() => {
         #size_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _size_initializers, 'md'));
         get size() { return this.#size_accessor_storage; }
         set size(value) { this.#size_accessor_storage = value; }
-        #icon_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _icon_initializers, ''));
+        #shape_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _shape_initializers, 'pill'));
+        get shape() { return this.#shape_accessor_storage; }
+        set shape(value) { this.#shape_accessor_storage = value; }
+        #block_accessor_storage = (__runInitializers(this, _shape_extraInitializers), __runInitializers(this, _block_initializers, false));
+        get block() { return this.#block_accessor_storage; }
+        set block(value) { this.#block_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _block_extraInitializers), __runInitializers(this, _icon_initializers, ''));
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
         #type_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _type_initializers, 'button'));
@@ -117,6 +133,12 @@ let IdpButton = (() => {
       :host([disabled]) {
         pointer-events: none;
       }
+      :host([block]) {
+        display: block;
+      }
+      :host([block]) button {
+        width: 100%;
+      }
       button {
         display: inline-flex;
         align-items: center;
@@ -155,6 +177,28 @@ let IdpButton = (() => {
         padding: 11px 24px;
         font-size: 19px;
       }
+      .rect {
+        border-radius: 12px;
+        height: 44px;
+        padding: 0 18px;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .rect.outline {
+        background: var(--idp-card);
+        border: 1.5px solid var(--idp-border);
+        font-weight: 550;
+        font-size: 14.5px;
+      }
+      .rect.outline:hover:not(:disabled) {
+        background: var(--sh-hover);
+      }
+      .rect.link {
+        height: auto;
+        padding: 0;
+        border-radius: 0;
+        font-size: 12.5px;
+      }
       .default {
         background: var(--idp-primary);
         color: var(--idp-primary-fg);
@@ -235,7 +279,7 @@ let IdpButton = (() => {
         ];
         render() {
             return html `
-      <button class="${this.variant} ${this.size}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
+      <button class="${this.variant} ${this.size} ${this.shape === 'rect' ? 'rect' : ''}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
         ${this.loading
                 ? html `<span class="spinner" aria-hidden="true"></span>`
                 : this.icon ? html `<idp-icon name=${this.icon} size="14"></idp-icon>` : html ``}
@@ -254,4 +298,4 @@ let IdpButton = (() => {
     return IdpButton = _classThis;
 })();
 export { IdpButton };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQVlWLFNBQVM7NEJBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt5QkFBbkIsU0FBUSxXQUFXOzs7O21DQWF2QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO21DQUcxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQWQzQywwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFnQztZQUd2RCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUF3QjtZQUc1QyxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQTJDO1lBRy9ELDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQVM7WUFHakMsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBUztZQTdCbEMsNktBdUtDOzs7O1FBdEtRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7R0FTOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBR3hELDJFQUE2QyxTQUFTLEVBQUM7UUFBdkQsSUFBZ0IsT0FBTyw2Q0FBZ0M7UUFBdkQsSUFBZ0IsT0FBTyxtREFBZ0M7UUFHdkQsMkhBQXVDLElBQUksR0FBQztRQUE1QyxJQUFnQixJQUFJLDBDQUF3QjtRQUE1QyxJQUFnQixJQUFJLGdEQUF3QjtRQUc1Qyx3SEFBdUIsRUFBRSxHQUFDO1FBQTFCLElBQWdCLElBQUksMENBQU07UUFBMUIsSUFBZ0IsSUFBSSxnREFBTTtRQUcxQix3SEFBc0QsUUFBUSxHQUFDO1FBQS9ELElBQWdCLElBQUksMENBQTJDO1FBQS9ELElBQWdCLElBQUksZ0RBQTJDO1FBRy9ELGdJQUEyQixLQUFLLEdBQUM7UUFBakMsSUFBZ0IsUUFBUSw4Q0FBUztRQUFqQyxJQUFnQixRQUFRLG9EQUFTO1FBR2pDLGtJQUEwQixLQUFLLEdBQUM7UUFBaEMsSUFBZ0IsT0FBTyw2Q0FBUztRQUFoQyxJQUFnQixPQUFPLG1EQUFTO1FBRXpCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBeUhGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTt1QkFDUSxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxJQUFJLFVBQVUsSUFBSSxDQUFDLElBQUksY0FBYyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxPQUFPO1VBQ3BHLElBQUksQ0FBQyxPQUFPO2dCQUNaLENBQUMsQ0FBQyxJQUFJLENBQUEsa0RBQWtEO2dCQUN4RCxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLGtCQUFrQixJQUFJLENBQUMsSUFBVyx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7OztLQUcxRixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBdEtVLHVEQUFTOzs7OztTQUFULFNBQVMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQWFWLFNBQVM7NEJBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt5QkFBbkIsU0FBUSxXQUFXOzs7O21DQWF2QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2lDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztnQ0FHMUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO21DQUcxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQXBCM0MsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBZ0M7WUFHdkQsaUtBQWdCLElBQUksNkJBQUosSUFB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

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

@@ -0,0 +1,34 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-auth-card.js';
+import './idp-app-pair.js';
+import './idp-option-row.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+export interface IIdpConsentScope {
+    id: string;
+    title: string;
+    description: string;
+    icon?: string;
+    granted?: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-consent-card': IdpConsentCard;
+    }
+}
+export declare class IdpConsentCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor appName: string;
+    accessor appUrl: string;
+    accessor appLogoUrl: string;
+    accessor appColor: string;
+    accessor userName: string;
+    accessor busy: boolean;
+    accessor scopes: IIdpConsentScope[];
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private handleAllow;
+    private handleCancel;
+}

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

@@ -0,0 +1,217 @@
+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-auth-card.js';
+import './idp-app-pair.js';
+import './idp-option-row.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+let IdpConsentCard = (() => {
+    let _classDecorators = [customElement('idp-consent-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _appName_decorators;
+    let _appName_initializers = [];
+    let _appName_extraInitializers = [];
+    let _appUrl_decorators;
+    let _appUrl_initializers = [];
+    let _appUrl_extraInitializers = [];
+    let _appLogoUrl_decorators;
+    let _appLogoUrl_initializers = [];
+    let _appLogoUrl_extraInitializers = [];
+    let _appColor_decorators;
+    let _appColor_initializers = [];
+    let _appColor_extraInitializers = [];
+    let _userName_decorators;
+    let _userName_initializers = [];
+    let _userName_extraInitializers = [];
+    let _busy_decorators;
+    let _busy_initializers = [];
+    let _busy_extraInitializers = [];
+    let _scopes_decorators;
+    let _scopes_initializers = [];
+    let _scopes_extraInitializers = [];
+    var IdpConsentCard = 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 })];
+            _appUrl_decorators = [property({ type: String })];
+            _appLogoUrl_decorators = [property({ type: String })];
+            _appColor_decorators = [property({ type: String })];
+            _userName_decorators = [property({ type: String })];
+            _busy_decorators = [property({ type: Boolean })];
+            _scopes_decorators = [property({ type: Array })];
+            __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, _appUrl_decorators, { kind: "accessor", name: "appUrl", static: false, private: false, access: { has: obj => "appUrl" in obj, get: obj => obj.appUrl, set: (obj, value) => { obj.appUrl = value; } }, metadata: _metadata }, _appUrl_initializers, _appUrl_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, _userName_decorators, { kind: "accessor", name: "userName", static: false, private: false, access: { has: obj => "userName" in obj, get: obj => obj.userName, set: (obj, value) => { obj.userName = value; } }, metadata: _metadata }, _userName_initializers, _userName_extraInitializers);
+            __esDecorate(this, null, _busy_decorators, { kind: "accessor", name: "busy", static: false, private: false, access: { has: obj => "busy" in obj, get: obj => obj.busy, set: (obj, value) => { obj.busy = value; } }, metadata: _metadata }, _busy_initializers, _busy_extraInitializers);
+            __esDecorate(this, null, _scopes_decorators, { kind: "accessor", name: "scopes", static: false, private: false, access: { has: obj => "scopes" in obj, get: obj => obj.scopes, set: (obj, value) => { obj.scopes = value; } }, metadata: _metadata }, _scopes_initializers, _scopes_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpConsentCard = _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-consent-card
+        appName="design.estate"
+        userName="Alex Mercer"
+        .scopes=${[
+            { id: 'profile', title: 'Your name and email', description: 'alex@lossless.com', icon: 'user' },
+            { id: 'openid', title: 'Your verified identity', description: 'Signed identifier for design.estate', icon: 'fingerprint' },
+            { id: 'organizations', title: 'Organisation membership', description: 'Read which orgs you belong to', icon: 'building-2', granted: true },
+        ]}
+      ></idp-consent-card>
+    </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; }
+        #appUrl_accessor_storage = (__runInitializers(this, _appName_extraInitializers), __runInitializers(this, _appUrl_initializers, ''));
+        get appUrl() { return this.#appUrl_accessor_storage; }
+        set appUrl(value) { this.#appUrl_accessor_storage = value; }
+        #appLogoUrl_accessor_storage = (__runInitializers(this, _appUrl_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; }
+        #userName_accessor_storage = (__runInitializers(this, _appColor_extraInitializers), __runInitializers(this, _userName_initializers, ''));
+        get userName() { return this.#userName_accessor_storage; }
+        set userName(value) { this.#userName_accessor_storage = value; }
+        #busy_accessor_storage = (__runInitializers(this, _userName_extraInitializers), __runInitializers(this, _busy_initializers, false));
+        get busy() { return this.#busy_accessor_storage; }
+        set busy(value) { this.#busy_accessor_storage = value; }
+        #scopes_accessor_storage = (__runInitializers(this, _busy_extraInitializers), __runInitializers(this, _scopes_initializers, []));
+        get scopes() { return this.#scopes_accessor_storage; }
+        set scopes(value) { this.#scopes_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .scopes {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .lock-note {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 16px;
+        padding: 9px 12px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 11px;
+        font-size: 11.5px;
+        color: var(--idp-fg-3);
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 18px;
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <idp-auth-card heading="${this.appName} wants to access your idp.global account" description="This will allow ${this.appName} to:">
+        <idp-app-pair
+          slot="top"
+          appName=${this.appName}
+          appLogoUrl=${this.appLogoUrl}
+          appColor=${this.appColor}
+        ></idp-app-pair>
+        <div class="scopes">
+          ${this.scopes.map((scopeArg) => html `
+              <idp-option-row
+                interactive="false"
+                tileTone="accent"
+                tileSize="30"
+                trailing="check"
+                icon=${scopeArg.icon || 'check'}
+                label=${scopeArg.title}
+                description=${scopeArg.description}
+              >
+                ${scopeArg.granted
+                ? html `<idp-badge slot="trailing" variant="ok">Previously allowed</idp-badge>`
+                : html ``}
+              </idp-option-row>
+            `)}
+        </div>
+        <div class="lock-note">
+          <idp-icon name="lock" size="14"></idp-icon>
+          <span>${this.appName} can't post or make changes on your behalf.</span>
+        </div>
+        <div class="actions">
+          <idp-button variant="accent" shape="rect" block ?loading=${this.busy} @click=${this.handleAllow}>Allow access</idp-button>
+          <idp-button variant="outline" shape="rect" block ?disabled=${this.busy} @click=${this.handleCancel}>Cancel</idp-button>
+        </div>
+        <span slot="footer">
+          ${this.userName ? html `Signed in as ${this.userName} · ` : html ``}Revoke anytime in Connected Apps.
+        </span>
+      </idp-auth-card>
+    `;
+        }
+        handleAllow() {
+            this.dispatchEvent(new CustomEvent('idp-consent-allow', { bubbles: true, composed: true }));
+        }
+        handleCancel() {
+            this.dispatchEvent(new CustomEvent('idp-consent-cancel', { bubbles: true, composed: true }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _scopes_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpConsentCard = _classThis;
+})();
+export { IdpConsentCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWNvbnNlbnQtY2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtY29uc2VudC1jYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDL0MsT0FBTyxvQkFBb0IsQ0FBQztBQUM1QixPQUFPLG1CQUFtQixDQUFDO0FBQzNCLE9BQU8scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sZUFBZSxDQUFDO0lBaUJWLGNBQWM7NEJBRDFCLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzhCQUFuQixTQUFRLFdBQVc7Ozs7bUNBZ0I1QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7a0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztzQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO2tDQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7WUFqQjFCLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQU07WUFHN0Is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