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

package/dist/components/toggle/ToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,86 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { applyModelModifiers } from "../../shared/model-modifiers.js";
+import { provideToggleGroupContext, useToggleGroup } from "./use-toggle.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderList, renderSlot, toRef, unref, useAttrs, withCtx } from "vue";
+//#region src/components/toggle/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"name",
+	"value",
+	"form"
+];
+var ToggleGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ToggleGroup",
+	inheritAttrs: false,
+	__name: "ToggleGroup",
+	props: {
+		modelValue: { default: void 0 },
+		modelModifiers: {},
+		defaultValue: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		form: {},
+		orientation: { default: "horizontal" },
+		loop: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useToggleGroup({
+			value: toRef(() => props.modelValue),
+			defaultValue: toRef(() => props.defaultValue),
+			multiple: toRef(() => props.multiple),
+			required: toRef(() => props.required),
+			disabled: toRef(() => props.disabled),
+			invalid: toRef(() => props.invalid),
+			name: toRef(() => props.name),
+			form: toRef(() => props.form),
+			orientation: toRef(() => props.orientation),
+			loop: toRef(() => props.loop),
+			onChange: (value) => {
+				emit("update:modelValue", applyModelModifiers(value, props.modelModifiers));
+				emit("change", value);
+			}
+		});
+		provideToggleGroupContext(api);
+		__expose(api);
+		const attrs = useAttrs();
+		const rootProps = computed(() => mergeProps$1(api.rootProps.value, attrs));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, rootProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value))), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(api).hiddenInputs.value, (hidden) => {
+					return openBlock(), createElementBlock("input", {
+						key: hidden.value,
+						type: "hidden",
+						name: hidden.name,
+						value: hidden.value,
+						form: hidden.form
+					}, null, 8, _hoisted_1);
+				}), 128))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { ToggleGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/toggle/use-toggle.d.ts

@@ -0,0 +1,122 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type Orientation } from '../../shared/use-roving-focus';
+/** What identifies a toggle inside a group. */
+export type ToggleValue = string | number;
+export interface ToggleState {
+    /**
+     * Whether the toggle is on.
+     * @attribute `data-pressed` while on, `data-unpressed` while off
+     */
+    pressed: boolean;
+    /** Whether the toggle ignores user interaction. */
+    disabled: boolean;
+    /** Whether its group's value is invalid. */
+    invalid: boolean;
+}
+export interface UseToggleOptions {
+    /** The pressed state. Supplying this makes it controlled. */
+    pressed?: MaybeRefOrGetter<boolean | undefined>;
+    /** The initial pressed state while uncontrolled. @default false */
+    defaultPressed?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the toggle ignores user interaction. Also read from a group. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Identifies the toggle within a `useToggleGroup`, which then owns the
+     * pressed state. Required there, and ignored outside one.
+     */
+    value?: MaybeRefOrGetter<ToggleValue | undefined>;
+    /** Called whenever the pressed state changes. */
+    onChange?: (pressed: boolean, event?: Event) => void;
+}
+export interface UseToggleReturn {
+    /** The pressed state. Writable — assign to it to toggle programmatically. */
+    pressed: WritableComputedRef<boolean>;
+    state: ComputedRef<ToggleState>;
+    /** Bind to the button. Carries the `data-*` hooks. */
+    rootProps: ComputedRef<Record<string, unknown>>;
+    /** Flips the toggle, respecting `disabled`. */
+    toggle: (event?: Event) => void;
+}
+export declare function useToggle(options?: UseToggleOptions): UseToggleReturn;
+export interface ToggleGroupState {
+    /** Whether every toggle in the group ignores user interaction. */
+    disabled: boolean;
+    /** Whether a toggle must be pressed: one always is with the group's own `required`; a field's is only announced. */
+    required: boolean;
+    /** Whether the value is invalid. */
+    invalid: boolean;
+    /** Whether more than one toggle can be pressed at a time. */
+    multiple: boolean;
+    /** Which arrow keys move between the toggles. */
+    orientation: Orientation;
+}
+/** One value while single, an array while `multiple`. */
+export type ToggleGroupValue = ToggleValue | ToggleValue[] | null;
+export interface UseToggleGroupOptions {
+    /** The pressed toggles. Supplying this makes the value controlled. */
+    value?: MaybeRefOrGetter<ToggleGroupValue | undefined>;
+    /** The initially pressed toggles while uncontrolled. */
+    defaultValue?: MaybeRefOrGetter<ToggleGroupValue | undefined>;
+    /**
+     * Whether more than one toggle can be pressed. The value follows: one value
+     * (or `null`) while single, an array while multiple.
+     *
+     * @default false
+     */
+    multiple?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Whether the group always holds a value: the last pressed toggle refuses to
+     * come up, and an uncontrolled group with nothing pressed presses its first
+     * enabled toggle rather than starting in a state it forbids.
+     *
+     * This is a segmented control — one of these is the answer — rather than a
+     * set of independent switches. Note that it only constrains what the group
+     * does; a controlled value is still whatever its owner sets, empty included.
+     *
+     * @default false
+     */
+    required?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether every toggle in the group ignores user interaction. Also read from a surrounding field. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the value is invalid. Also read from a surrounding field. */
+    invalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** The form field name each pressed toggle's value is submitted under. Also read from a surrounding field. */
+    name?: MaybeRefOrGetter<string | undefined>;
+    /** The id of a `<form>` to submit with. */
+    form?: MaybeRefOrGetter<string | undefined>;
+    /** @default 'horizontal' */
+    orientation?: MaybeRefOrGetter<Orientation | undefined>;
+    /** Wrap around at the ends of the group. @default true, or `false` inside a toolbar */
+    loop?: MaybeRefOrGetter<boolean | undefined>;
+    /** Called whenever the pressed toggles change. */
+    onChange?: (value: ToggleGroupValue) => void;
+}
+export interface UseToggleGroupReturn {
+    /** The pressed toggles, shaped by `multiple`. Writable. */
+    value: WritableComputedRef<ToggleGroupValue>;
+    /** The pressed values, always as an array, whatever `multiple` says. */
+    pressedValues: ComputedRef<ToggleValue[]>;
+    state: ComputedRef<ToggleGroupState>;
+    /** Bind to the element wrapping the toggles. Owns the arrow keys. */
+    rootProps: ComputedRef<Record<string, unknown>>;
+    /** One hidden input per pressed toggle, while there's a name. */
+    hiddenInputs: ComputedRef<Array<{
+        name: string;
+        value: string;
+        form: string | undefined;
+    }>>;
+    isPressed: (value: ToggleValue) => boolean;
+    /** Presses or unpresses one toggle, applying the single/multiple rule. */
+    setPressed: (value: ToggleValue, pressed: boolean) => void;
+    /** @internal */ register: (item: {
+        id: string;
+        value: ToggleValue;
+        disabled: boolean;
+        element: HTMLElement | null;
+    }) => void;
+    /** @internal */ unregister: (id: string) => void;
+    /** @internal */ highlight: (value: ToggleValue) => void;
+    /** @internal */ tabbableValue: Ref<ToggleValue | undefined>;
+}
+export declare function useToggleGroup(options?: UseToggleGroupOptions): UseToggleGroupReturn;
+export declare const provideToggleGroupContext: (value: UseToggleGroupReturn) => UseToggleGroupReturn, useToggleGroupContext: () => UseToggleGroupReturn, useOptionalToggleGroupContext: () => UseToggleGroupReturn | null;

package/dist/components/toggle/use-toggle.js

@@ -0,0 +1,218 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { isPropBound, useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { useRovingItems } from "../../shared/use-roving-items.js";
+import { useOptionalGroupContext } from "../group/Group.vue_vue_type_script_setup_true_lang.js";
+import { useRovingFocus } from "../../shared/use-roving-focus.js";
+import { computed, onScopeDispose, ref, toValue, useId, watch } from "vue";
+//#region src/components/toggle/use-toggle.ts
+/** Any button carrying a pressed state is an item of the group. */
+var TOGGLE_SELECTOR = "[aria-pressed]";
+function useToggle(options = {}) {
+	const group = useOptionalToggleGroupContext();
+	const id = useId();
+	const element = ref(null);
+	const value = computed(() => toValue(options.value));
+	const disabled = computed(() => (toValue(options.disabled) ?? false) || (group?.state.value.disabled ?? false));
+	const own = useControlled({
+		value: () => toValue(options.pressed),
+		defaultValue: () => toValue(options.defaultPressed) ?? false,
+		prop: "modelValue",
+		empty: false,
+		name: "useToggle",
+		label: "pressed"
+	});
+	if (process.env.NODE_ENV !== "production" && group) watch(value, (current) => {
+		if (current === void 0) console.warn("[useToggle] A toggle inside a toggle group needs a `value`. Without one the group cannot tell it apart from its siblings, and it will never look pressed.");
+	}, { immediate: true });
+	const pressed = computed({
+		get: () => group ? value.value !== void 0 && group.isPressed(value.value) : own.value,
+		set(next) {
+			if (group) {
+				if (value.value !== void 0) group.setPressed(value.value, next);
+				return;
+			}
+			own.value = next;
+		}
+	});
+	if (group) {
+		watch([
+			value,
+			disabled,
+			element
+		], ([currentValue, isDisabled, currentElement]) => {
+			if (currentValue === void 0) return;
+			group.register({
+				id,
+				value: currentValue,
+				disabled: isDisabled,
+				element: currentElement
+			});
+		}, { immediate: true });
+		onScopeDispose(() => group.unregister(id));
+	}
+	function toggle(event) {
+		if (disabled.value) return;
+		const next = !pressed.value;
+		pressed.value = next;
+		options.onChange?.(next, event);
+	}
+	const state = computed(() => ({
+		pressed: pressed.value,
+		disabled: disabled.value,
+		invalid: group?.state.value.invalid ?? false
+	}));
+	const hooks = computed(() => dataAttrs(state.value, { pressed: (on) => on ? { "data-pressed": "" } : { "data-unpressed": "" } }));
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "toggle",
+		ref: setElement,
+		type: "button",
+		disabled: disabled.value || void 0,
+		"aria-pressed": pressed.value,
+		tabindex: group ? group.tabbableValue.value === value.value ? 0 : -1 : void 0,
+		onClick(event) {
+			toggle(event);
+		},
+		onFocus() {
+			if (group && value.value !== void 0) group.highlight(value.value);
+		}
+	}));
+	function setElement(next) {
+		element.value = next ?? null;
+	}
+	return {
+		pressed,
+		state,
+		rootProps,
+		toggle
+	};
+}
+function useToggleGroup(options = {}) {
+	const field = useOptionalFieldContext();
+	const multiple = () => toValue(options.multiple) ?? false;
+	const required = () => toValue(options.required) ?? false;
+	const announcedRequired = () => required() || (field?.required() ?? false);
+	const disabled = () => (toValue(options.disabled) ?? false) || (field?.state.value.disabled ?? false);
+	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false);
+	const controlled = isPropBound("modelValue");
+	const orientation = () => toValue(options.orientation) ?? "horizontal";
+	const group = useOptionalGroupContext();
+	const inToolbar = () => group?.state.value.variant === "toolbar";
+	const loop = () => toValue(options.loop) ?? !inToolbar();
+	const element = ref(null);
+	const value = useControlled({
+		value: () => toValue(options.value),
+		defaultValue: () => toValue(options.defaultValue) ?? (multiple() ? [] : null),
+		prop: "modelValue",
+		empty: () => multiple() ? [] : null,
+		onChange: options.onChange,
+		name: "useToggleGroup",
+		label: "value"
+	});
+	const pressedValues = computed(() => {
+		const current = value.value;
+		if (current == null) return [];
+		return Array.isArray(current) ? current : [current];
+	});
+	const registry = useRovingItems({ preferred: () => registry.ordered.value.find((item) => pressedValues.value.includes(item.value))?.value });
+	let warnedAboutEmpty = false;
+	function register(item) {
+		registry.register(item);
+		if (!required() || item.disabled || pressedValues.value.length > 0) return;
+		if (!controlled) {
+			value.value = multiple() ? [item.value] : item.value;
+			return;
+		}
+		if (process.env.NODE_ENV !== "production" && !warnedAboutEmpty) {
+			warnedAboutEmpty = true;
+			console.warn("[useToggleGroup] `required` cannot press a toggle for you here: the value is controlled and empty, and only its owner can change it. Give the bound ref a starting value, or drop the binding and use `defaultValue`, which is ignored while controlled.");
+		}
+	}
+	function isPressed(candidate) {
+		return pressedValues.value.includes(candidate);
+	}
+	function setPressed(candidate, pressed) {
+		if (disabled()) return;
+		const current = pressedValues.value;
+		let next;
+		if (multiple()) next = pressed ? [...current, candidate] : current.filter((entry) => entry !== candidate);
+		else next = pressed ? [candidate] : [];
+		if (required() && next.length === 0) return;
+		value.value = multiple() ? next : next[0] ?? null;
+	}
+	const state = computed(() => ({
+		disabled: disabled(),
+		required: announcedRequired(),
+		invalid: invalid(),
+		multiple: multiple(),
+		orientation: orientation()
+	}));
+	useFieldValue(field, () => value.value);
+	watch(() => pressedValues.value.length > 0, (filled) => field?.setFilled(filled), { immediate: true });
+	const hiddenInputs = computed(() => {
+		const name = toValue(options.name) ?? field?.name();
+		if (!name) return [];
+		const form = toValue(options.form);
+		return pressedValues.value.map((entry) => ({
+			name,
+			value: String(entry),
+			form
+		}));
+	});
+	const hooks = computed(() => dataAttrs(state.value));
+	const roving = useRovingFocus({
+		container: element,
+		itemSelector: TOGGLE_SELECTOR,
+		orientation,
+		loop
+	});
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "toggle-group",
+		ref: setElement,
+		role: "group",
+		"aria-labelledby": field?.labelledBy.value,
+		"aria-describedby": field?.describedBy.value,
+		"aria-required": announcedRequired() || void 0,
+		"aria-invalid": invalid() || void 0,
+		onKeydown(event) {
+			if (inToolbar() && !loop() && pastEnd(event.key)) return;
+			roving.onKeydown(event);
+		},
+		onFocusin: () => field?.setFocused(true),
+		onFocusout(event) {
+			const next = event.relatedTarget;
+			if (next instanceof Node && element.value?.contains(next)) return;
+			field?.setFocused(false);
+			field?.setTouched(true);
+		}
+	}));
+	function pastEnd(key) {
+		const vertical = orientation() === "vertical";
+		const index = roving.currentIndex();
+		if (key === (vertical ? "ArrowDown" : "ArrowRight")) return index === roving.items().length - 1;
+		if (key === (vertical ? "ArrowUp" : "ArrowLeft")) return index === 0;
+		return false;
+	}
+	function setElement(next) {
+		element.value = next ?? null;
+	}
+	return {
+		value,
+		pressedValues,
+		state,
+		rootProps,
+		hiddenInputs,
+		isPressed,
+		setPressed,
+		register,
+		unregister: registry.unregister,
+		highlight: registry.highlight,
+		tabbableValue: registry.tabbableValue
+	};
+}
+var { provideContext: provideToggleGroupContext, useContext: useToggleGroupContext, useOptionalContext: useOptionalToggleGroupContext } = createContext("ToggleGroup");
+//#endregion
+export { provideToggleGroupContext, useOptionalToggleGroupContext, useToggle, useToggleGroup };

package/dist/components/tooltip/TooltipArrow.js

@@ -0,0 +1,5 @@
+import TooltipArrow_vue_vue_type_script_setup_true_lang_default from "./TooltipArrow.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/TooltipArrow.vue
+var TooltipArrow_default = TooltipArrow_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TooltipArrow_default as default };

package/dist/components/tooltip/TooltipArrow.vue.d.ts

@@ -0,0 +1,23 @@
+import { type TooltipState } from './use-tooltip';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The tooltip's state.
+     * @slotOnly The element carries only `data-part="arrow"` and `data-side`.
+     */
+    default(props: TooltipState): 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/tooltip/TooltipArrow.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 { useTooltipContext } from "./use-tooltip.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/tooltip/TooltipArrow.vue?vue&type=script&setup=true&lang.ts
+var TooltipArrow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "TooltipArrow",
+	inheritAttrs: false,
+	__name: "TooltipArrow",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { arrowProps, state } = useTooltipContext();
+		const merged = usePartProps(arrowProps);
+		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 { TooltipArrow_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tooltip/TooltipGroup.js

@@ -0,0 +1,5 @@
+import TooltipGroup_vue_vue_type_script_setup_true_lang_default from "./TooltipGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/TooltipGroup.vue
+var TooltipGroup_default = TooltipGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TooltipGroup_default as default };

package/dist/components/tooltip/TooltipGroup.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** How long the pointer must rest before the first tooltip opens, in ms. @default 600 */
+    delay?: number;
+    /** How long after the pointer leaves before a tooltip hides, in ms. @default 0 */
+    closeDelay?: number;
+    /** How long after the last tooltip closes that neighbors still open instantly, in ms. @default 400 */
+    timeout?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/tooltip/TooltipGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { useTooltipGroup } from "./use-tooltip.js";
+import { defineComponent, renderSlot, toRef } from "vue";
+//#region src/components/tooltip/TooltipGroup.vue?vue&type=script&setup=true&lang.ts
+var TooltipGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "TooltipGroup",
+	__name: "TooltipGroup",
+	props: {
+		delay: {},
+		closeDelay: {},
+		timeout: {}
+	},
+	setup(__props) {
+		const props = __props;
+		useTooltipGroup({
+			delay: toRef(() => props.delay),
+			closeDelay: toRef(() => props.closeDelay),
+			timeout: toRef(() => props.timeout)
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+export { TooltipGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tooltip/TooltipRoot.js

@@ -0,0 +1,5 @@
+import TooltipRoot_vue_vue_type_script_setup_true_lang_default from "./TooltipRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/TooltipRoot.vue
+var TooltipRoot_default = TooltipRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TooltipRoot_default as default };

package/dist/components/tooltip/TooltipRoot.vue.d.ts

@@ -0,0 +1,60 @@
+import { type TooltipState } from './use-tooltip';
+import type { Align, Side } from '../../shared/use-positioning';
+type __VLS_Props = {
+    /** Whether the tooltip is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Opens at first, when no `v-model:open` owns it. @default false */
+    defaultOpen?: boolean;
+    /** Keeps the tooltip from opening. @default false */
+    disabled?: boolean;
+    /** Allow the pointer to move into the tooltip without closing it. @default true */
+    hoverable?: boolean;
+    /** How long the pointer rests on the trigger before it opens, in ms. A `TooltipGroup` sets it for its tooltips. @default 600 */
+    delay?: number;
+    /** How long after the pointer leaves before it closes, in ms. A `TooltipGroup` sets it too. @default 0 */
+    closeDelay?: number;
+    /** Which side of the trigger the tooltip prefers. @default 'top' */
+    side?: Side;
+    /** How the tooltip lines up along that side. @default 'center' */
+    align?: Align;
+    /** The gap between the trigger and the tooltip, in pixels. @default 8 */
+    sideOffset?: number;
+    /** Sides to try, in order, when the preferred one does not fit. */
+    fallbackSides?: Side[];
+    /** Allow dropping to the perpendicular axis as a last resort. @default true */
+    fallbackAxis?: boolean;
+};
+type __VLS_Slots = {
+    /**
+     * The tooltip's state.
+     * @slotOnly The root renders no element of its own: the trigger and the popup carry these as attributes.
+     */
+    default(props: TooltipState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-tooltip").UseTooltipReturn, {}, {}, {}, 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;
+}>, {
+    side: Side;
+    disabled: boolean;
+    open: boolean;
+    align: Align;
+    defaultOpen: boolean;
+    delay: number;
+    closeDelay: number;
+    sideOffset: number;
+    fallbackSides: Side[];
+    fallbackAxis: boolean;
+    hoverable: 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/tooltip/TooltipRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { provideTooltipContext, useTooltip } from "./use-tooltip.js";
+import { defineComponent, guardReactiveProps, normalizeProps, renderSlot, toRef, unref } from "vue";
+//#region src/components/tooltip/TooltipRoot.vue?vue&type=script&setup=true&lang.ts
+var TooltipRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "TooltipRoot",
+	__name: "TooltipRoot",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		hoverable: {
+			type: Boolean,
+			default: void 0
+		},
+		delay: { default: void 0 },
+		closeDelay: { default: void 0 },
+		side: { default: void 0 },
+		align: { default: void 0 },
+		sideOffset: { default: void 0 },
+		fallbackSides: { default: void 0 },
+		fallbackAxis: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:open", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useTooltip({
+			open: toRef(() => props.open),
+			defaultOpen: toRef(() => props.defaultOpen),
+			disabled: toRef(() => props.disabled),
+			hoverable: toRef(() => props.hoverable),
+			delay: toRef(() => props.delay),
+			closeDelay: toRef(() => props.closeDelay),
+			side: toRef(() => props.side),
+			align: toRef(() => props.align),
+			sideOffset: toRef(() => props.sideOffset),
+			fallbackSides: toRef(() => props.fallbackSides),
+			fallbackAxis: toRef(() => props.fallbackAxis),
+			onChange: (open) => {
+				emit("update:open", open);
+				emit("change", open);
+			}
+		});
+		provideTooltipContext(api);
+		__expose(api);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)));
+		};
+	}
+});
+//#endregion
+export { TooltipRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tooltip/TooltipTrigger.js

@@ -0,0 +1,5 @@
+import TooltipTrigger_vue_vue_type_script_setup_true_lang_default from "./TooltipTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tooltip/TooltipTrigger.vue
+var TooltipTrigger_default = TooltipTrigger_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TooltipTrigger_default as default };