@itenthusiasm/custom-elements 0.0.1

package/Combobox/ComboboxListbox.d.ts

@@ -0,0 +1,15 @@
+export default ComboboxListbox;
+/** @import ComboboxField from "./ComboboxField.js" */
+declare class ComboboxListbox extends HTMLElement {
+    static get observedAttributes(): readonly ["nomatchesmessage"];
+    /**
+     * @param {typeof ComboboxListbox.observedAttributes[number]} name
+     * @param {string | null} oldValue
+     * @param {string | null} newValue
+     * @returns {void}
+     */
+    attributeChangedCallback(name: (typeof ComboboxListbox.observedAttributes)[number], oldValue: string | null, newValue: string | null): void;
+    /** "On Mount" for Custom Elements @returns {void} */
+    connectedCallback(): void;
+    #private;
+}

package/Combobox/ComboboxListbox.js

@@ -0,0 +1,34 @@
+/** @import ComboboxField from "./ComboboxField.js" */
+
+class ComboboxListbox extends HTMLElement {
+  static get observedAttributes() {
+    return /** @type {const} */ (["nomatchesmessage"]);
+  }
+
+  /**
+   * @param {typeof ComboboxListbox.observedAttributes[number]} name
+   * @param {string | null} oldValue
+   * @param {string | null} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Check for string is intentional/desired
+    if (name === "nomatchesmessage" && newValue !== oldValue) {
+      if (newValue) this.#combobox.setAttribute(name, newValue);
+      else this.#combobox.removeAttribute(name);
+    }
+  }
+
+  /** "On Mount" for Custom Elements @returns {void} */
+  connectedCallback() {
+    this.setAttribute("role", "listbox");
+    this.setAttribute("tabindex", String(-1));
+  }
+
+  /** Retrives the `combobox` that this `listbox` belongs to @returns {ComboboxField} */
+  get #combobox() {
+    return /** @type {ComboboxField} */ (this.previousElementSibling);
+  }
+}
+
+export default ComboboxListbox;

package/Combobox/ComboboxOption.d.ts

@@ -0,0 +1,39 @@
+export default ComboboxOption;
+/** @import ComboboxField from "./ComboboxField.js" */
+/** @import ComboboxListbox from "./ComboboxListbox.js" */
+/** @implements {Omit<HTMLOptionElement, "text">} */
+declare class ComboboxOption extends HTMLElement implements Omit<HTMLOptionElement, "text"> {
+    static get observedAttributes(): readonly ["value", "selected"];
+    /**
+     * @param {typeof ComboboxOption.observedAttributes[number]} name
+     * @param {string | null} oldValue
+     * @param {string | null} newValue
+     * @returns {void}
+     */
+    attributeChangedCallback(name: (typeof ComboboxOption.observedAttributes)[number], oldValue: string | null, newValue: string | null): void;
+    set selected(value: boolean);
+    get selected(): boolean;
+    /** "On Mount" for Custom Elements @returns {void} */
+    connectedCallback(): void;
+    /** The `option`'s label */
+    get label(): string;
+    set value(v: string);
+    /** The value of the `option`. Defaults to the `option`'s {@link label}. */
+    get value(): string;
+    set defaultSelected(value: boolean);
+    get defaultSelected(): boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    /** The position of the option within the list of options that it belongs to. */
+    get index(): number;
+    /** The `HTMLFormElement` that owns the `combobox` associated with this element */
+    get form(): HTMLFormElement | null;
+    set filteredOut(value: boolean);
+    /**
+     * Provides the implementation for how the `option` will be marked/read as filtered out when
+     * the `combobox` performs its {@link ComboboxField.getFilteredOptions filtering logic}.
+     * @returns {boolean}
+     */
+    get filteredOut(): boolean;
+    #private;
+}

package/Combobox/ComboboxOption.js

@@ -0,0 +1,144 @@
+/** @import ComboboxField from "./ComboboxField.js" */
+/** @import ComboboxListbox from "./ComboboxListbox.js" */
+
+// NOTE: The functionality here is similar to the regular `<select>` + `<option>` spec, with some minor deviations.
+/** @implements {Omit<HTMLOptionElement, "text">} */
+class ComboboxOption extends HTMLElement {
+  #mounted = false;
+  #selected = false;
+  static get observedAttributes() {
+    return /** @type {const} */ (["value", "selected"]);
+  }
+
+  /**
+   * @param {typeof ComboboxOption.observedAttributes[number]} name
+   * @param {string | null} oldValue
+   * @param {string | null} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "selected" && (newValue === null) !== (oldValue === null)) {
+      this.selected = newValue !== null;
+      return;
+    }
+
+    if (name === "value" && this.#combobox && newValue !== oldValue) {
+      this.id = `${this.#combobox.id}-option-${newValue ?? this.textContent}`;
+      return this.#syncWithCombobox();
+    }
+  }
+
+  /** "On Mount" for Custom Elements @returns {void} */
+  connectedCallback() {
+    if (!this.isConnected) return;
+
+    // Require a Corresponding `listbox` + `combobox`
+    if (!this.#listbox) {
+      throw new TypeError(`A ${this.constructor.name} must be placed inside a valid \`[role="listbox"]\` element.`);
+    }
+    if (!this.#combobox) {
+      throw new TypeError(`A ${this.constructor.name}'s \`listbox\` must be controlled by a valid \`combobox\``);
+    }
+
+    if (!this.#mounted) {
+      if (!this.id) this.setAttribute("id", `${this.#combobox.id}-option-${this.value}`);
+      this.setAttribute("role", "option");
+      this.setAttribute("aria-selected", String(this.selected));
+      this.#mounted = true;
+    }
+  }
+
+  /** The `option`'s label */
+  get label() {
+    return this.textContent;
+  }
+
+  /** The value of the `option`. Defaults to the `option`'s {@link label}. */
+  get value() {
+    return this.getAttribute("value") ?? this.label;
+  }
+
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+
+  get selected() {
+    return this.#selected;
+  }
+
+  set selected(value) {
+    const booleanValue = Boolean(value);
+    if (this.#selected === booleanValue) return;
+
+    this.#selected = booleanValue;
+    this.setAttribute("aria-selected", String(this.#selected));
+    this.#syncWithCombobox();
+  }
+
+  get defaultSelected() {
+    return this.hasAttribute("selected");
+  }
+
+  set defaultSelected(value) {
+    this.toggleAttribute("selected", value);
+  }
+
+  get disabled() {
+    return this.getAttribute("aria-disabled") === String(true);
+  }
+
+  set disabled(value) {
+    if (value) this.setAttribute("aria-disabled", String(true));
+    else this.removeAttribute("aria-disabled");
+  }
+
+  // NOTE: This approach might not work anymore if we want to support `group`ed `option`s in the future (unlikely)
+  /** The position of the option within the list of options that it belongs to. */
+  get index() {
+    // NOTE: Defaulting to `0` in lieu of an owning `listbox` mimics what the native `<select>` does.
+    return this.#listbox ? Array.prototype.indexOf.call(this.#listbox.children, this) : 0;
+  }
+
+  /** The `HTMLFormElement` that owns the `combobox` associated with this element */
+  get form() {
+    return this.#combobox?.form ?? null;
+  }
+
+  /**
+   * Provides the implementation for how the `option` will be marked/read as filtered out when
+   * the `combobox` performs its {@link ComboboxField.getFilteredOptions filtering logic}.
+   * @returns {boolean}
+   */
+  get filteredOut() {
+    return this.hasAttribute("data-filtered-out");
+  }
+
+  set filteredOut(value) {
+    this.toggleAttribute("data-filtered-out", value);
+  }
+
+  /** Retrieves the `listbox` that owns this `option` @returns {ComboboxListbox | null} */
+  get #listbox() {
+    return /** @type {ComboboxListbox | null} */ (this.closest("[role='listbox']"));
+  }
+
+  /** Retrives the `combobox` that this `option` belongs to @returns {ComboboxField | null | undefined} */
+  get #combobox() {
+    return /** @type {ComboboxField | null | undefined} */ (this.#listbox?.previousElementSibling);
+  }
+
+  /** @returns {void} */
+  #syncWithCombobox() {
+    if (!this.#combobox) return;
+    const combobox = this.#combobox;
+
+    if (this.selected && combobox.value !== this.value) combobox.value = this.value;
+    else if (!this.selected && combobox.value === this.value) {
+      if (combobox.text.data && combobox.acceptsValue(combobox.text.data)) return;
+      if (combobox.acceptsValue("")) return combobox.forceEmptyValue();
+      combobox.formResetCallback();
+    }
+  }
+}
+
+export default ComboboxOption;

package/Combobox/README.md

@@ -0,0 +1,17 @@
+# Combobox
+
+A robust, accessible and stylable [`Combobox`](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) whose functionality can be extended or customized with ease.
+
+## Features and Benefits
+
+- **Framework Agnostic**: Because the `combobox` component is just a custom `HTMLElement`, it works seamlessly in all JS Frameworks (and in pure-JS applications if that's what you fancy).
+- **Integrates with Native Web Forms**: This `combobox` integrates with the web's native `<form>` element, meaning that its value will be seen in the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and will be automatically [sent to the server](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data) when the form is submitted -- all without writing a single line of JS.
+- **Works with Various Form Libraries**: The `combobox` component emits standard DOM events like [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) and [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), enabling it to work naturally with reputable form libraries (e.g., the [`Form Observer`](https://github.com/enthusiastic-js/form-observer), [`Conform`](https://conform.guide/), and [`React Hook Form`](https://react-hook-form.com/)).
+- **Progressive Enhacement**: When used in `Select Enhacing Mode`, the component will fallback to a regular `<select>` element if JS is disabled or unavailable for your users. This means your forms will _always_ be fully usable and accessible.
+- **Highly Customizable**: The `combobox` component is flexible enough to work with whatever CSS you provide, and its functionality can be enhanced or overriden by [extending](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends) it.
+- **Performant**: Unlike many other alternatives, the `combobox` component has been cleverly designed to work without complex state management tools or aggressive DOM Tree manipulation. This makes it a fast and memory-efficient solution.
+- **No Dependencies**: The `combobox` component is built on the native web platform instead of extending other frameworks or libraries, guaranteeing your bundle size remains as small as possible.
+
+<!-- TODO: Link to article explaining how progressively-enhanced Form Controls _greatly_ simplify frontend code. -->
+
+<!-- TODO: Link to example of styling our `combobox` to look like GitHub's or ShadcnUI's. Probably put it alongside an example of another styling approach. -->

package/Combobox/SelectEnhancer.d.ts

@@ -0,0 +1,27 @@
+export default SelectEnhancer;
+declare class SelectEnhancer extends HTMLElement {
+    /** "On Mount" for Custom Elements @returns {void} */
+    connectedCallback(): void;
+    set comboboxTag(value: string);
+    /**
+     * Determines the {@link ComboboxField} element that will be created when the component is mounted in
+     * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-field`.
+     * @returns {string}
+     */
+    get comboboxTag(): string;
+    set listboxTag(value: string);
+    /**
+     * Determines the {@link ComboboxListbox} element that will be created when the component is mounted in
+     * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-listbox`.
+     * @returns {string}
+     */
+    get listboxTag(): string;
+    set optionTag(value: string);
+    /**
+     * Determines the {@link ComboboxOption} element(s) that will be created when the component is mounted in
+     * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-option`.
+     * @returns {string}
+     */
+    get optionTag(): string;
+    #private;
+}

package/Combobox/SelectEnhancer.js

@@ -0,0 +1,185 @@
+import ComboboxField from "./ComboboxField.js";
+import ComboboxListbox from "./ComboboxListbox.js";
+import ComboboxOption from "./ComboboxOption.js";
+
+class SelectEnhancer extends HTMLElement {
+  // Internals
+  /** @type {ComboboxField | undefined} */ #combobox;
+  /** @type {ComboboxListbox | undefined} */ #listbox;
+  #mounted = false;
+
+  /** "On Mount" for Custom Elements @returns {void} */
+  connectedCallback() {
+    if (!this.isConnected) return;
+
+    if (!this.#mounted) {
+      /* -------------------- Enforce Valid Markup -------------------- */
+      /** @type {HTMLSelectElement[]} */ const selects = [];
+      /** @type {ComboboxField[]} */ const comboboxes = [];
+      /** @type {ComboboxListbox[]} */ const listboxes = [];
+
+      for (let child = this.lastElementChild; child; child = child.previousElementSibling) {
+        customElements.upgrade(child);
+        if (child instanceof HTMLSelectElement) selects.push(child);
+        else if (child instanceof ComboboxField) comboboxes.push(child);
+        else if (child instanceof ComboboxListbox) listboxes.push(child);
+      }
+
+      if (
+        selects.length > 1 ||
+        comboboxes.length > 1 ||
+        listboxes.length > 1 ||
+        comboboxes.length !== listboxes.length ||
+        selects.length === comboboxes.length
+      ) {
+        const line1 = `${this.constructor.name} must contain one (and only one) <select> element.`;
+        const line2 = `Alternatively, you may supply one ${ComboboxField.name} and one ${ComboboxListbox.name}.`;
+        throw new TypeError(`${line1}\n${line2}`);
+      }
+
+      const select = /** @type {HTMLSelectElement | undefined} */ (selects[0]);
+      if (select) {
+        this.#combobox = /** @type {ComboboxField} */ (document.createElement(this.comboboxTag));
+        if (!(this.#combobox instanceof ComboboxField)) {
+          throw new TypeError(`<${this.comboboxTag}> is not registered as a \`${ComboboxField.name}\``);
+        }
+
+        this.#listbox = /** @type {ComboboxListbox} */ (document.createElement(this.listboxTag));
+        if (!(this.#listbox instanceof ComboboxListbox)) {
+          throw new TypeError(`<${this.listboxTag}> is not registered as a \`${ComboboxListbox.name}\``);
+        }
+      } else {
+        [this.#combobox] = comboboxes;
+        [this.#listbox] = listboxes;
+      }
+
+      /* -------------------- Setup Elements -------------------- */
+      // Give the `combobox` and the `listbox` a common parent for DOM Manipulation if needed.
+      if (!this.#combobox.isConnected) document.createDocumentFragment().append(this.#combobox, this.#listbox);
+
+      // Root Element
+      this.setAttribute("role", "none");
+
+      // Combobox
+      if (select) {
+        const attributeNames = select.getAttributeNames();
+        for (let i = 0; i < attributeNames.length; i++) {
+          const attrName = attributeNames[i];
+          this.#combobox.setAttribute(attrName, /** @type {string} */ (select.getAttribute(attrName)));
+        }
+      }
+
+      // Listbox
+      // TODO: Maybe use `crypto.getRandomValues()` instead?
+      this.#combobox.id ||= Math.random().toString(36).slice(2);
+      const listboxId = `${this.#combobox.id}-listbox`;
+      this.#listbox.setAttribute("id", listboxId);
+      this.#listbox.setAttribute("role", "listbox");
+      this.#combobox.setAttribute("aria-controls", listboxId);
+
+      // Listbox Options
+      // `SelectEnhancer` was initialized with pre-supplied `combobox` and `listbox` Web Components
+      if (!select) {
+        let defaultOptionExists = false;
+        /** @type {Element[]} */ const invalidChildren = [];
+        /** @type {ComboboxOption | undefined | null} */ let selectedOption;
+        for (let child = this.#listbox.lastElementChild; child; child = child.previousElementSibling) {
+          if (!(child instanceof ComboboxOption)) invalidChildren.push(child);
+          else {
+            if (selectedOption) child.selected = false; // NOTE: Would not work if we want to support `multiple` mode
+            if (child.defaultSelected) defaultOptionExists = true;
+            if (child.selected && !selectedOption) selectedOption = child;
+            child.id = `${this.#combobox.id}-option-${child.value}`;
+          }
+        }
+
+        invalidChildren.forEach((c) => c.remove());
+        selectedOption ??= /** @type {ComboboxOption | null} */ (this.#listbox.firstElementChild);
+        if (selectedOption) this.#combobox.value = selectedOption.value;
+
+        // NOTE: Might override an `option` that is `selected` but not `defaultSelected`. However, this behavior matches
+        // `Select Enhancing Mode`, and it can be resolved by explicitly setting `defaultSelected`, which is encouraged.
+        if (!defaultOptionExists && this.#combobox.acceptsValue("")) this.#combobox.forceEmptyValue();
+      }
+      // `SelectEnhancer` is meant to enhance/replace a single `<select>` instead
+      else {
+        let defaultOptionExists = false;
+        /** @type {ComboboxOption | undefined} */ let selectedOption;
+        const { optionTag } = this;
+        const OptionConstructor = customElements.get(optionTag);
+        if (OptionConstructor !== ComboboxOption && !(OptionConstructor?.prototype instanceof ComboboxOption)) {
+          throw new TypeError(`<${optionTag}> is not registered as a \`${ComboboxOption.name}\``);
+        }
+
+        for (let i = 0; i < select.options.length; i++) {
+          const option = select.options[i];
+          const comboboxOption = /** @type {ComboboxOption} */ (document.createElement(optionTag));
+          this.#listbox.appendChild(comboboxOption);
+
+          comboboxOption.textContent = option.label;
+          comboboxOption.defaultSelected = option.defaultSelected;
+          if (comboboxOption.defaultSelected) defaultOptionExists = true;
+          if (option.hasAttribute("disabled")) comboboxOption.disabled = true;
+          if (option.hasAttribute("value")) comboboxOption.setAttribute("value", option.value);
+
+          // NOTE: `value` MUST be set BEFORE `id`, which is set BEFORE `selected`. (Due to A11y and Value Selection Logic.)
+          comboboxOption.setAttribute("id", `${this.#combobox.id}-option-${comboboxOption.value}`);
+          comboboxOption.selected = option.selected;
+          if (comboboxOption.selected) selectedOption = comboboxOption;
+        }
+
+        // `selectedOption` is only guaranteed to exist if `<select>` had at least one `<option>`
+        if (selectedOption) this.#combobox.value = selectedOption.value;
+
+        // Enable `clearable`/`anyvalue` `combobox`es without a default value to start out as an empty field
+        if (!defaultOptionExists && this.#combobox.acceptsValue("")) this.#combobox.forceEmptyValue();
+
+        // Render Elements
+        select.replaceWith(this.#combobox, this.#listbox);
+      }
+
+      this.#mounted = true;
+    }
+  }
+
+  /**
+   * Determines the {@link ComboboxField} element that will be created when the component is mounted in
+   * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-field`.
+   * @returns {string}
+   */
+  get comboboxTag() {
+    return this.getAttribute("comboboxtag") ?? "combobox-field";
+  }
+
+  set comboboxTag(value) {
+    this.setAttribute("comboboxtag", value);
+  }
+
+  /**
+   * Determines the {@link ComboboxListbox} element that will be created when the component is mounted in
+   * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-listbox`.
+   * @returns {string}
+   */
+  get listboxTag() {
+    return this.getAttribute("listboxtag") ?? "combobox-listbox";
+  }
+
+  set listboxTag(value) {
+    this.setAttribute("listboxtag", value);
+  }
+
+  /**
+   * Determines the {@link ComboboxOption} element(s) that will be created when the component is mounted in
+   * "Select Enhancing Mode" (i.e., with a `<select>` element). Defaults to `combobox-option`.
+   * @returns {string}
+   */
+  get optionTag() {
+    return this.getAttribute("optiontag") ?? "combobox-option";
+  }
+
+  set optionTag(value) {
+    this.setAttribute("optiontag", value);
+  }
+}
+
+export default SelectEnhancer;

package/Combobox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ComboboxField } from "./ComboboxField.js";
+export { default as ComboboxListbox } from "./ComboboxListbox.js";
+export { default as ComboboxOption } from "./ComboboxOption.js";
+export { default as SelectEnhancer } from "./SelectEnhancer.js";

package/Combobox/index.js

@@ -0,0 +1,4 @@
+export { default as ComboboxField } from "./ComboboxField.js";
+export { default as ComboboxListbox } from "./ComboboxListbox.js";
+export { default as ComboboxOption } from "./ComboboxOption.js";
+export { default as SelectEnhancer } from "./SelectEnhancer.js";

package/Combobox/types/dom.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxField, ComboboxListbox, ComboboxOption, SelectEnhancer } from "../index.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "select-enhancer": SelectEnhancer;
+    "combobox-field": ComboboxField;
+    "combobox-listbox": ComboboxListbox;
+    "combobox-option": ComboboxOption;
+  }
+}

package/Combobox/types/helpers.d.ts

@@ -0,0 +1,7 @@
+import type ComboboxListbox from "../ComboboxListbox.js";
+
+export interface ListboxWithChildren<T extends HTMLElement> extends ComboboxListbox {
+  children: HTMLCollectionOf<T>;
+  firstElementChild: T | null;
+  lastElementChild: T | null;
+}

package/Combobox/types/preact.d.ts

@@ -0,0 +1,43 @@
+import type { ComboboxField, ComboboxListbox, ComboboxOption, SelectEnhancer } from "../index.js";
+
+declare module "preact" {
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- Necessary for type declaration merging
+  namespace JSX {
+    interface IntrinsicElements {
+      "select-enhancer": SelectEnhancerHTMLAttributes<SelectEnhancer>;
+      "combobox-field": ComboboxFieldHTMLAttributes<ComboboxField>;
+      "combobox-listbox": HTMLAttributes<ComboboxListbox>;
+      "combobox-option": ComboboxOptionHTMLAttributes<ComboboxOption>;
+    }
+
+    interface SelectEnhancerHTMLAttributes<T extends EventTarget = SelectEnhancer> extends HTMLAttributes<T> {
+      comboboxtag?: Signalish<SelectEnhancer["comboboxTag"] | undefined>;
+      listboxtag?: Signalish<SelectEnhancer["listboxTag"] | undefined>;
+      optiontag?: Signalish<SelectEnhancer["optionTag"] | undefined>;
+    }
+
+    interface ComboboxFieldHTMLAttributes<T extends EventTarget = ComboboxField> extends HTMLAttributes<T> {
+      disabled?: Signalish<ComboboxField["disabled"] | undefined>;
+      filter?: Signalish<ComboboxField["filter"] | undefined>;
+      filtermethod?: Signalish<ComboboxField["filterMethod"] | undefined>;
+      form?: Signalish<string | undefined>;
+      name?: Signalish<ComboboxField["name"] | undefined>;
+      nomatchesmessage?: Signalish<ComboboxField["noMatchesMessage"] | undefined>;
+      required?: Signalish<ComboboxField["required"] | undefined>;
+      valueis?: Signalish<ComboboxField["valueIs"] | undefined>;
+      valuemissingerror?: Signalish<ComboboxField["valueMissingError"] | undefined>;
+      onfilterchange?: GenericEventHandler<T> | undefined;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- This is required to support ComboboxField props
+    interface SelectHTMLAttributes<T extends EventTarget = HTMLSelectElement>
+      extends Omit<ComboboxFieldHTMLAttributes<T>, "onfilterchange"> {}
+
+    interface ComboboxOptionHTMLAttributes<T extends EventTarget = ComboboxOption> extends HTMLAttributes<T> {
+      defaultSelected?: Signalish<ComboboxOption["defaultSelected"] | undefined>;
+      disabled?: Signalish<ComboboxOption["disabled"] | undefined>;
+      selected?: Signalish<ComboboxOption["selected"] | undefined>;
+      value?: Signalish<ComboboxOption["value"] | undefined>;
+    }
+  }
+}

package/Combobox/types/react.d.ts

@@ -0,0 +1,54 @@
+import type { ComboboxField, ComboboxListbox, ComboboxOption, SelectEnhancer } from "../index.js";
+
+declare module "react" {
+  interface SelectEnhancerHTMLAttributes<T> extends HTMLAttributes<T> {
+    comboboxtag?: SelectEnhancer["comboboxTag"];
+    listboxtag?: SelectEnhancer["listboxTag"];
+    optiontag?: SelectEnhancer["optionTag"];
+  }
+
+  interface ComboboxFieldHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: ComboboxField["disabled"];
+    filter?: ComboboxField["filter"];
+    filtermethod?: ComboboxField["filterMethod"];
+    form?: string; // WARNING: React does not yet support the `form` attribute for Custom Elements
+    name?: ComboboxField["name"];
+    nomatchesmessage?: ComboboxField["noMatchesMessage"];
+    required?: ComboboxField["required"];
+    valueis?: ComboboxField["valueIs"];
+    valuemissingerror?: ComboboxField["valueMissingError"];
+
+    onfilterchange?: ReactEventHandler<T>;
+    onfilterchangeCapture?: ReactEventHandler<T>;
+  }
+
+  interface SelectHTMLAttributes<T>
+    extends Omit<ComboboxFieldHTMLAttributes<T>, "filter" | "onfilterchange" | "onfilterchangeCapture"> {
+    filter?: "";
+  }
+
+  interface ComboboxOptionHTMLAttributes<T> extends HTMLAttributes<T> {
+    defaultSelected?: ComboboxOption["defaultSelected"];
+    disabled?: ComboboxOption["disabled"];
+    selected?: ComboboxOption["selected"];
+    value?: ComboboxOption["value"];
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- Necessary for type declaration merging
+  namespace JSX {
+    interface IntrinsicElements {
+      "select-enhancer": React.DetailedHTMLProps<React.SelectEnhancerHTMLAttributes<SelectEnhancer>, SelectEnhancer>;
+      "combobox-field": React.DetailedHTMLProps<React.ComboboxFieldHTMLAttributes<ComboboxField>, ComboboxField>;
+      "combobox-listbox": React.DetailedHTMLProps<React.HTMLAttributes<ComboboxListbox>, ComboboxListbox>;
+      "combobox-option": React.DetailedHTMLProps<React.ComboboxOptionHTMLAttributes<ComboboxOption>, ComboboxOption>;
+    }
+  }
+}
+
+/*
+ * NOTE: React handles native attributes inconsistently between Custom Elements and native `HTMLElement`s.
+ * For example, applying `form` to a native form control will alter the corresponding attribute. However,
+ * applying `form` to a Custom Form Control that exposes a `form` getter will cause React to throw a runtime
+ * error. The React team will need to figure out the best way to address this problem. See:
+ * https://github.com/facebook/react/issues/34663.
+ */

package/Combobox/types/solid.d.ts

@@ -0,0 +1,45 @@
+import type { SelectEnhancer, ComboboxField, ComboboxListbox, ComboboxOption } from "../index.js";
+
+declare module "solid-js" {
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- Necessary for type declaration merging
+  namespace JSX {
+    interface HTMLElementTags {
+      "select-enhancer": SelectEnhancerHTMLAttributes<SelectEnhancer>;
+      "combobox-field": ComboboxFieldHTMLAttributes<ComboboxField>;
+      "combobox-listbox": HTMLAttributes<ComboboxListbox>;
+      "combobox-option": ComboboxOptionHTMLAttributes<ComboboxOption>;
+    }
+
+    interface SelectEnhancerHTMLAttributes<T> extends HTMLAttributes<T> {
+      comboboxtag?: SelectEnhancer["comboboxTag"];
+      listboxtag?: SelectEnhancer["listboxTag"];
+      optiontag?: SelectEnhancer["optionTag"];
+    }
+
+    interface ComboboxFieldHTMLAttributes<T> extends HTMLAttributes<T> {
+      disabled?: ComboboxField["disabled"];
+      filter?: ComboboxField["filter"];
+      filtermethod?: ComboboxField["filterMethod"];
+      form?: string;
+      name?: ComboboxField["name"];
+      nomatchesmessage?: ComboboxField["noMatchesMessage"];
+      required?: ComboboxField["required"];
+      valueis?: ComboboxField["valueIs"];
+      valuemissingerror?: ComboboxField["valueMissingError"];
+
+      onFilterchange?: EventHandlerUnion<T, Event>;
+      onfilterchange?: EventHandlerUnion<T, Event>;
+      "on:filterchange"?: EventHandlerWithOptionsUnion<T, Event>;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- This is required to support ComboboxField props
+    interface SelectHTMLAttributes<T>
+      extends Omit<ComboboxFieldHTMLAttributes<T>, "onFilterchange" | "onfilterchange" | "on:filterchange"> {}
+
+    interface ComboboxOptionHTMLAttributes<T> extends HTMLAttributes<T> {
+      disabled?: ComboboxOption["disabled"];
+      selected?: ComboboxOption["selected"];
+      value?: ComboboxOption["value"];
+    }
+  }
+}