@idp.global/catalog 2.0.0 → 2.1.0

package/dist_ts_web/elements/idp-otp-input.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';
+let IdpOtpInput = (() => {
+    let _classDecorators = [customElement('idp-otp-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _length_decorators;
+    let _length_initializers = [];
+    let _length_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _key_decorators;
+    let _key_initializers = [];
+    let _key_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _error_decorators;
+    let _error_initializers = [];
+    let _error_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    var IdpOtpInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _length_decorators = [property({ type: Number })];
+            _value_decorators = [property({ type: String })];
+            _name_decorators = [property({ type: String })];
+            _key_decorators = [property({ type: String })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _error_decorators = [property({ type: String })];
+            _required_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _length_decorators, { kind: "accessor", name: "length", static: false, private: false, access: { has: obj => "length" in obj, get: obj => obj.length, set: (obj, value) => { obj.length = value; } }, metadata: _metadata }, _length_initializers, _length_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, _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, _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(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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpOtpInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; flex-direction: column; gap: 18px; max-width: 340px;">
+      <idp-otp-input></idp-otp-input>
+      <idp-otp-input length="4"></idp-otp-input>
+      <idp-otp-input error="That code didn't match. Try again."></idp-otp-input>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 auth'];
+        #length_accessor_storage = __runInitializers(this, _length_initializers, 6);
+        get length() { return this.#length_accessor_storage; }
+        set length(value) { this.#length_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _length_extraInitializers), __runInitializers(this, _value_initializers, ''));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _value_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; }
+        #disabled_accessor_storage = (__runInitializers(this, _key_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #error_accessor_storage = (__runInitializers(this, _disabled_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, true));
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .boxes {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+      }
+      input {
+        width: 44px;
+        height: 52px;
+        border-radius: 12px;
+        background: var(--idp-card);
+        border: 1.5px solid var(--idp-border);
+        color: var(--idp-fg);
+        font-family: var(--idp-font);
+        font-size: 22px;
+        font-weight: 600;
+        text-align: center;
+        outline: none;
+        padding: 0;
+        caret-color: var(--idp-accent);
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      input:focus {
+        border-color: var(--idp-accent);
+        box-shadow: 0 0 0 3px var(--sh-accent-ring);
+      }
+      input:disabled {
+        opacity: 0.5;
+      }
+      .has-error input {
+        border-color: var(--idp-error);
+      }
+      .error {
+        margin: 8px 0 0;
+        font-size: 12px;
+        color: var(--idp-error);
+        text-align: center;
+      }
+    `,
+        ];
+        render() {
+            const digits = Array.from({ length: this.length }, (unused, indexArg) => this.value[indexArg] || '');
+            return html `
+      <div class="boxes ${this.error ? 'has-error' : ''}">
+        ${digits.map((digitArg, indexArg) => html `
+            <input
+              type="text"
+              inputmode="numeric"
+              maxlength="1"
+              autocomplete=${indexArg === 0 ? 'one-time-code' : 'off'}
+              .value=${digitArg}
+              ?disabled=${this.disabled}
+              aria-label="Digit ${indexArg + 1} of ${this.length}"
+              @input=${(eventArg) => this.handleInput(eventArg, indexArg)}
+              @keydown=${(eventArg) => this.handleKeydown(eventArg, indexArg)}
+              @paste=${(eventArg) => this.handlePaste(eventArg)}
+            />
+          `)}
+      </div>
+      ${this.error ? html `<p class="error">${this.error}</p>` : html ``}
+    `;
+        }
+        get inputs() {
+            return Array.from(this.shadowRoot?.querySelectorAll('input') || []);
+        }
+        handleInput(eventArg, indexArg) {
+            const input = eventArg.target;
+            const digits = input.value.replace(/\D/g, '');
+            // browser OTP autofill may drop the whole code into the first box
+            if (digits.length > 1) {
+                this.fillFrom(digits, indexArg);
+                return;
+            }
+            input.value = digits;
+            this.syncValueFromInputs();
+            if (digits && indexArg < this.length - 1) {
+                this.inputs[indexArg + 1]?.focus();
+            }
+        }
+        handlePaste(eventArg) {
+            eventArg.preventDefault();
+            const digits = (eventArg.clipboardData?.getData('text') || '').replace(/\D/g, '');
+            if (digits) {
+                this.fillFrom(digits, 0);
+            }
+        }
+        fillFrom(digitsArg, startIndexArg) {
+            const inputs = this.inputs;
+            for (let offset = 0; offset < digitsArg.length && startIndexArg + offset < this.length; offset++) {
+                inputs[startIndexArg + offset].value = digitsArg[offset];
+            }
+            const nextIndex = Math.min(startIndexArg + digitsArg.length, this.length - 1);
+            inputs[nextIndex]?.focus();
+            this.syncValueFromInputs();
+        }
+        handleKeydown(eventArg, indexArg) {
+            const inputs = this.inputs;
+            if (eventArg.key === 'Backspace') {
+                eventArg.preventDefault();
+                if (inputs[indexArg].value) {
+                    inputs[indexArg].value = '';
+                }
+                else if (indexArg > 0) {
+                    inputs[indexArg - 1].value = '';
+                    inputs[indexArg - 1].focus();
+                }
+                this.syncValueFromInputs();
+            }
+            else if (eventArg.key === 'ArrowLeft' && indexArg > 0) {
+                inputs[indexArg - 1].focus();
+            }
+            else if (eventArg.key === 'ArrowRight' && indexArg < this.length - 1) {
+                inputs[indexArg + 1].focus();
+            }
+        }
+        syncValueFromInputs() {
+            this.value = this.inputs.map((inputArg) => inputArg.value).join('');
+            this.error = '';
+            const complete = this.value.length === this.length;
+            const detail = { value: this.value, complete };
+            this.dispatchEvent(new CustomEvent('idp-otp-change', { detail, bubbles: true, composed: true }));
+            if (complete) {
+                this.dispatchEvent(new CustomEvent('idp-otp-complete', { detail, bubbles: true, composed: true }));
+            }
+        }
+        focus() {
+            const firstEmpty = Math.min(this.value.length, this.length - 1);
+            this.inputs[firstEmpty]?.focus();
+        }
+        clear() {
+            this.value = '';
+            this.error = '';
+            this.updateComplete.then(() => this.inputs[0]?.focus());
+        }
+        validate() {
+            if (this.required && this.value.length !== this.length) {
+                this.error = `Enter the ${this.length}-digit code.`;
+                return false;
+            }
+            this.error = '';
+            return true;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _required_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpOtpInput = _classThis;
+})();
+export { IdpOtpInput };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLW90cC1pbnB1dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtb3RwLWlucHV0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7SUFjbEMsV0FBVzs0QkFEdkIsYUFBYSxDQUFDLGVBQWUsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzJCQUFuQixTQUFRLFdBQVc7Ozs7a0NBVXpDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7K0JBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7aUNBRzFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO1lBakI1Qix1S0FBZ0IsTUFBTSw2QkFBTixNQUFNLHVGQUFLO1lBRzNCLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQU07WUFHM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBTTtZQUcxQiw4SkFBZ0IsR0FBRyw2QkFBSCxHQUFHLGlGQUFNO1lBR3pCLDZLQUFnQixRQUFRLDZCQUFSLFFB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

package/dist_ts_web/elements/idp-progress-bar.d.ts

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

package/dist_ts_web/elements/idp-progress-bar.js

@@ -0,0 +1,127 @@
+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 IdpProgressBar = (() => {
+    let _classDecorators = [customElement('idp-progress-bar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _indeterminate_decorators;
+    let _indeterminate_initializers = [];
+    let _indeterminate_extraInitializers = [];
+    var IdpProgressBar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: Number })];
+            _indeterminate_decorators = [property({ type: Boolean, reflect: true })];
+            __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, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpProgressBar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; flex-direction: column; gap: 14px; max-width: 320px;">
+      <idp-progress-bar value="35"></idp-progress-bar>
+      <idp-progress-bar value="82"></idp-progress-bar>
+      <idp-progress-bar indeterminate></idp-progress-bar>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 primitives'];
+        #value_accessor_storage = __runInitializers(this, _value_initializers, 0);
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #indeterminate_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _indeterminate_initializers, false));
+        get indeterminate() { return this.#indeterminate_accessor_storage; }
+        set indeterminate(value) { this.#indeterminate_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+      .track {
+        width: 100%;
+        height: 6px;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-muted);
+        overflow: hidden;
+      }
+      .fill {
+        height: 100%;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-accent);
+        transition: width 300ms ease;
+      }
+      :host([indeterminate]) .fill {
+        width: 40%;
+        animation: slide 1.2s ease-in-out infinite;
+      }
+      @keyframes slide {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(350%);
+        }
+      }
+    `,
+        ];
+        render() {
+            const clamped = Math.max(0, Math.min(100, this.value));
+            return html `
+      <div class="track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${this.indeterminate ? '' : String(clamped)}>
+        <div class="fill" style=${this.indeterminate ? '' : `width: ${clamped}%;`}></div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _indeterminate_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpProgressBar = _classThis;
+})();
+export { IdpProgressBar };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLXByb2dyZXNzLWJhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9pZHAtcHJvZ3Jlc3MtYmFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7SUFTbEMsY0FBYzs0QkFEMUIsYUFBYSxDQUFDLGtCQUFrQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7OEJBQW5CLFNBQVEsV0FBVzs7OztpQ0FVNUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3lDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQUYzQyxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFLO1lBRzFCLDRMQUFnQixhQUFhLDZCQUFiLGFBQWEscUdBQVM7WUFkeEMsNktBMERDOzs7O1FBekRRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7R0FNOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBR3hELHVFQUF3QixDQUFDLEVBQUM7UUFBMUIsSUFBZ0IsS0FBSywyQ0FBSztRQUExQixJQUFnQixLQUFLLGlEQUFLO1FBRzFCLDJJQUFnQyxLQUFLLEdBQUM7UUFBdEMsSUFBZ0IsYUFBYSxtREFBUztRQUF0QyxJQUFnQixhQUFhLHlEQUFTO1FBRS9CLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTZCRjtTQUNGLENBQUM7UUFFSyxNQUFNO1lBQ1gsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDdkQsT0FBTyxJQUFJLENBQUE7a0dBQ21GLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQztrQ0FDekcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxVQUFVLE9BQU8sSUFBSTs7S0FFNUUsQ0FBQztRQUNKLENBQUM7Ozs7OztZQXpEVSx1REFBYzs7Ozs7U0FBZCxjQUFjIn0=

package/dist_ts_web/elements/idp-signed-in-pill.d.ts

@@ -0,0 +1,15 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-avatar.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-signed-in-pill': IdpSignedInPill;
+    }
+}
+export declare class IdpSignedInPill extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor name: string;
+    accessor label: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/idp-signed-in-pill.js

@@ -0,0 +1,113 @@
+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-avatar.js';
+let IdpSignedInPill = (() => {
+    let _classDecorators = [customElement('idp-signed-in-pill')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    var IdpSignedInPill = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [property({ type: String })];
+            _label_decorators = [property({ type: String })];
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _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);
+            IdpSignedInPill = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <idp-signed-in-pill name="Alex Mercer"></idp-signed-in-pill>
+  `;
+        static demoGroups = ['idp.global v5 auth'];
+        #name_accessor_storage = __runInitializers(this, _name_initializers, '');
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _label_initializers, 'Signed in as'));
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+      }
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 9px;
+        padding: 7px 12px 7px 8px;
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        font-family: var(--idp-font);
+        font-size: 12.5px;
+        font-weight: 550;
+        color: var(--idp-fg-2);
+        white-space: nowrap;
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <span class="pill">
+        <idp-avatar name=${this.name} size="22"></idp-avatar>
+        <span>${this.label} ${this.name}</span>
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _label_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpSignedInPill = _classThis;
+})();
+export { IdpSignedInPill };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLXNpZ25lZC1pbi1waWxsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2lkcC1zaWduZWQtaW4tcGlsbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxHQUFHLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDbkgsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8saUJBQWlCLENBQUM7SUFTWixlQUFlOzRCQUQzQixhQUFhLENBQUMsb0JBQW9CLENBQUM7Ozs7c0JBQ0MsV0FBVzs7Ozs7OzsrQkFBbkIsU0FBUSxXQUFXOzs7O2dDQU03QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7aUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQUYzQixpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQWtCO1lBVnpDLDZLQTJDQzs7OztRQTFDUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7R0FFOUIsQ0FBQztRQUNLLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBR2xELHFFQUF1QixFQUFFLEVBQUM7UUFBMUIsSUFBZ0IsSUFBSSwwQ0FBTTtRQUExQixJQUFnQixJQUFJLGdEQUFNO1FBRzFCLDBIQUF3QixjQUFjLEdBQUM7UUFBdkMsSUFBZ0IsS0FBSywyQ0FBa0I7UUFBdkMsSUFBZ0IsS0FBSyxpREFBa0I7UUFFaEMsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQWtCRjtTQUNGLENBQUM7UUFFSyxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7OzJCQUVZLElBQUksQ0FBQyxJQUFJO2dCQUNwQixJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxJQUFJOztLQUVsQyxDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBMUNVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==

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

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