@vizejs/fresco 0.718.0 → 0.720.0

package/dist/{components-DzkL-yHj.mjs → components-DgDohiXo.mjs}

@@ -1,5 +1,5 @@
-import { A as useFocusManager, O as provideFocusScope, k as useFocus, m as getLastRenderLayout } from "./app-C_wFlWSV.mjs";
-import { a as useInput, c as useIsScreenReaderEnabled, i as useMouse, n as createVirtualViewport, t as useBoxMetrics } from "./useBoxMetrics-lF5Myjc7.mjs";
+import { A as useFocusManager, O as provideFocusScope, k as useFocus, m as getLastRenderLayout } from "./app-CjfLCWic.mjs";
+import { a as useInput, c as useIsScreenReaderEnabled, i as useMouse, n as createVirtualViewport, t as useBoxMetrics } from "./useBoxMetrics-BMD1acRU.mjs";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
 //#region src/components/Box.ts
 /**
@@ -56,6 +56,7 @@ const Box = defineComponent({
 		overflow: String,
 		overflowX: String,
 		overflowY: String,
+		focusId: String,
 		border: String,
 		borderStyle: String,
 		borderTop: Boolean,
@@ -145,7 +146,8 @@ const Box = defineComponent({
 				"aria-label": props.ariaLabel,
 				"aria-hidden": props.ariaHidden,
 				"aria-role": props.ariaRole,
-				"aria-state": props.ariaState
+				"aria-state": props.ariaState,
+				focusId: props.focusId
 			}, children);
 		};
 	}
@@ -166,11 +168,11 @@ var FrescoSpacer_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoDivider.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$11 = ["fg"];
-const _hoisted_2$8 = ["fg"];
-const _hoisted_3$7 = ["fg"];
-const _hoisted_4$3 = ["fg"];
-const _hoisted_5$2 = ["fg"];
+const _hoisted_1$10 = ["fg"];
+const _hoisted_2$7 = ["fg"];
+const _hoisted_3$6 = ["fg"];
+const _hoisted_4$2 = ["fg"];
+const _hoisted_5$1 = ["fg"];
 //#endregion
 //#region src/components/FrescoDivider.vue
 var FrescoDivider_default = /* @__PURE__ */ defineComponent({
@@ -211,20 +213,20 @@ var FrescoDivider_default = /* @__PURE__ */ defineComponent({
 			return __props.direction === "vertical" ? (openBlock(), createElementBlock("text", {
 				key: 0,
 				fg: __props.fg
-			}, toDisplayString(dividerChar.value), 9, _hoisted_1$11)) : __props.title ? (openBlock(), createElementBlock("div", {
+			}, toDisplayString(dividerChar.value), 9, _hoisted_1$10)) : __props.title ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				style: titleRowStyle
 			}, [
-				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_2$8),
+				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_2$7),
 				createElementVNode("text", {
 					fg: __props.titleFg ?? __props.fg,
 					bold: true
-				}, toDisplayString(titleLabel.value), 9, _hoisted_3$7),
-				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_4$3)
+				}, toDisplayString(titleLabel.value), 9, _hoisted_3$6),
+				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_4$2)
 			])) : (openBlock(), createElementBlock("text", {
 				key: 2,
 				fg: __props.fg
-			}, toDisplayString(dividerChar.value.repeat(40)), 9, _hoisted_5$2));
+			}, toDisplayString(dividerChar.value.repeat(40)), 9, _hoisted_5$1));
 		};
 	}
 });
@@ -417,17 +419,17 @@ const Grid = defineComponent({
 });
 //#endregion
 //#region src/components/FrescoCard.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$10 = [
+const _hoisted_1$9 = [
 	"border",
 	"fg",
 	"bg"
 ];
-const _hoisted_2$7 = ["fg"];
-const _hoisted_3$6 = {
+const _hoisted_2$6 = ["fg"];
+const _hoisted_3$5 = {
 	key: 1,
 	dim: true
 };
-const _hoisted_4$2 = { dim: true };
+const _hoisted_4$1 = { dim: true };
 //#endregion
 //#region src/components/FrescoCard.vue
 var FrescoCard_default = /* @__PURE__ */ defineComponent({
@@ -499,13 +501,13 @@ var FrescoCard_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					fg: __props.titleFg,
 					bold: true
-				}, toDisplayString(__props.title), 9, _hoisted_2$7)) : createCommentVNode("v-if", true), __props.subtitle ? (openBlock(), createElementBlock("text", _hoisted_3$6, toDisplayString(subtitleLabel.value), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				}, toDisplayString(__props.title), 9, _hoisted_2$6)) : createCommentVNode("v-if", true), __props.subtitle ? (openBlock(), createElementBlock("text", _hoisted_3$5, toDisplayString(subtitleLabel.value), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
 				createElementVNode("div", { style: contentStyle }, [renderSlot(_ctx.$slots, "default")]),
 				hasFooter.value ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					style: footerStyle
-				}, [renderSlot(_ctx.$slots, "footer", {}, () => [createElementVNode("text", _hoisted_4$2, toDisplayString(__props.footer), 1)])])) : createCommentVNode("v-if", true)
-			], 12, _hoisted_1$10);
+				}, [renderSlot(_ctx.$slots, "footer", {}, () => [createElementVNode("text", _hoisted_4$1, toDisplayString(__props.footer), 1)])])) : createCommentVNode("v-if", true)
+			], 12, _hoisted_1$9);
 		};
 	}
 });
@@ -1020,7 +1022,7 @@ var ScrollBox_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoNewline.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$9 = ["text"];
+const _hoisted_1$8 = ["text"];
 //#endregion
 //#region src/components/FrescoNewline.vue
 var FrescoNewline_default = /* @__PURE__ */ defineComponent({
@@ -1034,7 +1036,7 @@ var FrescoNewline_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const content = computed(() => "\n".repeat(Math.max(0, __props.count)));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("text", { text: content.value }, null, 8, _hoisted_1$9);
+			return openBlock(), createElementBlock("text", { text: content.value }, null, 8, _hoisted_1$8);
 		};
 	}
 });
@@ -1085,7 +1087,7 @@ var FrescoStatic_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoTransform.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$8 = ["text", "aria-label"];
+const _hoisted_1$7 = ["text", "aria-label"];
 //#endregion
 //#region src/components/FrescoTransform.vue
 var FrescoTransform_default = /* @__PURE__ */ defineComponent({
@@ -1113,7 +1115,7 @@ var FrescoTransform_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("text", {
 				text: content.value,
 				"aria-label": __props.accessibilityLabel
-			}, null, 8, _hoisted_1$8);
+			}, null, 8, _hoisted_1$7);
 		};
 	}
 });
@@ -1846,7 +1848,7 @@ function renderMarkdown(source, options = {}, renderer = defaultMarkdownRenderer
 }
 //#endregion
 //#region src/components/FrescoMarkdown.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$7 = [
+const _hoisted_1$6 = [
 	"text",
 	"fg",
 	"bold",
@@ -1914,7 +1916,7 @@ var FrescoMarkdown_default = /* @__PURE__ */ defineComponent({
 						italic: span.italic,
 						underline: span.underline,
 						dim: span.dim
-					}, null, 8, _hoisted_1$7);
+					}, null, 8, _hoisted_1$6);
 				}), 128))]);
 			}), 128))]);
 		};
@@ -2452,8 +2454,8 @@ const Diff = defineComponent({
 });
 //#endregion
 //#region src/components/FrescoLink.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$6 = ["fg", "underline"];
-const _hoisted_2$6 = {
+const _hoisted_1$5 = ["fg", "underline"];
+const _hoisted_2$5 = {
 	key: 0,
 	dim: true
 };
@@ -2493,7 +2495,7 @@ var FrescoLink_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", { style: rowStyle }, [createElementVNode("text", {
 				fg: __props.fg,
 				underline: __props.underline
-			}, toDisplayString(__props.text), 9, _hoisted_1$6), __props.showUrl && __props.url ? (openBlock(), createElementBlock("text", _hoisted_2$6, " (" + toDisplayString(__props.url) + ")", 1)) : createCommentVNode("v-if", true)]);
+			}, toDisplayString(__props.text), 9, _hoisted_1$5), __props.showUrl && __props.url ? (openBlock(), createElementBlock("text", _hoisted_2$5, " (" + toDisplayString(__props.url) + ")", 1)) : createCommentVNode("v-if", true)]);
 		};
 	}
 });
@@ -3353,6 +3355,7 @@ const Select = defineComponent({
 			type: String,
 			default: "Select an option"
 		},
+		maxHeight: Number,
 		focused: {
 			type: Boolean,
 			default: false
@@ -3375,8 +3378,13 @@ const Select = defineComponent({
 	},
 	emits: ["update:modelValue", "select"],
 	setup(props, { emit }) {
+		const scrollOffset = ref(0);
 		const highlightedIndex = ref(-1);
 		const typeahead = createTypeaheadBuffer();
+		const viewportSize = computed(() => {
+			if (props.maxHeight === void 0 || !Number.isFinite(props.maxHeight)) return void 0;
+			return props.maxHeight > 0 ? Math.max(1, Math.floor(props.maxHeight)) : void 0;
+		});
 		watch(() => props.modelValue, (value) => {
 			const selectedIndex = props.options.findIndex((option) => option.value === value && !option.disabled);
 			highlightedIndex.value = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(props.options);
@@ -3384,6 +3392,13 @@ const Select = defineComponent({
 		watch(() => props.options, (options) => {
 			if (highlightedIndex.value < 0 || highlightedIndex.value >= options.length || options[highlightedIndex.value]?.disabled) highlightedIndex.value = firstEnabledIndex(options);
 		}, { deep: true });
+		watch([
+			highlightedIndex,
+			viewportSize,
+			() => props.options.length
+		], ([index, windowSize]) => {
+			scrollOffset.value = visibleCollectionOffset(index, scrollOffset.value, windowSize, props.options.length);
+		}, { immediate: true });
 		const activate = () => {
 			const option = props.options[highlightedIndex.value];
 			if (!option || option.disabled) return;
@@ -3405,20 +3420,49 @@ const Select = defineComponent({
 			},
 			onSubmit: activate
 		});
+		const visibleOptions = computed(() => {
+			const windowSize = viewportSize.value;
+			const start = windowSize === void 0 ? 0 : scrollOffset.value;
+			const end = windowSize === void 0 ? props.options.length : start + windowSize;
+			return props.options.slice(start, end).map((option, visibleIndex) => ({
+				option,
+				index: start + visibleIndex
+			}));
+		});
+		const scrollIndicator = computed(() => {
+			const windowSize = viewportSize.value;
+			if (windowSize === void 0 || props.options.length <= windowSize) return {
+				showUp: false,
+				showDown: false
+			};
+			return {
+				showUp: scrollOffset.value > 0,
+				showDown: scrollOffset.value + windowSize < props.options.length
+			};
+		});
 		return () => {
-			const children = props.options.map((option, index) => {
+			const children = [];
+			if (scrollIndicator.value.showUp) children.push(h("text", {
+				key: "scroll-up",
+				dim: true
+			}, "  ..."));
+			for (const { option, index } of visibleOptions.value) {
 				const isHighlighted = index === highlightedIndex.value;
 				const isSelected = option.value === props.modelValue;
 				const indicator = isHighlighted ? props.indicator : props.indicatorEmpty;
-				return h("box", {
+				children.push(h("box", {
 					key: option.value,
 					style: { flex_direction: "row" }
 				}, [h("text", {
 					fg: isHighlighted ? props.selectedFg : props.fg,
 					bg: isHighlighted ? props.selectedBg : props.bg,
 					dim: option.disabled
-				}, `${indicator}${option.label}${isSelected ? " (selected)" : ""}`)]);
-			});
+				}, `${indicator}${option.label}${isSelected ? " (selected)" : ""}`)]));
+			}
+			if (scrollIndicator.value.showDown) children.push(h("text", {
+				key: "scroll-down",
+				dim: true
+			}, "  ..."));
 			return h("box", {
 				style: { flex_direction: "column" },
 				fg: props.fg,
@@ -4410,9 +4454,9 @@ const avatarStatusIcons = {
 };
 //#endregion
 //#region src/components/FrescoAlert.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$5 = ["border", "fg"];
-const _hoisted_2$5 = ["fg"];
-const _hoisted_3$5 = ["fg"];
+const _hoisted_1$4 = ["border", "fg"];
+const _hoisted_2$4 = ["fg"];
+const _hoisted_3$4 = ["fg"];
 //#endregion
 //#region src/components/FrescoAlert.vue
 var FrescoAlert_default = /* @__PURE__ */ defineComponent({
@@ -4461,18 +4505,18 @@ var FrescoAlert_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("div", { style: headerStyle }, [__props.showIcon ? (openBlock(), createElementBlock("text", {
 				key: 0,
 				fg: config.value.fg
-			}, toDisplayString(iconLabel.value), 9, _hoisted_2$5)) : createCommentVNode("v-if", true), createElementVNode("text", {
+			}, toDisplayString(iconLabel.value), 9, _hoisted_2$4)) : createCommentVNode("v-if", true), createElementVNode("text", {
 				fg: config.value.fg,
 				bold: true
-			}, toDisplayString(heading.value), 9, _hoisted_3$5)]), createElementVNode("text", { style: messageStyle }, toDisplayString(__props.message), 1)], 8, _hoisted_1$5);
+			}, toDisplayString(heading.value), 9, _hoisted_3$4)]), createElementVNode("text", { style: messageStyle }, toDisplayString(__props.message), 1)], 8, _hoisted_1$4);
 		};
 	}
 });
 //#endregion
 //#region src/components/FrescoBadge.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$4 = ["fg", "bg"];
-const _hoisted_2$4 = ["fg", "bg"];
-const _hoisted_3$4 = ["fg", "bg"];
+const _hoisted_1$3 = ["fg", "bg"];
+const _hoisted_2$3 = ["fg", "bg"];
+const _hoisted_3$3 = ["fg", "bg"];
 //#endregion
 //#region src/components/FrescoBadge.vue
 var FrescoBadge_default = /* @__PURE__ */ defineComponent({
@@ -4520,12 +4564,12 @@ var FrescoBadge_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("text", {
 				fg: foreground.value,
 				bg: background.value
-			}, toDisplayString(__props.label), 9, _hoisted_2$4)], 8, _hoisted_1$4)) : (openBlock(), createElementBlock("text", {
+			}, toDisplayString(__props.label), 9, _hoisted_2$3)], 8, _hoisted_1$3)) : (openBlock(), createElementBlock("text", {
 				key: 1,
 				fg: foreground.value,
 				bg: background.value,
 				bold: true
-			}, "[" + toDisplayString(__props.label) + "]", 9, _hoisted_3$4));
+			}, "[" + toDisplayString(__props.label) + "]", 9, _hoisted_3$3));
 		};
 	}
 });
@@ -4648,17 +4692,6 @@ const Timer = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/FrescoTooltip.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$3 = [
-	"border",
-	"bg",
-	"fg"
-];
-const _hoisted_3$3 = ["fg", "bg"];
-const _hoisted_4$1 = { key: 1 };
-const _hoisted_5$1 = { key: 1 };
-//#endregion
 //#region src/components/FrescoTooltip.vue
 var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 	name: "FrescoTooltip",
@@ -4678,6 +4711,11 @@ var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 			required: false,
 			default: "top"
 		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
 		border: {
 			type: String,
 			required: false,
@@ -4695,29 +4733,70 @@ var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const containerStyle = computed(() => ({ flexDirection: __props.position === "left" || __props.position === "right" ? "row" : "column" }));
-		const tooltipStyle = {
-			paddingLeft: 1,
-			paddingRight: 1
-		};
-		const contentComesFirst = computed(() => __props.position === "bottom" || __props.position === "right");
+		const panelPosition = computed(() => {
+			const gap = Number.isFinite(__props.offset) ? Math.max(0, __props.offset) : 0;
+			switch (__props.position) {
+				case "bottom": return {
+					top: "100%",
+					marginTop: gap
+				};
+				case "right": return {
+					left: "100%",
+					marginLeft: gap
+				};
+				case "left": return {
+					right: "100%",
+					marginRight: gap
+				};
+				default: return {
+					bottom: "100%",
+					marginBottom: gap
+				};
+			}
+		});
 		return (_ctx, _cache) => {
-			return __props.visible ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				style: normalizeStyle(containerStyle.value)
-			}, [
-				contentComesFirst.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", {
+			return openBlock(), createBlock(unref(Box), { position: "relative" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), __props.visible ? (openBlock(), createBlock(unref(Box), {
+					key: 0,
+					position: "absolute",
+					top: panelPosition.value.top,
+					right: panelPosition.value.right,
+					bottom: panelPosition.value.bottom,
+					left: panelPosition.value.left,
+					"margin-top": panelPosition.value.marginTop,
+					"margin-right": panelPosition.value.marginRight,
+					"margin-bottom": panelPosition.value.marginBottom,
+					"margin-left": panelPosition.value.marginLeft,
 					border: __props.border === "none" ? void 0 : __props.border,
 					bg: __props.bg,
 					fg: __props.fg,
-					style: tooltipStyle
-				}, [createElementVNode("text", {
-					fg: __props.fg,
-					bg: __props.bg
-				}, toDisplayString(__props.text), 9, _hoisted_3$3)], 8, _hoisted_2$3),
-				!contentComesFirst.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)
-			], 4)) : (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default")]));
+					"padding-x": 1
+				}, {
+					default: withCtx(() => [createVNode(unref(Text), {
+						content: __props.text,
+						fg: __props.fg,
+						bg: __props.bg
+					}, null, 8, [
+						"content",
+						"fg",
+						"bg"
+					])]),
+					_: 1
+				}, 8, [
+					"top",
+					"right",
+					"bottom",
+					"left",
+					"margin-top",
+					"margin-right",
+					"margin-bottom",
+					"margin-left",
+					"border",
+					"bg",
+					"fg"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			});
 		};
 	}
 });
@@ -5794,13 +5873,14 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 		watch(isVisible, (next, previous) => {
 			if (next && !previous) wasFocusedBeforeOpen.value = manager.activeId.value;
 		}, { flush: "sync" });
-		provideFocusScope(useFocus({
+		const modalFocus = useFocus({
 			id: __props.focusId,
 			isActive: isVisible,
 			autoFocus: true,
 			delegateFocusTo: computed(() => __props.initialFocusId),
 			trapFocus: trapsFocus
-		}).id);
+		});
+		provideFocusScope(modalFocus.id);
 		function focusInitialTarget() {
 			if (!__props.visible || !__props.initialFocusId || !manager.focusableIds.value.includes(__props.initialFocusId)) return;
 			manager.focus(__props.initialFocusId);
@@ -5834,7 +5914,8 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 				"justify-content": "center",
 				"align-items": "center",
 				width: "100%",
-				height: "100%"
+				height: "100%",
+				"focus-id": unref(modalFocus).id
 			}, accessibilityProps.value), {
 				default: withCtx(() => [__props.visible ? (openBlock(), createBlock(unref(Box), {
 					key: 0,
@@ -5870,7 +5951,195 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 					"bg"
 				])) : createCommentVNode("v-if", true)]),
 				_: 3
-			}, 16, ["display"]);
+			}, 16, ["display", "focus-id"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/FrescoPopover.vue
+var FrescoPopover_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoPopover",
+	__name: "FrescoPopover",
+	props: {
+		open: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: "bottom"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		border: {
+			type: String,
+			required: false,
+			default: "rounded"
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		},
+		focusId: {
+			type: String,
+			required: false,
+			default: `popover-${Math.random().toString(36).slice(2)}`
+		},
+		initialFocusId: {
+			type: String,
+			required: false
+		},
+		trapFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		restoreFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		accessibilityRole: {
+			type: String,
+			required: false,
+			default: "dialog"
+		},
+		accessibilityLabel: {
+			type: String,
+			required: false,
+			default: "Popover"
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const manager = useFocusManager();
+		const wasFocusedBeforeOpen = ref();
+		const isOpen = computed(() => __props.open);
+		const trapsFocus = computed(() => __props.open && __props.trapFocus);
+		if (__props.open) wasFocusedBeforeOpen.value = manager.activeId.value;
+		watch(isOpen, (next, previous) => {
+			if (next && !previous) wasFocusedBeforeOpen.value = manager.activeId.value;
+		}, { flush: "sync" });
+		const popoverFocus = useFocus({
+			id: __props.focusId,
+			isActive: isOpen,
+			autoFocus: true,
+			delegateFocusTo: computed(() => __props.initialFocusId),
+			trapFocus: trapsFocus
+		});
+		provideFocusScope(popoverFocus.id);
+		function focusInitialTarget() {
+			if (!__props.open || !__props.initialFocusId || !manager.focusableIds.value.includes(__props.initialFocusId)) return;
+			manager.focus(__props.initialFocusId);
+		}
+		watch([isOpen, manager.focusableIds], () => {
+			nextTick(focusInitialTarget);
+		}, {
+			deep: true,
+			flush: "post"
+		});
+		watch(isOpen, (next, previous) => {
+			if (next || !previous || !__props.restoreFocus) return;
+			const target = wasFocusedBeforeOpen.value;
+			if (target && manager.focusableIds.value.includes(target)) manager.focus(target);
+			wasFocusedBeforeOpen.value = void 0;
+		}, { flush: "post" });
+		onMounted(() => void nextTick(focusInitialTarget));
+		useInput({
+			isActive: computed(() => __props.open && __props.closeOnEscape),
+			onEscape: () => emit("close")
+		});
+		function panelPosition(selected) {
+			const gap = Number.isFinite(__props.offset) ? Math.max(0, __props.offset) : 0;
+			switch (selected) {
+				case "top": return {
+					bottom: "100%",
+					marginBottom: gap
+				};
+				case "right": return {
+					left: "100%",
+					marginLeft: gap
+				};
+				case "left": return {
+					right: "100%",
+					marginRight: gap
+				};
+				default: return {
+					top: "100%",
+					marginTop: gap
+				};
+			}
+		}
+		const position = computed(() => panelPosition(__props.placement));
+		const accessibilityProps = computed(() => ({
+			ariaRole: __props.accessibilityRole,
+			ariaLabel: __props.accessibilityLabel,
+			ariaState: { expanded: __props.open }
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), { position: "relative" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "anchor"), __props.open ? (openBlock(), createBlock(unref(Box), mergeProps({
+					key: 0,
+					position: "absolute",
+					top: position.value.top,
+					right: position.value.right,
+					bottom: position.value.bottom,
+					left: position.value.left,
+					"margin-top": position.value.marginTop,
+					"margin-right": position.value.marginRight,
+					"margin-bottom": position.value.marginBottom,
+					"margin-left": position.value.marginLeft,
+					width: __props.width,
+					height: __props.height,
+					border: __props.border === "none" ? void 0 : __props.border,
+					fg: __props.fg,
+					bg: __props.bg,
+					padding: 1,
+					"focus-id": unref(popoverFocus).id
+				}, accessibilityProps.value), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"top",
+					"right",
+					"bottom",
+					"left",
+					"margin-top",
+					"margin-right",
+					"margin-bottom",
+					"margin-left",
+					"width",
+					"height",
+					"border",
+					"fg",
+					"bg",
+					"focus-id"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			});
 		};
 	}
 });
@@ -6160,6 +6429,6 @@ var FrescoAvatar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { FrescoMarkdown_default as A, ScrollBox_default as B, Checkbox as C, FrescoLink_default as D, TextInput as E, createCodeBuffer as F, FrescoVStack_default as G, Text as H, LineNumber as I, FrescoDivider_default as J, FrescoHStack_default as K, FrescoTransform_default as L, parseMarkdown as M, renderMarkdown as N, Diff as O, Code as P, FrescoStatic_default as R, RadioGroup as S, TextArea as T, FrescoCard_default as U, ScrollBar_default as V, Grid as W, Box as X, FrescoSpacer_default as Y, ProgressBar as _, FrescoModal_default as a, FrescoSlider_default as b, Tabs as c, Table as d, List as f, FrescoAlert_default as g, FrescoBadge_default as h, StatusBar as i, defaultMarkdownRenderer as j, FrescoFrameBuffer_default as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, FrescoTooltip_default as p, FrescoStack_default as q, FrescoHeader_default as r, FrescoBreadcrumb_default as s, FrescoAvatar_default as t, Tree as u, FrescoSpinner_default as v, Select as w, Confirm as x, Form as y, FrescoNewline_default as z };
+export { FrescoFrameBuffer_default as A, FrescoNewline_default as B, RadioGroup as C, TextInput as D, TextArea as E, Code as F, Grid as G, ScrollBar_default as H, createCodeBuffer as I, FrescoStack_default as J, FrescoVStack_default as K, LineNumber as L, defaultMarkdownRenderer as M, parseMarkdown as N, FrescoLink_default as O, renderMarkdown as P, FrescoTransform_default as R, Confirm as S, Select as T, Text as U, ScrollBox_default as V, FrescoCard_default as W, FrescoSpacer_default as X, FrescoDivider_default as Y, Box as Z, FrescoAlert_default as _, FrescoPopover_default as a, Form as b, FrescoBreadcrumb_default as c, Tree as d, Table as f, FrescoBadge_default as g, Timer as h, StatusBar as i, FrescoMarkdown_default as j, Diff as k, Tabs as l, FrescoTooltip_default as m, KeyHint as n, FrescoModal_default as o, List as p, FrescoHStack_default as q, FrescoHeader_default as r, Stepper as s, FrescoAvatar_default as t, Menu as u, ProgressBar as v, Checkbox as w, FrescoSlider_default as x, FrescoSpinner_default as y, FrescoStatic_default as z };
 
-//# sourceMappingURL=components-DzkL-yHj.mjs.map
+//# sourceMappingURL=components-DgDohiXo.mjs.map