- Allows you to subscribe to any connection status and block its content while loading...
- All focusable inputs found during onMount(...) will be traped an cycled back and forth
- When rendered as a modal-overlay, it can be canceled with the ESC key or clicking outside
- It can setup autofocus on the first input-element found inside the inner wrapper (js only)

> Before submitting HTML5 validation will run, if it's valid a submit event will be triggered.
> The cancel event is fired when you click outside the modal, or press the ESC key to close the modal.

Available props:

- {id} — Used id for the inner element
- {class} — Used class for the inner element
- {loading} — Its presence will protect the UI with pointer-events:none
- {modal} — Its presence will render the inner in a modal-overlay
- {noform} — It disables the render, use the main slot instead
- {visible} — Its value is used to toggle the render of the entire custom-element
- {autofocus} — Its presence enables focus() on the first input-element found

Available slots:

- before — Renders before the tag
- after — Renders after the tag

> Add the nofocus or data-nofocus attribute to any element to skip autofocus on it (useful for close-icons, etc.).

$3

This is an wrapper that handle various effects:

- It is fully accessible through the keyboard, e.g.
- you can press ESC to clear search
- on items, press ESC to focus back to the input
- It allows you to customize the data-source used and the render options
- The search input fires their input, focus and blur events, while the dropdown fires open and close events.

> It uses _checkboxes_ or _radios_ to enable selection through the keyboard,
> once values are choosen a change event is fired with the current selection.
> You can use CSS to hide those inputs and render the items by using :focus and :checked selectors.

Available props:

- {id} — Used id for the inner element
- {pk} — Property to identify each item from data list, default is id
- {keys} — Properties to filter-out when searching for values, default are ['name', 'value']
- {data} — Used data-source to retrieve items when searching, it must be an Array
- {value} — This is an Array of selected ids from the data-source, can be bound
- {class} — Used class for the inner element
- {label} — Property used to print a human-readable value from each rendered item
- {nofilter} — its presence will disable the filtering over the passed data-source
- {disabled} — It just disables the field, while disabled options are hidden
- {multiple} — Enable multiple selection of values (checkbox vs radio), disabled by default
- {autoclose} — Close the dropdown on click-selection, it should not work with multiple options, disabled by default
- {fallback} — This message is shown when no results are found while searching
- {placeholder} — Custom placeholder for the field

Available slots:

- before — Renders before the tag
- after — Renders before the tag
- item — Renders each value, use let:item to access its props
- empty — Renders when no values where found in the data-source

> If you like, place an icon like and it will be positioned inside the on its left.
> Later you can use CSS to customize this through the [role=search]` selector.