@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.2

package/dist/label/Label.svelte.d.ts

@@ -1,41 +1,37 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type LabelProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_LABEL_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare let DEFAULT_LABEL_TAG: "label";
+export type LabelProps<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = Props<TTag> & {
     passive?: boolean;
     htmlFor?: string;
-    children?: Snippet<[
-        {
-            disabled: boolean;
-        }
-    ]>;
 };
-declare const DEFAULT_LABEL_TAG: "label";
-export type LabelContext = {
-    labelledBy?: string;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
-};
-export declare const createLabelContext: () => LabelContext;
-export declare const getLabelContext: () => LabelContext | undefined;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
-    props(): LabelProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<{}> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;
+    } : {}) & {
+        passive?: boolean;
+        htmlFor?: string;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+    new <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
         $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
     }): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Label: $$IsomorphicComponent;
-type Label<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Label<TTag>>;
+type Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG> = InstanceType<typeof Label<TTag>>;
 export default Label;

package/dist/label/context.svelte.d.ts

@@ -0,0 +1,17 @@
+interface SharedData {
+    slot?: {};
+    name?: string;
+    props?: Record<string, any>;
+}
+export type LabelContext = {
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useLabelContext(): LabelContext;
+export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
+    readonly value: string | undefined;
+};
+export declare const useLabels: (options?: SharedData & {
+    inherit?: boolean;
+}) => LabelContext;
+export {};

package/dist/label/context.svelte.js

@@ -0,0 +1,56 @@
+import { getContext, setContext } from "svelte";
+export function useLabelContext() {
+    let context = getContext("LabelContext");
+    if (context === null) {
+        let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useLabelContext);
+        throw err;
+    }
+    return context;
+}
+export function useLabelledBy(alwaysAvailableIds) {
+    const context = getContext("LabelContext");
+    const value = $derived((alwaysAvailableIds?.length ?? 0) > 0
+        ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ")
+        : context?.value);
+    return {
+        get value() {
+            return value;
+        },
+    };
+}
+export const useLabels = (options = {}) => {
+    const { slot, name, props, inherit } = $derived(options);
+    const parentLabelledBy = useLabelledBy();
+    let labelIds = $state([]);
+    const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
+    const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : undefined);
+    const context = {
+        get slot() {
+            return slot;
+        },
+        get name() {
+            return name;
+        },
+        get props() {
+            return props;
+        },
+        get value() {
+            return value;
+        },
+        register(value) {
+            labelIds.push(value);
+            return () => {
+                const clone = labelIds.slice();
+                const idx = clone.indexOf(value);
+                if (idx !== -1)
+                    clone.splice(idx, 1);
+                labelIds = clone;
+                return labelIds;
+            };
+        },
+    };
+    setContext("LabelContext", context);
+    return context;
+};

package/dist/legend/Legend.svelte

@@ -1,7 +1,8 @@
-<script lang="ts" context="module"></script>
+<script lang="ts" module>import { Label } from "../index.js";
+const DEFAULT_LEGEND_TAG = Label;
+</script>
 
-<script lang="ts">import Label from "../label/Label.svelte";
-let { ...props } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">let { ...props } = $props();
 </script>
 
 <Label as="div" {...props} />

package/dist/legend/Legend.svelte.d.ts

@@ -1,18 +1,35 @@
-/// <reference types="svelte" />
-export type LegendProps = SvelteHTMLElements["div"];
-import type { SvelteHTMLElements } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
+import { type LabelProps } from "../index.js";
+import type { ElementType, Props } from "../utils/types.js";
+import type { Component } from "svelte";
+declare const DEFAULT_LEGEND_TAG: Component<LabelProps, any>;
+type LegendRenderPropArg = {};
+type LegendPropsWeControl = never;
+export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<TTag, LegendRenderPropArg, LegendPropsWeControl, {}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../index.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../index.js").PropsOf<TTag> ? { [P in T]: import("../index.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("../index.js").Children<LegendRenderPropArg> | undefined;
+        ref?: HTMLElement;
+    } & (true extends (import("../index.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../index.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
+        class?: import("../index.js").PropsOf<TTag>["class"] | ((bag: LegendRenderPropArg) => string) | undefined;
+    } : {});
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-declare const Legend: $$__sveltets_2_IsomorphicComponent<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, Record<string, any>, "">;
-type Legend = InstanceType<typeof Legend>;
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
+    } & ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Legend: $$IsomorphicComponent;
+type Legend<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = InstanceType<typeof Legend<TTag>>;
 export default Legend;

package/dist/listbox/Listbox.svelte

@@ -0,0 +1,448 @@
+<script lang="ts" module>import { useByComparator } from "../hooks/use-by-comparator.js";
+import { useControllable } from "../hooks/use-controllable.svelte.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
+import { match } from "../utils/match.js";
+import { useRef } from "../utils/ref.svelte.js";
+import { getContext, setContext } from "svelte";
+let DEFAULT_LISTBOX_TAG = "svelte:fragment";
+export var ListboxStates = /* @__PURE__ */ ((ListboxStates2) => {
+  ListboxStates2[ListboxStates2["Open"] = 0] = "Open";
+  ListboxStates2[ListboxStates2["Closed"] = 1] = "Closed";
+  return ListboxStates2;
+})(ListboxStates || {});
+export var ValueMode = /* @__PURE__ */ ((ValueMode2) => {
+  ValueMode2[ValueMode2["Single"] = 0] = "Single";
+  ValueMode2[ValueMode2["Multi"] = 1] = "Multi";
+  return ValueMode2;
+})(ValueMode || {});
+export var ActivationTrigger = /* @__PURE__ */ ((ActivationTrigger2) => {
+  ActivationTrigger2[ActivationTrigger2["Pointer"] = 0] = "Pointer";
+  ActivationTrigger2[ActivationTrigger2["Other"] = 1] = "Other";
+  return ActivationTrigger2;
+})(ActivationTrigger || {});
+export function useActions(component) {
+  const context = getContext("ListboxActionsContext");
+  if (!context) {
+    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useActions);
+    throw err;
+  }
+  return context;
+}
+export function useData(component) {
+  const context = getContext("ListboxData");
+  if (context === null) {
+    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
+    throw err;
+  }
+  return context;
+}
+</script>
+
+<script lang="ts" generics="TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG">import { disposables } from "../utils/disposables.js";
+import FormFields from "../internal/FormFields.svelte";
+import { createFloatingContext } from "../internal/floating.svelte.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import { useLabels } from "../label/context.svelte.js";
+import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+function adjustOrderedState(state, adjustment = (i) => i) {
+  let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
+  let sortedOptions = sortByDomNode(
+    adjustment(state.options.slice()),
+    (option) => option.dataRef.current.domRef.current
+  );
+  let adjustedActiveOptionIndex = currentActiveOption ? sortedOptions.indexOf(currentActiveOption) : null;
+  if (adjustedActiveOptionIndex === -1) {
+    adjustedActiveOptionIndex = null;
+  }
+  return {
+    options: sortedOptions,
+    activeOptionIndex: adjustedActiveOptionIndex
+  };
+}
+const stateReducer = (initialState) => {
+  let _state2 = $state(initialState);
+  return {
+    get listboxState() {
+      return _state2.listboxState;
+    },
+    get options() {
+      return _state2.options;
+    },
+    get searchQuery() {
+      return _state2.searchQuery;
+    },
+    get activeOptionIndex() {
+      return _state2.activeOptionIndex;
+    },
+    get activationTrigger() {
+      return _state2.activationTrigger;
+    },
+    get __demoMode() {
+      return _state2.__demoMode;
+    },
+    closeListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.activeOptionIndex = null;
+      _state2.listboxState = ListboxStates.Closed;
+      _state2.__demoMode = false;
+      return _state2;
+    },
+    openListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Open) return _state2;
+      let activeOptionIndex = _state2.activeOptionIndex;
+      let optionIdx = _state2.options.findIndex((option) => isSelected(option.dataRef.current.value));
+      if (optionIdx !== -1) {
+        activeOptionIndex = optionIdx;
+      }
+      _state2.listboxState = ListboxStates.Open;
+      _state2.activeOptionIndex = activeOptionIndex;
+      _state2.__demoMode = false;
+      return _state2;
+    },
+    goToOption(action) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.searchQuery = "";
+      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+      _state2.__demoMode = false;
+      if (action.focus === Focus.Nothing) {
+        _state2.activeOptionIndex = null;
+        return _state2;
+      }
+      if (action.focus === Focus.Specific) {
+        _state2.activeOptionIndex = _state2.options.findIndex((o) => o.id === action.id);
+        return _state2;
+      } else if (action.focus === Focus.Previous) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let previousOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (previousOptionIndex !== null) {
+            let previousDom = _state2.options[previousOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.previousElementSibling === previousDom?.current || // Or already the first element
+              previousDom.current?.previousElementSibling === null
+            ) {
+              _state2.activeOptionIndex = previousOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      } else if (action.focus === Focus.Next) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let nextOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (nextOptionIndex !== null) {
+            let nextDom = _state2.options[nextOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
+              nextDom.current?.nextElementSibling === null
+            ) {
+              _state2.activeOptionIndex = nextOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      }
+      let adjustedState = adjustOrderedState(_state2);
+      let activeOptionIndex = calculateActiveIndex(action, {
+        resolveItems: () => adjustedState.options,
+        resolveActiveIndex: () => adjustedState.activeOptionIndex,
+        resolveId: (option) => option.id,
+        resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = activeOptionIndex;
+      return _state2;
+    },
+    search(value2) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      let wasAlreadySearching = _state2.searchQuery !== "";
+      let offset = wasAlreadySearching ? 0 : 1;
+      let searchQuery = _state2.searchQuery + value2.toLowerCase();
+      let reOrderedOptions = _state2.activeOptionIndex !== null ? _state2.options.slice(_state2.activeOptionIndex + offset).concat(_state2.options.slice(0, _state2.activeOptionIndex + offset)) : _state2.options;
+      let matchingOption = reOrderedOptions.find(
+        (option) => !option.dataRef.current.disabled && option.dataRef.current.textValue?.startsWith(searchQuery)
+      );
+      let matchIdx = matchingOption ? _state2.options.indexOf(matchingOption) : -1;
+      if (matchIdx === -1 || matchIdx === _state2.activeOptionIndex) {
+        _state2.searchQuery = searchQuery;
+      } else {
+        _state2.searchQuery = searchQuery;
+        _state2.activeOptionIndex = matchIdx;
+        _state2.activationTrigger = ActivationTrigger.Other;
+      }
+      return _state2;
+    },
+    clearSearch() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      if (_state2.searchQuery === "") return _state2;
+      _state2.searchQuery = "";
+      return _state2;
+    },
+    registerOption(action) {
+      let option = { id: action.id, dataRef: action.dataRef };
+      let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
+      if (_state2.activeOptionIndex === null) {
+        if (isSelected(action.dataRef.current.value)) {
+          adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
+        }
+      }
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      return _state2;
+    },
+    unregisterOption(action) {
+      let adjustedState = adjustOrderedState(_state2, (options) => {
+        let idx = options.findIndex((a) => a.id === action.id);
+        if (idx !== -1) options.splice(idx, 1);
+        return options;
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      _state2.activationTrigger = ActivationTrigger.Other;
+      return _state2;
+    }
+  };
+};
+const listboxActionsContext = null;
+setContext("ListboxActionsContext", listboxActionsContext);
+const listboxDataContext = null;
+setContext("ListboxDataContext", listboxDataContext);
+let {
+  ref = $bindable(),
+  as,
+  value: controlledValue,
+  defaultValue,
+  form,
+  name,
+  onchange: controlledOnChange,
+  by,
+  invalid = false,
+  disabled: ownDisabled = false,
+  horizontal = false,
+  multiple = false,
+  __demoMode = false,
+  ...theirProps
+} = $props();
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+const orientation = horizontal ? "horizontal" : "vertical";
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledValue;
+    }
+  },
+  controlledOnChange,
+  defaultValue
+);
+const { value = multiple ? [] : void 0, onchange: theirOnChange } = $derived(controllable);
+const _state = stateReducer({
+  listboxState: __demoMode ? ListboxStates.Open : ListboxStates.Closed,
+  options: [],
+  searchQuery: "",
+  activeOptionIndex: null,
+  activationTrigger: ActivationTrigger.Other,
+  optionsVisible: false,
+  __demoMode
+});
+const optionsPropsRef = useRef({ static: false, hold: false });
+const buttonRef = useRef(null);
+const optionsRef = useRef(null);
+const listRef = useRef(/* @__PURE__ */ new Map());
+const compare = useByComparator(by);
+const isSelected = (compareValue) => match(data.mode, {
+  [ValueMode.Multi]: () => {
+    return value.some((option) => compare(option, compareValue));
+  },
+  [ValueMode.Single]: () => {
+    return compare(value, compareValue);
+  }
+});
+const data = {
+  get listboxState() {
+    return _state.listboxState;
+  },
+  get options() {
+    return _state.options;
+  },
+  get searchQuery() {
+    return _state.searchQuery;
+  },
+  get activeOptionIndex() {
+    return _state.activeOptionIndex;
+  },
+  get activationTrigger() {
+    return _state.activationTrigger;
+  },
+  get __demoMode() {
+    return _state.__demoMode;
+  },
+  get value() {
+    return value;
+  },
+  get disabled() {
+    return disabled;
+  },
+  get invalid() {
+    return invalid;
+  },
+  get mode() {
+    return multiple ? ValueMode.Multi : ValueMode.Single;
+  },
+  get orientation() {
+    return orientation;
+  },
+  compare,
+  isSelected,
+  get optionsPropsRef() {
+    return optionsPropsRef;
+  },
+  get buttonRef() {
+    return buttonRef;
+  },
+  get optionsRef() {
+    return optionsRef;
+  },
+  get listRef() {
+    return listRef;
+  }
+};
+setContext("ListboxDataContext", data);
+setContext("ListboxData", data);
+const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open);
+useOutsideClick({
+  get enabled() {
+    return outsideClickEnabled;
+  },
+  get containers() {
+    return [data.buttonRef, data.optionsRef];
+  },
+  cb: (event, target) => {
+    _state.closeListbox();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      data.buttonRef.current?.focus();
+    }
+  }
+});
+const slot = $derived({
+  open: _state.listboxState === ListboxStates.Open,
+  disabled,
+  invalid,
+  value
+});
+const selectOption = (id) => {
+  let option = _state.options.find((item) => item.id === id);
+  if (!option) return;
+};
+const selectActiveOption = () => {
+  if (_state.activeOptionIndex !== null) {
+    let { dataRef, id } = _state.options[_state.activeOptionIndex];
+    _state.goToOption({ focus: Focus.Specific, id });
+  }
+  7;
+};
+const d = disposables();
+const goToOption = (focus, id, trigger) => {
+  d.dispose();
+  d.microTask(() => {
+    if (focus === Focus.Specific) {
+      return _state.goToOption({ focus: Focus.Specific, id, trigger });
+    }
+    return _state.goToOption({ focus, trigger });
+  });
+};
+const registerOption = (id, dataRef) => {
+  _state.registerOption({ id, dataRef });
+  return () => _state.unregisterOption({ id });
+};
+const onChange = (value2) => {
+  return match(data.mode, {
+    [ValueMode.Single]() {
+      return theirOnChange?.(value2);
+    },
+    [ValueMode.Multi]() {
+      let copy = data.value.slice();
+      let idx = copy.findIndex((item) => compare(item, value2));
+      if (idx === -1) {
+        copy.push(value2);
+      } else {
+        copy.splice(idx, 1);
+      }
+      return theirOnChange?.(copy);
+    }
+  });
+};
+setContext("ListboxActionsContext", {
+  onChange,
+  registerOption,
+  goToOption,
+  closeListbox: _state.closeListbox,
+  openListbox: _state.openListbox,
+  selectActiveOption,
+  selectOption,
+  search: _state.search,
+  clearSearch: _state.clearSearch
+});
+createFloatingContext();
+const openClosed = $derived(
+  match(data.listboxState, {
+    [ListboxStates.Open]: State.Open,
+    [ListboxStates.Closed]: State.Closed
+  })
+);
+createOpenClosedContext({
+  get value() {
+    return openClosed;
+  }
+});
+useLabels({
+  inherit: true,
+  props: {
+    get htmlFor() {
+      return data.buttonRef.current?.id;
+    }
+  },
+  slot: {
+    get open() {
+      return data.listboxState === ListboxStates.Open;
+    },
+    get disabled() {
+      return disabled;
+    }
+  }
+});
+const reset = () => {
+  if (defaultValue === void 0) return;
+  return theirOnChange?.(defaultValue);
+};
+</script>
+
+{#if name && value}
+  <FormFields {disabled} data={{ [name]: value }} {form} onReset={reset} />
+{/if}
+<ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_LISTBOX_TAG} name="Listbox" bind:ref />