@f-ewald/components 0.1.0

package/dist/animate-confetti.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * Fullscreen confetti animation overlay, rendered on a fixed-position canvas.
+ * Starts automatically on first render and stops after `duration` ms.
+ *
+ * @element animate-confetti
+ */
+let AnimateConfetti = class AnimateConfetti extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** How long the confetti streams before stopping, in ms. */
+        this.duration = 6000;
+        this.maxParticleCount = 150; // set max confetti count
+        this.particleSpeed = 2; // set the particle animation speed
+        this.particles = [];
+        this.streamingConfetti = false;
+        this.colors = [
+            "DodgerBlue",
+            "OliveDrab",
+            "Gold",
+            "Pink",
+            "SlateBlue",
+            "LightBlue",
+            "Violet",
+            "PaleGreen",
+            "SteelBlue",
+            "SandyBrown",
+            "Chocolate",
+            "Crimson",
+        ];
+        this.waveAngle = 0.0;
+        /**
+         * Resize canvas to browser size.
+         */
+        this._handleResize = () => {
+            const canvas = this._canvas;
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        };
+        this.runAnimation = () => {
+            const canvas = this._canvas;
+            const context = canvas.getContext("2d");
+            context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+            if (this.particles.length === 0)
+                this.animationTimer = undefined;
+            else {
+                this.updateParticles();
+                this.drawParticles(context);
+                this.animationTimer = window.requestAnimationFrame(this.runAnimation);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("resize", this._handleResize);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("resize", this._handleResize);
+        this.stopConfetti();
+    }
+    static { this.styles = css `
+    #confetti-canvas {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 999999;
+      pointer-events: none;
+    }
+  `; }
+    /**
+     * @returns The canvas element
+     */
+    get _canvas() {
+        return this.shadowRoot.getElementById("confetti-canvas");
+    }
+    /**
+     * Start confetti once shadow dom has been rendered for the first time.
+     */
+    firstUpdated() {
+        this.startConfetti();
+        setTimeout(() => {
+            this.stopConfetti();
+        }, this.duration);
+    }
+    render() {
+        return html `<canvas id="confetti-canvas"></canvas>`;
+    }
+    startConfetti() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        this._handleResize();
+        while (this.particles.length < this.maxParticleCount)
+            this.particles.push(this.resetParticle({}, width, height));
+        this.streamingConfetti = true;
+        if (this.animationTimer == undefined) {
+            this.runAnimation();
+        }
+    }
+    /**
+     * Stop confetti and clean up after reasonable time.
+     */
+    stopConfetti() {
+        this.streamingConfetti = false;
+        setTimeout(this._cleanup, 5000);
+    }
+    /**
+     * Removes any associated particle data from internal storage to regain memory.
+     */
+    _cleanup() {
+        this.particles = [];
+    }
+    updateParticles() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        let particle;
+        this.waveAngle += 0.01;
+        for (let i = 0; i < this.particles.length; i++) {
+            particle = this.particles[i];
+            if (!this.streamingConfetti && particle.y < -15)
+                particle.y = height + 100;
+            else {
+                particle.tiltAngle += particle.tiltAngleIncrement;
+                particle.x += Math.sin(this.waveAngle);
+                particle.y += (Math.cos(this.waveAngle) + particle.diameter + this.particleSpeed) * 0.5;
+                particle.tilt = Math.sin(particle.tiltAngle) * 15;
+            }
+            if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
+                if (this.streamingConfetti && this.particles.length <= this.maxParticleCount)
+                    this.resetParticle(particle, width, height);
+                else {
+                    this.particles.splice(i, 1);
+                    i--;
+                }
+            }
+        }
+    }
+    drawParticles(context) {
+        if (!context)
+            return;
+        let particle;
+        let x;
+        for (let i = 0; i < this.particles.length; i++) {
+            particle = this.particles[i];
+            context.beginPath();
+            context.lineWidth = particle.diameter;
+            context.strokeStyle = particle.color;
+            x = particle.x + particle.tilt;
+            context.moveTo(x + particle.diameter / 2, particle.y);
+            context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
+            context.stroke();
+        }
+    }
+    resetParticle(particle, width, height) {
+        particle.color = this.colors[(Math.random() * this.colors.length) | 0];
+        particle.x = Math.random() * width;
+        particle.y = Math.random() * height - height;
+        particle.diameter = Math.random() * 10 + 5;
+        particle.tilt = Math.random() * 10 - 10;
+        particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
+        particle.tiltAngle = 0;
+        return particle;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AnimateConfetti.prototype, "duration", void 0);
+AnimateConfetti = __decorate([
+    customElement("animate-confetti")
+], AnimateConfetti);
+export { AnimateConfetti };
+//# sourceMappingURL=animate-confetti.js.map

package/dist/animate-confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-confetti.js","sourceRoot":"","sources":["../src/animate-confetti.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\ninterface Particle {\n  color: string;\n  x: number;\n  y: number;\n  diameter: number;\n  tilt: number;\n  tiltAngleIncrement: number;\n  tiltAngle: number;\n}\n\n/**\n * Fullscreen confetti animation overlay, rendered on a fixed-position canvas.\n * Starts automatically on first render and stops after `duration` ms.\n *\n * @element animate-confetti\n */\n@customElement(\"animate-confetti\")\nexport class AnimateConfetti extends LitElement {\n  /** How long the confetti streams before stopping, in ms. */\n  @property({ type: Number })\n  duration: number = 6000;\n\n  private maxParticleCount = 150; // set max confetti count\n  private particleSpeed = 2; // set the particle animation speed\n\n  private particles: Particle[] = [];\n  private streamingConfetti: boolean = false;\n  private colors = [\n    \"DodgerBlue\",\n    \"OliveDrab\",\n    \"Gold\",\n    \"Pink\",\n    \"SlateBlue\",\n    \"LightBlue\",\n    \"Violet\",\n    \"PaleGreen\",\n    \"SteelBlue\",\n    \"SandyBrown\",\n    \"Chocolate\",\n    \"Crimson\",\n  ];\n  private waveAngle: number = 0.0;\n  private animationTimer?: number;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\"resize\", this._handleResize);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"resize\", this._handleResize);\n    this.stopConfetti();\n  }\n\n  static override styles = css`\n    #confetti-canvas {\n      display: block;\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 999999;\n      pointer-events: none;\n    }\n  `;\n\n  /**\n   * @returns The canvas element\n   */\n  private get _canvas(): HTMLCanvasElement {\n    return <HTMLCanvasElement>this.shadowRoot!.getElementById(\"confetti-canvas\")!;\n  }\n\n  /**\n   * Resize canvas to browser size.\n   */\n  private _handleResize = () => {\n    const canvas = this._canvas;\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n  };\n\n  /**\n   * Start confetti once shadow dom has been rendered for the first time.\n   */\n  protected override firstUpdated(): void {\n    this.startConfetti();\n    setTimeout(() => {\n      this.stopConfetti();\n    }, this.duration);\n  }\n\n  override render() {\n    return html`<canvas id=\"confetti-canvas\"></canvas>`;\n  }\n\n  private startConfetti() {\n    const width = window.innerWidth;\n    const height = window.innerHeight;\n    this._handleResize();\n\n    while (this.particles.length < this.maxParticleCount)\n      this.particles.push(this.resetParticle({} as Particle, width, height));\n    this.streamingConfetti = true;\n    if (this.animationTimer == undefined) {\n      this.runAnimation();\n    }\n  }\n\n  private runAnimation = () => {\n    const canvas = this._canvas;\n    const context = canvas.getContext(\"2d\");\n    context!.clearRect(0, 0, window.innerWidth, window.innerHeight);\n    if (this.particles.length === 0) this.animationTimer = undefined;\n    else {\n      this.updateParticles();\n      this.drawParticles(context);\n      this.animationTimer = window.requestAnimationFrame(this.runAnimation);\n    }\n  };\n\n  /**\n   * Stop confetti and clean up after reasonable time.\n   */\n  private stopConfetti() {\n    this.streamingConfetti = false;\n    setTimeout(this._cleanup, 5000);\n  }\n\n  /**\n   * Removes any associated particle data from internal storage to regain memory.\n   */\n  private _cleanup(): void {\n    this.particles = [];\n  }\n\n  private updateParticles() {\n    const width = window.innerWidth;\n    const height = window.innerHeight;\n    let particle: Particle;\n    this.waveAngle += 0.01;\n    for (let i = 0; i < this.particles.length; i++) {\n      particle = this.particles[i];\n      if (!this.streamingConfetti && particle.y < -15) particle.y = height + 100;\n      else {\n        particle.tiltAngle += particle.tiltAngleIncrement;\n        particle.x += Math.sin(this.waveAngle);\n        particle.y += (Math.cos(this.waveAngle) + particle.diameter + this.particleSpeed) * 0.5;\n        particle.tilt = Math.sin(particle.tiltAngle) * 15;\n      }\n      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {\n        if (this.streamingConfetti && this.particles.length <= this.maxParticleCount)\n          this.resetParticle(particle, width, height);\n        else {\n          this.particles.splice(i, 1);\n          i--;\n        }\n      }\n    }\n  }\n\n  private drawParticles(context: CanvasRenderingContext2D | null) {\n    if (!context) return;\n    let particle: Particle;\n    let x: number;\n    for (let i = 0; i < this.particles.length; i++) {\n      particle = this.particles[i];\n      context.beginPath();\n      context.lineWidth = particle.diameter;\n      context.strokeStyle = particle.color;\n      x = particle.x + particle.tilt;\n      context.moveTo(x + particle.diameter / 2, particle.y);\n      context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);\n      context.stroke();\n    }\n  }\n\n  private resetParticle(particle: Particle, width: number, height: number): Particle {\n    particle.color = this.colors[(Math.random() * this.colors.length) | 0];\n    particle.x = Math.random() * width;\n    particle.y = Math.random() * height - height;\n    particle.diameter = Math.random() * 10 + 5;\n    particle.tilt = Math.random() * 10 - 10;\n    particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;\n    particle.tiltAngle = 0;\n    return particle;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"animate-confetti\": AnimateConfetti;\n  }\n}\n"]}

package/dist/autocomplete-input.d.ts

@@ -0,0 +1,73 @@
+import { LitElement, type PropertyValues } from "lit";
+/** A single autocomplete candidate: an opaque `key` plus its display `value`. */
+export interface AutocompleteOption {
+    key: string;
+    value: string;
+}
+/**
+ * Generic form-associated text input with a suggestion dropdown, for any
+ * "type to filter a list of `{key, value}` options" use case. Works as a
+ * drop-in replacement for a plain `<input>` inside a `<form>`: set `name` on
+ * the element itself and consumers keep reading
+ * `new FormData(form).get(name)` and calling `form.reset()` unchanged — the
+ * submitted value is the picked option's `value`, while `key` is available
+ * via the `option-select` event and the `selectedOption` getter for cases
+ * that need the underlying id rather than the display text.
+ *
+ * Supports two suggestion sources:
+ * - **API**: set `endpoint` to a URL that, given a `?<query-param>=<text>`
+ *   query string, responds with a JSON array of `{key, value}` objects.
+ *   Requests are debounced as the user types.
+ * - **Local array**: set `options` to a fixed `AutocompleteOption[]` and the
+ *   component filters it client-side instead of making any network
+ *   request. Useful for small/fixed lists, offline use, or tests. Takes
+ *   priority over `endpoint` whenever it's non-null.
+ *
+ * @element autocomplete-input
+ * @fires option-select - An option was picked; detail: AutocompleteOption.
+ */
+export declare class AutocompleteInput extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Current input value; also the form-associated value submitted with the form. */
+    value: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder: string;
+    /** Marks the input as required for native form validation. */
+    required: boolean;
+    /** API endpoint queried in API mode. Ignored when `options` is set. */
+    endpoint: string;
+    /** Query string parameter name the current input text is sent under. */
+    queryParam: string;
+    /** Debounce delay (ms) before firing a request/filter after typing. */
+    debounce: number;
+    /** Minimum query length before suggestions are shown. */
+    minLength: number;
+    /**
+     * Fixed candidate list to filter locally instead of fetching from
+     * `endpoint`. When set (non-null), no network request is ever made —
+     * this takes priority over the API mode.
+     */
+    options: AutocompleteOption[] | null;
+    private _suggestions;
+    private _open;
+    private _activeIndex;
+    /** Last-picked option, or null once the input diverges from it. */
+    get selectedOption(): AutocompleteOption | null;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    /** Resets to empty on `form.reset()`, per the form-associated custom element contract. */
+    formResetCallback(): void;
+    private onInput;
+    private onKeydown;
+    private onBlur;
+    private renderSuggestions;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "autocomplete-input": AutocompleteInput;
+    }
+}
+//# sourceMappingURL=autocomplete-input.d.ts.map

package/dist/autocomplete-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-input.d.ts","sourceRoot":"","sources":["../src/autocomplete-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,iFAAiF;AACjF,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;;IAC/C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA0CpB;IAEF,mFAAmF;IACvE,KAAK,SAAM;IACvB,sDAAsD;IAC1C,WAAW,SAAM;IAC7B,8DAA8D;IACjC,QAAQ,UAAS;IAC9C,uEAAuE;IAC3D,QAAQ,SAAM;IAC1B,wEAAwE;IAChC,UAAU,SAAO;IACzD,uEAAuE;IAC3C,QAAQ,SAAO;IAC3C,yDAAyD;IACJ,SAAS,SAAK;IACnE;;;;OAIG;IAC6B,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAQ;IAEnE,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAOnC,mEAAmE;IACnE,IAAI,cAAc,IAAI,kBAAkB,GAAG,IAAI,CAG9C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,QAEjD;IAEQ,oBAAoB,SAI5B;IAED,0FAA0F;IAC1F,iBAAiB,SAKhB;IAED,OAAO,CAAC,OAAO;IA0Df,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,iBAAiB;IAoBhB,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}

package/dist/autocomplete-input.js

@@ -0,0 +1,309 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Generic form-associated text input with a suggestion dropdown, for any
+ * "type to filter a list of `{key, value}` options" use case. Works as a
+ * drop-in replacement for a plain `<input>` inside a `<form>`: set `name` on
+ * the element itself and consumers keep reading
+ * `new FormData(form).get(name)` and calling `form.reset()` unchanged — the
+ * submitted value is the picked option's `value`, while `key` is available
+ * via the `option-select` event and the `selectedOption` getter for cases
+ * that need the underlying id rather than the display text.
+ *
+ * Supports two suggestion sources:
+ * - **API**: set `endpoint` to a URL that, given a `?<query-param>=<text>`
+ *   query string, responds with a JSON array of `{key, value}` objects.
+ *   Requests are debounced as the user types.
+ * - **Local array**: set `options` to a fixed `AutocompleteOption[]` and the
+ *   component filters it client-side instead of making any network
+ *   request. Useful for small/fixed lists, offline use, or tests. Takes
+ *   priority over `endpoint` whenever it's non-null.
+ *
+ * @element autocomplete-input
+ * @fires option-select - An option was picked; detail: AutocompleteOption.
+ */
+let AutocompleteInput = class AutocompleteInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current input value; also the form-associated value submitted with the form. */
+        this.value = "";
+        /** Placeholder text shown when the input is empty. */
+        this.placeholder = "";
+        /** Marks the input as required for native form validation. */
+        this.required = false;
+        /** API endpoint queried in API mode. Ignored when `options` is set. */
+        this.endpoint = "";
+        /** Query string parameter name the current input text is sent under. */
+        this.queryParam = "q";
+        /** Debounce delay (ms) before firing a request/filter after typing. */
+        this.debounce = 300;
+        /** Minimum query length before suggestions are shown. */
+        this.minLength = 3;
+        /**
+         * Fixed candidate list to filter locally instead of fetching from
+         * `endpoint`. When set (non-null), no network request is ever made —
+         * this takes priority over the API mode.
+         */
+        this.options = null;
+        this._suggestions = [];
+        this._open = false;
+        this._activeIndex = -1;
+        this.#internals = this.attachInternals();
+        this.#lastPicked = null;
+        this.#debounceTimer = null;
+        this.#abortController = null;
+    }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        position: relative;
+      }
+      input {
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        padding: 0.35rem 0.5rem;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .suggestions {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        max-height: 40vh;
+        overflow-y: auto;
+        margin: 2px 0 0;
+        padding: 4px 0;
+        list-style: none;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+      }
+      .suggestion {
+        padding: 0.4rem 0.6rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        cursor: pointer;
+      }
+      .suggestion.active,
+      .suggestion:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+    `,
+    ]; }
+    #internals;
+    #lastPicked;
+    #debounceTimer;
+    #abortController;
+    /** Last-picked option, or null once the input diverges from it. */
+    get selectedOption() {
+        if (this.#lastPicked && this.#lastPicked.value === this.value)
+            return this.#lastPicked;
+        return null;
+    }
+    updated(changed) {
+        if (changed.has("value"))
+            this.#internals.setFormValue(this.value);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#debounceTimer)
+            clearTimeout(this.#debounceTimer);
+        this.#abortController?.abort();
+    }
+    /** Resets to empty on `form.reset()`, per the form-associated custom element contract. */
+    formResetCallback() {
+        this.value = "";
+        this._suggestions = [];
+        this._open = false;
+        this.#lastPicked = null;
+    }
+    onInput(e) {
+        this.value = e.target.value;
+        this.#lastPicked = null;
+        this.#scheduleFetch(this.value);
+    }
+    #scheduleFetch(query) {
+        if (this.#debounceTimer)
+            clearTimeout(this.#debounceTimer);
+        if (query.trim().length < this.minLength) {
+            this._suggestions = [];
+            this._open = false;
+            return;
+        }
+        if (this.options) {
+            // Local mode: filtering is synchronous and cheap, but keep the same
+            // debounce as the API mode so the UX doesn't shift between sources.
+            this.#debounceTimer = setTimeout(() => this.#filterLocalOptions(query), this.debounce);
+            return;
+        }
+        this.#debounceTimer = setTimeout(() => void this.#fetchOptions(query), this.debounce);
+    }
+    /** Filters the locally-supplied `options` list for `query`, case-insensitively. */
+    #filterLocalOptions(query) {
+        const needle = query.trim().toLowerCase();
+        this._suggestions = (this.options ?? [])
+            .filter((o) => o.value.toLowerCase().includes(needle))
+            .slice(0, 5);
+        this._activeIndex = -1;
+        this._open = this._suggestions.length > 0;
+    }
+    /** Fetches options for `query` from `endpoint`, cancelling any request still in flight. */
+    async #fetchOptions(query) {
+        this.#abortController?.abort();
+        const controller = new AbortController();
+        this.#abortController = controller;
+        try {
+            const res = await fetch(this.#buildUrl(query), { signal: controller.signal });
+            if (!res.ok)
+                throw new Error(`autocomplete request failed: ${res.status}`);
+            this._suggestions = (await res.json()).slice(0, 5);
+            this._activeIndex = -1;
+            this._open = this._suggestions.length > 0;
+        }
+        catch {
+            // Aborted (superseded by newer keystroke) or a network failure while
+            // typing — fail silently and just close the list.
+            if (!controller.signal.aborted) {
+                this._suggestions = [];
+                this._open = false;
+            }
+        }
+    }
+    #buildUrl(query) {
+        const params = new URLSearchParams({ [this.queryParam]: query });
+        return `${this.endpoint}?${params.toString()}`;
+    }
+    onKeydown(e) {
+        if (e.key === "ArrowDown")
+            this.#moveActive(1, e);
+        else if (e.key === "ArrowUp")
+            this.#moveActive(-1, e);
+        else if (e.key === "Enter")
+            this.#handleEnter(e);
+        else if (e.key === "Escape")
+            this.#handleEscape(e);
+    }
+    #moveActive(delta, e) {
+        if (!this._open || this._suggestions.length === 0)
+            return;
+        e.preventDefault();
+        const n = this._suggestions.length;
+        this._activeIndex = (this._activeIndex + delta + n) % n;
+    }
+    #handleEnter(e) {
+        if (!this._open)
+            return; // closed list: let the form submit normally
+        e.preventDefault();
+        const pick = this._suggestions[this._activeIndex] ?? this._suggestions[0];
+        if (pick)
+            this.#selectOption(pick);
+    }
+    #handleEscape(e) {
+        if (!this._open)
+            return;
+        e.preventDefault();
+        this._open = false;
+    }
+    onBlur() {
+        this._open = false;
+    }
+    #selectOption(o) {
+        this.value = o.value;
+        this.#lastPicked = o;
+        this._open = false;
+        this._suggestions = [];
+        this.dispatchEvent(new CustomEvent("option-select", { detail: o, bubbles: true, composed: true }));
+    }
+    /** Selects on mousedown (not click) so it wins over the input's blur, which closes the list. */
+    #onSuggestionMousedown(e, o) {
+        e.preventDefault();
+        this.#selectOption(o);
+    }
+    renderSuggestions() {
+        if (!this._open || this._suggestions.length === 0)
+            return nothing;
+        return html `
+      <ul class="suggestions" role="listbox">
+        ${this._suggestions.map((o, i) => html `
+            <li
+              role="option"
+              aria-selected=${i === this._activeIndex}
+              class="suggestion ${i === this._activeIndex ? "active" : ""}"
+              @mousedown=${(e) => this.#onSuggestionMousedown(e, o)}
+            >
+              ${o.value}
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+    render() {
+        return html `
+      <div role="combobox" aria-expanded=${this._open} aria-haspopup="listbox">
+        <input
+          type="text"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?required=${this.required}
+          autocomplete="off"
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+          @blur=${this.onBlur}
+        />
+        ${this.renderSuggestions()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], AutocompleteInput.prototype, "value", void 0);
+__decorate([
+    property()
+], AutocompleteInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], AutocompleteInput.prototype, "required", void 0);
+__decorate([
+    property()
+], AutocompleteInput.prototype, "endpoint", void 0);
+__decorate([
+    property({ attribute: "query-param" })
+], AutocompleteInput.prototype, "queryParam", void 0);
+__decorate([
+    property({ type: Number })
+], AutocompleteInput.prototype, "debounce", void 0);
+__decorate([
+    property({ type: Number, attribute: "min-length" })
+], AutocompleteInput.prototype, "minLength", void 0);
+__decorate([
+    property({ attribute: false })
+], AutocompleteInput.prototype, "options", void 0);
+__decorate([
+    state()
+], AutocompleteInput.prototype, "_suggestions", void 0);
+__decorate([
+    state()
+], AutocompleteInput.prototype, "_open", void 0);
+__decorate([
+    state()
+], AutocompleteInput.prototype, "_activeIndex", void 0);
+AutocompleteInput = __decorate([
+    customElement("autocomplete-input")
+], AutocompleteInput);
+export { AutocompleteInput };
+//# sourceMappingURL=autocomplete-input.js.map

package/dist/autocomplete-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-input.js","sourceRoot":"","sources":["../src/autocomplete-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QA+CL,mFAAmF;QACvE,UAAK,GAAG,EAAE,CAAC;QACvB,sDAAsD;QAC1C,gBAAW,GAAG,EAAE,CAAC;QAC7B,8DAA8D;QACjC,aAAQ,GAAG,KAAK,CAAC;QAC9C,uEAAuE;QAC3D,aAAQ,GAAG,EAAE,CAAC;QAC1B,wEAAwE;QAChC,eAAU,GAAG,GAAG,CAAC;QACzD,uEAAuE;QAC3C,aAAQ,GAAG,GAAG,CAAC;QAC3C,yDAAyD;QACJ,cAAS,GAAG,CAAC,CAAC;QACnE;;;;WAIG;QAC6B,YAAO,GAAgC,IAAI,CAAC;QAE3D,iBAAY,GAAyB,EAAE,CAAC;QACxC,UAAK,GAAG,KAAK,CAAC;QACd,iBAAY,GAAG,CAAC,CAAC,CAAC;QAEnC,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACpC,gBAAW,GAA8B,IAAI,CAAC;QAC9C,mBAAc,GAAyC,IAAI,CAAC;QAC5D,qBAAgB,GAA2B,IAAI,CAAC;IAsKlD,CAAC;aAhPQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEb,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCF;KACF,AA1CqB,CA0CpB;IA2BF,UAAU,CAA0B;IACpC,WAAW,CAAmC;IAC9C,cAAc,CAA8C;IAC5D,gBAAgB,CAAgC;IAEhD,mEAAmE;IACnE,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QACvF,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrE,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,cAAc;YAAE,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,0FAA0F;IAC1F,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,OAAO,CAAC,CAAa;QAC3B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,cAAc,CAAC,KAAa;QAC1B,IAAI,IAAI,CAAC,cAAc;YAAE,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,oEAAoE;YACpE,oEAAoE;YACpE,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACvF,OAAO;QACT,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxF,CAAC;IAED,mFAAmF;IACnF,mBAAmB,CAAC,KAAa;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;aACrC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aACrD,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C,CAAC;IAED,2FAA2F;IAC3F,KAAK,CAAC,aAAa,CAAC,KAAa;QAC/B,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC;QACnC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;YAC9E,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,MAAM,IAAI,KAAK,CAAC,gCAAgC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YAC3E,IAAI,CAAC,YAAY,GAAI,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC7E,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5C,CAAC;QAAC,MAAM,CAAC;YACP,qEAAqE;YACrE,kDAAkD;YAClD,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS,CAAC,KAAa;QACrB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACjE,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;IACjD,CAAC;IAEO,SAAS,CAAC,CAAgB;QAChC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW;YAAE,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aAC7C,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS;YAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACjD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;aAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,WAAW,CAAC,KAAa,EAAE,CAAgB;QACzC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAC1D,CAAC;IAED,YAAY,CAAC,CAAgB;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,CAAC,4CAA4C;QACrE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC1E,IAAI,IAAI;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,aAAa,CAAC,CAAqB;QACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAqB,eAAe,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACzH,CAAC;IAED,gGAAgG;IAChG,sBAAsB,CAAC,CAAa,EAAE,CAAqB;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,GAAG,CACrB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;;8BAGM,CAAC,KAAK,IAAI,CAAC,YAAY;kCACnB,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;2BAC9C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC;;gBAE/D,CAAC,CAAC,KAAK;;WAEZ,CACF;;KAEJ,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;2CAC4B,IAAI,CAAC,KAAK;;;mBAGlC,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,WAAW;sBAClB,IAAI,CAAC,QAAQ;;mBAEhB,IAAI,CAAC,OAAO;qBACV,IAAI,CAAC,SAAS;kBACjB,IAAI,CAAC,MAAM;;UAEnB,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;CACF,CAAA;AAjMa;IAAX,QAAQ,EAAE;gDAAY;AAEX;IAAX,QAAQ,EAAE;sDAAkB;AAEA;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAkB;AAElC;IAAX,QAAQ,EAAE;mDAAe;AAEc;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDAAkB;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAgB;AAEU;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;oDAAe;AAMnC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAA6C;AAE3D;IAAhB,KAAK,EAAE;uDAAiD;AACxC;IAAhB,KAAK,EAAE;gDAAuB;AACd;IAAhB,KAAK,EAAE;uDAA2B;AAtExB,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAiP7B","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** A single autocomplete candidate: an opaque `key` plus its display `value`. */\nexport interface AutocompleteOption {\n  key: string;\n  value: string;\n}\n\n/**\n * Generic form-associated text input with a suggestion dropdown, for any\n * \"type to filter a list of `{key, value}` options\" use case. Works as a\n * drop-in replacement for a plain `<input>` inside a `<form>`: set `name` on\n * the element itself and consumers keep reading\n * `new FormData(form).get(name)` and calling `form.reset()` unchanged — the\n * submitted value is the picked option's `value`, while `key` is available\n * via the `option-select` event and the `selectedOption` getter for cases\n * that need the underlying id rather than the display text.\n *\n * Supports two suggestion sources:\n * - **API**: set `endpoint` to a URL that, given a `?<query-param>=<text>`\n *   query string, responds with a JSON array of `{key, value}` objects.\n *   Requests are debounced as the user types.\n * - **Local array**: set `options` to a fixed `AutocompleteOption[]` and the\n *   component filters it client-side instead of making any network\n *   request. Useful for small/fixed lists, offline use, or tests. Takes\n *   priority over `endpoint` whenever it's non-null.\n *\n * @element autocomplete-input\n * @fires option-select - An option was picked; detail: AutocompleteOption.\n */\n@customElement(\"autocomplete-input\")\nexport class AutocompleteInput extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      input {\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        padding: 0.35rem 0.5rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        width: 100%;\n        box-sizing: border-box;\n      }\n      .suggestions {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 10;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 2px 0 0;\n        padding: 4px 0;\n        list-style: none;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      .suggestion {\n        padding: 0.4rem 0.6rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        cursor: pointer;\n      }\n      .suggestion.active,\n      .suggestion:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** Current input value; also the form-associated value submitted with the form. */\n  @property() value = \"\";\n  /** Placeholder text shown when the input is empty. */\n  @property() placeholder = \"\";\n  /** Marks the input as required for native form validation. */\n  @property({ type: Boolean }) required = false;\n  /** API endpoint queried in API mode. Ignored when `options` is set. */\n  @property() endpoint = \"\";\n  /** Query string parameter name the current input text is sent under. */\n  @property({ attribute: \"query-param\" }) queryParam = \"q\";\n  /** Debounce delay (ms) before firing a request/filter after typing. */\n  @property({ type: Number }) debounce = 300;\n  /** Minimum query length before suggestions are shown. */\n  @property({ type: Number, attribute: \"min-length\" }) minLength = 3;\n  /**\n   * Fixed candidate list to filter locally instead of fetching from\n   * `endpoint`. When set (non-null), no network request is ever made —\n   * this takes priority over the API mode.\n   */\n  @property({ attribute: false }) options: AutocompleteOption[] | null = null;\n\n  @state() private _suggestions: AutocompleteOption[] = [];\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n\n  #internals = this.attachInternals();\n  #lastPicked: AutocompleteOption | null = null;\n  #debounceTimer: ReturnType<typeof setTimeout> | null = null;\n  #abortController: AbortController | null = null;\n\n  /** Last-picked option, or null once the input diverges from it. */\n  get selectedOption(): AutocompleteOption | null {\n    if (this.#lastPicked && this.#lastPicked.value === this.value) return this.#lastPicked;\n    return null;\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (changed.has(\"value\")) this.#internals.setFormValue(this.value);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#debounceTimer) clearTimeout(this.#debounceTimer);\n    this.#abortController?.abort();\n  }\n\n  /** Resets to empty on `form.reset()`, per the form-associated custom element contract. */\n  formResetCallback() {\n    this.value = \"\";\n    this._suggestions = [];\n    this._open = false;\n    this.#lastPicked = null;\n  }\n\n  private onInput(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    this.#lastPicked = null;\n    this.#scheduleFetch(this.value);\n  }\n\n  #scheduleFetch(query: string) {\n    if (this.#debounceTimer) clearTimeout(this.#debounceTimer);\n    if (query.trim().length < this.minLength) {\n      this._suggestions = [];\n      this._open = false;\n      return;\n    }\n    if (this.options) {\n      // Local mode: filtering is synchronous and cheap, but keep the same\n      // debounce as the API mode so the UX doesn't shift between sources.\n      this.#debounceTimer = setTimeout(() => this.#filterLocalOptions(query), this.debounce);\n      return;\n    }\n    this.#debounceTimer = setTimeout(() => void this.#fetchOptions(query), this.debounce);\n  }\n\n  /** Filters the locally-supplied `options` list for `query`, case-insensitively. */\n  #filterLocalOptions(query: string) {\n    const needle = query.trim().toLowerCase();\n    this._suggestions = (this.options ?? [])\n      .filter((o) => o.value.toLowerCase().includes(needle))\n      .slice(0, 5);\n    this._activeIndex = -1;\n    this._open = this._suggestions.length > 0;\n  }\n\n  /** Fetches options for `query` from `endpoint`, cancelling any request still in flight. */\n  async #fetchOptions(query: string) {\n    this.#abortController?.abort();\n    const controller = new AbortController();\n    this.#abortController = controller;\n    try {\n      const res = await fetch(this.#buildUrl(query), { signal: controller.signal });\n      if (!res.ok) throw new Error(`autocomplete request failed: ${res.status}`);\n      this._suggestions = ((await res.json()) as AutocompleteOption[]).slice(0, 5);\n      this._activeIndex = -1;\n      this._open = this._suggestions.length > 0;\n    } catch {\n      // Aborted (superseded by newer keystroke) or a network failure while\n      // typing — fail silently and just close the list.\n      if (!controller.signal.aborted) {\n        this._suggestions = [];\n        this._open = false;\n      }\n    }\n  }\n\n  #buildUrl(query: string): string {\n    const params = new URLSearchParams({ [this.queryParam]: query });\n    return `${this.endpoint}?${params.toString()}`;\n  }\n\n  private onKeydown(e: KeyboardEvent) {\n    if (e.key === \"ArrowDown\") this.#moveActive(1, e);\n    else if (e.key === \"ArrowUp\") this.#moveActive(-1, e);\n    else if (e.key === \"Enter\") this.#handleEnter(e);\n    else if (e.key === \"Escape\") this.#handleEscape(e);\n  }\n\n  #moveActive(delta: number, e: KeyboardEvent) {\n    if (!this._open || this._suggestions.length === 0) return;\n    e.preventDefault();\n    const n = this._suggestions.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #handleEnter(e: KeyboardEvent) {\n    if (!this._open) return; // closed list: let the form submit normally\n    e.preventDefault();\n    const pick = this._suggestions[this._activeIndex] ?? this._suggestions[0];\n    if (pick) this.#selectOption(pick);\n  }\n\n  #handleEscape(e: KeyboardEvent) {\n    if (!this._open) return;\n    e.preventDefault();\n    this._open = false;\n  }\n\n  private onBlur() {\n    this._open = false;\n  }\n\n  #selectOption(o: AutocompleteOption) {\n    this.value = o.value;\n    this.#lastPicked = o;\n    this._open = false;\n    this._suggestions = [];\n    this.dispatchEvent(new CustomEvent<AutocompleteOption>(\"option-select\", { detail: o, bubbles: true, composed: true }));\n  }\n\n  /** Selects on mousedown (not click) so it wins over the input's blur, which closes the list. */\n  #onSuggestionMousedown(e: MouseEvent, o: AutocompleteOption) {\n    e.preventDefault();\n    this.#selectOption(o);\n  }\n\n  private renderSuggestions() {\n    if (!this._open || this._suggestions.length === 0) return nothing;\n    return html`\n      <ul class=\"suggestions\" role=\"listbox\">\n        ${this._suggestions.map(\n          (o, i) => html`\n            <li\n              role=\"option\"\n              aria-selected=${i === this._activeIndex}\n              class=\"suggestion ${i === this._activeIndex ? \"active\" : \"\"}\"\n              @mousedown=${(e: MouseEvent) => this.#onSuggestionMousedown(e, o)}\n            >\n              ${o.value}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div role=\"combobox\" aria-expanded=${this._open} aria-haspopup=\"listbox\">\n        <input\n          type=\"text\"\n          .value=${this.value}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          autocomplete=\"off\"\n          @input=${this.onInput}\n          @keydown=${this.onKeydown}\n          @blur=${this.onBlur}\n        />\n        ${this.renderSuggestions()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"autocomplete-input\": AutocompleteInput;\n  }\n}\n"]}

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+/**
+ * Reusable confirmation dialog: overlay + centered card with a slotted body,
+ * an optional error line, and Cancel/Confirm actions. Instant `display:none`
+ * → `display:flex` toggle (no transitions). Fires `confirm`/`cancel`
+ * (bubbling, composed) instead of owning any deletion logic itself —
+ * callers stay in charge of the request.
+ *
+ * @element confirm-dialog
+ * @fires confirm - User clicked the confirm button.
+ * @fires cancel - User clicked the cancel button.
+ */
+export declare class ConfirmDialog extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Label for the confirm button. */
+    confirmLabel: string;
+    /** Label for the cancel button. */
+    cancelLabel: string;
+    /** Danger (red) vs. primary (indigo) styling for the confirm button. */
+    danger: boolean;
+    /** Shows a spinner and disables both buttons while a request is in flight. */
+    busy: boolean;
+    /** Inline error line shown below the body, or null for none. */
+    error: string | null;
+    private _confirm;
+    private _cancel;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "confirm-dialog": ConfirmDialog;
+    }
+}
+//# sourceMappingURL=confirm-dialog.d.ts.map

package/dist/confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA2GpB;IAEF,qCAAqC;IACR,IAAI,UAAS;IAC1C,oCAAoC;IACM,YAAY,SAAY;IAClE,mCAAmC;IACM,WAAW,SAAY;IAChE,wEAAwE;IAC3C,MAAM,UAAQ;IAC3C,8EAA8E;IACjD,IAAI,UAAS;IAC1C,gEAAgE;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIN,MAAM,yCAed;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}