/**
 * The "text" variant of an [`<uwc-input>`](../uwc-input.ts) can be constructed
 * by setting the {@link UwcInputElement#type | `[type]`} attribute to `"text"`.
 *
 * It is also the default type.
 *
 * You can do quite a lot with this type and below you'll find common patterns
 * to use this element with.
 *
 * ## Simple text input
 *
 * @example
 *
 * ```html
 * <uwc-input></uwc-input>
 * ```
 *
 * ## Disabled input
 *
 * ```html
 * <uwc-input disabled></uwc-input>
 * ```
 *
 * ## Custom popup
 *
 * It is possible to add a popup that is anchored to the input element
 * by specifying a `dialog[popover]` child.
 *
 * This can - for example - be used to implement comboboxes.
 * A combobox generally allows you to type a value (and act on that) while
 * associating it with content in a popup next to it.
 *
 * For more details see [WAI Combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
 *
 * Note that everything in the popup that counts as a [value element](../parts/value-element.ts)
 * can be selected.
 *
 * @example
 *
 * ```html
 * <uwc-input>
 *   <dialog popover>
 *     <ul>
 *       <li>First</li>
 *       <li>Second</li>
 *     </ul>
 *   </dialog>
 * </uwc-input>
 * ```
 *
 * ## Select
 *
 * If you don't want your users to be able to type some arbitrary values but
 * to select from a "curated" list you can hide the [root element](../parts/root.ts).
 *
 * Note that you can still type some text and the highlighted suggestion will
 * be selected according to a (exact) text match.
 *
 * @example
 *
 * ```html
 * <uwc-input>
 *   <div part="root" hidden></div>
 *   <dialog popover>
 *     <ul>
 *       <li>First</li>
 *       <li>Second</li>
 *     </ul>
 *   </dialog>
 * </uwc-input>
 * ```
 *
 * ## Adding arbitrary content
 *
 * You can add content like icons and other stuff before or after
 * the [root element](../parts/root.ts) by specifying the initial "mountpoint" for the
 * root element with a `[part=root]` element.
 *
 * E.g. to add a "clear" button at the end:
 *
 * @example
 *
 * ```html
 * <uwc-input>
 *   <div part="root"></div>
 *   <!-- uses hyperscript.org instead of complicated frameworks
 *   The _ attribute comes from hyperscript -->
 *   <button _="on click clear() the closest <uwc-input/>">clear</button>
 * </uwc-input>
 * ```
 *
 * ## Controlling where selected values go with `ul[part=values]`
 *
 * You can also control where selected values are added by specifying a
 * `ul[part=values]` element.
 *
 * This can also be used to specify initial values if desired.
 *
 * @example
 *
 * ```html
 * <uwc-input multiple>
 *   <ul part="values">
 *     <!-- also starts with two already selected values -->
 *     <li>First</li>
 *     <li>Second</li>
 *   </ul>
 * </uwc-input>
 * ```
 *
 * ## Customizing how multiple values are displayed
 *
 * By providing a template inside the `ul[part=values]` element
 * it is possible to specify how selected values are rendered.
 *
 * In short, there are three things to consider:
 *
 * 1. `data-value` - or the text content of a `li` element if not specified - is
 * what's going to be what's added to the form data.
 * 2. `data-label` - or the text content of a `li` element if not specified - is
 * what's going to be placed in unnamed slots.
 * 3. `data-slot-attributes` can be used to copy attributes from the selected element
 * inside the [popup](../parts/popover.ts) to the new element in `ul[part=values]`
 *
 * @example
 *
 * ```html
 * <uwc-input multiple>
 *   <ul part="values">
 *     <template>
 *       <li>
 *         <!-- named slots are replaced with the corresponding attributes
 *         value that is closest to the selected element -->
 *         <slot name="data-info"></slot>
 *         <!-- unnamed slots are replaced with the label which defaults to
 *         the elements textContent -->
 *         <slot></slot>
 *         <!-- you can also specify attributes that should be copied
 *         with [data-slot-attributes]. This should be a space separated
 *         list of attribute names. It should always include data-value
 *         unless you specify a <li> element -->
 *         <div data-slot-attributes="class data-variant"></div>
 *       </li>
 *     </template>
 *   </ul>
 *   <dialog popover>
 *     <ul>
 *       <li data-info="some info about first">First</li>
 *       <li data-label="second" data-variant="ghost">
 *         <strong>Second</strong>
 *         <small>And also some info</small>
 *       </li>
 *     </ul>
 *   </dialog>
 * </uwc-input>
 * ```
 *
 * @module
 */
import { Connect } from "../uwc-input";
/**
 * @internal
 */
export declare const connectText: Connect;