···106106 return /** @type {T} */ (tmpl.cloneNode(true));
107107}
108108109109+/**
110110+ * @attribute {string} [host] - The host to which to make the typeahead API call.
111111+ * @attribute {number} [rows] - The maximum number of rows to display in the dropdown.
112112+ *
113113+ * @csspart menu - The dropdown menu.
114114+ * @csspart user - The user row.
115115+ * @csspart avatar - The user avatar wrapper.
116116+ * @csspart img - The user avatar image.
117117+ * @csspart handle - The user handle text.
118118+ *
119119+ * @slot - The <input> tag to progressively enhance.
120120+ *
121121+ * @cssprop --color-background - Controls the color of the dropdown background.
122122+ * @cssprop --color-border - Controls the color of the dropdown border.
123123+ * @cssprop --color-shadow - Controls the color of the dropdown shadow.
124124+ * @cssprop --color-hover - Controls the background color of each row on hover.
125125+ * @cssprop --color-avatar-fallback - Controls the background color of an avatar circle if the image fails to load.
126126+ * @cssprop --radius - Controls the corner radius of the dropdown.
127127+ * @cssprop --padding-menu - Controls the padding of the dropdown menu.
128128+ *
129129+ * @summary A small web component that progressively enhances an <input> element into an autocomplete for ATProto handles!
130130+ *
131131+ * @tag actor-typeahead
132132+ */
109133export default class ActorTypeahead extends HTMLElement {
110134 static tag = "actor-typeahead";
111135···214238215239 case "Enter":
216240 evt.preventDefault();
217217- this.#shadow.querySelectorAll("button")[this.#index]?.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
241241+ this.#shadow
242242+ .querySelectorAll("button")
243243+ [this.#index]?.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
218244 break;
219245 }
220246 }