@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/checkbox/CheckboxRoot.vue.d.ts

@@ -0,0 +1,93 @@
+export interface CheckboxState {
+    /**
+     * Whether the checkbox is checked.
+     * @attribute `data-checked` while checked, `data-unchecked` otherwise
+     */
+    checked: boolean;
+    /** Neither checked nor unchecked — a group whose members disagree. */
+    indeterminate: boolean;
+    /** Whether it ignores interaction. */
+    disabled: boolean;
+    /** Whether it can be focused but not changed. */
+    readOnly: boolean;
+    /** Whether it must be checked before its form submits. */
+    required: boolean;
+    /** Whether the value is invalid. */
+    invalid: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TValue extends string | number | boolean = boolean, TItem extends string | number = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** Bound with `v-model`: `true-value`/`false-value`, or an array that holds `value` while checked. Ignored inside a `CheckboxGroup`. */
+        modelValue?: TValue | TItem[] | null;
+        /** The model value while checked. @default true */
+        trueValue?: TValue;
+        /** The model value while unchecked. @default false */
+        falseValue?: TValue;
+        /** Starts checked, when no `v-model` owns the state. A number counts as checked unless it is `0`. */
+        defaultChecked?: boolean | number;
+        /** Shows neither state, for a parent of checkboxes that disagree. Clicking still toggles `checked`. */
+        indeterminate?: boolean;
+        /** Ignores interaction, and the form leaves it out. */
+        disabled?: boolean;
+        /** Stays focusable but can't be changed. */
+        readOnly?: boolean;
+        /** Must be checked. Announced and styled, not enforced. */
+        required?: boolean;
+        /** Marks the value invalid, for styling through `data-invalid`. */
+        invalid?: boolean;
+        /** The root's id. Inside a `FieldRoot`, the field's control id. */
+        id?: string;
+        /** The form field name. Inside a `FieldRoot`, the field's name. */
+        name?: string;
+        /** Submitted while checked, and what an array `v-model` (or a `CheckboxGroup`) holds for this box. */
+        value?: TItem;
+        /** Inside a `CheckboxGroup`, checks or clears every other box, and shows indeterminate while they disagree. */
+        parent?: boolean;
+        /** The id of a `<form>` to submit with, when the checkbox sits outside it. */
+        form?: string;
+        /** Element or component to render. Anything but a `button` gets `tabindex` and Enter/Space keys, and a `<label>` no longer names it. */
+        as?: string | object;
+    } & {
+        onChange?: ((checked: boolean, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: TValue | TItem[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        checked: import("vue").WritableComputedRef<boolean, boolean>;
+        state: import("vue").ComputedRef<CheckboxState>;
+        rootProps: import("vue").ComputedRef<Record<string, unknown>>;
+        inputProps: import("vue").ComputedRef<Record<string, unknown>>;
+        toggle: (event?: Event) => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            /**
+             * Whether the checkbox is checked.
+             * @attribute `data-checked` while checked, `data-unchecked` otherwise
+             */
+            checked: boolean;
+            /** Neither checked nor unchecked — a group whose members disagree. */
+            indeterminate: boolean;
+            /** Whether it ignores interaction. */
+            disabled: boolean;
+            /** Whether it can be focused but not changed. */
+            readOnly: boolean;
+            /** Whether it must be checked before its form submits. */
+            required: boolean;
+            /** Whether the value is invalid. */
+            invalid: boolean;
+        }) => any;
+    };
+    emit: ((evt: "change", checked: boolean, event: Event) => void) & ((evt: "update:modelValue", value: TValue | TItem[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/checkbox/CheckboxRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,158 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { useToggleInput } from "../../shared/use-toggle-input.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { provideToggleIndicator } from "../../shared/use-toggle-indicator.js";
+import { useOptionalCheckboxGroupContext } from "./CheckboxGroup.vue_vue_type_script_setup_true_lang.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onScopeDispose, openBlock, renderSlot, unref, useAttrs, useId, watch, withCtx } from "vue";
+//#region src/components/checkbox/CheckboxRoot.vue?vue&type=script&setup=true&lang.ts
+var CheckboxRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CheckboxRoot",
+	inheritAttrs: false,
+	__name: "CheckboxRoot",
+	props: {
+		modelValue: {},
+		trueValue: {},
+		falseValue: {},
+		defaultChecked: {
+			type: [Boolean, Number],
+			default: false
+		},
+		indeterminate: { type: Boolean },
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		invalid: { type: Boolean },
+		id: {},
+		name: {},
+		value: {},
+		parent: {
+			type: Boolean,
+			default: false
+		},
+		form: {},
+		as: { default: "button" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const trueValue = computed(() => props.trueValue ?? true);
+		const falseValue = computed(() => props.falseValue ?? false);
+		/** An array model gains or loses this box's `value`; anything else flips between the two values. */
+		function nextModel(on) {
+			const model = props.modelValue;
+			if (!Array.isArray(model)) return on ? trueValue.value : falseValue.value;
+			const item = props.value;
+			const rest = model.filter((entry) => entry !== item);
+			return on ? [...rest, item] : rest;
+		}
+		const group = useOptionalCheckboxGroupContext();
+		const nearestField = useOptionalFieldContext();
+		const field = group && nearestField === group.field ? null : nearestField;
+		const generatedId = useId();
+		if (process.env.NODE_ENV !== "production" && group && !props.parent && props.value === void 0) console.warn("[CheckboxRoot] A checkbox inside a CheckboxGroup needs a `value` to add to the group's array.");
+		const ownDisabled = () => (props.disabled ?? false) || (field?.state.value.disabled ?? false);
+		const ownReadOnly = () => (props.readOnly ?? false) || (field?.state.value.readOnly ?? false);
+		const isDisabled = () => ownDisabled() || (group?.disabled() ?? false);
+		const isReadOnly = () => ownReadOnly() || (group?.readOnly() ?? false);
+		const isInvalid = () => (props.invalid ?? false) || (group?.invalid() ?? false) || (field?.state.value.invalid ?? false);
+		const isRequired = () => (props.required ?? false) || (field?.required() ?? false);
+		const parentCounts = () => group && props.parent ? group.counts.value : null;
+		const indeterminate = () => {
+			const counts = parentCounts();
+			if (counts) return counts.checked > 0 && counts.checked < counts.total;
+			return props.indeterminate ?? false;
+		};
+		if (group && !props.parent) onScopeDispose(group.register({
+			value: () => props.value,
+			locked: () => ownDisabled() || ownReadOnly()
+		}));
+		const checked = useControlled({
+			value: () => {
+				if (group) {
+					const counts = parentCounts();
+					if (counts) return counts.total > 0 && counts.checked === counts.total;
+					return props.value !== void 0 && group.value.value.includes(props.value);
+				}
+				const model = props.modelValue;
+				if (model === void 0) return void 0;
+				return Array.isArray(model) ? model.includes(props.value) : model === trueValue.value;
+			},
+			defaultValue: () => Boolean(props.defaultChecked),
+			prop: "modelValue",
+			empty: false,
+			name: "Checkbox",
+			label: "checked"
+		});
+		const state = computed(() => ({
+			checked: checked.value,
+			indeterminate: indeterminate(),
+			disabled: isDisabled(),
+			readOnly: isReadOnly(),
+			required: isRequired(),
+			invalid: isInvalid()
+		}));
+		const hooks = computed(() => dataAttrs(state.value, { checked: (on) => on ? { "data-checked": "" } : { "data-unchecked": "" } }));
+		provideToggleIndicator({
+			state,
+			hooks,
+			present: () => checked.value || indeterminate()
+		});
+		useFieldValue(field, () => checked.value);
+		watch(checked, (on) => field?.setFilled(on), { immediate: true });
+		const toggleInput = useToggleInput({
+			role: "checkbox",
+			checked: () => checked.value,
+			indeterminate,
+			disabled: isDisabled,
+			readOnly: isReadOnly,
+			required: isRequired,
+			id: () => props.id ?? field?.controlId.value ?? generatedId,
+			name: () => props.name ?? (group ? props.parent ? void 0 : group.name() : field?.name()),
+			value: () => props.value === void 0 || props.parent ? void 0 : String(props.value),
+			form: () => props.form ?? group?.form(),
+			describedBy: () => field?.describedBy.value,
+			native: () => props.as === "button",
+			hooks: () => hooks.value,
+			onFocus: () => field?.setFocused(true),
+			onBlur: () => {
+				field?.setFocused(false);
+				field?.setTouched(true);
+			},
+			onToggle: (next, event) => {
+				if (group) {
+					if (props.parent) group.toggleAll(next, event);
+					else if (props.value !== void 0) group.toggle(props.value, next, event);
+				} else {
+					checked.value = next;
+					emit("update:modelValue", nextModel(next));
+				}
+				emit("change", next, event);
+			}
+		});
+		const inputProps = toggleInput.inputProps;
+		__expose({
+			checked,
+			state,
+			rootProps: toggleInput.rootProps,
+			inputProps,
+			toggle: toggleInput.activate
+		});
+		const attrs = useAttrs();
+		const rootProps = computed(() => mergeProps$1({
+			"data-part": "root",
+			...toggleInput.rootProps.value
+		}, attrs));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(Part), mergeProps({ as: props.as }, rootProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(state.value)))]),
+				_: 3
+			}, 16, ["as"]), unref(toggleInput).rendersInput.value ? (openBlock(), createElementBlock("input", normalizeProps(mergeProps({ key: 0 }, unref(inputProps))), null, 16)) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { CheckboxRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/collapsible/CollapsiblePanel.js

@@ -0,0 +1,5 @@
+import CollapsiblePanel_vue_vue_type_script_setup_true_lang_default from "./CollapsiblePanel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/collapsible/CollapsiblePanel.vue
+var CollapsiblePanel_default = CollapsiblePanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CollapsiblePanel_default as default };

package/dist/components/collapsible/CollapsiblePanel.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /** Stays in the DOM, `hidden`, while closed: for find-in-page, or content that must keep its state. */
+    keepMounted?: boolean;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    open: boolean;
+    disabled: boolean;
+    transitionStatus: import("../..").TransitionStatus;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+    keepMounted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/collapsible/CollapsiblePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useCollapsibleContext } from "../../shared/use-collapsible.js";
+import { createBlock, createCommentVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/collapsible/CollapsiblePanel.vue?vue&type=script&setup=true&lang.ts
+var CollapsiblePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CollapsiblePanel",
+	inheritAttrs: false,
+	__name: "CollapsiblePanel",
+	props: {
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { panelProps, present, state } = useCollapsibleContext();
+		const merged = usePartProps(panelProps);
+		return (_ctx, _cache) => {
+			return unref(present) || props.keepMounted ? (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 0,
+				as: props.as
+			}, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { CollapsiblePanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/collapsible/CollapsibleRoot.js

@@ -0,0 +1,5 @@
+import CollapsibleRoot_vue_vue_type_script_setup_true_lang_default from "./CollapsibleRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/collapsible/CollapsibleRoot.vue
+var CollapsibleRoot_default = CollapsibleRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CollapsibleRoot_default as default };

package/dist/components/collapsible/CollapsibleRoot.vue.d.ts

@@ -0,0 +1,41 @@
+import { type CollapsibleState, type UseCollapsibleReturn } from '../../shared/use-collapsible';
+type __VLS_Props = {
+    /** Whether the panel is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Opens at first, when no `v-model:open` owns it. */
+    defaultOpen?: boolean;
+    /** Keeps the trigger from opening or closing it. */
+    disabled?: boolean;
+    /** The panel's id, which the trigger's `aria-controls` points at. Generated when not given. */
+    id?: string;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    default(props: CollapsibleState): unknown;
+    /**
+     * Renders no element of its own: lay the collapsible out yourself and bind its API.
+     * @internal
+     */
+    custom(props: UseCollapsibleReturn): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (open: boolean) => any;
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    as: string | object;
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/collapsible/CollapsibleRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { provideCollapsibleContext, useCollapsible } from "../../shared/use-collapsible.js";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, useAttrs, withCtx } from "vue";
+//#region src/components/collapsible/CollapsibleRoot.vue?vue&type=script&setup=true&lang.ts
+var CollapsibleRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CollapsibleRoot",
+	inheritAttrs: false,
+	__name: "CollapsibleRoot",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		id: {},
+		as: { default: "div" }
+	},
+	emits: ["update:open", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useCollapsible({
+			open: toRef(() => props.open),
+			defaultOpen: toRef(() => props.defaultOpen),
+			disabled: toRef(() => props.disabled),
+			id: toRef(() => props.id),
+			onChange: (open) => {
+				emit("update:open", open);
+				emit("change", open);
+			}
+		});
+		provideCollapsibleContext(api);
+		const attrs = useAttrs();
+		const rootProps = computed(() => mergeProps$1(api.rootProps.value, attrs));
+		return (_ctx, _cache) => {
+			return _ctx.$slots.custom ? renderSlot(_ctx.$slots, "custom", normalizeProps(guardReactiveProps(unref(api))), void 0, void 0, 0) : (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 1,
+				as: props.as
+			}, rootProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)))]),
+				_: 3
+			}, 16, ["as"]));
+		};
+	}
+});
+//#endregion
+export { CollapsibleRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/collapsible/CollapsibleTrigger.js

@@ -0,0 +1,5 @@
+import CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default from "./CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/collapsible/CollapsibleTrigger.vue
+var CollapsibleTrigger_default = CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CollapsibleTrigger_default as default };

package/dist/components/collapsible/CollapsibleTrigger.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    open: boolean;
+    disabled: boolean;
+    transitionStatus: import("../..").TransitionStatus;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useCollapsibleContext } from "../../shared/use-collapsible.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/collapsible/CollapsibleTrigger.vue?vue&type=script&setup=true&lang.ts
+var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CollapsibleTrigger",
+	inheritAttrs: false,
+	__name: "CollapsibleTrigger",
+	props: { as: { default: "button" } },
+	setup(__props) {
+		const props = __props;
+		const { triggerProps, state } = useCollapsibleContext();
+		const merged = usePartProps(triggerProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/combobox/ComboboxChip.js

@@ -0,0 +1,5 @@
+import ComboboxChip_vue_vue_type_script_setup_true_lang_default, { provideComboboxChip, useComboboxChip } from "./ComboboxChip.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/combobox/ComboboxChip.vue
+var ComboboxChip_default = ComboboxChip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ComboboxChip_default as default, provideComboboxChip, useComboboxChip };

package/dist/components/combobox/ComboboxChip.vue.d.ts

@@ -0,0 +1,29 @@
+import type { RenderedOption } from '../../shared/use-listbox';
+/** Hands the chip's option to the `ComboboxChipRemove` inside it. */
+export declare const provideComboboxChip: (value: () => RenderedOption) => () => RenderedOption, useComboboxChip: () => () => RenderedOption;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The chip's option, as `ComboboxChips`' `chip` slot hands it. */
+    option: RenderedOption;
+    /** Element or component to render. */
+    as?: string | object;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The chip's option, as `ComboboxChips`' `chip` slot hands it. */
+    option: RenderedOption;
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /**
+     * The chip's option.
+     * @slotOnly The element carries `data-value`.
+     */
+    default(props: RenderedOption): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/combobox/ComboboxChip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { Part } from "../../shared/part.js";
+import { createContext } from "../../shared/context.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useListboxContext } from "../../shared/use-listbox.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/combobox/ComboboxChip.vue?vue&type=script&setup=true&lang.ts
+/** Hands the chip's option to the `ComboboxChipRemove` inside it. */
+var { provideContext: provideComboboxChip, useContext: useComboboxChip } = createContext("ComboboxChip");
+var ComboboxChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ComboboxChip",
+	inheritAttrs: false,
+	__name: "ComboboxChip",
+	props: {
+		option: {},
+		as: { default: "span" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { getChipProps } = useListboxContext();
+		provideComboboxChip(() => props.option);
+		const merged = usePartProps(() => getChipProps(props.option));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(props.option)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { ComboboxChip_vue_vue_type_script_setup_true_lang_default as default, provideComboboxChip, useComboboxChip };

package/dist/components/combobox/ComboboxChipRemove.js

@@ -0,0 +1,5 @@
+import ComboboxChipRemove_vue_vue_type_script_setup_true_lang_default from "./ComboboxChipRemove.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/combobox/ComboboxChipRemove.vue
+var ComboboxChipRemove_default = ComboboxChipRemove_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ComboboxChipRemove_default as default };

package/dist/components/combobox/ComboboxChipRemove.vue.d.ts

@@ -0,0 +1,23 @@
+import { type RenderedOption } from '../../shared/use-listbox';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The chip's option.
+     * @slotOnly
+     */
+    default(props: RenderedOption): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/combobox/ComboboxChipRemove.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useListboxContext } from "../../shared/use-listbox.js";
+import { useComboboxChip } from "./ComboboxChip.vue_vue_type_script_setup_true_lang.js";
+import { createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/combobox/ComboboxChipRemove.vue?vue&type=script&setup=true&lang.ts
+var ComboboxChipRemove_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ComboboxChipRemove",
+	inheritAttrs: false,
+	__name: "ComboboxChipRemove",
+	props: { as: { default: "button" } },
+	setup(__props) {
+		const props = __props;
+		const { state, getChipRemoveProps } = useListboxContext();
+		const option = useComboboxChip();
+		const merged = usePartProps(() => getChipRemoveProps(option()));
+		return (_ctx, _cache) => {
+			return !unref(state).disabled && !unref(state).readOnly ? (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 0,
+				as: props.as
+			}, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(option)())), () => [_cache[0] || (_cache[0] = createTextVNode("×", -1))])]),
+				_: 3
+			}, 16, ["as"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ComboboxChipRemove_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/combobox/ComboboxChips.js

@@ -0,0 +1,5 @@
+import ComboboxChips_vue_vue_type_script_setup_true_lang_default from "./ComboboxChips.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/combobox/ComboboxChips.vue
+var ComboboxChips_default = ComboboxChips_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ComboboxChips_default as default };

package/dist/components/combobox/ComboboxChips.vue.d.ts

@@ -0,0 +1,35 @@
+import { type RenderedOption } from '../../shared/use-listbox';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * One chip, in place of the default: a `ComboboxChip` around its label and a `ComboboxChipRemove`.
+     * @slotOnly
+     */
+    chip(props: RenderedOption): unknown;
+    /**
+     * The default chip's remove button, in place of a bare `ComboboxChipRemove`.
+     * @slotOnly
+     */
+    remove(props: RenderedOption): unknown;
+    /**
+     * The count of chips past `flatten`.
+     * @slotOnly
+     */
+    more(props: {
+        count: number;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};