@lumx/vue 4.17.1-alpha.1 → 4.17.1-alpha.3

package/_internal/components/combobox/ComboboxOption.js

@@ -0,0 +1,79 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useWatchDisposable } from "../../composables/useWatchDisposable.js";
+import { useComboboxListContext } from "./context/ComboboxListContext.js";
+import { ComboboxOption as ComboboxOption$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOption.js";
+import { provideComboboxOptionContext } from "./context/ComboboxOptionContext.js";
+import { defineComponent, ref, toRef, useAttrs, watch } from "vue";
+/**
+* Combobox.Option component - wraps ListItem with option role and data-value.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxOption = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { type } = useComboboxListContext();
+	const { handle } = useComboboxContext();
+	const isGrid = type === "grid";
+	const optionId = useId();
+	const descriptionId = useId();
+	const optionRef = ref(null);
+	const isFiltered = ref(false);
+	provideComboboxOptionContext({ optionId });
+	useWatchDisposable([handle, optionRef], ([handleValue, element]) => {
+		if (!handleValue || !element) return;
+		return handleValue.registerOption(element, (filtered) => {
+			isFiltered.value = filtered;
+		});
+	});
+	watch(toRef(props, "value"), () => {
+		const handleValue = handle.value;
+		const element = optionRef.value;
+		if (!handleValue || !element) return;
+		handleValue.refilterOption(element);
+	}, { flush: "post" });
+	const setOptionRef = (el) => {
+		optionRef.value = el;
+	};
+	const handleClick = () => {
+		emit("click");
+		attrs.onClick?.();
+	};
+	/** Get slot content, falling back to attrs (JSX prop syntax used in tests). */
+	const getSlotOrAttr = (name) => slots[name]?.() ?? attrs[name];
+	return () => {
+		const before = getSlotOrAttr("before");
+		const after = getSlotOrAttr("after");
+		const children = slots.default?.();
+		return ComboboxOption$1({
+			ref: setOptionRef,
+			hidden: isFiltered.value,
+			value: props.value,
+			description: props.description,
+			children,
+			isSelected: props.isSelected,
+			isDisabled: props.isDisabled,
+			isGrid,
+			before,
+			after,
+			handleClick,
+			actionProps: props.actionProps,
+			id: optionId,
+			descriptionId,
+			tooltipProps: props.tooltipProps,
+			className: className.value
+		}, { Tooltip });
+	};
+}, {
+	name: "LumxComboboxOption",
+	inheritAttrs: false,
+	props: keysOf()("value", "description", "isDisabled", "isSelected", "tooltipProps", "actionProps", "class"),
+	emits: { click: () => true }
+});
+//#endregion
+export { ComboboxOption as default };

package/_internal/components/combobox/ComboboxOptionAction.d.ts

@@ -0,0 +1,9 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxOptionActionProps as ComboboxOptionActionProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionAction.js";
+
+//#region src/components/combobox/ComboboxOptionAction.d.ts
+type ComboboxOptionActionProps = Pick<VueToJSXProps<ComboboxOptionActionProps$1>, 'isDisabled' | 'class'> & {
+  /** On click callback. */onClick?: (evt: MouseEvent) => void;
+};
+//#endregion
+export { ComboboxOptionActionProps };

package/_internal/components/combobox/ComboboxOptionAction.js

@@ -0,0 +1,40 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { ComboboxOptionAction as ComboboxOptionAction$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionAction.js";
+import { defineComponent } from "vue";
+//#region src/components/combobox/ComboboxOptionAction.tsx
+/**
+* Combobox.OptionAction sub-component.
+*
+* Renders a secondary action button within a combobox option row (grid mode).
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxOptionAction = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const actionId = useId();
+	const className = useClassName(() => props.class);
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	return () => {
+		const children = slots.default?.();
+		const { onClick, class: _class, ...forwardedProps } = otherProps.value;
+		return ComboboxOptionAction$1({
+			as: "button",
+			...forwardedProps,
+			...attrs,
+			...disabledStateProps.value,
+			id: actionId,
+			className: className.value,
+			handleClick: onClick,
+			children
+		});
+	};
+}, {
+	name: "LumxComboboxOptionAction",
+	inheritAttrs: false,
+	props: keysOf()("isDisabled", "onClick", "class")
+});
+//#endregion
+export { ComboboxOptionAction as default };

package/_internal/components/combobox/ComboboxOptionMoreInfo.d.ts

@@ -0,0 +1,9 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxOptionMoreInfoProps as ComboboxOptionMoreInfoProps$1, ComboboxOptionMoreInfoPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js";
+
+//#region src/components/combobox/ComboboxOptionMoreInfo.d.ts
+type ComboboxOptionMoreInfoProps = VueToJSXProps<ComboboxOptionMoreInfoProps$1, ComboboxOptionMoreInfoPropsToOverride | 'onMouseEnter' | 'onMouseLeave' | 'buttonProps'> & {
+  /** Callback when the popover opens or closes. */onToggle?: (isOpen: boolean) => void;
+};
+//#endregion
+export { ComboboxOptionMoreInfoProps };

package/_internal/components/combobox/ComboboxOptionMoreInfo.js

@@ -0,0 +1,78 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import IconButton from "../button/IconButton.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { useComboboxOptionContext } from "./context/ComboboxOptionContext.js";
+import { ComboboxOptionMoreInfo as ComboboxOptionMoreInfo$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js";
+import Popover from "../popover/Popover.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, ref } from "vue";
+//#region src/components/combobox/ComboboxOptionMoreInfo.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Combobox.OptionMoreInfo component.
+*
+* Displays an info icon button on a combobox option that shows a popover with additional details.
+* The popover opens on mouse hover over the icon or when the parent option is keyboard-highlighted.
+*
+* Must be placed in the `after` slot of a `Combobox.Option`.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxOptionMoreInfo = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const mergedClassName = useClassName(() => props.class);
+	const iconButtonRef = ref(null);
+	const anchorEl = computed(() => iconButtonRef.value?.$el ?? void 0);
+	const isHovered = ref(false);
+	const { optionId } = useComboboxOptionContext();
+	const activeDescendantId = useComboboxEvent("activeDescendantChange", null);
+	const popoverId = `${optionId}-more-info`;
+	/**
+	* IconButton adapter (closure) that maps core `onMouseEnter`/`onMouseLeave`
+	* → Vue `onMouseenter`/`onMouseleave`
+	*/
+	function IconButtonAdapter(coreProps) {
+		const { onMouseEnter, onMouseLeave, ...rest } = coreProps;
+		return createVNode(IconButton, mergeProps({ "ref": iconButtonRef }, {
+			onMouseenter: onMouseEnter,
+			onMouseleave: onMouseLeave
+		}, rest), null);
+	}
+	/**
+	* Adapter for Popover (closure): `anchorRef` with the resolved DOM element
+	*/
+	const PopoverAdapter = (coreProps, { slots: popoverSlots }) => {
+		const { anchorRef: _coreAnchorRef, ...rest } = coreProps;
+		return createVNode(Popover, mergeProps({ "anchorRef": anchorEl }, rest), _isSlot(popoverSlots) ? popoverSlots : { default: () => [popoverSlots] });
+	};
+	return () => {
+		const isKeyboardHighlighted = activeDescendantId.value === optionId;
+		const isOpen = isHovered.value || isKeyboardHighlighted;
+		const children = slots.default?.();
+		return ComboboxOptionMoreInfo$1({
+			ref: void 0,
+			className: mergedClassName.value,
+			isOpen,
+			popoverId,
+			children,
+			onMouseEnter: () => {
+				isHovered.value = true;
+			},
+			onMouseLeave: () => {
+				isHovered.value = false;
+			}
+		}, {
+			IconButton: IconButtonAdapter,
+			Popover: PopoverAdapter
+		});
+	};
+}, {
+	name: "LumxComboboxOptionMoreInfo",
+	inheritAttrs: false,
+	props: keysOf()("class", "onToggle"),
+	emits: { toggle: (isOpen) => typeof isOpen === "boolean" }
+});
+//#endregion
+export { ComboboxOptionMoreInfo as default };

package/_internal/components/combobox/ComboboxOptionSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxOptionSkeletonProps as ComboboxOptionSkeletonProps$1, ComboboxOptionSkeletonPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js";
+
+//#region src/components/combobox/ComboboxOptionSkeleton.d.ts
+type ComboboxOptionSkeletonProps = VueToJSXProps<ComboboxOptionSkeletonProps$1, ComboboxOptionSkeletonPropsToOverride>;
+//#endregion
+export { ComboboxOptionSkeletonProps };

package/_internal/components/combobox/ComboboxOptionSkeleton.js

@@ -0,0 +1,37 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useWatchDisposable } from "../../composables/useWatchDisposable.js";
+import { ComboboxOptionSkeleton as ComboboxOptionSkeleton$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js";
+import { defineComponent } from "vue";
+//#region src/components/combobox/ComboboxOptionSkeleton.tsx
+/**
+* Combobox.OptionSkeleton component — renders skeleton placeholder(s) inside a combobox list.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxOptionSkeleton = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const { handle } = useComboboxContext();
+	useWatchDisposable(handle, (h) => h?.registerSkeleton());
+	return () => {
+		const before = attrs.before;
+		const after = attrs.after;
+		const children = slots.default?.();
+		return ComboboxOptionSkeleton$1({
+			...attrs,
+			className: className.value,
+			count: props.count,
+			before,
+			after,
+			children
+		});
+	};
+}, {
+	name: "LumxComboboxOptionSkeleton",
+	inheritAttrs: false,
+	props: keysOf()("hasDescription", "count", "class")
+});
+//#endregion
+export { ComboboxOptionSkeleton as default };

package/_internal/components/combobox/ComboboxPopover.d.ts

@@ -0,0 +1,13 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxPopoverProps as ComboboxPopoverProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxPopover.js";
+import { PopoverProps } from "../popover/Popover.js";
+
+//#region src/components/combobox/ComboboxPopover.d.ts
+/**
+ * Props type extends the core ComboboxPopover props (via VueToJSXProps) with additional
+ * Popover passthrough props. The core type only declares props it explicitly uses;
+ * extra Popover props flow through the core template's `...forwardedProps` spread.
+ */
+type ComboboxPopoverProps = VueToJSXProps<ComboboxPopoverProps$1, 'isOpen' | 'anchorRef'> & Partial<Omit<PopoverProps, 'isOpen' | 'anchorRef' | 'onClose' | 'class'>>;
+//#endregion
+export { ComboboxPopoverProps };

package/_internal/components/combobox/ComboboxPopover.js

@@ -0,0 +1,46 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useComboboxOpen } from "./context/useComboboxOpen.js";
+import Popover from "../popover/Popover.js";
+import { ComboboxPopover as ComboboxPopover$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxPopover.js";
+import FlexBox from "../flex-box/FlexBox.js";
+import { computed, defineComponent } from "vue";
+//#region src/components/combobox/ComboboxPopover.tsx
+/**
+* Props type extends the core ComboboxPopover props (via VueToJSXProps) with additional
+* Popover passthrough props. The core type only declares props it explicitly uses;
+* extra Popover props flow through the core template's `...forwardedProps` spread.
+*/
+/**
+* Combobox.Popover component - renders a Popover connected to the combobox context.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxPopover = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const className = useClassName(() => props.class);
+	const { anchorRef } = useComboboxContext();
+	const { isOpen, setIsOpen } = useComboboxOpen();
+	const popoverAnchorRef = computed(() => anchorRef.value ?? void 0);
+	return () => {
+		const { class: _class, ...popoverProps } = props;
+		return ComboboxPopover$1({
+			...popoverProps,
+			children: slots.default?.(),
+			className: className.value,
+			isOpen: isOpen.value,
+			anchorRef: popoverAnchorRef,
+			handleClose: () => setIsOpen(false)
+		}, {
+			Popover,
+			FlexBox
+		});
+	};
+}, {
+	name: "LumxComboboxPopover",
+	inheritAttrs: false,
+	props: keysOf()("as", "boundaryRef", "class", "closeMode", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusAnchorOnClose", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "focusElement", "focusTrapZoneElement", "hasArrow", "offset", "parentElement", "placement", "theme", "usePortal", "withFocusTrap", "zIndex")
+});
+//#endregion
+export { ComboboxPopover as default };

package/_internal/components/combobox/ComboboxProvider.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/combobox/ComboboxProvider.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ComboboxProviderProps {}
+//#endregion
+export { ComboboxProviderProps };

package/_internal/components/combobox/ComboboxProvider.js

@@ -0,0 +1,46 @@
+import { useId } from "../../composables/useId.js";
+import { provideComboboxContext } from "./context/ComboboxContext.js";
+import { defineComponent, onWatcherCleanup, ref, shallowRef, useAttrs, watch } from "vue";
+//#region src/components/combobox/ComboboxProvider.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Combobox.Provider component.
+*
+* Provides shared context to sub-components. The vanilla JS combobox handle is
+* created by the trigger sub-component (Combobox.Input or Combobox.Button) on mount.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxProvider = /* @__PURE__ */ defineComponent((_props, { slots, emit }) => {
+	const attrs = useAttrs();
+	const listboxId = useId();
+	const anchorRef = ref(null);
+	const handle = shallowRef(null);
+	const setHandle = (h) => {
+		handle.value = h;
+	};
+	provideComboboxContext({
+		handle,
+		setHandle,
+		listboxId,
+		anchorRef
+	});
+	watch(handle, (handleValue) => {
+		if (!handleValue) return;
+		onWatcherCleanup(handleValue.subscribe("open", (isOpen) => {
+			attrs.onOpen?.(isOpen);
+			emit("open", isOpen);
+		}));
+	});
+	return () => slots.default?.();
+}, {
+	name: "LumxComboboxProvider",
+	inheritAttrs: false,
+	props: {},
+	emits: { open: (isOpen) => true }
+});
+//#endregion
+export { ComboboxProvider as default };

package/_internal/components/combobox/ComboboxSection.d.ts

@@ -0,0 +1,7 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxSectionProps as ComboboxSectionProps$1, ComboboxSectionPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxSection.js";
+
+//#region src/components/combobox/ComboboxSection.d.ts
+type ComboboxSectionProps = VueToJSXProps<ComboboxSectionProps$1, ComboboxSectionPropsToOverride | 'hidden' | 'aria-hidden'>;
+//#endregion
+export { ComboboxSectionProps };

package/_internal/components/combobox/ComboboxSection.js

@@ -0,0 +1,51 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useWatchDisposable } from "../../composables/useWatchDisposable.js";
+import { ComboboxSection as ComboboxSection$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxSection.js";
+import ListSection from "../list/ListSection.js";
+import { defineComponent, reactive, ref } from "vue";
+//#region src/components/combobox/ComboboxSection.tsx
+/**
+* Combobox.Section component - groups Combobox.Option items under a labelled section.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxSection = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const className = useClassName(() => props.class);
+	const { handle } = useComboboxContext();
+	const sectionRef = ref(null);
+	const sectionState = reactive({
+		hidden: false,
+		"aria-hidden": false
+	});
+	useWatchDisposable([handle, sectionRef], ([h, element]) => {
+		if (h && element) return h.registerSection(element, (state) => {
+			sectionState.hidden = state.hidden;
+			sectionState["aria-hidden"] = state["aria-hidden"];
+		});
+	});
+	const setSectionRef = (el) => {
+		sectionRef.value = el?.$el ?? el;
+	};
+	return () => {
+		const children = slots.default?.();
+		if (!children || children.length === 0) return null;
+		return ComboboxSection$1({
+			label: props.label ?? slots.label?.(),
+			icon: props.icon,
+			className: className.value,
+			hidden: sectionState.hidden,
+			"aria-hidden": sectionState["aria-hidden"] || void 0,
+			ref: setSectionRef,
+			children
+		}, { ListSection });
+	};
+}, {
+	name: "LumxComboboxSection",
+	inheritAttrs: false,
+	props: keysOf()("label", "icon", "class")
+});
+//#endregion
+export { ComboboxSection as default };

package/_internal/components/combobox/ComboboxState.d.ts

@@ -0,0 +1,7 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ComboboxStateProps as ComboboxStateProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxState.js";
+
+//#region src/components/combobox/ComboboxState.d.ts
+type ComboboxStateProps = VueToJSXProps<ComboboxStateProps$1, 'state'>;
+//#endregion
+export { ComboboxStateProps };

package/_internal/components/combobox/ComboboxState.js

@@ -0,0 +1,61 @@
+import { keysOf } from "../../utils/VueToJSX.js";
+import Text$1 from "../text/Text.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useWatchDisposable } from "../../composables/useWatchDisposable.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { ComboboxState as ComboboxState$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxState.js";
+import { subscribeComboboxState } from "../../packages/lumx-core/src/js/components/Combobox/subscribeComboboxState.js";
+import GenericBlock from "../generic-block/GenericBlock.js";
+import { defineComponent, ref } from "vue";
+//#region src/components/combobox/ComboboxState.tsx
+/**
+* Combobox.State component - displays empty and error states for the combobox list.
+*
+* @param props Component props.
+* @return Vue element.
+*/
+var ComboboxState = /* @__PURE__ */ defineComponent((props) => {
+	const { handle } = useComboboxContext();
+	const optionsState = useComboboxEvent("optionsChange", void 0);
+	const isLoading = ref(false);
+	const shouldAnnounce = ref(false);
+	const isOpen = ref(false);
+	useWatchDisposable(handle, (h) => {
+		if (h) return subscribeComboboxState(h, {
+			setIsLoading: (v) => {
+				isLoading.value = v;
+			},
+			setShouldAnnounce: (v) => {
+				shouldAnnounce.value = v;
+			},
+			setIsOpen: (v) => {
+				isOpen.value = v;
+			}
+		});
+	});
+	return () => {
+		const state = {
+			...optionsState.value,
+			isLoading: isLoading.value,
+			isOpen: isOpen.value
+		};
+		const loadingMessage = shouldAnnounce.value ? props.loadingMessage : void 0;
+		return ComboboxState$1({
+			emptyMessage: props.emptyMessage,
+			nbOptionMessage: props.nbOptionMessage,
+			errorMessage: props.errorMessage,
+			errorTryReloadMessage: props.errorTryReloadMessage,
+			loadingMessage,
+			state
+		}, {
+			GenericBlock,
+			Text: Text$1
+		});
+	};
+}, {
+	name: "LumxComboboxState",
+	inheritAttrs: false,
+	props: keysOf()("emptyMessage", "nbOptionMessage", "errorMessage", "errorTryReloadMessage", "loadingMessage", "class")
+});
+//#endregion
+export { ComboboxState as default };

package/_internal/components/combobox/context/ComboboxContext.js

@@ -0,0 +1,21 @@
+import { inject, provide } from "vue";
+//#region src/components/combobox/context/ComboboxContext.ts
+var COMBOBOX_CONTEXT_KEY = Symbol("combobox-context");
+/**
+* Provides the combobox context to sub-components.
+*/
+function provideComboboxContext(value) {
+	provide(COMBOBOX_CONTEXT_KEY, value);
+}
+/**
+* Hook to access the Combobox context.
+* @throws Error if used outside of a Combobox component.
+* @returns The combobox context value.
+*/
+function useComboboxContext() {
+	const context = inject(COMBOBOX_CONTEXT_KEY);
+	if (!context) throw new Error("Combobox sub-components must be used within a Combobox");
+	return context;
+}
+//#endregion
+export { provideComboboxContext, useComboboxContext };

package/_internal/components/combobox/context/ComboboxListContext.js

@@ -0,0 +1,19 @@
+import { inject, provide } from "vue";
+//#region src/components/combobox/context/ComboboxListContext.ts
+var COMBOBOX_LIST_CONTEXT_KEY = Symbol("combobox-list-context");
+var DEFAULT_VALUE = { type: "listbox" };
+/**
+* Provides the combobox list context.
+*/
+function provideComboboxListContext(value) {
+	provide(COMBOBOX_LIST_CONTEXT_KEY, value);
+}
+/**
+* Hook to access the Combobox.List context (provides the `type`).
+* @returns The list context value.
+*/
+function useComboboxListContext() {
+	return inject(COMBOBOX_LIST_CONTEXT_KEY, DEFAULT_VALUE);
+}
+//#endregion
+export { provideComboboxListContext, useComboboxListContext };

package/_internal/components/combobox/context/ComboboxOptionContext.js

@@ -0,0 +1,22 @@
+import { inject, provide } from "vue";
+//#region src/components/combobox/context/ComboboxOptionContext.ts
+var COMBOBOX_OPTION_CONTEXT_KEY = Symbol("combobox-option-context");
+/**
+* Provides the combobox option context.
+*/
+function provideComboboxOptionContext(value) {
+	provide(COMBOBOX_OPTION_CONTEXT_KEY, value);
+}
+/**
+* Hook to access the Combobox.Option context.
+* Must be used within a Combobox.Option's `after` slot.
+* @throws Error if used outside of a Combobox.Option.
+* @returns The option context value.
+*/
+function useComboboxOptionContext() {
+	const context = inject(COMBOBOX_OPTION_CONTEXT_KEY);
+	if (!context) throw new Error("Combobox.OptionMoreInfo must be used within a Combobox.Option `after` slot");
+	return context;
+}
+//#endregion
+export { provideComboboxOptionContext, useComboboxOptionContext };

package/_internal/components/combobox/context/useComboboxEvent.js

@@ -0,0 +1,20 @@
+import { useComboboxContext } from "./ComboboxContext.js";
+import { useWatchDisposable } from "../../../composables/useWatchDisposable.js";
+import { ref } from "vue";
+//#region src/components/combobox/context/useComboboxEvent.ts
+/**
+* Composable to subscribe to a combobox event via the handle's subscriber system.
+* Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+*/
+function useComboboxEvent(event, initialValue) {
+	const { handle } = useComboboxContext();
+	const value = ref(initialValue);
+	useWatchDisposable(handle, (h) => {
+		if (h) return h.subscribe(event, (v) => {
+			value.value = v;
+		});
+	});
+	return value;
+}
+//#endregion
+export { useComboboxEvent };

package/_internal/components/combobox/context/useComboboxOpen.js

@@ -0,0 +1,17 @@
+import { useComboboxContext } from "./ComboboxContext.js";
+import { useComboboxEvent } from "./useComboboxEvent.js";
+//#region src/components/combobox/context/useComboboxOpen.ts
+/**
+* Composable to subscribe to the combobox open/close state.
+*/
+function useComboboxOpen() {
+	const { handle } = useComboboxContext();
+	const isOpen = useComboboxEvent("open", false);
+	const setIsOpen = (open) => handle.value?.setIsOpen(open);
+	return {
+		isOpen,
+		setIsOpen
+	};
+}
+//#endregion
+export { useComboboxOpen };