@juxtui/ui 0.5.0 → 0.6.0

package/dist/JTooltip-CAL9lsPF.js

@@ -0,0 +1,1115 @@
+import { Comment, Fragment, Teleport, Text, Transition, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useId, useModel, watch, withCtx } from "vue";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+//#region src/utils/dom.ts
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+/** Resolve a template ref that may point at an element or a component instance. */
+function unrefElement(target) {
+	const value = unref(target);
+	if (!value) return null;
+	if (value instanceof Element) return value;
+	const el = value.$el;
+	if (el && el.nodeType !== Node.ELEMENT_NODE) {
+		const next = el.nextSibling;
+		return next instanceof HTMLElement ? next : null;
+	}
+	return el ?? null;
+}
+var FOCUSABLE = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"audio[controls]",
+	"video[controls]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]"
+].join(",");
+function isVisible(el) {
+	if (el.hidden) return false;
+	if (typeof el.checkVisibility === "function") return el.checkVisibility({ visibilityProperty: true });
+	for (let node = el; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return false;
+	}
+	return true;
+}
+/** Elements that can receive keyboard focus, in DOM order. */
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll(FOCUSABLE)).filter((el) => el.tabIndex >= 0 && !el.closest("[inert]") && isVisible(el));
+}
+function focusElement(el, options) {
+	if (!el) return;
+	el.focus({
+		preventScroll: true,
+		...options
+	});
+}
+var isMac = () => isClient && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+function prefersReducedMotion() {
+	return isClient && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+//#endregion
+//#region src/icons.ts
+function icon(name, children, viewBox = "0 0 16 16") {
+	const component = (props) => h("svg", {
+		"xmlns": "http://www.w3.org/2000/svg",
+		viewBox,
+		"width": 16,
+		"height": 16,
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": 1.5,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"aria-hidden": "true",
+		"focusable": "false",
+		...props
+	}, children());
+	component.displayName = name;
+	return component;
+}
+var IconCheck = icon("IconCheck", () => [h("path", { d: "M3.5 8.5l3 3 6-7" })]);
+var IconChevronDown = icon("IconChevronDown", () => [h("path", { d: "M4.5 6.25L8 9.75l3.5-3.5" })]);
+var IconChevronUpDown = icon("IconChevronUpDown", () => [h("path", { d: "M5.25 6L8 3.25 10.75 6M5.25 10L8 12.75 10.75 10" })]);
+var IconChevronRight = icon("IconChevronRight", () => [h("path", { d: "M6.25 4.5L9.75 8l-3.5 3.5" })]);
+var IconX = icon("IconX", () => [h("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" })]);
+var IconSearch = icon("IconSearch", () => [h("circle", {
+	cx: 7,
+	cy: 7,
+	r: 4.25
+}), h("path", { d: "M10.25 10.25L13 13" })]);
+var IconCircleCheck = icon("IconCircleCheck", () => [h("circle", {
+	cx: 8,
+	cy: 8,
+	r: 6.25
+}), h("path", { d: "M5.5 8.25l1.75 1.75L10.5 6.5" })]);
+var IconCircleX = icon("IconCircleX", () => [h("circle", {
+	cx: 8,
+	cy: 8,
+	r: 6.25
+}), h("path", { d: "M6.25 6.25l3.5 3.5M9.75 6.25l-3.5 3.5" })]);
+var IconAlert = icon("IconAlert", () => [
+	h("path", { d: "M7.13 2.75a1 1 0 0 1 1.74 0l5.15 9a1 1 0 0 1-.87 1.5H2.85a1 1 0 0 1-.87-1.5z" }),
+	h("path", { d: "M8 6.5v2.5" }),
+	h("path", {
+		"d": "M8 11.1v.01",
+		"stroke-width": 1.75
+	})
+]);
+var IconInfo = icon("IconInfo", () => [
+	h("circle", {
+		cx: 8,
+		cy: 8,
+		r: 6.25
+	}),
+	h("path", { d: "M8 7.5v3.25" }),
+	h("path", {
+		"d": "M8 5.25v.01",
+		"stroke-width": 1.75
+	})
+]);
+icon("IconCornerDownLeft", () => [h("path", { d: "M12.5 3.5v4.25a2 2 0 0 1-2 2h-7" }), h("path", { d: "M6 7l-2.5 2.75L6 12.5" })]);
+var IconChevronLeft = icon("IconChevronLeft", () => [h("path", { d: "M9.75 4.5L6.25 8l3.5 3.5" })]);
+var IconMoreHorizontal = icon("IconMoreHorizontal", () => [
+	h("circle", {
+		cx: 3.5,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	}),
+	h("circle", {
+		cx: 8,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	}),
+	h("circle", {
+		cx: 12.5,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	})
+]);
+var IconArrowUpRight = icon("IconArrowUpRight", () => [h("path", { d: "M5 11L11 5M5.5 5h5.5v5.5" })]);
+var IconArrowDownRight = icon("IconArrowDownRight", () => [h("path", { d: "M5 5l6 6M10.5 11H5V5.5" })]);
+/** The loading spinner used across Juxt. A quarter arc over a faint track. */
+var Spinner = (props) => {
+	const size = props.size ?? 16;
+	return h("svg", {
+		"class": "j-spinner",
+		"viewBox": "0 0 16 16",
+		"width": size,
+		"height": size,
+		"aria-hidden": "true",
+		"focusable": "false"
+	}, [h("circle", {
+		"class": "j-spinner__track",
+		"cx": 8,
+		"cy": 8,
+		"r": 6,
+		"stroke-width": 1.75
+	}), h("circle", {
+		"cx": 8,
+		"cy": 8,
+		"r": 6,
+		"stroke-width": 1.75,
+		"stroke-dasharray": "9.5 28",
+		"stroke-dashoffset": 0
+	})]);
+};
+Spinner.displayName = "JSpinner";
+//#endregion
+//#region src/composables/useHotkey.ts
+/**
+* Parse a shortcut such as `mod+k`, `shift+/` or `alt+t`.
+* `mod` is ⌘ on Apple platforms and Ctrl elsewhere.
+*/
+function matchesHotkey(event, hotkey) {
+	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const key = parts.pop();
+	if (!key) return false;
+	const mac = isMac();
+	const want = {
+		meta: parts.includes("meta") || mac && parts.includes("mod"),
+		ctrl: parts.includes("ctrl") || !mac && parts.includes("mod"),
+		alt: parts.includes("alt"),
+		shift: parts.includes("shift")
+	};
+	if (event.metaKey !== want.meta || event.ctrlKey !== want.ctrl || event.altKey !== want.alt || event.shiftKey !== want.shift) return false;
+	const code = event.code.toLowerCase();
+	return event.key.toLowerCase() === key || code === `key${key}` || code === `digit${key}`;
+}
+/** Human-readable parts of a shortcut, e.g. `mod+k` → `['⌘', 'K']`. */
+function formatHotkey(hotkey) {
+	const labels = isMac() ? {
+		mod: "⌘",
+		meta: "⌘",
+		ctrl: "⌃",
+		alt: "⌥",
+		shift: "⇧",
+		enter: "↵",
+		escape: "Esc"
+	} : {
+		mod: "Ctrl",
+		meta: "Win",
+		ctrl: "Ctrl",
+		alt: "Alt",
+		shift: "Shift",
+		enter: "Enter",
+		escape: "Esc"
+	};
+	return hotkey.split("+").map((part) => {
+		const lower = part.trim().toLowerCase();
+		return labels[lower] ?? (lower.length === 1 ? lower.toUpperCase() : part.trim());
+	});
+}
+/** Run `handler` whenever the shortcut is pressed anywhere on the page. */
+function useHotkey(hotkey, handler) {
+	function onKeydown(event) {
+		const value = toValue(hotkey);
+		if (!value || event.repeat || event.isComposing || event.defaultPrevented) return;
+		if (!matchesHotkey(event, value)) return;
+		event.preventDefault();
+		handler(event);
+	}
+	onMounted(() => document.addEventListener("keydown", onKeydown));
+	onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+}
+//#endregion
+//#region src/composables/useLayer.ts
+var layers = [];
+var listening = false;
+function top() {
+	return layers[layers.length - 1];
+}
+function onKeydown(event) {
+	if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+	const layer = top();
+	if (!layer?.options.onEscape) return;
+	event.preventDefault();
+	event.stopPropagation();
+	layer.options.onEscape(event);
+}
+function onPointerDown(event) {
+	const layer = top();
+	if (!layer?.options.onPointerDownOutside) return;
+	const target = event.target;
+	if (!target) return;
+	if (target.closest?.("[data-juxt-layer-ignore]")) return;
+	if (!layer.options.elements().some((el) => el?.contains(target))) layer.options.onPointerDownOutside(event);
+}
+function listen() {
+	if (listening || !isClient) return;
+	document.addEventListener("keydown", onKeydown);
+	document.addEventListener("pointerdown", onPointerDown, true);
+	listening = true;
+}
+function unlisten() {
+	if (!listening || layers.length > 0) return;
+	document.removeEventListener("keydown", onKeydown);
+	document.removeEventListener("pointerdown", onPointerDown, true);
+	listening = false;
+}
+function useLayer(options) {
+	const layer = { options };
+	const add = () => {
+		if (layers.includes(layer)) return;
+		layers.push(layer);
+		listen();
+	};
+	const remove = () => {
+		const index = layers.indexOf(layer);
+		if (index === -1) return;
+		layers.splice(index, 1);
+		unlisten();
+	};
+	if (isClient) {
+		watch(options.active, (value) => value ? add() : remove(), { immediate: true });
+		onBeforeUnmount(remove);
+	}
+	return { isTopLayer: () => top() === layer };
+}
+//#endregion
+//#region src/components/command-palette/search.ts
+var NO_MATCH = {
+	score: 0,
+	ranges: []
+};
+function matchText(query, text) {
+	const q = query.trim().toLowerCase();
+	if (!q) return {
+		score: 1,
+		ranges: []
+	};
+	const t = text.toLowerCase();
+	if (!t) return NO_MATCH;
+	if (t === q) return {
+		score: 1e3,
+		ranges: [[0, t.length]]
+	};
+	if (t.startsWith(q)) return {
+		score: 900 - Math.min(t.length - q.length, 100),
+		ranges: [[0, q.length]]
+	};
+	const wordStart = findWordStart(t, q);
+	if (wordStart > 0) return {
+		score: 700 - Math.min(wordStart, 100),
+		ranges: [[wordStart, wordStart + q.length]]
+	};
+	const index = t.indexOf(q);
+	if (index > 0) return {
+		score: 500 - Math.min(index, 100),
+		ranges: [[index, index + q.length]]
+	};
+	return subsequence(q, t);
+}
+function findWordStart(t, q) {
+	let from = 0;
+	while (from < t.length) {
+		const index = t.indexOf(q, from);
+		if (index === -1) return -1;
+		if (index > 0 && /[\s\-_/.:]/.test(t[index - 1])) return index;
+		from = index + 1;
+	}
+	return -1;
+}
+/** Letters in order, not necessarily adjacent | "gtst" finds "Go to settings". */
+function subsequence(q, t) {
+	const ranges = [];
+	let ti = 0;
+	let score = 100;
+	let previous = -2;
+	for (const char of q) {
+		if (char === " ") continue;
+		const found = t.indexOf(char, ti);
+		if (found === -1) return NO_MATCH;
+		if (found === previous + 1 && ranges.length) {
+			ranges[ranges.length - 1][1] = found + 1;
+			score += 12;
+		} else {
+			ranges.push([found, found + 1]);
+			if (found === 0 || /[\s\-_/.:]/.test(t[found - 1])) score += 8;
+		}
+		score -= Math.min(found - ti, 10);
+		previous = found;
+		ti = found + 1;
+	}
+	return {
+		score: Math.max(score, 1),
+		ranges
+	};
+}
+/** Split text into highlighted and plain runs. */
+function splitByRanges(text, ranges) {
+	if (!ranges.length) return [{
+		text,
+		match: false
+	}];
+	const parts = [];
+	let cursor = 0;
+	for (const [start, end] of ranges) {
+		if (start > cursor) parts.push({
+			text: text.slice(cursor, start),
+			match: false
+		});
+		parts.push({
+			text: text.slice(start, end),
+			match: true
+		});
+		cursor = end;
+	}
+	if (cursor < text.length) parts.push({
+		text: text.slice(cursor),
+		match: false
+	});
+	return parts;
+}
+//#endregion
+//#region src/components/primitives/JPortal.vue
+var JPortal_default = /* @__PURE__ */ defineComponent({
+	__name: "JPortal",
+	props: { to: { default: "body" } },
+	setup(__props) {
+		/**
+		* Internal: teleports its content to `<body>`, but only once mounted.
+		*
+		* Server-rendered teleports to `body` never make it into the HTML, so a plain
+		* `<Teleport>` hydrates against nothing and warns. Rendering nothing until
+		* mount keeps server and client output identical | and overlays are closed on
+		* first paint anyway.
+		*/
+		const mounted = ref(false);
+		onMounted(() => mounted.value = true);
+		return (_ctx, _cache) => {
+			return mounted.value ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: __props.to
+			}, [renderSlot(_ctx.$slots, "default")], 8, ["to"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/primitives/JSlot.ts
+function firstElement(nodes) {
+	if (!nodes) return void 0;
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		if (node.type === Fragment && Array.isArray(node.children)) {
+			const found = firstElement(node.children);
+			if (found) return found;
+			continue;
+		}
+		if (node.type === Text) {
+			if (typeof node.children === "string" && node.children.trim() === "") continue;
+			return h("span", null, node.children);
+		}
+		return node;
+	}
+}
+/**
+* Internal: renders its first child element and merges its own attributes
+* (ARIA, listeners, ids) onto it | no wrapper element.
+*/
+var JSlot = defineComponent({
+	name: "JSlot",
+	inheritAttrs: false,
+	setup(_, { slots, attrs }) {
+		return () => {
+			const child = firstElement(slots.default?.());
+			if (!child) return null;
+			const { id, ...rest } = attrs;
+			return cloneVNode(child, child.props?.id ? rest : {
+				id,
+				...rest
+			}, true);
+		};
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/context.ts
+var MENU_ROOT = Symbol("JDropdownMenu");
+var MENU_LEVEL = Symbol("JDropdownMenuLevel");
+function getMenuItems(content) {
+	if (!content) return [];
+	return Array.from(content.querySelectorAll("[role^=\"menuitem\"]:not([aria-disabled=\"true\"])"));
+}
+//#endregion
+//#region src/composables/useFloating.ts
+var ORIGIN = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* Position a floating element next to a reference element and keep it there
+* through scroll and resize. Coordinates are written to `left`/`top` so
+* `transform` stays free for enter/leave motion.
+*/
+function useFloating(reference, floating, options = {}) {
+	const read = () => typeof options === "function" ? options() : options;
+	const x = ref(0);
+	const y = ref(0);
+	const placement = ref(read().placement ?? "bottom-start");
+	const availableHeight = ref();
+	const referenceWidth = ref();
+	const stop = shallowRef();
+	async function update() {
+		const referenceEl = reference.value;
+		const floatingEl = floating.value;
+		if (!referenceEl || !floatingEl) return;
+		const opts = read();
+		const padding = opts.padding ?? 8;
+		const result = await computePosition(referenceEl, floatingEl, {
+			strategy: "fixed",
+			placement: opts.placement ?? "bottom-start",
+			middleware: [
+				offset(opts.offset ?? 6),
+				flip({ padding }),
+				shift({ padding }),
+				size({
+					padding,
+					apply({ availableHeight: height, rects }) {
+						availableHeight.value = Math.max(120, Math.floor(height));
+						referenceWidth.value = rects.reference.width;
+					}
+				})
+			]
+		});
+		x.value = Math.round(result.x);
+		y.value = Math.round(result.y);
+		placement.value = result.placement;
+	}
+	watch([reference, floating], ([referenceEl, floatingEl]) => {
+		stop.value?.();
+		stop.value = void 0;
+		if (referenceEl && floatingEl) stop.value = autoUpdate(referenceEl, floatingEl, update);
+	}, { flush: "post" });
+	onBeforeUnmount(() => stop.value?.());
+	const side = computed(() => placement.value.split("-")[0]);
+	return {
+		x,
+		y,
+		placement,
+		side,
+		styles: computed(() => {
+			const align = placement.value.split("-")[1];
+			const cross = side.value === "top" || side.value === "bottom" ? align === "start" ? "left" : align === "end" ? "right" : "center" : align === "start" ? "top" : align === "end" ? "bottom" : "center";
+			const origin = side.value === "top" || side.value === "bottom" ? `${cross} ${ORIGIN[side.value]}` : `${ORIGIN[side.value]} ${cross}`;
+			const dir = side.value === "top" ? 1 : side.value === "bottom" ? -1 : 0;
+			return {
+				"position": "fixed",
+				"left": `${x.value}px`,
+				"top": `${y.value}px`,
+				"transformOrigin": origin,
+				"minWidth": read().matchWidth && referenceWidth.value ? `${referenceWidth.value}px` : void 0,
+				"--j-available-height": availableHeight.value ? `${availableHeight.value}px` : void 0,
+				"--j-pop-dir": String(dir),
+				"--j-pop-x": String(side.value === "left" ? 1 : side.value === "right" ? -1 : 0)
+			};
+		}),
+		update
+	};
+}
+//#endregion
+//#region src/composables/useTypeahead.ts
+/**
+* Type-to-jump for lists. Characters typed in quick succession form a query;
+* repeating the same letter cycles through matches.
+*/
+function useTypeahead(timeout = 500) {
+	let query = "";
+	let timer;
+	function search(key, items, getLabel, currentIndex) {
+		if (key.length !== 1 || key === " " && query === "") return -1;
+		clearTimeout(timer);
+		timer = setTimeout(() => query = "", timeout);
+		query += key.toLowerCase();
+		const repeated = query.length > 1 && [...query].every((char) => char === query[0]);
+		const needle = repeated ? query[0] : query;
+		const start = repeated || query.length === 1 ? currentIndex + 1 : currentIndex;
+		for (let i = 0; i < items.length; i++) {
+			const index = (start + i + items.length) % items.length;
+			if (getLabel(items[index]).trim().toLowerCase().startsWith(needle)) return index;
+		}
+		return -1;
+	}
+	const isSearching = () => query.length > 0;
+	return {
+		search,
+		isSearching
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/JMenuContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["id", "aria-labelledby"];
+//#endregion
+//#region src/components/dropdown-menu/JMenuContent.vue
+var JMenuContent_default = /* @__PURE__ */ defineComponent({
+	__name: "JMenuContent",
+	props: {
+		open: { type: Boolean },
+		reference: {},
+		id: {},
+		labelledby: {},
+		placement: {},
+		offset: {},
+		initialFocus: {},
+		isSub: { type: Boolean }
+	},
+	emits: [
+		"escape",
+		"outside",
+		"back",
+		"pointerenter"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Internal: the floating list shared by the root menu and submenus.
+		* Owns positioning, keyboard navigation, typeahead and the layer.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const root = inject(MENU_ROOT);
+		const content = ref(null);
+		const { styles } = useFloating(toRef(props, "reference"), content, () => ({
+			placement: props.placement,
+			offset: props.offset
+		}));
+		const typeahead = useTypeahead();
+		useLayer({
+			active: toRef(props, "open"),
+			elements: () => [content.value, props.reference],
+			onEscape: () => emit("escape"),
+			onPointerDownOutside: (event) => emit("outside", event)
+		});
+		const openSub = ref(null);
+		let subTimer;
+		provide(MENU_LEVEL, {
+			content,
+			openSub,
+			setOpenSub: (id) => {
+				clearTimeout(subTimer);
+				openSub.value = id;
+			},
+			scheduleSubClose: () => {
+				if (!openSub.value) return;
+				clearTimeout(subTimer);
+				subTimer = setTimeout(() => openSub.value = null, 180);
+			},
+			cancelSubClose: () => clearTimeout(subTimer)
+		});
+		watch(() => props.open, async (value) => {
+			if (!value) {
+				openSub.value = null;
+				return;
+			}
+			if (props.initialFocus === "none") return;
+			await nextTick();
+			const items = getMenuItems(content.value);
+			if (props.initialFocus === "first") focusElement(items[0] ?? content.value);
+			else if (props.initialFocus === "last") focusElement(items[items.length - 1] ?? content.value);
+			else focusElement(content.value);
+		}, { flush: "post" });
+		function move(delta) {
+			const items = getMenuItems(content.value);
+			if (items.length === 0) return;
+			const current = items.indexOf(document.activeElement);
+			let next;
+			if (delta === "first") next = 0;
+			else if (delta === "last") next = items.length - 1;
+			else if (current === -1) next = delta === 1 ? 0 : items.length - 1;
+			else next = (current + delta + items.length) % items.length;
+			focusElement(items[next]);
+		}
+		function onKeydown(event) {
+			const { key } = event;
+			switch (key) {
+				case "ArrowDown":
+					event.preventDefault();
+					move(1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					move(-1);
+					break;
+				case "Home":
+				case "PageUp":
+					event.preventDefault();
+					move("first");
+					break;
+				case "End":
+				case "PageDown":
+					event.preventDefault();
+					move("last");
+					break;
+				case "ArrowLeft":
+					if (props.isSub) {
+						event.preventDefault();
+						emit("back");
+					}
+					break;
+				case "Tab":
+					event.preventDefault();
+					root.close(true);
+					break;
+				case "Enter":
+				case " ": {
+					const active = document.activeElement;
+					if (active && active !== content.value && content.value?.contains(active)) {
+						event.preventDefault();
+						active.click();
+					}
+					break;
+				}
+				default: if (key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+					const items = getMenuItems(content.value);
+					const index = typeahead.search(key, items, (item) => item.textContent ?? "", items.indexOf(document.activeElement));
+					if (index >= 0) focusElement(items[index]);
+				}
+			}
+		}
+		__expose({ content });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(JPortal_default, null, {
+				default: withCtx(() => [createVNode(Transition, { name: "j-pop" }, {
+					default: withCtx(() => [__props.open ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: __props.id,
+						ref_key: "content",
+						ref: content,
+						role: "menu",
+						tabindex: "-1",
+						class: normalizeClass(["j-menu j-popover-surface", { "j-menu--sub": __props.isSub }]),
+						style: normalizeStyle(unref(styles)),
+						"aria-labelledby": __props.labelledby,
+						"aria-orientation": "vertical",
+						onKeydown,
+						onPointerenter: _cache[0] || (_cache[0] = ($event) => emit("pointerenter"))
+					}, [renderSlot(_ctx.$slots, "default")], 46, _hoisted_1$2)) : createCommentVNode("", true)]),
+					_: 3
+				})]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/JDropdownMenu.vue
+var JDropdownMenu_default = /* @__PURE__ */ defineComponent({
+	__name: "JDropdownMenu",
+	props: /*@__PURE__*/ mergeModels({
+		placement: { default: "bottom-start" },
+		offset: { default: 6 },
+		disabled: { type: Boolean }
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const open = useModel(__props, "open");
+		const id = useId();
+		const triggerId = `j-${id}-trigger`;
+		const menuId = `j-${id}-menu`;
+		const triggerRef = ref();
+		const triggerEl = computed(() => unrefElement(triggerRef.value));
+		const initialFocus = ref("content");
+		function show(focus) {
+			if (props.disabled) return;
+			initialFocus.value = focus;
+			open.value = true;
+		}
+		function close(restoreFocus = true) {
+			if (!open.value) return;
+			open.value = false;
+			if (restoreFocus) nextTick(() => focusElement(triggerEl.value));
+		}
+		provide(MENU_ROOT, { close });
+		function onClick(event) {
+			if (open.value) return close(false);
+			show(event.detail === 0 ? "first" : "content");
+		}
+		function onKeydown(event) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				show(event.key === "ArrowDown" ? "first" : "last");
+			}
+		}
+		const triggerProps = computed(() => ({
+			"id": triggerId,
+			"aria-haspopup": "menu",
+			"aria-expanded": open.value,
+			"aria-controls": open.value ? menuId : void 0,
+			"data-state": open.value ? "open" : "closed",
+			"onClick": onClick,
+			"onKeydown": onKeydown
+		}));
+		__expose({
+			open: () => show("content"),
+			close
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(JSlot), mergeProps({
+				ref_key: "triggerRef",
+				ref: triggerRef
+			}, triggerProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", { open: open.value })]),
+				_: 3
+			}, 16), createVNode(JMenuContent_default, {
+				id: menuId,
+				open: open.value,
+				reference: triggerEl.value,
+				labelledby: triggerEl.value?.id || triggerId,
+				placement: __props.placement,
+				offset: __props.offset,
+				"initial-focus": initialFocus.value,
+				onEscape: _cache[0] || (_cache[0] = ($event) => close(true)),
+				onOutside: _cache[1] || (_cache[1] = ($event) => close(false))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"open",
+				"reference",
+				"labelledby",
+				"placement",
+				"offset",
+				"initial-focus"
+			])], 64);
+		};
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/JDropdownMenuItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = {
+	key: 0,
+	class: "j-menu__icon"
+};
+var _hoisted_2$1 = { class: "j-menu__text" };
+var _hoisted_3$1 = {
+	key: 1,
+	class: "j-menu__shortcut"
+};
+//#endregion
+//#region src/components/dropdown-menu/JDropdownMenuItem.vue
+var JDropdownMenuItem_default = /* @__PURE__ */ defineComponent({
+	__name: "JDropdownMenuItem",
+	props: {
+		disabled: { type: Boolean },
+		destructive: { type: Boolean },
+		shortcut: {},
+		as: { default: "div" },
+		checked: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const root = inject(MENU_ROOT);
+		const level = inject(MENU_LEVEL);
+		const el = ref(null);
+		function onClick(event) {
+			if (props.disabled) {
+				event.preventDefault();
+				return;
+			}
+			const selectEvent = new Event("select", { cancelable: true });
+			emit("select", selectEvent);
+			if (!selectEvent.defaultPrevented) root.close(true);
+		}
+		function resolve(target) {
+			const value = target;
+			return value instanceof HTMLElement ? value : value?.$el ?? null;
+		}
+		function onPointerMove() {
+			level.scheduleSubClose();
+			const node = resolve(el.value);
+			if (props.disabled || !node || document.activeElement === node) return;
+			focusElement(node);
+		}
+		function onPointerLeave() {
+			const node = resolve(el.value);
+			if (node && document.activeElement === node) focusElement(level.content.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "el",
+				ref: el,
+				role: __props.checked === void 0 ? "menuitem" : "menuitemradio",
+				"aria-checked": __props.checked === void 0 ? void 0 : __props.checked,
+				tabindex: "-1",
+				class: normalizeClass(["j-menu__item", { "j-menu__item--destructive": __props.destructive }]),
+				"aria-disabled": __props.disabled || void 0,
+				onClick,
+				onPointermove: onPointerMove,
+				onPointerleave: onPointerLeave
+			}, {
+				default: withCtx(() => [
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$1, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "default")]),
+					__props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(__props.shortcut), 1)) : createCommentVNode("", true),
+					__props.checked !== void 0 ? (openBlock(), createBlock(unref(IconCheck), {
+						key: 2,
+						class: normalizeClass(["j-menu__check", { "is-checked": __props.checked }])
+					}, null, 8, ["class"])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 40, [
+				"role",
+				"aria-checked",
+				"class",
+				"aria-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/JFieldShell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "j-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = { class: "j-field__messages" };
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["id"];
+//#endregion
+//#region src/components/field/JFieldShell.vue
+var JFieldShell_default = /* @__PURE__ */ defineComponent({
+	__name: "JFieldShell",
+	props: {
+		id: {},
+		labelId: {},
+		descriptionId: {},
+		errorId: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		showDescription: { type: Boolean },
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		labelFor: {}
+	},
+	setup(__props) {
+		/**
+		* Internal: lays out label, control, description and error for form fields.
+		* Not exported | every field component composes it.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["j-field", { "is-disabled": __props.disabled }]) }, [
+				__props.label || _ctx.$slots.label ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelFor === null ? "span" : "label"), {
+					key: 0,
+					id: __props.labelId,
+					class: "j-field__label",
+					for: __props.labelFor === null ? void 0 : __props.labelFor ?? __props.id
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_1, "*")) : createCommentVNode("", true)]),
+					_: 3
+				}, 8, ["id", "for"])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default"),
+				createElementVNode("div", _hoisted_2, [createVNode(Transition, {
+					name: "j-field-message",
+					mode: "out-in"
+				}, {
+					default: withCtx(() => [__props.errorMessage ? (openBlock(), createElementBlock("p", {
+						id: __props.errorId,
+						key: __props.errorMessage,
+						class: "j-field__error"
+					}, toDisplayString(__props.errorMessage), 9, _hoisted_3)) : __props.showDescription ? (openBlock(), createElementBlock("p", {
+						key: 1,
+						id: __props.descriptionId,
+						class: "j-field__description"
+					}, toDisplayString(__props.description), 9, _hoisted_4)) : createCommentVNode("", true)]),
+					_: 1
+				})])
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/field/useField.ts
+/** Ids and ARIA wiring shared by every form control. */
+function useField(props) {
+	const generated = useId();
+	const p = () => toValue(props);
+	const id = computed(() => p().id ?? `j-${generated}`);
+	const labelId = computed(() => `${id.value}-label`);
+	const descriptionId = computed(() => `${id.value}-description`);
+	const errorId = computed(() => `${id.value}-error`);
+	const invalid = computed(() => !!p().error);
+	const errorMessage = computed(() => typeof p().error === "string" ? p().error : "");
+	return {
+		id,
+		labelId,
+		descriptionId,
+		errorId,
+		invalid,
+		errorMessage,
+		showDescription: computed(() => !!p().description && !errorMessage.value),
+		describedBy: computed(() => {
+			const ids = [];
+			if (errorMessage.value) ids.push(errorId.value);
+			else if (p().description) ids.push(descriptionId.value);
+			return ids.length ? ids.join(" ") : void 0;
+		})
+	};
+}
+//#endregion
+//#region src/components/kbd/JKbd.vue
+var JKbd_default = /* @__PURE__ */ defineComponent({
+	__name: "JKbd",
+	props: {
+		keys: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const mounted = ref(false);
+		onMounted(() => mounted.value = true);
+		const parts = computed(() => {
+			if (!props.keys) return [];
+			if (!mounted.value) return props.keys.split("+").map((part) => part === "mod" ? "Ctrl" : part.length === 1 ? part.toUpperCase() : part);
+			return formatHotkey(props.keys);
+		});
+		return (_ctx, _cache) => {
+			return __props.keys ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["j-kbd-group", `j-kbd-group--${__props.size}`])
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(parts.value, (part, i) => {
+				return openBlock(), createElementBlock("kbd", {
+					key: i,
+					class: "j-kbd"
+				}, toDisplayString(part), 1);
+			}), 128))], 2)) : (openBlock(), createElementBlock("kbd", {
+				key: 1,
+				class: normalizeClass(["j-kbd", { "j-kbd--sm": __props.size === "sm" }])
+			}, [renderSlot(_ctx.$slots, "default")], 2));
+		};
+	}
+});
+//#endregion
+//#region src/components/tooltip/JTooltip.vue?vue&type=script&setup=true&lang.ts
+var warmUntil = 0;
+var WARM_WINDOW = 400;
+//#endregion
+//#region src/components/tooltip/JTooltip.vue
+var JTooltip_default = /* @__PURE__ */ defineComponent({
+	__name: "JTooltip",
+	props: {
+		content: {},
+		side: { default: "top" },
+		align: { default: "center" },
+		delay: { default: 450 },
+		disabled: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const id = `j-${useId()}-tooltip`;
+		const open = ref(false);
+		const triggerRef = ref();
+		const triggerEl = computed(() => unrefElement(triggerRef.value));
+		const floating = ref(null);
+		const placement = computed(() => props.align === "center" ? props.side : `${props.side}-${props.align}`);
+		const { styles } = useFloating(triggerEl, floating, () => ({
+			placement: placement.value,
+			offset: 6
+		}));
+		useLayer({
+			active: open,
+			elements: () => [triggerEl.value, floating.value],
+			onEscape: () => hide(true)
+		});
+		let openTimer;
+		let closeTimer;
+		let suppressed = false;
+		function show(immediate = false) {
+			if (props.disabled || suppressed) return;
+			clearTimeout(closeTimer);
+			if (open.value) return;
+			clearTimeout(openTimer);
+			if (immediate || Date.now() < warmUntil) open.value = true;
+			else openTimer = setTimeout(() => open.value = true, props.delay);
+		}
+		function hide(immediate = false) {
+			clearTimeout(openTimer);
+			clearTimeout(closeTimer);
+			const close = () => {
+				if (open.value) warmUntil = Date.now() + WARM_WINDOW;
+				open.value = false;
+			};
+			if (immediate) close();
+			else closeTimer = setTimeout(close, 80);
+		}
+		onBeforeUnmount(() => {
+			clearTimeout(openTimer);
+			clearTimeout(closeTimer);
+		});
+		const triggerProps = computed(() => ({
+			"aria-describedby": props.disabled ? void 0 : id,
+			"onPointerenter": (event) => event.pointerType === "mouse" && show(),
+			"onPointerleave": (event) => {
+				suppressed = false;
+				if (event.pointerType === "mouse") hide();
+			},
+			"onPointerdown": () => {
+				suppressed = true;
+				hide(true);
+			},
+			"onFocus": (event) => {
+				if (event.target.matches(":focus-visible")) show(true);
+			},
+			"onBlur": () => hide(true)
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(JSlot), mergeProps({
+					ref_key: "triggerRef",
+					ref: triggerRef
+				}, triggerProps.value), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16),
+				!__props.disabled ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					id,
+					class: "j-sr-only"
+				}, [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])])) : createCommentVNode("", true),
+				createVNode(JPortal_default, null, {
+					default: withCtx(() => [createVNode(Transition, { name: "j-tooltip" }, {
+						default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref_key: "floating",
+							ref: floating,
+							class: "j-tooltip",
+							style: normalizeStyle(unref(styles)),
+							"aria-hidden": "true",
+							"data-juxt-layer-ignore": "",
+							onPointerenter: _cache[0] || (_cache[0] = ($event) => show(true)),
+							onPointerleave: _cache[1] || (_cache[1] = ($event) => hide())
+						}, [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])], 36)) : createCommentVNode("", true)]),
+						_: 3
+					})]),
+					_: 3
+				})
+			], 64);
+		};
+	}
+});
+//#endregion
+export { IconCircleX as A, unrefElement as B, IconArrowUpRight as C, IconChevronRight as D, IconChevronLeft as E, Spinner as F, focusElement as I, getFocusableElements as L, IconMoreHorizontal as M, IconSearch as N, IconChevronUpDown as O, IconX as P, isClient as R, IconArrowDownRight as S, IconChevronDown as T, useLayer as _, JDropdownMenuItem_default as a, useHotkey as b, useTypeahead as c, MENU_ROOT as d, getMenuItems as f, splitByRanges as g, matchText as h, JFieldShell_default as i, IconInfo as j, IconCircleCheck as k, useFloating as l, JPortal_default as m, JKbd_default as n, JDropdownMenu_default as o, JSlot as p, useField as r, JMenuContent_default as s, JTooltip_default as t, MENU_LEVEL as u, formatHotkey as v, IconCheck as w, IconAlert as x, matchesHotkey as y, prefersReducedMotion as z };
+
+//# sourceMappingURL=JTooltip-CAL9lsPF.js.map