@idp.global/catalog 1.1.1

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

@@ -0,0 +1,25 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-approval-card': IdpApprovalCard;
+    }
+}
+export declare class IdpApprovalCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor appName: string;
+    accessor appInitials: string;
+    accessor appColor: string;
+    accessor requestText: string;
+    accessor location: string;
+    accessor device: string;
+    accessor risk: 'trusted' | 'warning' | 'low';
+    accessor timeLabel: string;
+    accessor primary: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private dispatchAction;
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,274 @@
+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-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+let IdpApprovalCard = (() => {
+    let _classDecorators = [customElement('idp-approval-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _appName_decorators;
+    let _appName_initializers = [];
+    let _appName_extraInitializers = [];
+    let _appInitials_decorators;
+    let _appInitials_initializers = [];
+    let _appInitials_extraInitializers = [];
+    let _appColor_decorators;
+    let _appColor_initializers = [];
+    let _appColor_extraInitializers = [];
+    let _requestText_decorators;
+    let _requestText_initializers = [];
+    let _requestText_extraInitializers = [];
+    let _location_decorators;
+    let _location_initializers = [];
+    let _location_extraInitializers = [];
+    let _device_decorators;
+    let _device_initializers = [];
+    let _device_extraInitializers = [];
+    let _risk_decorators;
+    let _risk_initializers = [];
+    let _risk_extraInitializers = [];
+    let _timeLabel_decorators;
+    let _timeLabel_initializers = [];
+    let _timeLabel_extraInitializers = [];
+    let _primary_decorators;
+    let _primary_initializers = [];
+    let _primary_extraInitializers = [];
+    var IdpApprovalCard = 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, attribute: 'app-name' })];
+            _appInitials_decorators = [property({ type: String, attribute: 'app-initials' })];
+            _appColor_decorators = [property({ type: String, attribute: 'app-color' })];
+            _requestText_decorators = [property({ type: String, attribute: 'request-text' })];
+            _location_decorators = [property({ type: String })];
+            _device_decorators = [property({ type: String })];
+            _risk_decorators = [property({ type: String })];
+            _timeLabel_decorators = [property({ type: String, attribute: 'time-label' })];
+            _primary_decorators = [property({ type: Boolean, reflect: true })];
+            __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, _appInitials_decorators, { kind: "accessor", name: "appInitials", static: false, private: false, access: { has: obj => "appInitials" in obj, get: obj => obj.appInitials, set: (obj, value) => { obj.appInitials = value; } }, metadata: _metadata }, _appInitials_initializers, _appInitials_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, _requestText_decorators, { kind: "accessor", name: "requestText", static: false, private: false, access: { has: obj => "requestText" in obj, get: obj => obj.requestText, set: (obj, value) => { obj.requestText = value; } }, metadata: _metadata }, _requestText_initializers, _requestText_extraInitializers);
+            __esDecorate(this, null, _location_decorators, { kind: "accessor", name: "location", static: false, private: false, access: { has: obj => "location" in obj, get: obj => obj.location, set: (obj, value) => { obj.location = value; } }, metadata: _metadata }, _location_initializers, _location_extraInitializers);
+            __esDecorate(this, null, _device_decorators, { kind: "accessor", name: "device", static: false, private: false, access: { has: obj => "device" in obj, get: obj => obj.device, set: (obj, value) => { obj.device = value; } }, metadata: _metadata }, _device_initializers, _device_extraInitializers);
+            __esDecorate(this, null, _risk_decorators, { kind: "accessor", name: "risk", static: false, private: false, access: { has: obj => "risk" in obj, get: obj => obj.risk, set: (obj, value) => { obj.risk = value; } }, metadata: _metadata }, _risk_initializers, _risk_extraInitializers);
+            __esDecorate(this, null, _timeLabel_decorators, { kind: "accessor", name: "timeLabel", static: false, private: false, access: { has: obj => "timeLabel" in obj, get: obj => obj.timeLabel, set: (obj, value) => { obj.timeLabel = value; } }, metadata: _metadata }, _timeLabel_initializers, _timeLabel_extraInitializers);
+            __esDecorate(this, null, _primary_decorators, { kind: "accessor", name: "primary", static: false, private: false, access: { has: obj => "primary" in obj, get: obj => obj.primary, set: (obj, value) => { obj.primary = value; } }, metadata: _metadata }, _primary_initializers, _primary_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpApprovalCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <idp-approval-card
+      app-name="GitHub"
+      app-initials="GH"
+      app-color="#24292F"
+      request-text="Sign in to github.com"
+      location="Berlin · DE"
+      device="Safari · MacBook Pro"
+      risk="trusted"
+      time-label="now"
+    ></idp-approval-card>
+  `;
+        static demoGroups = ['idp.global v3 approval surfaces'];
+        #appName_accessor_storage = __runInitializers(this, _appName_initializers, 'GitHub');
+        get appName() { return this.#appName_accessor_storage; }
+        set appName(value) { this.#appName_accessor_storage = value; }
+        #appInitials_accessor_storage = (__runInitializers(this, _appName_extraInitializers), __runInitializers(this, _appInitials_initializers, 'GH'));
+        get appInitials() { return this.#appInitials_accessor_storage; }
+        set appInitials(value) { this.#appInitials_accessor_storage = value; }
+        #appColor_accessor_storage = (__runInitializers(this, _appInitials_extraInitializers), __runInitializers(this, _appColor_initializers, '#24292F'));
+        get appColor() { return this.#appColor_accessor_storage; }
+        set appColor(value) { this.#appColor_accessor_storage = value; }
+        #requestText_accessor_storage = (__runInitializers(this, _appColor_extraInitializers), __runInitializers(this, _requestText_initializers, 'Sign in to github.com'));
+        get requestText() { return this.#requestText_accessor_storage; }
+        set requestText(value) { this.#requestText_accessor_storage = value; }
+        #location_accessor_storage = (__runInitializers(this, _requestText_extraInitializers), __runInitializers(this, _location_initializers, 'Berlin · DE'));
+        get location() { return this.#location_accessor_storage; }
+        set location(value) { this.#location_accessor_storage = value; }
+        #device_accessor_storage = (__runInitializers(this, _location_extraInitializers), __runInitializers(this, _device_initializers, 'Safari · MacBook Pro'));
+        get device() { return this.#device_accessor_storage; }
+        set device(value) { this.#device_accessor_storage = value; }
+        #risk_accessor_storage = (__runInitializers(this, _device_extraInitializers), __runInitializers(this, _risk_initializers, 'trusted'));
+        get risk() { return this.#risk_accessor_storage; }
+        set risk(value) { this.#risk_accessor_storage = value; }
+        #timeLabel_accessor_storage = (__runInitializers(this, _risk_extraInitializers), __runInitializers(this, _timeLabel_initializers, 'now'));
+        get timeLabel() { return this.#timeLabel_accessor_storage; }
+        set timeLabel(value) { this.#timeLabel_accessor_storage = value; }
+        #primary_accessor_storage = (__runInitializers(this, _timeLabel_extraInitializers), __runInitializers(this, _primary_initializers, false));
+        get primary() { return this.#primary_accessor_storage; }
+        set primary(value) { this.#primary_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      .card {
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        padding: 14px;
+        color: var(--idp-fg);
+      }
+      :host([primary]) .card {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 92%);
+      }
+      .top {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        background: var(--app-color);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 750;
+        letter-spacing: -0.03em;
+        flex: 0 0 auto;
+      }
+      .body {
+        flex: 1;
+        min-width: 0;
+      }
+      .line {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      .app {
+        font-size: 14px;
+        font-weight: 650;
+        letter-spacing: -0.02em;
+      }
+      .time, .sub, .meta {
+        color: var(--idp-muted-fg);
+      }
+      .time {
+        font-size: 12px;
+      }
+      .sub {
+        margin-top: 1px;
+        font-size: 13px;
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+        margin-top: 9px;
+        font-size: 12px;
+      }
+      .meta-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+      }
+      idp-button:first-child {
+        flex: 1;
+      }
+      idp-button:last-child {
+        flex: 2;
+      }
+    `,
+        ];
+        dispatchAction(actionArg) {
+            this.dispatchEvent(new CustomEvent(`idp-${actionArg}`, {
+                detail: {
+                    appName: this.appName,
+                    requestText: this.requestText,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        render() {
+            const badgeVariant = this.risk === 'warning' ? 'warn' : 'ok';
+            const badgeText = this.risk === 'warning' ? 'new network' : 'trusted';
+            return html `
+      <article class="card" style="--app-color: ${this.appColor}">
+        <div class="top">
+          <div class="avatar">${this.appInitials}</div>
+          <div class="body">
+            <div class="line">
+              <div class="app">${this.appName}</div>
+              <div class="time">${this.timeLabel}</div>
+            </div>
+            <div class="sub">${this.requestText}</div>
+            <div class="meta">
+              <span class="meta-item"><idp-icon name="location" size="12"></idp-icon>${this.location}</span>
+              <span class="meta-item"><idp-icon name="laptop" size="12"></idp-icon>${this.device}</span>
+              <idp-badge variant=${badgeVariant}>${badgeText}</idp-badge>
+            </div>
+          </div>
+        </div>
+        <div class="actions">
+          <idp-button variant="outline" @click=${() => this.dispatchAction('deny')}>Deny</idp-button>
+          <idp-button variant="accent" icon="check" @click=${() => this.dispatchAction('approve')}>Approve</idp-button>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _primary_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpApprovalCard = _classThis;
+})();
+export { IdpApprovalCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWFwcHJvdmFsLWNhcmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaWRwLWFwcHJvdmFsLWNhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8saUJBQWlCLENBQUM7QUFDekIsT0FBTyxlQUFlLENBQUM7SUFTVixlQUFlOzRCQUQzQixhQUFhLENBQUMsbUJBQW1CLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsrQkFBbkIsU0FBUSxXQUFXOzs7O21DQWU3QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsQ0FBQzt1Q0FHakQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFLENBQUM7b0NBR3JELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDO3VDQUdsRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUUsQ0FBQztvQ0FHckQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2tDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztxQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLENBQUM7bUNBR25ELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO1lBdkIzQywwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFZO1lBR25DLHNMQUFnQixXQUFXLDZCQUFYLFdBQVcsaUdBQVE7WUFHbkMsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBYTtZQUdyQyxzTEFBZ0IsV0FBVyw2QkFBWCxXQUFXLGlHQUEyQjtZQUd0RCw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFpQjtZQUd6Qyx1S0FBZ0IsTUFBTSw2QkFBTixNQUFNLHVGQUEwQjtZQUdoRCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUE0QztZQUdoRSxnTEFBZ0IsU0FBUyw2QkFBVCxTQUFTLDZGQUFTO1lBR2xDLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQVM7WUF4Q2xDLDZLQXdLQzs7OztRQXZLUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7R0FXOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxpQ0FBaUMsQ0FBQyxDQUFDO1FBRy9ELDJFQUEwQixRQUFRLEVBQUM7UUFBbkMsSUFBZ0IsT0FBTyw2Q0FBWTtRQUFuQyxJQUFnQixPQUFPLG1EQUFZO1FBR25DLHlJQUE4QixJQUFJLEdBQUM7UUFBbkMsSUFBZ0IsV0FBVyxpREFBUTtRQUFuQyxJQUFnQixXQUFXLHVEQUFRO1FBR25DLHVJQUEyQixTQUFTLEdBQUM7UUFBckMsSUFBZ0IsUUFBUSw4Q0FBYTtRQUFyQyxJQUFnQixRQUFRLG9EQUFhO1FBR3JDLDBJQUE4Qix1QkFBdUIsR0FBQztRQUF0RCxJQUFnQixXQUFXLGlEQUEyQjtRQUF0RCxJQUFnQixXQUFXLHVEQUEyQjtRQUd0RCx1SUFBMkIsYUFBYSxHQUFDO1FBQXpDLElBQWdCLFFBQVEsOENBQWlCO1FBQXpDLElBQWdCLFFBQVEsb0RBQWlCO1FBR3pDLGdJQUF5QixzQkFBc0IsR0FBQztRQUFoRCxJQUFnQixNQUFNLDRDQUEwQjtRQUFoRCxJQUFnQixNQUFNLGtEQUEwQjtRQUdoRCwwSEFBc0QsU0FBUyxHQUFDO1FBQWhFLElBQWdCLElBQUksMENBQTRDO1FBQWhFLElBQWdCLElBQUksZ0RBQTRDO1FBR2hFLGtJQUE0QixLQUFLLEdBQUM7UUFBbEMsSUFBZ0IsU0FBUywrQ0FBUztRQUFsQyxJQUFnQixTQUFTLHFEQUFTO1FBR2xDLG1JQUEwQixLQUFLLEdBQUM7UUFBaEMsSUFBZ0IsT0FBTyw2Q0FBUztRQUFoQyxJQUFnQixPQUFPLG1EQUFTO1FBRXpCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW1GRjtTQUNGLENBQUM7UUFFTSxjQUFjLENBQUMsU0FBNkI7WUFDbEQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLFdBQVcsQ0FBQyxPQUFPLFNBQVMsRUFBRSxFQUFFO2dCQUNyRCxNQUFNLEVBQUU7b0JBQ04sT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPO29CQUNyQixXQUFXLEVBQUUsSUFBSSxDQUFDLFdBQVc7aUJBQzlCO2dCQUNELE9BQU8sRUFBRSxJQUFJO2dCQUNiLFFBQVEsRUFBRSxJQUFJO2FBQ2YsQ0FBQyxDQUFDLENBQUM7UUFDTixDQUFDO1FBRU0sTUFBTTtZQUNYLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztZQUM3RCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDdEUsT0FBTyxJQUFJLENBQUE7a0RBQ21DLElBQUksQ0FBQyxRQUFROztnQ0FFL0IsSUFBSSxDQUFDLFdBQVc7OztpQ0FHZixJQUFJLENBQUMsT0FBTztrQ0FDWCxJQUFJLENBQUMsU0FBUzs7K0JBRWpCLElBQUksQ0FBQyxXQUFXOzt1RkFFd0MsSUFBSSxDQUFDLFFBQVE7cUZBQ2YsSUFBSSxDQUFDLE1BQU07bUNBQzdELFlBQW1CLElBQUksU0FBUzs7Ozs7aURBS2xCLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDOzZEQUNyQixHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQzs7O0tBRzVGLENBQUM7UUFDSixDQUFDOzs7Ozs7WUF2S1UsdURBQWU7Ozs7O1NBQWYsZUFBZSJ9

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

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

package/dist_ts_web/elements/idp-badge.js

@@ -0,0 +1,135 @@
+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 IdpBadge = (() => {
+    let _classDecorators = [customElement('idp-badge')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_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 })];
+            __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(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 });
+        }
+        static demo = () => html `
+    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <idp-badge>Default</idp-badge>
+      <idp-badge variant="accent">Admin</idp-badge>
+      <idp-badge variant="ok">Trusted</idp-badge>
+      <idp-badge variant="warn">New network</idp-badge>
+      <idp-badge variant="error">Denied</idp-badge>
+    </div>
+  `;
+        static demoGroups = ['idp.global v3 primitives'];
+        #variant_accessor_storage = __runInitializers(this, _variant_initializers, 'default');
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        border: 1px solid transparent;
+        border-radius: 999px;
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        line-height: 16px;
+      }
+      .default {
+        background: var(--idp-muted);
+        color: var(--idp-muted-fg);
+      }
+      .accent {
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+      }
+      .ok {
+        background: var(--idp-ok-bg);
+        color: var(--idp-ok);
+        border-color: var(--idp-ok-border);
+      }
+      .warn {
+        background: var(--idp-warn-bg);
+        color: var(--idp-warn);
+        border-color: var(--idp-warn-border);
+      }
+      .error {
+        background: var(--idp-error-bg);
+        color: var(--idp-error);
+        border-color: var(--idp-error-border);
+      }
+      .accent {
+        border-color: var(--idp-info-border);
+      }
+      .outline {
+        background: transparent;
+        color: var(--idp-fg);
+        border-color: var(--idp-border);
+      }
+    `,
+        ];
+        render() {
+            return html `<span class="badge ${this.variant}"><slot></slot></span>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _variant_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpBadge = _classThis;
+})();
+export { IdpBadge };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1iYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBV2xDLFFBQVE7NEJBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozt3QkFBbkIsU0FBUSxXQUFXOzs7O21DQVl0QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFDM0IsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBK0I7WUFieEQsNktBdUVDOzs7O1FBdEVRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7OztHQVE5QixDQUFDO1FBQ0ssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHeEQsMkVBQTRDLFNBQVMsRUFBQztRQUF0RCxJQUFnQixPQUFPLDZDQUErQjtRQUF0RCxJQUFnQixPQUFPLG1EQUErQjtRQUUvQyxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBZ0RGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQSxzQkFBc0IsSUFBSSxDQUFDLE9BQU8sd0JBQXdCLENBQUM7UUFDeEUsQ0FBQzs7Ozs7O1lBdEVVLHVEQUFROzs7OztTQUFSLFFBQVEifQ==

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

@@ -0,0 +1,21 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-icon.js';
+export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
+export type TIdpButtonSize = 'sm' | 'md' | 'lg';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-button': IdpButton;
+    }
+}
+export declare class IdpButton extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor variant: TIdpButtonVariant;
+    accessor size: TIdpButtonSize;
+    accessor icon: string;
+    accessor type: 'button' | 'submit' | 'reset';
+    accessor disabled: boolean;
+    accessor loading: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}