@idp.global/catalog 1.1.1

package/dist_ts_web/elements/idp-mobile-frame.d.ts

@@ -0,0 +1,14 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-mobile-frame': IdpMobileFrame;
+    }
+}
+export declare class IdpMobileFrame extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor time: string;
+    accessor dark: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,195 @@
+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 IdpMobileFrame = (() => {
+    let _classDecorators = [customElement('idp-mobile-frame')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _time_decorators;
+    let _time_initializers = [];
+    let _time_extraInitializers = [];
+    let _dark_decorators;
+    let _dark_initializers = [];
+    let _dark_extraInitializers = [];
+    var IdpMobileFrame = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _time_decorators = [property({ type: String })];
+            _dark_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _time_decorators, { kind: "accessor", name: "time", static: false, private: false, access: { has: obj => "time" in obj, get: obj => obj.time, set: (obj, value) => { obj.time = value; } }, metadata: _metadata }, _time_initializers, _time_extraInitializers);
+            __esDecorate(this, null, _dark_decorators, { kind: "accessor", name: "dark", static: false, private: false, access: { has: obj => "dark" in obj, get: obj => obj.dark, set: (obj, value) => { obj.dark = value; } }, metadata: _metadata }, _dark_initializers, _dark_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpMobileFrame = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <idp-mobile-frame>
+      <div style="height: 100%; background: #fff; padding: 72px 20px 20px; box-sizing: border-box;">Screen content</div>
+    </idp-mobile-frame>
+  `;
+        static demoGroups = ['idp.global v3 device frames'];
+        #time_accessor_storage = __runInitializers(this, _time_initializers, '9:41');
+        get time() { return this.#time_accessor_storage; }
+        set time(value) { this.#time_accessor_storage = value; }
+        #dark_accessor_storage = (__runInitializers(this, _time_extraInitializers), __runInitializers(this, _dark_initializers, false));
+        get dark() { return this.#dark_accessor_storage; }
+        set dark(value) { this.#dark_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: inline-block;
+      }
+      .device {
+        position: relative;
+        width: 402px;
+        height: 874px;
+        max-width: 100%;
+        border-radius: 48px;
+        overflow: hidden;
+        background: var(--idp-bg);
+        box-shadow: 0 40px 80px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.12);
+      }
+      .island {
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        z-index: 50;
+        width: 126px;
+        height: 37px;
+        transform: translateX(-50%);
+        border-radius: 24px;
+        background: #000;
+      }
+      .status {
+        position: absolute;
+        inset: 0 0 auto;
+        z-index: 40;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 18px 28px 0;
+        box-sizing: border-box;
+        color: var(--idp-fg);
+        font-size: 15px;
+        font-weight: 650;
+        pointer-events: none;
+      }
+      .status-icons {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+      }
+      .bar {
+        width: 4px;
+        border-radius: 999px;
+        background: currentColor;
+      }
+      .screen {
+        height: 100%;
+        overflow: hidden;
+      }
+      .home {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 60;
+        height: 34px;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 8px;
+        pointer-events: none;
+      }
+      .home::before {
+        content: '';
+        width: 139px;
+        height: 5px;
+        border-radius: 100px;
+        background: color-mix(in srgb, var(--idp-fg), transparent 72%);
+      }
+      @media (max-width: 520px) {
+        :host {
+          display: block;
+          width: 100%;
+        }
+        .device {
+          width: 100%;
+          height: auto;
+          aspect-ratio: 402 / 874;
+          border-radius: 0;
+        }
+        .island {
+          display: none;
+        }
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="device">
+        <div class="island"></div>
+        <div class="status">
+          <span>${this.time}</span>
+          <span class="status-icons" aria-hidden="true">
+            <span class="bar" style="height: 5px"></span>
+            <span class="bar" style="height: 8px"></span>
+            <span class="bar" style="height: 11px"></span>
+            <span style="width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px;"></span>
+          </span>
+        </div>
+        <div class="screen"><slot></slot></div>
+        <div class="home"></div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _dark_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpMobileFrame = _classThis;
+})();
+export { IdpMobileFrame };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLW1vYmlsZS1mcmFtZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtbW9iaWxlLWZyYW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7SUFTbEMsY0FBYzs0QkFEMUIsYUFBYSxDQUFDLGtCQUFrQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7OEJBQW5CLFNBQVEsV0FBVzs7OztnQ0FRNUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQUYzQyxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFVO1lBRzlCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQVM7WUFaL0IsNktBOEhDOzs7O1FBN0hRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7O0dBSTlCLENBQUM7UUFDSyxNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsNkJBQTZCLENBQUMsQ0FBQztRQUczRCxxRUFBdUIsTUFBTSxFQUFDO1FBQTlCLElBQWdCLElBQUksMENBQVU7UUFBOUIsSUFBZ0IsSUFBSSxnREFBVTtRQUc5Qix3SEFBdUIsS0FBSyxHQUFDO1FBQTdCLElBQWdCLElBQUksMENBQVM7UUFBN0IsSUFBZ0IsSUFBSSxnREFBUztRQUV0QixNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0F5RkY7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7O2tCQUlHLElBQUksQ0FBQyxJQUFJOzs7Ozs7Ozs7OztLQVd0QixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBN0hVLHVEQUFjOzs7OztTQUFkLGNBQWMifQ==

package/dist_ts_web/elements/idp-mobile-showcase.d.ts

@@ -0,0 +1,16 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-inbox-preview.js';
+import './idp-mobile-frame.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-mobile-showcase': IdpMobileShowcase;
+    }
+}
+export declare class IdpMobileShowcase extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,339 @@
+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, customElement, css } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-inbox-preview.js';
+import './idp-mobile-frame.js';
+let IdpMobileShowcase = (() => {
+    let _classDecorators = [customElement('idp-mobile-showcase')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    var IdpMobileShowcase = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpMobileShowcase = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `<idp-mobile-showcase></idp-mobile-showcase>`;
+        static demoGroups = ['idp.global v3 full pages'];
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      .showcase {
+        min-height: 100vh;
+        padding: 56px;
+        background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--idp-fg), transparent 92%) 1px, transparent 0) 0 0 / 24px 24px, var(--idp-bg);
+        color: var(--idp-fg);
+      }
+      .head {
+        max-width: 1180px;
+        margin: 0 auto 44px;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 16px;
+        padding: 4px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 999px;
+        background: var(--idp-card);
+        color: var(--idp-fg-3);
+        font-size: 11px;
+        font-weight: 500;
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--idp-ok);
+      }
+      h1 {
+        max-width: 900px;
+        margin: 0 0 14px;
+        font-family: var(--idp-display);
+        font-size: clamp(36px, 5vw, 56px);
+        font-weight: 750;
+        letter-spacing: -0.035em;
+        line-height: 1.05;
+      }
+      p {
+        max-width: 680px;
+        margin: 0;
+        color: var(--idp-fg-3);
+        font-size: 16px;
+        line-height: 1.55;
+      }
+      .tokens {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24px;
+        margin-top: 24px;
+        padding: 16px;
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        background: var(--idp-card);
+      }
+      .token-label {
+        margin-bottom: 4px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .token-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 550;
+      }
+      .swatch {
+        width: 18px;
+        height: 18px;
+        border-radius: 5px;
+        background: var(--swatch);
+        border: 1px solid var(--idp-border);
+      }
+      .section {
+        max-width: 1180px;
+        margin: 0 auto 56px;
+      }
+      .section-title {
+        margin-bottom: 18px;
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .phones {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(300px, 402px));
+        gap: 28px;
+        align-items: start;
+      }
+      .multi {
+        display: grid;
+        grid-template-columns: 280px minmax(0, 1fr) 360px;
+        gap: 28px;
+        align-items: start;
+      }
+      .watch, .ipad, .mac {
+        border: 1px solid var(--idp-border);
+        background: var(--idp-card);
+        box-shadow: 0 20px 50px color-mix(in srgb, var(--idp-fg), transparent 92%);
+      }
+      .watch {
+        width: 236px;
+        height: 286px;
+        display: grid;
+        place-items: center;
+        border-radius: 60px;
+        background: #09090b;
+        color: #fafafa;
+      }
+      .watch-screen {
+        width: 178px;
+        display: grid;
+        gap: 12px;
+        text-align: center;
+      }
+      .watch-app {
+        color: #a1a1aa;
+        font-family: var(--idp-mono);
+        font-size: 10px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .watch-title {
+        font-size: 18px;
+        font-weight: 700;
+      }
+      .watch-actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+      .watch-actions button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        height: 34px;
+        border: 1px solid #27272a;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fafafa;
+      }
+      .watch-actions .approve {
+        background: #3b82f6;
+        border-color: #3b82f6;
+      }
+      .ipad {
+        min-height: 520px;
+        overflow: hidden;
+        border-radius: 26px;
+      }
+      .ipad-shell {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        min-height: 520px;
+      }
+      .ipad-sidebar {
+        padding: 18px;
+        border-right: 1px solid var(--idp-border);
+        background: var(--idp-card-2);
+      }
+      .ipad-main {
+        padding: 22px;
+      }
+      .ipad-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        margin-top: 16px;
+        padding: 16px;
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        background: var(--idp-card);
+      }
+      .mac {
+        overflow: hidden;
+        border-radius: 14px;
+      }
+      .mac-bar {
+        display: flex;
+        gap: 6px;
+        padding: 11px 14px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .tdot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      .mac-body {
+        display: grid;
+        gap: 12px;
+        padding: 18px;
+      }
+      .mac-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        background: var(--idp-card);
+      }
+      .inline-muted {
+        color: var(--idp-muted-fg);
+      }
+      .watch-muted {
+        color: #a1a1aa;
+      }
+      .row-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      @media (max-width: 1120px) {
+        .multi {
+          grid-template-columns: 1fr;
+        }
+      }
+      @media (max-width: 900px) {
+        .showcase {
+          padding: 28px;
+        }
+        .phones {
+          grid-template-columns: 1fr;
+        }
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="showcase">
+        <header class="head">
+          <div class="badge"><span class="dot"></span>Mobile redesign - v3 - shadcn tokens</div>
+          <h1>A personal identity provider, built across every device you carry.</h1>
+          <p>Same four-platform architecture: flat surfaces, 1px borders, neutral palette, and blue accent used only where action is expected.</p>
+          <div class="tokens">
+            ${[
+                ['Primary', '#18181b', 'zinc-900'],
+                ['Accent', '#0050b9', 'idp blue'],
+                ['Muted', '#f4f4f2', 'paper muted'],
+                ['Border', '#e4e4e7', 'zinc-200'],
+            ].map((tokenArg) => html `<div><div class="token-label">${tokenArg[0]}</div><div class="token-value"><span class="swatch" style="--swatch:${tokenArg[1]}"></span>${tokenArg[2]}</div></div>`)}
+          </div>
+        </header>
+        <section class="section">
+          <div class="section-title">iPhone</div>
+          <div class="phones"><idp-inbox-preview></idp-inbox-preview><idp-inbox-preview dark></idp-inbox-preview></div>
+        </section>
+        <section class="section">
+          <div class="section-title">Watch, iPad, Mac</div>
+          <div class="multi">
+            <div class="watch"><div class="watch-screen"><div class="watch-app">idp.global</div><idp-icon name="shield" size="28" style="margin:0 auto;color:var(--idp-accent-hover)"></idp-icon><div class="watch-title">GitHub wants access</div><div class="watch-muted" style="font-size:12px;">repo:read - Berlin</div><div class="watch-actions"><button><idp-icon name="x" size="13"></idp-icon>Deny</button><button class="approve"><idp-icon name="check" size="13"></idp-icon>Approve</button></div></div></div>
+            <div class="ipad"><div class="ipad-shell"><aside class="ipad-sidebar"><strong>Inbox</strong><p>3 pending approvals</p><div class="ipad-card"><idp-icon name="globe" size="16"></idp-icon><div><strong>GitHub OAuth</strong><br/><span class="inline-muted">repo:read - now</span></div></div><div class="ipad-card"><idp-icon name="cloud" size="16"></idp-icon><div><strong>Hetzner Cloud</strong><br/><span class="inline-muted">new network - 8m</span></div></div></aside><main class="ipad-main"><h2>Approval detail</h2><p>Full context before a sensitive action is approved.</p><div class="ipad-card"><idp-icon name="laptop" size="16"></idp-icon><div><strong>Device</strong><br/>MacBook Pro - Safari - Berlin, DE</div></div><div class="ipad-card"><idp-icon name="key" size="16"></idp-icon><div><strong>Requested scopes</strong><br/>openid, profile, email, repo:read</div></div></main></div></div>
+            <div class="mac"><div class="mac-bar"><span class="tdot" style="background:#ff5f57"></span><span class="tdot" style="background:#ffbd2e"></span><span class="tdot" style="background:#28c840"></span></div><div class="mac-body"><strong>Menu bar approvals</strong><div class="mac-row"><span class="row-label"><idp-icon name="globe" size="15"></idp-icon>GitHub OAuth</span><idp-button variant="accent" size="sm" icon="check">Approve</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="nfc" size="15"></idp-icon>NFC tap - door 4F</span><idp-button variant="ghost" size="sm" icon="chevron-right">Review</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="key" size="15"></idp-icon>Key rotation</span><idp-button variant="ghost" size="sm" icon="shield">Confirm</idp-button></div></div></div>
+          </div>
+        </section>
+      </div>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpMobileShowcase = _classThis;
+})();
+export { IdpMobileShowcase };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLW1vYmlsZS1zaG93Y2FzZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtbW9iaWxlLXNob3djYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ3pHLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sd0JBQXdCLENBQUM7QUFDaEMsT0FBTyx1QkFBdUIsQ0FBQztJQVNsQixpQkFBaUI7NEJBRDdCLGFBQWEsQ0FBQyxxQkFBcUIsQ0FBQzs7OztzQkFDRSxXQUFXO2lDQUFuQixTQUFRLFdBQVc7Ozs7WUFBbEQsNktBd1JDOzs7O1FBdlJRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLDZDQUE2QyxDQUFDO1FBQ3RFLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBRWpELE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FnUEY7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7Ozs7O2NBT0Q7Z0JBQ0EsQ0FBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQztnQkFDbEMsQ0FBQyxRQUFRLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQztnQkFDakMsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsQ0FBQztnQkFDbkMsQ0FBQyxRQUFRLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQzthQUNsQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFBLGlDQUFpQyxRQUFRLENBQUMsQ0FBQyxDQUFDLHVFQUF1RSxRQUFRLENBQUMsQ0FBQyxDQUFDLFlBQVksUUFBUSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7S0FnQm5NLENBQUM7UUFDSixDQUFDOztZQXZSVSx1REFBaUI7Ozs7O1NBQWpCLGlCQUFpQiJ9

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

@@ -0,0 +1,28 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export interface IIdpSelectOption {
+    option: string;
+    key: string;
+    payload?: string;
+}
+export interface IIdpSelectEventDetail {
+    key: string;
+    payload?: string;
+    selectedOption: IIdpSelectOption | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-select': IdpSelect;
+    }
+}
+export declare class IdpSelect extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor label: string;
+    accessor placeholder: string;
+    accessor options: IIdpSelectOption[];
+    accessor selectedOption: IIdpSelectOption | null;
+    accessor disabled: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private handleChange;
+    render(): TemplateResult;
+}