@destyler/combobox 0.0.5 → 0.0.7-beta.1

package/dist/index.mjs

@@ -1,15 +1,1470 @@
-export { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, comboboxAnchorProps, comboboxArrowProps, comboboxCancelProps, comboboxContentProps, comboboxEmptyProps, comboboxGroupProps, comboboxInputProps, comboboxItemIndicatorProps, comboboxItemProps, comboboxLabelProps, comboboxPortalProps, comboboxRootProps, comboboxSeparatorProps, comboboxTriggerProps, comboboxViewportProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/popper';
-import '@destyler/popper/component';
-import '@destyler/shared';
-import '@destyler/visually-hidden/component';
-import '@destyler/collection/composition';
-import '@destyler/collection';
-import '@destyler/dismissable-layer';
-import '@destyler/dismissable-layer/component';
-import '@destyler/directives';
-import '@destyler/presence';
-import '@destyler/teleport';
+import { createAnatomy } from '@zag-js/anatomy';
+import { ListCollection } from '@zag-js/collection';
+import { ref, createMachine, guards } from '@zag-js/core';
+import { getEventKey, isLeftClick, isContextMenuEvent, clickIfLink } from '@zag-js/dom-event';
+import { createScope, query, dataAttr, ariaAttr, isComposingEvent, isDownloadingEvent, isOpeningInNewTab, observeChildren, raf, observeAttributes, scrollIntoView } from '@zag-js/dom-query';
+import { getPlacementStyles, getPlacement } from '@zag-js/popper';
+import { ariaHidden } from '@zag-js/aria-hidden';
+import { trackDismissableElement } from '@zag-js/dismissable';
+import { compact, isBoolean, match, isArray, isEqual, addOrRemove } from '@zag-js/utils';
+
+const anatomy = createAnatomy("combobox").parts(
+  "root",
+  "clearTrigger",
+  "content",
+  "control",
+  "input",
+  "item",
+  "itemGroup",
+  "itemGroupLabel",
+  "itemIndicator",
+  "itemText",
+  "label",
+  "list",
+  "positioner",
+  "trigger"
+);
+const parts = anatomy.build();
+
+function collection(options) {
+  return ref(new ListCollection(options));
+}
+collection.empty = () => {
+  return ref(new ListCollection({ items: [] }));
+};
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
+  getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
+  getInputId: (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
+  getContentId: (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
+  getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
+  getItemGroupId: (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`,
+  getItemGroupLabelId: (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`,
+  getItemId: (ctx, id) => ctx.ids?.item?.(id) ?? `combobox:${ctx.id}:option:${id}`,
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
+  getHighlightedItemEl: (ctx) => {
+    const value = ctx.highlightedValue;
+    if (value == null)
+      return;
+    const selector = `[role=option][data-value="${CSS.escape(value)}"`;
+    return query(dom.getContentEl(ctx), selector);
+  },
+  focusInputEl: (ctx) => {
+    const inputEl = dom.getInputEl(ctx);
+    if (dom.isActiveElement(ctx, inputEl))
+      return;
+    inputEl?.focus({ preventScroll: true });
+  },
+  focusTriggerEl: (ctx) => {
+    const triggerEl = dom.getTriggerEl(ctx);
+    if (dom.isActiveElement(ctx, triggerEl))
+      return;
+    triggerEl?.focus({ preventScroll: true });
+  }
+});
+
+function connect(state, send, normalize) {
+  const translations = state.context.translations;
+  const collection = state.context.collection;
+  const disabled = state.context.disabled;
+  const interactive = state.context.isInteractive;
+  const invalid = state.context.invalid;
+  const readOnly = state.context.readOnly;
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
+  const composite = state.context.composite;
+  const highlightedValue = state.context.highlightedValue;
+  const popperStyles = getPlacementStyles({
+    ...state.context.positioning,
+    placement: state.context.currentPlacement
+  });
+  function getItemState(props) {
+    const disabled2 = collection.getItemDisabled(props.item);
+    const value = collection.getItemValue(props.item);
+    return {
+      value,
+      disabled: Boolean(disabled2 || disabled2),
+      highlighted: highlightedValue === value,
+      selected: state.context.value.includes(value)
+    };
+  }
+  return {
+    focused,
+    open,
+    inputValue: state.context.inputValue,
+    highlightedValue,
+    highlightedItem: state.context.highlightedItem,
+    value: state.context.value,
+    valueAsString: state.context.valueAsString,
+    hasSelectedItems: state.context.hasSelectedItems,
+    selectedItems: state.context.selectedItems,
+    collection: state.context.collection,
+    multiple: !!state.context.multiple,
+    disabled: !!disabled,
+    syncSelectedItems() {
+      send({ type: "SELECTED_ITEMS.SYNC" });
+    },
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options });
+    },
+    setCollection(collection2) {
+      send({ type: "COLLECTION.SET", value: collection2 });
+    },
+    setHighlightValue(value) {
+      send({ type: "HIGHLIGHTED_VALUE.SET", value });
+    },
+    selectValue(value) {
+      send({ type: "ITEM.SELECT", value });
+    },
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    setInputValue(value) {
+      send({ type: "INPUT_VALUE.SET", value });
+    },
+    clearValue(value) {
+      if (value != null) {
+        send({ type: "ITEM.CLEAR", value });
+      } else {
+        send("VALUE.CLEAR");
+      }
+    },
+    focus() {
+      dom.getInputEl(state.context)?.focus();
+    },
+    setOpen(nextOpen) {
+      if (nextOpen === open)
+        return;
+      send(nextOpen ? "OPEN" : "CLOSE");
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "dir": state.context.dir,
+        "id": dom.getRootId(state.context),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        "dir": state.context.dir,
+        "htmlFor": dom.getInputId(state.context),
+        "id": dom.getLabelId(state.context),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        onClick(event) {
+          if (composite)
+            return;
+          event.preventDefault();
+          dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "dir": state.context.dir,
+        "id": dom.getControlId(state.context),
+        "data-state": open ? "open" : "closed",
+        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid)
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: state.context.dir,
+        id: dom.getPositionerId(state.context),
+        style: popperStyles.floating
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        "dir": state.context.dir,
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        "name": state.context.name,
+        "form": state.context.form,
+        "disabled": disabled,
+        "autoFocus": state.context.autoFocus,
+        "required": state.context.required,
+        "autoComplete": "off",
+        "autoCorrect": "off",
+        "autoCapitalize": "none",
+        "spellCheck": "false",
+        "readOnly": readOnly,
+        "placeholder": state.context.placeholder,
+        "id": dom.getInputId(state.context),
+        "type": "text",
+        "role": "combobox",
+        "defaultValue": state.context.inputValue,
+        "aria-autocomplete": state.context.autoComplete ? "both" : "list",
+        "aria-controls": dom.getContentId(state.context),
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-activedescendant": highlightedValue ? dom.getItemId(state.context, highlightedValue) : void 0,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!state.context.openOnClick)
+            return;
+          if (!interactive)
+            return;
+          send("INPUT.CLICK");
+        },
+        onFocus() {
+          if (disabled)
+            return;
+          send("INPUT.FOCUS");
+        },
+        onBlur() {
+          if (disabled)
+            return;
+          send("INPUT.BLUR");
+        },
+        onChange(event) {
+          send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          if (event.ctrlKey || event.shiftKey || isComposingEvent(event))
+            return;
+          const openOnKeyPress = state.context.openOnKeyPress;
+          const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+          const keypress = true;
+          const keymap = {
+            ArrowDown(event2) {
+              if (!openOnKeyPress && !open)
+                return;
+              send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
+              event2.preventDefault();
+            },
+            ArrowUp() {
+              if (!openOnKeyPress && !open)
+                return;
+              send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
+              event.preventDefault();
+            },
+            Home(event2) {
+              if (isModifierKey)
+                return;
+              send({ type: "INPUT.HOME", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+            },
+            End(event2) {
+              if (isModifierKey)
+                return;
+              send({ type: "INPUT.END", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+            },
+            Enter(event2) {
+              send({ type: "INPUT.ENTER", keypress });
+              if (open) {
+                event2.preventDefault();
+              }
+              const itemEl = dom.getHighlightedItemEl(state.context);
+              clickIfLink(itemEl);
+            },
+            Escape() {
+              send({ type: "INPUT.ESCAPE", keypress });
+              event.preventDefault();
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keymap[key];
+          exec?.(event);
+        }
+      });
+    },
+    getTriggerProps(props = {}) {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getTriggerId(state.context),
+        "aria-haspopup": composite ? "listbox" : "dialog",
+        "type": "button",
+        "tabIndex": props.focusable ? void 0 : -1,
+        "aria-label": translations.triggerLabel,
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": open ? dom.getContentId(state.context) : void 0,
+        disabled,
+        "data-invalid": dataAttr(invalid),
+        "data-focusable": dataAttr(props.focusable),
+        "data-readonly": dataAttr(readOnly),
+        "data-disabled": dataAttr(disabled),
+        onFocus() {
+          if (!props.focusable)
+            return;
+          send({ type: "INPUT.FOCUS", src: "trigger" });
+        },
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          if (!isLeftClick(event))
+            return;
+          send("TRIGGER.CLICK");
+        },
+        onPointerDown(event) {
+          if (!interactive)
+            return;
+          if (event.pointerType === "touch")
+            return;
+          event.preventDefault();
+          queueMicrotask(() => {
+            dom.getInputEl(state.context)?.focus({ preventScroll: true });
+          });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (composite)
+            return;
+          const keyMap = {
+            ArrowDown() {
+              send({ type: "INPUT.ARROW_DOWN", src: "trigger" });
+            },
+            ArrowUp() {
+              send({ type: "INPUT.ARROW_UP", src: "trigger" });
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        "dir": state.context.dir,
+        "id": dom.getContentId(state.context),
+        "role": !composite ? "dialog" : "listbox",
+        "tabIndex": -1,
+        "hidden": !open,
+        "data-state": open ? "open" : "closed",
+        "data-placement": state.context.currentPlacement,
+        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-multiselectable": state.context.multiple && composite ? true : void 0,
+        onPointerDown(event) {
+          event.preventDefault();
+        }
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        "role": !composite ? "listbox" : void 0,
+        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-multiselectable": state.context.multiple && !composite ? true : void 0
+      });
+    },
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getClearTriggerId(state.context),
+        "type": "button",
+        "tabIndex": -1,
+        "disabled": disabled,
+        "data-invalid": dataAttr(invalid),
+        "aria-label": translations.clearTriggerLabel,
+        "aria-controls": dom.getInputId(state.context),
+        "hidden": !state.context.value.length,
+        onPointerDown(event) {
+          event.preventDefault();
+        },
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          send({ type: "VALUE.CLEAR", src: "clear-trigger" });
+        }
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const value = itemState.value;
+      return normalize.element({
+        ...parts.item.attrs,
+        "dir": state.context.dir,
+        "id": dom.getItemId(state.context, value),
+        "role": "option",
+        "tabIndex": -1,
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "aria-selected": ariaAttr(itemState.highlighted),
+        "aria-disabled": ariaAttr(itemState.disabled),
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-value": itemState.value,
+        onPointerMove() {
+          if (itemState.disabled)
+            return;
+          if (itemState.highlighted)
+            return;
+          send({ type: "ITEM.POINTER_MOVE", value });
+        },
+        onPointerLeave() {
+          if (props.persistFocus)
+            return;
+          if (itemState.disabled)
+            return;
+          const mouseMoved = state.previousEvent.type.includes("POINTER");
+          if (!mouseMoved)
+            return;
+          send({ type: "ITEM.POINTER_LEAVE", value });
+        },
+        onClick(event) {
+          if (isDownloadingEvent(event))
+            return;
+          if (isOpeningInNewTab(event))
+            return;
+          if (isContextMenuEvent(event))
+            return;
+          if (itemState.disabled)
+            return;
+          send({ type: "ITEM.CLICK", src: "click", value });
+        }
+      });
+    },
+    getItemTextProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.itemText.attrs,
+        "dir": state.context.dir,
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted)
+      });
+    },
+    getItemIndicatorProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        "aria-hidden": true,
+        ...parts.itemIndicator.attrs,
+        "dir": state.context.dir,
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "hidden": !itemState.selected
+      });
+    },
+    getItemGroupProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.itemGroup.attrs,
+        "dir": state.context.dir,
+        "id": dom.getItemGroupId(state.context, id),
+        "aria-labelledby": dom.getItemGroupLabelId(state.context, id)
+      });
+    },
+    getItemGroupLabelProps(props) {
+      const { htmlFor } = props;
+      return normalize.element({
+        ...parts.itemGroupLabel.attrs,
+        dir: state.context.dir,
+        id: dom.getItemGroupLabelId(state.context, htmlFor),
+        role: "group"
+      });
+    }
+  };
+}
+
+const { and, not } = guards;
+function getInputValue(ctx) {
+  return match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: ""
+  });
+}
+const sync = {
+  valueChange: (ctx) => {
+    const prevSelectedItems = ctx.selectedItems;
+    ctx.selectedItems = ctx.value.map((v) => {
+      const foundItem = prevSelectedItems.find((item) => ctx.collection.getItemValue(item) === v);
+      if (foundItem)
+        return foundItem;
+      return ctx.collection.find(v);
+    });
+    ctx.valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
+  },
+  highlightChange: (ctx) => {
+    ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue);
+  }
+};
+const invoke = {
+  valueChange: (ctx) => {
+    sync.valueChange(ctx);
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+      items: Array.from(ctx.selectedItems)
+    });
+  },
+  highlightChange: (ctx) => {
+    sync.highlightChange(ctx);
+    ctx.onHighlightChange?.({
+      highlightedValue: ctx.highlightedValue,
+      highlightedItem: ctx.highlightedItem
+    });
+  },
+  inputChange: (ctx) => {
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
+  }
+};
+const set = {
+  value: (ctx, value, force = false) => {
+    if (isEqual(ctx.value, value))
+      return;
+    if (value == null && !force)
+      return;
+    if (value == null && force) {
+      ctx.value = [];
+      invoke.valueChange(ctx);
+      return;
+    }
+    if (isArray(value)) {
+      ctx.value = value;
+    } else if (value != null) {
+      ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
+    }
+    invoke.valueChange(ctx);
+  },
+  highlightedValue: (ctx, value, force = false) => {
+    if (isEqual(ctx.highlightedValue, value))
+      return;
+    if (!value && !force)
+      return;
+    ctx.highlightedValue = value || null;
+    invoke.highlightChange(ctx);
+  },
+  inputValue: (ctx, value) => {
+    if (isEqual(ctx.inputValue, value))
+      return;
+    ctx.inputValue = value;
+    invoke.inputChange(ctx);
+  }
+};
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "combobox",
+      initial: ctx.open ? "suggesting" : "idle",
+      context: {
+        loopFocus: true,
+        openOnClick: false,
+        value: [],
+        highlightedValue: null,
+        inputValue: "",
+        allowCustomValue: false,
+        closeOnSelect: !ctx.multiple,
+        inputBehavior: "none",
+        selectionBehavior: "replace",
+        openOnKeyPress: true,
+        openOnChange: true,
+        composite: true,
+        readOnly: false,
+        disabled: false,
+        ...ctx,
+        highlightedItem: null,
+        selectedItems: [],
+        valueAsString: "",
+        collection: ctx.collection ?? collection.empty(),
+        positioning: {
+          placement: "bottom",
+          sameWidth: true,
+          ...ctx.positioning
+        },
+        translations: {
+          triggerLabel: "Toggle suggestions",
+          clearTriggerLabel: "Clear value",
+          ...ctx.translations
+        }
+      },
+      created: ["syncInitialValues", "syncSelectionBehavior"],
+      computed: {
+        isInputValueEmpty: (ctx2) => ctx2.inputValue.length === 0,
+        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.disabled),
+        autoComplete: (ctx2) => ctx2.inputBehavior === "autocomplete",
+        autoHighlight: (ctx2) => ctx2.inputBehavior === "autohighlight",
+        hasSelectedItems: (ctx2) => ctx2.value.length > 0
+      },
+      watch: {
+        value: ["syncSelectedItems"],
+        inputValue: ["syncInputValue"],
+        highlightedValue: ["syncHighlightedItem", "autofillInputValue"],
+        multiple: ["syncSelectionBehavior"],
+        open: ["toggleVisibility"]
+      },
+      on: {
+        "SELECTED_ITEMS.SYNC": {
+          actions: ["syncSelectedItems"]
+        },
+        "HIGHLIGHTED_VALUE.SET": {
+          actions: ["setHighlightedItem"]
+        },
+        "ITEM.SELECT": {
+          actions: ["selectItem"]
+        },
+        "ITEM.CLEAR": {
+          actions: ["clearItem"]
+        },
+        "VALUE.SET": {
+          actions: ["setSelectedItems"]
+        },
+        "INPUT_VALUE.SET": {
+          actions: "setInputValue"
+        },
+        "COLLECTION.SET": {
+          actions: ["setCollection"]
+        },
+        "POSITIONING.SET": {
+          actions: ["reposition"]
+        }
+      },
+      states: {
+        idle: {
+          tags: ["idle", "closed"],
+          entry: ["scrollContentToTop", "clearHighlightedItem"],
+          on: {
+            "CONTROLLED.OPEN": {
+              target: "interacting"
+            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.FOCUS": {
+              target: "focused"
+            },
+            "OPEN": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              target: "focused",
+              actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
+            }
+          }
+        },
+        focused: {
+          tags: ["focused", "closed"],
+          entry: ["scrollContentToTop", "clearHighlightedItem"],
+          on: {
+            "CONTROLLED.OPEN": [
+              {
+                guard: "isChangeEvent",
+                target: "suggesting"
+              },
+              {
+                target: "interacting"
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: and("isOpenControlled", "openOnChange"),
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
+              },
+              {
+                guard: "openOnChange",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
+              },
+              {
+                actions: "setInputValue"
+              }
+            ],
+            "LAYER.INTERACT_OUTSIDE": {
+              target: "idle"
+            },
+            "INPUT.ESCAPE": {
+              guard: and("isCustomValue", not("allowCustomValue")),
+              actions: "revertInputValue"
+            },
+            "INPUT.BLUR": {
+              target: "idle"
+            },
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_DOWN": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"]
+              },
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              // == group 1 ==
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: "invokeOnOpen"
+              },
+              {
+                guard: "autoComplete",
+                target: "interacting",
+                actions: "invokeOnOpen"
+              },
+              // == group 2 ==
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "OPEN": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              actions: ["clearInputValue", "clearSelectedItems"]
+            }
+          }
+        },
+        interacting: {
+          tags: ["open", "focused"],
+          entry: ["setInitialFocus"],
+          activities: ["scrollToHighlightedItem", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
+          on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+                actions: ["setFinalFocus"]
+              },
+              {
+                target: "idle"
+              }
+            ],
+            "INPUT.HOME": {
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.END": {
+              actions: ["highlightLastItem"]
+            },
+            "INPUT.ARROW_DOWN": [
+              {
+                guard: and("autoComplete", "isLastItemHighlighted"),
+                actions: ["clearHighlightedItem", "scrollContentToTop"]
+              },
+              {
+                actions: ["highlightNextItem"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              {
+                guard: and("autoComplete", "isFirstItemHighlighted"),
+                actions: "clearHighlightedItem"
+              },
+              {
+                actions: "highlightPrevItem"
+              }
+            ],
+            "INPUT.ENTER": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+                target: "focused",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: "autoComplete",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen"]
+              },
+              {
+                target: "suggesting",
+                actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              actions: ["setHighlightedItem"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedItem"]
+            },
+            "ITEM.CLICK": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectItem"]
+              }
+            ],
+            "LAYER.ESCAPE": [
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "autoComplete",
+                target: "focused",
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
+            "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("allowCustomValue")),
+                target: "idle",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "idle",
+                actions: "invokeOnClose"
+              }
+            ],
+            "CLOSE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
+              }
+            ]
+          }
+        },
+        suggesting: {
+          tags: ["open", "focused"],
+          activities: [
+            "trackDismissableLayer",
+            "scrollToHighlightedItem",
+            "computePlacement",
+            "trackChildNodes",
+            "hideOtherElements"
+          ],
+          entry: ["setInitialFocus"],
+          on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused",
+                actions: ["setFinalFocus"]
+              },
+              {
+                target: "idle"
+              }
+            ],
+            "CHILDREN_CHANGE": {
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.ARROW_DOWN": {
+              target: "interacting",
+              actions: ["highlightNextItem"]
+            },
+            "INPUT.ARROW_UP": {
+              target: "interacting",
+              actions: ["highlightPrevItem"]
+            },
+            "INPUT.HOME": {
+              target: "interacting",
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.END": {
+              target: "interacting",
+              actions: ["highlightLastItem"]
+            },
+            "INPUT.ENTER": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
+                target: "focused",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: "autoHighlight",
+                actions: ["setInputValue"]
+              },
+              {
+                actions: ["setInputValue"]
+              }
+            ],
+            "LAYER.ESCAPE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              target: "interacting",
+              actions: ["setHighlightedItem"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedItem"]
+            },
+            "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              {
+                guard: and("isCustomValue", not("allowCustomValue")),
+                target: "idle",
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "ITEM.CLICK": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
+              },
+              {
+                actions: ["selectItem"]
+              }
+            ],
+            "CLOSE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isInputValueEmpty: (ctx2) => ctx2.isInputValueEmpty,
+        autoComplete: (ctx2) => ctx2.autoComplete && !ctx2.multiple,
+        autoHighlight: (ctx2) => ctx2.autoHighlight,
+        isFirstItemHighlighted: (ctx2) => ctx2.collection.firstValue === ctx2.highlightedValue,
+        isLastItemHighlighted: (ctx2) => ctx2.collection.lastValue === ctx2.highlightedValue,
+        isCustomValue: (ctx2) => ctx2.inputValue !== ctx2.valueAsString,
+        allowCustomValue: (ctx2) => !!ctx2.allowCustomValue,
+        hasHighlightedItem: (ctx2) => ctx2.highlightedValue != null,
+        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
+        openOnChange: (ctx2, evt) => {
+          if (isBoolean(ctx2.openOnChange))
+            return ctx2.openOnChange;
+          return !!ctx2.openOnChange?.({ inputValue: evt.value });
+        },
+        restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
+        isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
+      },
+      activities: {
+        trackDismissableLayer(ctx2, _evt, { send }) {
+          if (ctx2.disableLayer)
+            return;
+          const contentEl = () => dom.getContentEl(ctx2);
+          return trackDismissableElement(contentEl, {
+            defer: true,
+            exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
+            onFocusOutside: ctx2.onFocusOutside,
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onInteractOutside: ctx2.onInteractOutside,
+            onEscapeKeyDown(event) {
+              event.preventDefault();
+              event.stopPropagation();
+              send("LAYER.ESCAPE");
+            },
+            onDismiss() {
+              send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false });
+            }
+          });
+        },
+        hideOtherElements(ctx2) {
+          return ariaHidden([
+            dom.getInputEl(ctx2),
+            dom.getContentEl(ctx2),
+            dom.getTriggerEl(ctx2),
+            dom.getClearTriggerEl(ctx2)
+          ]);
+        },
+        computePlacement(ctx2) {
+          const controlEl = () => dom.getControlEl(ctx2);
+          const positionerEl = () => dom.getPositionerEl(ctx2);
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          return getPlacement(controlEl, positionerEl, {
+            ...ctx2.positioning,
+            defer: true,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        // in event the options are fetched (async), we still want to auto-highlight the first option
+        trackChildNodes(ctx2, _evt, { send }) {
+          if (!ctx2.autoHighlight)
+            return;
+          const exec = () => send("CHILDREN_CHANGE");
+          const contentEl = () => dom.getContentEl(ctx2);
+          return observeChildren(contentEl, {
+            callback: exec,
+            defer: true
+          });
+        },
+        scrollToHighlightedItem(ctx2, _evt, { getState }) {
+          const inputEl = dom.getInputEl(ctx2);
+          const cleanups = [];
+          const exec = (immediate) => {
+            const state = getState();
+            const pointer = state.event.type.includes("POINTER");
+            if (pointer || !ctx2.highlightedValue)
+              return;
+            const itemEl = dom.getHighlightedItemEl(ctx2);
+            const contentEl = dom.getContentEl(ctx2);
+            if (ctx2.scrollToIndexFn) {
+              const highlightedIndex = ctx2.collection.indexOf(ctx2.highlightedValue);
+              ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
+              return;
+            }
+            const rafCleanup2 = raf(() => {
+              scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
+            });
+            cleanups.push(rafCleanup2);
+          };
+          const rafCleanup = raf(() => exec(true));
+          cleanups.push(rafCleanup);
+          const observerCleanup = observeAttributes(inputEl, {
+            attributes: ["aria-activedescendant"],
+            callback: () => exec(false)
+          });
+          cleanups.push(observerCleanup);
+          return () => {
+            cleanups.forEach((cleanup) => cleanup());
+          };
+        }
+      },
+      actions: {
+        reposition(ctx2, evt) {
+          const controlEl = () => dom.getControlEl(ctx2);
+          const positionerEl = () => dom.getPositionerEl(ctx2);
+          getPlacement(controlEl, positionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            }
+          });
+        },
+        setHighlightedItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          set.highlightedValue(ctx2, evt.value);
+        },
+        clearHighlightedItem(ctx2) {
+          set.highlightedValue(ctx2, null, true);
+        },
+        selectHighlightedItem(ctx2) {
+          set.value(ctx2, ctx2.highlightedValue);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        selectItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        clearItem(ctx2, evt) {
+          if (evt.value == null)
+            return;
+          const value = ctx2.value.filter((v) => v !== evt.value);
+          set.value(ctx2, value);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            dom.focusInputEl(ctx2);
+          });
+        },
+        setFinalFocus(ctx2) {
+          raf(() => {
+            const triggerEl = dom.getTriggerEl(ctx2);
+            if (triggerEl?.dataset.focusable == null) {
+              dom.focusInputEl(ctx2);
+            } else {
+              dom.focusTriggerEl(ctx2);
+            }
+          });
+        },
+        syncInputValue(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          if (!inputEl)
+            return;
+          inputEl.value = ctx2.inputValue;
+          queueMicrotask(() => {
+            const { selectionStart, selectionEnd } = inputEl;
+            if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
+              return;
+            if (selectionStart !== 0)
+              return;
+            inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
+          });
+        },
+        setInputValue(ctx2, evt) {
+          set.inputValue(ctx2, evt.value);
+        },
+        clearInputValue(ctx2) {
+          set.inputValue(ctx2, "");
+        },
+        revertInputValue(ctx2) {
+          const inputValue = match(ctx2.selectionBehavior, {
+            replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
+            preserve: ctx2.inputValue,
+            clear: ""
+          });
+          set.inputValue(ctx2, inputValue);
+        },
+        syncInitialValues(ctx2) {
+          const selectedItems = ctx2.collection.findMany(ctx2.value);
+          const valueAsString = ctx2.collection.stringifyMany(ctx2.value);
+          ctx2.highlightedItem = ctx2.collection.find(ctx2.highlightedValue);
+          ctx2.selectedItems = selectedItems;
+          ctx2.valueAsString = valueAsString;
+          if (ctx2.inputValue.trim() || ctx2.multiple)
+            return;
+          ctx2.inputValue = match(ctx2.selectionBehavior, {
+            preserve: ctx2.inputValue || valueAsString,
+            replace: valueAsString,
+            clear: ""
+          });
+        },
+        syncSelectionBehavior(ctx2) {
+          if (ctx2.multiple) {
+            ctx2.selectionBehavior = "clear";
+          }
+        },
+        setSelectedItems(ctx2, evt) {
+          if (!isArray(evt.value))
+            return;
+          set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        clearSelectedItems(ctx2) {
+          set.value(ctx2, []);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        scrollContentToTop(ctx2) {
+          if (ctx2.scrollToIndexFn) {
+            ctx2.scrollToIndexFn({ index: 0, immediate: true });
+          } else {
+            const contentEl = dom.getContentEl(ctx2);
+            if (!contentEl)
+              return;
+            contentEl.scrollTop = 0;
+          }
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.({ open: true });
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.({ open: false });
+        },
+        highlightFirstItem(ctx2) {
+          raf(() => {
+            const value = ctx2.collection.firstValue;
+            set.highlightedValue(ctx2, value, true);
+          });
+        },
+        highlightFirstItemIfNeeded(ctx2) {
+          if (!ctx2.autoHighlight)
+            return;
+          raf(() => {
+            const value = ctx2.collection.firstValue;
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightLastItem(ctx2) {
+          raf(() => {
+            const value = ctx2.collection.lastValue;
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightNextItem(ctx2) {
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.getNextValue(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.firstValue;
+          } else {
+            value = ctx2.collection.firstValue;
+          }
+          set.highlightedValue(ctx2, value);
+        },
+        highlightPrevItem(ctx2) {
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.getPreviousValue(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.lastValue;
+          } else {
+            value = ctx2.collection.lastValue;
+          }
+          set.highlightedValue(ctx2, value);
+        },
+        highlightFirstSelectedItem(ctx2) {
+          raf(() => {
+            const [value] = ctx2.collection.sort(ctx2.value);
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightFirstOrSelectedItem(ctx2) {
+          raf(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.firstValue;
+            }
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        highlightLastOrSelectedItem(ctx2) {
+          raf(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.lastValue;
+            }
+            set.highlightedValue(ctx2, value);
+          });
+        },
+        autofillInputValue(ctx2, evt) {
+          const inputEl = dom.getInputEl(ctx2);
+          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
+            return;
+          const valueText = ctx2.collection.stringify(ctx2.highlightedValue);
+          raf(() => {
+            inputEl.value = valueText || ctx2.inputValue;
+          });
+        },
+        setCollection(ctx2, evt) {
+          ctx2.collection = evt.value;
+        },
+        syncSelectedItems(ctx2) {
+          sync.valueChange(ctx2);
+          set.inputValue(ctx2, getInputValue(ctx2));
+        },
+        syncHighlightedItem(ctx2) {
+          sync.highlightChange(ctx2);
+        },
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
+        }
+      }
+    }
+  );
+}
+
+export { anatomy, collection, connect, machine };