@idp.global/catalog 1.1.1

package/dist_ts_web/elements/idp-inbox-preview.js

@@ -0,0 +1,245 @@
+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-approval-card.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-mobile-frame.js';
+let IdpInboxPreview = (() => {
+    let _classDecorators = [customElement('idp-inbox-preview')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _dark_decorators;
+    let _dark_initializers = [];
+    let _dark_extraInitializers = [];
+    var IdpInboxPreview = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _dark_decorators = [property({ type: Boolean, reflect: true })];
+            __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);
+            IdpInboxPreview = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `<idp-inbox-preview></idp-inbox-preview>`;
+        static demoGroups = ['idp.global v3 approval surfaces'];
+        #dark_accessor_storage = __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: block;
+      }
+      idp-mobile-frame {
+        --idp-bg: #ffffff;
+      }
+      :host([dark]) idp-mobile-frame {
+        --idp-bg: #09090b;
+        --idp-fg: #fafafa;
+      }
+      .screen {
+        height: 100%;
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+        box-sizing: border-box;
+        padding-top: 58px;
+        display: flex;
+        flex-direction: column;
+      }
+      .header {
+        padding: 0 20px 14px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .brandline {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 650;
+      }
+      .brandmark {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        background: var(--idp-primary);
+        color: var(--idp-primary-fg);
+      }
+      h2 {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 760;
+        letter-spacing: -0.04em;
+      }
+      .summary {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 6px;
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+      }
+      .list {
+        display: grid;
+        gap: 10px;
+        padding: 14px 16px 120px;
+        overflow: auto;
+      }
+      .earlier {
+        margin: 10px 0 2px;
+        color: var(--idp-muted-fg);
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        font-size: 13px;
+      }
+      .row-icon {
+        width: 26px;
+        height: 26px;
+        border-radius: 7px;
+        background: var(--idp-muted);
+        color: var(--idp-ok);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .row-sub {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        margin-top: 1px;
+      }
+      .tabbar {
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        bottom: 24px;
+        z-index: 80;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 4px;
+        padding: 8px;
+        border: 1px solid color-mix(in srgb, var(--idp-border), transparent 20%);
+        border-radius: 22px;
+        background: color-mix(in srgb, var(--idp-card), transparent 8%);
+        box-shadow: 0 16px 36px rgb(0 0 0 / 0.16);
+        backdrop-filter: blur(24px) saturate(170%);
+      }
+      .tab {
+        display: grid;
+        place-items: center;
+        gap: 3px;
+        min-height: 44px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 600;
+      }
+      .tab.active {
+        color: var(--idp-accent);
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <idp-mobile-frame ?dark=${this.dark}>
+        <div class="screen">
+          <header class="header">
+            <div class="brandline">
+              <div class="brand"><span class="brandmark"><idp-icon name="shield" size="14"></idp-icon></span>idp.global</div>
+              <idp-button variant="ghost" size="sm" icon="search" aria-label="Search"></idp-button>
+            </div>
+            <h2>Inbox</h2>
+            <div class="summary"><idp-badge variant="ok">3 pending</idp-badge><span>oldest 8 min ago</span></div>
+          </header>
+          <div class="list">
+            <idp-approval-card primary app-name="GitHub" app-initials="GH" app-color="#24292F" request-text="Sign in to github.com" location="Berlin · DE" device="Safari · MBP" time-label="now"></idp-approval-card>
+            <idp-approval-card app-name="Lufthansa.com" app-initials="LH" app-color="#05164D" request-text="Verify identity" location="Berlin · DE" device="iPhone 15 Pro" time-label="2m"></idp-approval-card>
+            <idp-approval-card app-name="Hetzner Cloud" app-initials="HZ" app-color="#D50C2D" request-text="Sign in to console" location="Falkenstein · DE" device="Firefox · Windows" risk="warning" time-label="8m"></idp-approval-card>
+            <div class="earlier">Earlier today</div>
+            ${['Notion · Approved 11:42', 'Apple ID · Approved 09:18', 'reddit.com · Denied 08:57'].map((itemArg) => html `
+              <div class="row">
+                <div class="row-icon"><idp-icon name="check" size="15"></idp-icon></div>
+                <div>
+                  <div>${itemArg.split(' · ')[0]}</div>
+                  <div class="row-sub">${itemArg.split(' · ')[1]}</div>
+                </div>
+              </div>
+            `)}
+          </div>
+          <nav class="tabbar">
+            <div class="tab active"><idp-icon name="bell" size="18"></idp-icon>Inbox</div>
+            <div class="tab"><idp-icon name="clock" size="18"></idp-icon>History</div>
+            <div class="tab"><idp-icon name="device" size="18"></idp-icon>Devices</div>
+            <div class="tab"><idp-icon name="user" size="18"></idp-icon>Identity</div>
+          </nav>
+        </div>
+      </idp-mobile-frame>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _dark_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpInboxPreview = _classThis;
+})();
+export { IdpInboxPreview };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWluYm94LXByZXZpZXcuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaWRwLWluYm94LXByZXZpZXcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLHdCQUF3QixDQUFDO0FBQ2hDLE9BQU8sZ0JBQWdCLENBQUM7QUFDeEIsT0FBTyxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLGVBQWUsQ0FBQztBQUN2QixPQUFPLHVCQUF1QixDQUFDO0lBU2xCLGVBQWU7NEJBRDNCLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7OytCQUFuQixTQUFRLFdBQVc7Ozs7Z0NBSTdDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO1lBQzNDLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQVM7WUFML0IsNktBZ0xDOzs7O1FBL0tRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLHlDQUF5QyxDQUFDO1FBQ2xFLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxpQ0FBaUMsQ0FBQyxDQUFDO1FBRy9ELHFFQUF1QixLQUFLLEVBQUM7UUFBN0IsSUFBZ0IsSUFBSSwwQ0FBUztRQUE3QixJQUFnQixJQUFJLGdEQUFTO1FBRXRCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBK0hGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTtnQ0FDaUIsSUFBSSxDQUFDLElBQUk7Ozs7Ozs7Ozs7Ozs7OztjQWUzQixDQUFDLHlCQUF5QixFQUFFLDJCQUEyQixFQUFFLDJCQUEyQixDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7eUJBSWhHLE9BQU8sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO3lDQUNQLE9BQU8sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDOzs7YUFHbkQsQ0FBQzs7Ozs7Ozs7OztLQVVULENBQUM7UUFDSixDQUFDOzs7Ozs7WUEvS1UsdURBQWU7Ozs7O1NBQWYsZUFBZSJ9

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

@@ -0,0 +1,26 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-input': IdpInput;
+    }
+}
+export declare class IdpInput extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor label: string;
+    accessor name: string;
+    accessor key: string;
+    accessor hint: string;
+    accessor value: string;
+    accessor placeholder: string;
+    accessor type: string;
+    accessor autocomplete: string;
+    accessor error: string;
+    accessor required: boolean;
+    accessor disabled: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    focus(): void;
+    validate(): boolean;
+    private handleInput;
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-input.js

@@ -0,0 +1,249 @@
+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 IdpInput = (() => {
+    let _classDecorators = [customElement('idp-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _key_decorators;
+    let _key_initializers = [];
+    let _key_extraInitializers = [];
+    let _hint_decorators;
+    let _hint_initializers = [];
+    let _hint_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_extraInitializers = [];
+    let _error_decorators;
+    let _error_initializers = [];
+    let _error_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var IdpInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _name_decorators = [property({ type: String })];
+            _key_decorators = [property({ type: String })];
+            _hint_decorators = [property({ type: String })];
+            _value_decorators = [property({ type: String })];
+            _placeholder_decorators = [property({ type: String })];
+            _type_decorators = [property({ type: String })];
+            _autocomplete_decorators = [property({ type: String })];
+            _error_decorators = [property({ type: String })];
+            _required_decorators = [property({ type: Boolean, reflect: true })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
+            __esDecorate(this, null, _hint_decorators, { kind: "accessor", name: "hint", static: false, private: false, access: { has: obj => "hint" in obj, get: obj => obj.hint, set: (obj, value) => { obj.hint = value; } }, metadata: _metadata }, _hint_initializers, _hint_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_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, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
+            __esDecorate(this, null, _error_decorators, { kind: "accessor", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_extraInitializers);
+            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_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);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `<idp-input label="Email" placeholder="user@example.com"></idp-input>`;
+        static demoGroups = ['idp.global v3 primitives'];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, '');
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _name_initializers, ''));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #key_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _key_initializers, ''));
+        get key() { return this.#key_accessor_storage; }
+        set key(value) { this.#key_accessor_storage = value; }
+        #hint_accessor_storage = (__runInitializers(this, _key_extraInitializers), __runInitializers(this, _hint_initializers, ''));
+        get hint() { return this.#hint_accessor_storage; }
+        set hint(value) { this.#hint_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _hint_extraInitializers), __runInitializers(this, _value_initializers, ''));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #autocomplete_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _autocomplete_initializers, ''));
+        get autocomplete() { return this.#autocomplete_accessor_storage; }
+        set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+        #error_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _error_initializers, ''));
+        get error() { return this.#error_accessor_storage; }
+        set error(value) { this.#error_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _error_extraInitializers), __runInitializers(this, _required_initializers, false));
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      label {
+        display: grid;
+        gap: 6px;
+      }
+      .label {
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 500;
+      }
+      input {
+        width: 100%;
+        height: 36px;
+        box-sizing: border-box;
+        padding: 0 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        outline: none;
+        background: var(--idp-card);
+        color: var(--idp-fg);
+        font-family: var(--idp-font);
+        font-size: 13px;
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      input:focus {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 86%);
+      }
+      input:disabled {
+        opacity: 0.5;
+      }
+      input[aria-invalid='true'] {
+        border-color: var(--idp-destructive);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-destructive), transparent 86%);
+      }
+      .hint,
+      .error {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      .error {
+        color: var(--idp-destructive);
+      }
+    `,
+        ];
+        focus() {
+            this.shadowRoot?.querySelector('input')?.focus();
+        }
+        validate() {
+            const input = this.shadowRoot?.querySelector('input');
+            if (this.required && !this.value.trim()) {
+                this.error = `${this.label || this.name || 'This field'} is required.`;
+                return false;
+            }
+            if (input && !input.checkValidity()) {
+                this.error = input.validationMessage;
+                return false;
+            }
+            this.error = '';
+            return true;
+        }
+        handleInput(eventArg) {
+            this.value = eventArg.target.value;
+            if (this.error) {
+                this.validate();
+            }
+            this.dispatchEvent(new CustomEvent('idp-input-change', {
+                detail: { name: this.name || this.key, key: this.key || this.name, value: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        render() {
+            return html `
+      <label>
+        ${this.label ? html `<span class="label">${this.label}</span>` : html ``}
+        <input
+          .value=${this.value}
+          name=${this.name || this.key}
+          type=${this.type}
+          placeholder=${this.placeholder}
+          autocomplete=${this.autocomplete}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          @input=${this.handleInput}
+        />
+        ${this.error ? html `<span class="error">${this.error}</span>` : this.hint ? html `<span class="hint">${this.hint}</span>` : html ``}
+      </label>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpInput = _classThis;
+})();
+export { IdpInput };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLWlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1pbnB1dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0lBU2xDLFFBQVE7NEJBRHBCLGFBQWEsQ0FBQyxXQUFXLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt3QkFBbkIsU0FBUSxXQUFXOzs7O2lDQUl0QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzsrQkFHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7aUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzt1Q0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7d0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztvQ0FHMUMsUUFBUSxDQUFDLEVBQUUs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

package/dist_ts_web/elements/idp-landing-hero.d.ts

@@ -0,0 +1,15 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-button.js';
+import './idp-dashboard-window.js';
+import './idp-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-landing-hero': IdpLandingHero;
+    }
+}
+export declare class IdpLandingHero extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}