smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

package/dist/types/components/input/Looks.d.ts

@@ -0,0 +1,7 @@
+import { isly } from "isly";
+export type Looks = typeof Looks.types[number];
+export declare namespace Looks {
+  const types: readonly ["plain", "grid", "border", "line", "transparent"];
+  const type: isly.Type<"line" | "grid" | "plain" | "border" | "transparent">;
+  const is: isly.Type.IsFunction<"line" | "grid" | "plain" | "border" | "transparent">;
+}

package/dist/types/components/input/Submittable.d.ts

@@ -0,0 +1,6 @@
+export interface Submittable {
+  submit(): Promise<void>;
+}
+export declare namespace Submittable {
+  function is(value: Submittable | any): value is Submittable;
+}

package/dist/types/components/input/checkbox/index.d.ts

@@ -0,0 +1,20 @@
+import { ComponentWillLoad, EventEmitter } from "../../../stencil-public-runtime";
+import { Color, Data } from "../../../model";
+import { Clearable } from "../Clearable";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class SmoothlyInputCheckbox implements Input, Clearable, ComponentWillLoad {
+  name: string;
+  value: Data[string];
+  checked: boolean;
+  looks: Looks;
+  disabled: boolean;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInput: EventEmitter<Data>;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): void | Promise<void>;
+  clear(): Promise<void>;
+  elementCheck(): void;
+  inputHandler(event: MouseEvent): void;
+  render(): any;
+}

package/dist/types/components/input/clear/index.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Color, Fill } from "../../../model";
+export declare class SmoothlyInputClear {
+  color?: Color;
+  expand?: "block" | "full";
+  fill?: Fill;
+  disabled: boolean;
+  size: "small" | "large" | "icon" | "flexible";
+  shape?: "rounded";
+  display: boolean;
+  type: "form" | "input";
+  private parent?;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): Promise<void>;
+  clickHandler(): void;
+  render(): any;
+}

package/dist/types/components/input/color/index.d.ts

@@ -0,0 +1,24 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../../stencil-public-runtime";
+import { SmoothlyInputCustomEvent } from "../../../components";
+import { Color } from "../../../model";
+import { Clearable } from "../Clearable";
+import { SmoothlyInput } from "../index";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class SmoothlyInputColor implements Input, Clearable, ComponentWillLoad {
+  element: HTMLElement;
+  value: string | undefined;
+  looks: Looks;
+  name: string;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInput: EventEmitter<Record<string, any>>;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): void | Promise<void>;
+  smoothlyInputHandler(event: CustomEvent<Record<string, any>>): void;
+  smoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void;
+  smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInput) => void>): void;
+  clear(): Promise<void>;
+  valueChanged(): void;
+  inputHandler(event: SmoothlyInputCustomEvent<Record<string, any>>): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/input/date/index.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Date } from "isoly";
+import { Color } from "../../../model";
+import { Clearable } from "../Clearable";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class InputDate implements Clearable, Input {
+  element: HTMLElement;
+  color?: Color;
+  looks: Looks;
+  name: string;
+  value?: Date;
+  open: boolean;
+  max: Date;
+  min: Date;
+  showLabel: boolean;
+  disabled: boolean;
+  smoothlyValueChange: EventEmitter<Date>;
+  smoothlyInput: EventEmitter<Record<string, any>>;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  componentWillLoad(): void;
+  clear(): Promise<void>;
+  onStart(next: Date): void;
+  smoothlyInputHandler(event: CustomEvent<Record<string, any>>): void;
+  smoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void;
+  dateSetHandler(event: CustomEvent<Date>): void;
+  render(): any[];
+}

package/dist/types/components/input/date/range/index.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from "../../../../stencil-public-runtime";
+import { isoly } from "isoly";
+import { Clearable } from "../../Clearable";
+import { Input } from "../../Input";
+import { Looks } from "../../Looks";
+import { Color, Data } from "./../../../../model";
+export declare class InputDateRange implements Clearable, Input {
+  element: HTMLElement;
+  color?: Color;
+  looks: Looks;
+  name: string;
+  value?: isoly.Date;
+  start?: isoly.Date;
+  end?: isoly.Date;
+  max: isoly.Date;
+  min: isoly.Date;
+  open: boolean;
+  showLabel: boolean;
+  labelStart: string;
+  labelEnd: string;
+  smoothlyValueChange: EventEmitter<isoly.Date>;
+  smoothlyInput: EventEmitter<Data>;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  clear(): Promise<void>;
+  componentWillLoad(): void;
+  onValue(next: isoly.Date): void;
+  smoothlyInputHandler(event: CustomEvent<Record<string, any>>): void;
+  smoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void;
+  onStartChanged(event: CustomEvent<isoly.Date>): void;
+  onEndChanged(event: CustomEvent<isoly.Date>): void;
+  onDateRangeSet(event: CustomEvent<isoly.DateRange>): void;
+  render(): any;
+}

package/dist/types/components/input/demo/index.d.ts

@@ -0,0 +1,6 @@
+import { isoly } from "isoly";
+export declare class SmoothlyInputDemo {
+  private selectElement;
+  duration: isoly.TimeSpan;
+  render(): any;
+}

package/dist/types/components/input/edit/index.d.ts

@@ -0,0 +1,17 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../../stencil-public-runtime";
+import { Color, Fill } from "../../../model";
+export declare class SmoothlyInputEdit implements ComponentWillLoad {
+  private parent?;
+  color?: Color;
+  expand?: "block" | "full";
+  fill?: Fill;
+  disabled: boolean;
+  display: boolean;
+  shape?: "rounded";
+  type: "link" | "button";
+  size: "flexible" | "small" | "large" | "icon";
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): void;
+  clickHandler(): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/input/file/index.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Color } from "../../../model";
+import { Clearable } from "../Clearable";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class SmoothlyInputFile implements Clearable, Input {
+  private transfer;
+  private input?;
+  dragging: boolean;
+  accept?: string;
+  color?: Color;
+  looks: Looks;
+  camera: "front" | "back";
+  name: string;
+  showLabel: boolean;
+  value?: File;
+  placeholder: string | undefined;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInput: EventEmitter<Record<string, File>>;
+  smoothlyChange: EventEmitter<Record<string, File>>;
+  componentWillLoad(): void;
+  clear(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/input/index.d.ts

@@ -1,42 +1,60 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { Currency } from "isoly";
-import { Converter, Direction, Formatter, Settings, State as TidilyState } from "tidily";
-export declare class SmoothlyInput {
+import { isoly } from "isoly";
+import { tidily } from "tidily";
+import { Color } from "../../model";
+import { Clearable } from "./Clearable";
+import { Editable } from "./Editable";
+import { Input } from "./Input";
+import { Looks } from "./Looks";
+export declare class SmoothlyInput implements Clearable, Input, Editable {
   private inputElement;
   private keepFocusOnReRender;
   private lastValue;
   private state;
+  private abortInputEvent?;
+  color?: Color;
+  delay: number;
+  looks: Looks;
   name: string;
   value: any;
-  type: string;
+  type: tidily.Type;
   required: boolean;
-  minLength: number;
   showLabel: boolean;
-  maxLength: number;
   autocomplete: boolean;
-  pattern: RegExp | undefined;
   placeholder: string | undefined;
   disabled: boolean;
   readonly: boolean;
-  currency?: Currency;
+  currency?: isoly.Currency;
+  changed: boolean;
+  formatter: tidily.Formatter & tidily.Converter<any>;
   initialValue?: any;
-  get formatter(): Formatter & Converter<any>;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>;
+  private listener;
+  listen(property: "changed", listener: (parent: Editable) => Promise<void>): Promise<void>;
+  SmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInput) => void>): Promise<void>;
+  typeChange(): void;
   private newState;
   smoothlyBlur: EventEmitter<void>;
   smoothlyChange: EventEmitter<Record<string, any>>;
   smoothlyInput: EventEmitter<Record<string, any>>;
   valueWatcher(value: any, before: any): void;
+  smoothlyInputEmit(value: any): Promise<void>;
+  watchingReadonly(): void;
   onCurrency(): void;
   componentWillLoad(): void;
   componentDidRender(): void;
   clear(): Promise<void>;
+  edit(editable: boolean): Promise<void>;
+  reset(): Promise<void>;
   getFormData(name: string): Promise<Record<string, any>>;
   hasNameAndValue(element: any): element is {
     name: string;
     value: string;
   };
   setKeepFocusOnReRender(keepFocus: boolean): Promise<void>;
-  setSelectionRange(start: number, end: number, direction?: Direction): Promise<void>;
+  setSelectionRange(start: number, end: number, direction?: tidily.Direction): Promise<void>;
   onBlur(event: FocusEvent): void;
   onFocus(event: FocusEvent): void;
   onClick(event: MouseEvent): void;
@@ -44,7 +62,8 @@ export declare class SmoothlyInput {
   onPaste(event: ClipboardEvent): void;
   onInput(event: InputEvent): void;
   private expiresAutocompleteFix;
+  private processPaste;
   private processKey;
-  updateBackend(after: Readonly<TidilyState> & Readonly<Settings>, backend: HTMLInputElement): void;
+  updateBackend(after: Readonly<tidily.State> & Readonly<tidily.Settings>, backend: HTMLInputElement, setSelection?: boolean): void;
   render(): any;
 }

package/dist/types/components/{input-month → input/month}/index.d.ts

@@ -1,8 +1,8 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { Date } from "isoly";
 export declare class MonthSelector {
   value?: Date;
-  valueChanged: EventEmitter<Date>;
+  smoothlyValueChange: EventEmitter<Date>;
   onValueChanged(next: Date): void;
   private adjustMonth;
   render(): any[];

package/dist/types/components/input/radio/Selected.d.ts

@@ -0,0 +1,10 @@
+import { isly } from "isly";
+export interface Selectable {
+  value: any;
+  selected: boolean;
+  select: (selected: boolean) => void;
+}
+export declare namespace Selected {
+  const type: isly.object.ExtendableType<Selectable>;
+  const is: isly.Type.IsFunction<Selectable>;
+}

package/dist/types/components/input/radio/index.d.ts

@@ -0,0 +1,35 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../../stencil-public-runtime";
+import { Color, Data } from "../../../model";
+import { Clearable } from "../Clearable";
+import { Editable } from "../Editable";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+import { Selectable } from "./Selected";
+export declare class SmoothlyInputRadio implements Input, Clearable, Editable, ComponentWillLoad {
+  private active?;
+  private valueReceivedOnLoad;
+  private listener;
+  initialValue?: Selectable;
+  changed: boolean;
+  value: any;
+  looks: Looks;
+  clearable?: boolean;
+  readonly: boolean;
+  name: string;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInput: EventEmitter<Data>;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>;
+  componentWillLoad(): void | Promise<void>;
+  componentDidLoad(): void | Promise<void>;
+  handleRegister(event: CustomEvent<(name: string) => void>): void;
+  SmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputRadio) => void>): void;
+  smoothlyRadioInputHandler(event: CustomEvent<Selectable>): void;
+  listen(property: "changed", listener: (parent: Editable) => Promise<void>): Promise<void>;
+  clear(): Promise<void>;
+  edit(editable: boolean): Promise<void>;
+  reset(): Promise<void>;
+  valueChanged(): void;
+  watchingReadonly(): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/input/radio/item/index.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter, VNode } from "../../../../stencil-public-runtime";
+import { Looks } from "../../Looks";
+import { Selectable } from "../Selected";
+export declare class SmoothlyInputRadioItem {
+  element: HTMLInputElement;
+  value: any;
+  selected: boolean;
+  looks: Looks;
+  name: string;
+  smoothlySelect: EventEmitter<Selectable>;
+  smoothlyRadioButtonRegister: EventEmitter<(name: string) => void>;
+  componentWillLoad(): void | Promise<void>;
+  inputHandler(): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/input/range/index.d.ts

@@ -0,0 +1,24 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../../stencil-public-runtime";
+import { Color } from "../../../model";
+import { Clearable } from "../Clearable";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class SmoothlyInputRange implements Input, Clearable, ComponentWillLoad {
+  value: number | undefined;
+  looks: Looks;
+  min: number;
+  max: number;
+  name: string;
+  labelText?: string;
+  step: number | "any";
+  outputSide: "right" | "left";
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  smoothlyInput: EventEmitter<Record<string, any>>;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): void | Promise<void>;
+  SmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputRange) => void>): void;
+  clear(): Promise<void>;
+  valueChanged(): void;
+  inputHandler(event: Event): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/input/reset/index.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Color, Fill } from "../../../model";
+export declare class SmoothlyInputReset {
+  readonlyAtLoad: boolean;
+  color?: Color;
+  expand?: "block" | "full";
+  fill?: Fill;
+  disabled: boolean;
+  size: "small" | "large" | "icon" | "flexible";
+  shape?: "rounded";
+  display: boolean;
+  type: "form" | "input";
+  private parent?;
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): Promise<void>;
+  clickHandler(): void;
+  render(): any;
+}

package/dist/types/components/input/select/index.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Color, Data } from "../../../model";
+import { Input } from "../Input";
+import { Looks } from "../Looks";
+export declare class SmoothlyInputSelect implements Input {
+  element: HTMLSmoothlyInputSelectElement;
+  name: string;
+  color?: Color;
+  looks: Looks;
+  type?: "icon";
+  showSelected?: boolean;
+  initialPrompt?: string;
+  initialValue?: unknown;
+  menuHeight?: `${number}${"items" | "rem" | "px" | "vh"}`;
+  opened: boolean;
+  items: HTMLSmoothlyItemElement[];
+  selectedElement?: HTMLSmoothlyItemElement;
+  missing: boolean;
+  mainElement?: HTMLElement;
+  filter: string;
+  smoothlySelect: EventEmitter<unknown>;
+  smoothlyInput: EventEmitter<Data>;
+  aside?: HTMLElement;
+  smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>;
+  componentWillLoad(): void;
+  reset(): Promise<void>;
+  onSelectedChange(value: HTMLSmoothlyItemElement | undefined, old: HTMLSmoothlyItemElement | undefined): void;
+  onFilterChange(value: string): Promise<void>;
+  onClick(event: UIEvent): void;
+  onItemSelect(event: Event): void;
+  onClosed(): void;
+  onKeyDown(event: KeyboardEvent): void;
+  private move;
+  render(): any;
+  componentDidRender(): void;
+}

package/dist/types/components/input/submit/index.d.ts

@@ -0,0 +1,17 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../../stencil-public-runtime";
+import { Color, Fill } from "../../../model";
+export declare class SmoothlyInputSubmit implements ComponentWillLoad {
+  private parent?;
+  color?: Color;
+  expand?: "block" | "full";
+  fill?: Fill;
+  disabled: boolean;
+  display: boolean;
+  shape?: "rounded";
+  type: "link" | "button";
+  size: "flexible" | "small" | "large" | "icon";
+  smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>;
+  componentWillLoad(): void;
+  clickHandler(): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/item/index.d.ts

@@ -4,7 +4,7 @@ export declare class Item {
   value: any;
   selected: boolean;
   marked: boolean;
-  itemSelected: EventEmitter<void>;
+  smoothlyItemSelect: EventEmitter<void>;
   onSelectedChanged(value: boolean, old: boolean): void;
   onClick(): void;
   componentDidLoad(): void;

package/dist/types/components/label/index.d.ts

@@ -0,0 +1,6 @@
+export declare class SmoothlyLabel {
+  hue: number;
+  description: string;
+  shape: "rectangle" | "rounded";
+  render(): any;
+}

package/dist/types/components/lazy/index.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent, JSX, VNode } from "../../stencil-public-runtime";
+export declare class SmoothlyLazy {
+  show: boolean;
+  content?: JSX.Element | FunctionalComponent;
+  loadMoreHandler(event: CustomEvent<string>): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/load-more/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentWillLoad, EventEmitter, VNode } from "../../stencil-public-runtime";
+export declare class LoadMore implements ComponentWillLoad {
+  element: HTMLSmoothlyLoadMoreElement;
+  offset: string;
+  name: string;
+  multiple: boolean;
+  smoothlyLoadMore: EventEmitter<string>;
+  componentWillLoad(): void;
+  observationHandler(observer: IntersectionObserver, entries: IntersectionObserverEntry[]): void;
+  render(): VNode | VNode[];
+}

package/dist/types/components/notification/index.d.ts

@@ -2,10 +2,12 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { Notice, Trigger } from "../../model";
 export declare class Notification {
   notice: Notice;
+  closable: boolean;
+  icon: boolean;
   tick: {};
   remove: EventEmitter<Notice>;
   private listener;
-  private get color();
+  private get properties();
   onTrigger(event: CustomEvent<Trigger>): void;
   onUpdatedNotice(newValue: Notice, oldValue?: Notice): void;
   componentDidLoad(): void;

package/dist/types/components/picker/demo/index.d.ts

@@ -0,0 +1,22 @@
+import { Data } from "../../../model";
+import { Controls } from "../menu";
+export declare class SmoothlyPickerDemo {
+  private controls?;
+  private users;
+  counter: number;
+  data: {
+    message: string;
+    emails: {
+      value: string;
+    }[];
+    options: {
+      value: string;
+    }[];
+  };
+  change?: SmoothlyPickerDemo["data"];
+  inputHandler(event: CustomEvent<Data>): void;
+  submitHandler(event: CustomEvent<Data>): void;
+  clickHandler(): void;
+  loadedHandler(event: CustomEvent<Controls>): void;
+  render(): any;
+}

package/dist/types/components/picker/index.d.ts

@@ -1,51 +1,39 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { Notice, Option } from "../../model";
-export declare class SmoothlyPicker {
-  private inputElement;
-  private keepFocusOnReRender;
-  private menuElement;
-  element: HTMLElement;
-  isOpen: boolean;
-  empty: boolean;
-  disabled: boolean;
-  readonly: boolean;
-  maxMenuHeight: string;
-  maxHeight: string;
-  emptyMenuLabel: string;
-  multiple: boolean;
+import { Clearable } from "../input/Clearable";
+import { Input } from "../input/Input";
+import { Looks } from "../input/Looks";
+import { Controls } from "./menu";
+export declare class SmoothlyPicker implements Clearable, Input {
+  element: HTMLSmoothlyPickerElement;
+  looks: Looks;
+  name: string;
+  open: boolean;
   mutable: boolean;
-  optionStyle: any;
-  options: (Option & {
-    checked?: boolean;
-  })[];
-  labelSetting: "hide" | "default";
-  label: string;
-  selections: Option[];
-  selectNoneName: string;
-  selectAllName: string;
-  selectionName: string;
-  newOptionLabel: string;
-  valueValidator: (value: any) => [boolean, Notice | undefined];
-  menuClose: EventEmitter<Option[]>;
-  notice: EventEmitter<Notice>;
-  isOpenChangeHandler(): void;
-  componentDidRender(): void;
-  optionSelectHandler(event: CustomEvent<Option>): void;
-  optionAddHandler(event: CustomEvent<{
-    name: string;
-    value: string;
+  multiple: boolean;
+  readonly: boolean;
+  validator?: (value: string) => boolean | {
+    result: boolean;
+    notice: Notice;
+  };
+  selected: Map<any, Option>;
+  display: Node[];
+  smoothlyPickerLoaded: EventEmitter<Controls>;
+  smoothlyInput: EventEmitter<Record<string, any | any[]>>;
+  smoothlyChange: EventEmitter<Record<string, any | any[]>>;
+  smoothlyInputLooks: EventEmitter<(looks: Looks) => void>;
+  private controls?;
+  componentWillLoad(): void;
+  selectedChanged(): void;
+  componentDidLoad(): void;
+  smoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void;
+  menuLoadedHandler(event: CustomEvent<Controls & {
+    synced: () => boolean;
   }>): void;
-  emptyHandler(event: CustomEvent<boolean>): void;
-  toggle(option: Option): void;
-  toggleAll(): void;
-  unselect(selection: Option): void;
-  select(selection: Option): void;
-  toggleHighlighted(): void;
-  highlightDefault(): void;
-  filterOptions(): void;
-  onInput(event: UIEvent): void;
-  onKeyDown(event: KeyboardEvent): void;
-  onClick(): void;
-  onBlur(): void;
+  optionLoadedHandler(event: CustomEvent<Option>): void;
+  optionChangeHandler(event: CustomEvent<Option>): void;
+  clickHandler(event: MouseEvent): void;
+  focusHandler(event: FocusEvent): void;
+  clear(): Promise<void>;
   render(): any;
 }