@youcan/celeste 0.6.101 → 0.7.0

package/dist/es/chunks/RovingFocusItem.js

@@ -0,0 +1,108 @@
+import { t as Primitive } from "./Primitive.js";
+import { t as useId } from "./useId.js";
+import { t as useCollection } from "./Collection.js";
+import { a as wrapArray, i as getFocusIntent, r as focusFirst } from "./utils2.js";
+import { n as injectRovingFocusGroupContext } from "./RovingFocusGroup.js";
+import { computed, createBlock, createVNode, defineComponent, nextTick, onMounted, onUnmounted, openBlock, renderSlot, unref, watch, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/RovingFocus/RovingFocusItem.js
+var RovingFocusItem_default = /* @__PURE__ */ defineComponent({
+	__name: "RovingFocusItem",
+	props: {
+		tabStopId: {
+			type: String,
+			required: false
+		},
+		focusable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		active: {
+			type: Boolean,
+			required: false
+		},
+		allowShiftKey: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = injectRovingFocusGroupContext();
+		const randomId = useId();
+		const id = computed(() => props.tabStopId || randomId);
+		const isCurrentTabStop = computed(() => context.currentTabStopId.value === id.value);
+		const { getItems, CollectionItem } = useCollection();
+		onMounted(() => {
+			if (props.focusable) context.onFocusableItemAdd();
+		});
+		onUnmounted(() => {
+			if (props.focusable) context.onFocusableItemRemove();
+		});
+		watch(() => props.focusable, (newVal, oldVal) => {
+			if (newVal === oldVal) return;
+			if (newVal) context.onFocusableItemAdd();
+			else context.onFocusableItemRemove();
+		});
+		function handleKeydown(event) {
+			if (event.key === "Tab" && event.shiftKey) {
+				context.onItemShiftTab();
+				return;
+			}
+			if (event.target !== event.currentTarget) return;
+			const focusIntent = getFocusIntent(event, context.orientation.value, context.dir.value);
+			if (focusIntent !== void 0) {
+				if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey)) return;
+				event.preventDefault();
+				let candidateNodes = [...getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "")];
+				if (focusIntent === "last") candidateNodes.reverse();
+				else if (focusIntent === "prev" || focusIntent === "next") {
+					if (focusIntent === "prev") candidateNodes.reverse();
+					const currentIndex = candidateNodes.indexOf(event.currentTarget);
+					candidateNodes = context.loop.value ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+				}
+				nextTick(() => focusFirst(candidateNodes));
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollectionItem), null, {
+				default: withCtx(() => [createVNode(unref(Primitive), {
+					tabindex: isCurrentTabStop.value ? 0 : -1,
+					"data-orientation": unref(context).orientation.value,
+					"data-active": _ctx.active ? "" : void 0,
+					"data-disabled": !_ctx.focusable ? "" : void 0,
+					as: _ctx.as,
+					"as-child": _ctx.asChild,
+					onMousedown: _cache[0] || (_cache[0] = (event) => {
+						if (!_ctx.focusable) event.preventDefault();
+						else unref(context).onItemFocus(id.value);
+					}),
+					onFocus: _cache[1] || (_cache[1] = ($event) => unref(context).onItemFocus(id.value)),
+					onKeydown: handleKeydown
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, [
+					"tabindex",
+					"data-orientation",
+					"data-active",
+					"data-disabled",
+					"as",
+					"as-child"
+				])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { RovingFocusItem_default as t };

package/dist/es/chunks/SelectGroup.js

@@ -0,0 +1,32 @@
+import { t as createContext } from "./createContext.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useId } from "./useId.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/Select/SelectGroup.js
+var [injectSelectGroupContext, provideSelectGroupContext] = /* @__PURE__ */ createContext("SelectGroup");
+var SelectGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "SelectGroup",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const id = useId(void 0, "reka-select-group");
+		provideSelectGroupContext({ id });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({ role: "group" }, props, { "aria-labelledby": unref(id) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-labelledby"]);
+		};
+	}
+});
+//#endregion
+export { injectSelectGroupContext as n, SelectGroup_default as t };

package/dist/es/chunks/SelectItemAlignedPosition.js

@@ -0,0 +1,563 @@
+import { n as PopperContent_default } from "./PopperContent.js";
+import { t as clamp } from "./clamp.js";
+import { t as createContext } from "./createContext.js";
+import { o as useResizeObserver, r as unrefElement } from "./dist.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as DismissableLayer_default } from "./DismissableLayer.js";
+import { n as useBodyScrollLock, t as FocusScope_default } from "./FocusScope.js";
+import { t as useFocusGuards } from "./useFocusGuards.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
+import { t as useForwardProps } from "./useForwardProps.js";
+import { t as useHideOthers } from "./useHideOthers.js";
+import { t as useTypeahead } from "./useTypeahead.js";
+import { s as focusFirst } from "./utils.js";
+import { t as useCollection } from "./Collection.js";
+import { n as injectSelectRootContext, s as valueComparator } from "./BubbleSelect.js";
+import { computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, unref, watch, watchEffect, withCtx, withModifiers } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/Select/SelectPopperPosition.js
+var SelectPopperPosition_default = /* @__PURE__ */ defineComponent({
+	__name: "SelectPopperPosition",
+	props: {
+		memoDependencies: {
+			type: Array,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		},
+		sideOffset: {
+			type: Number,
+			required: false
+		},
+		sideFlip: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: null,
+			required: false,
+			default: "start"
+		},
+		alignOffset: {
+			type: Number,
+			required: false
+		},
+		alignFlip: {
+			type: Boolean,
+			required: false
+		},
+		avoidCollisions: {
+			type: Boolean,
+			required: false
+		},
+		collisionBoundary: {
+			type: null,
+			required: false
+		},
+		collisionPadding: {
+			type: [Number, Object],
+			required: false,
+			default: 10
+		},
+		arrowPadding: {
+			type: Number,
+			required: false
+		},
+		hideShiftedArrow: {
+			type: Boolean,
+			required: false
+		},
+		sticky: {
+			type: String,
+			required: false
+		},
+		hideWhenDetached: {
+			type: Boolean,
+			required: false
+		},
+		positionStrategy: {
+			type: String,
+			required: false
+		},
+		updatePositionStrategy: {
+			type: String,
+			required: false
+		},
+		disableUpdateOnLayoutShift: {
+			type: Boolean,
+			required: false
+		},
+		prioritizePosition: {
+			type: Boolean,
+			required: false
+		},
+		reference: {
+			type: null,
+			required: false
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const forwarded = useForwardProps(__props);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopperContent_default), mergeProps(unref(forwarded), { style: {
+				"boxSizing": "border-box",
+				"--reka-select-content-transform-origin": "var(--reka-popper-transform-origin)",
+				"--reka-select-content-available-width": "var(--reka-popper-available-width)",
+				"--reka-select-content-available-height": "var(--reka-popper-available-height)",
+				"--reka-select-trigger-width": "var(--reka-popper-anchor-width)",
+				"--reka-select-trigger-height": "var(--reka-popper-anchor-height)"
+			} }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/Select/SelectContentImpl.js
+var SelectContentDefaultContextValue = {
+	onViewportChange: () => {},
+	itemTextRefCallback: () => {},
+	itemRefCallback: () => {}
+};
+var [injectSelectContentContext, provideSelectContentContext] = /* @__PURE__ */ createContext("SelectContent");
+var SelectContentImpl_default = /* @__PURE__ */ defineComponent({
+	__name: "SelectContentImpl",
+	props: {
+		position: {
+			type: String,
+			required: false,
+			default: "item-aligned"
+		},
+		bodyLock: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		memoDependencies: {
+			type: Array,
+			required: false
+		},
+		side: {
+			type: null,
+			required: false
+		},
+		sideOffset: {
+			type: Number,
+			required: false
+		},
+		sideFlip: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: null,
+			required: false,
+			default: "start"
+		},
+		alignOffset: {
+			type: Number,
+			required: false
+		},
+		alignFlip: {
+			type: Boolean,
+			required: false
+		},
+		avoidCollisions: {
+			type: Boolean,
+			required: false
+		},
+		collisionBoundary: {
+			type: null,
+			required: false
+		},
+		collisionPadding: {
+			type: [Number, Object],
+			required: false
+		},
+		arrowPadding: {
+			type: Number,
+			required: false
+		},
+		hideShiftedArrow: {
+			type: Boolean,
+			required: false
+		},
+		sticky: {
+			type: String,
+			required: false
+		},
+		hideWhenDetached: {
+			type: Boolean,
+			required: false
+		},
+		positionStrategy: {
+			type: String,
+			required: false
+		},
+		updatePositionStrategy: {
+			type: String,
+			required: false
+		},
+		disableUpdateOnLayoutShift: {
+			type: Boolean,
+			required: false
+		},
+		prioritizePosition: {
+			type: Boolean,
+			required: false
+		},
+		reference: {
+			type: null,
+			required: false
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: [
+		"closeAutoFocus",
+		"escapeKeyDown",
+		"pointerDownOutside"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const rootContext = injectSelectRootContext();
+		useFocusGuards();
+		useBodyScrollLock(props.bodyLock);
+		const { CollectionSlot, getItems } = useCollection();
+		const content = ref();
+		useHideOthers(content);
+		const { search, handleTypeaheadSearch } = useTypeahead();
+		const viewport = ref();
+		const selectedItem = ref();
+		const selectedItemText = ref();
+		const isPositioned = ref(false);
+		const firstValidItemFoundRef = ref(false);
+		const firstSelectedItemInArrayFoundRef = ref(false);
+		function focusSelectedItem() {
+			if (selectedItem.value && content.value) focusFirst([selectedItem.value, content.value]);
+		}
+		watch(isPositioned, () => {
+			focusSelectedItem();
+		});
+		const { onOpenChange, triggerPointerDownPosRef } = rootContext;
+		watchEffect((cleanupFn) => {
+			if (!content.value) return;
+			let pointerMoveDelta = {
+				x: 0,
+				y: 0
+			};
+			const handlePointerMove = (event) => {
+				pointerMoveDelta = {
+					x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0)),
+					y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0))
+				};
+			};
+			const handlePointerUp = (event) => {
+				if (event.pointerType === "touch") return;
+				if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) event.preventDefault();
+				else if (!content.value?.contains(event.target)) onOpenChange(false);
+				document.removeEventListener("pointermove", handlePointerMove);
+				triggerPointerDownPosRef.value = null;
+			};
+			if (triggerPointerDownPosRef.value !== null) {
+				document.addEventListener("pointermove", handlePointerMove);
+				document.addEventListener("pointerup", handlePointerUp, {
+					capture: true,
+					once: true
+				});
+			}
+			cleanupFn(() => {
+				document.removeEventListener("pointermove", handlePointerMove);
+				document.removeEventListener("pointerup", handlePointerUp, { capture: true });
+			});
+		});
+		function handleKeyDown(event) {
+			const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+			if (event.key === "Tab") event.preventDefault();
+			if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key, getItems());
+			if ([
+				"ArrowUp",
+				"ArrowDown",
+				"Home",
+				"End"
+			].includes(event.key)) {
+				let candidateNodes = [...getItems().map((i) => i.ref)];
+				if (["ArrowUp", "End"].includes(event.key)) candidateNodes = candidateNodes.slice().reverse();
+				if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+					const currentElement = event.target;
+					const currentIndex = candidateNodes.indexOf(currentElement);
+					candidateNodes = candidateNodes.slice(currentIndex + 1);
+				}
+				setTimeout(() => focusFirst(candidateNodes));
+				event.preventDefault();
+			}
+		}
+		const forwardedProps = useForwardProps(computed(() => {
+			if (props.position === "popper") return props;
+			else return {};
+		}).value);
+		provideSelectContentContext({
+			content,
+			viewport,
+			onViewportChange: (node) => {
+				viewport.value = node;
+			},
+			itemRefCallback: (node, value, disabled) => {
+				const isFirstValidItem = !firstValidItemFoundRef.value && !disabled;
+				const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by);
+				if (rootContext.multiple.value) {
+					if (firstSelectedItemInArrayFoundRef.value) return;
+					if (isSelectedItem || isFirstValidItem) {
+						selectedItem.value = node;
+						if (isSelectedItem) firstSelectedItemInArrayFoundRef.value = true;
+					}
+				} else if (isSelectedItem || isFirstValidItem) selectedItem.value = node;
+				if (isFirstValidItem) firstValidItemFoundRef.value = true;
+			},
+			selectedItem,
+			selectedItemText,
+			onItemLeave: () => {
+				content.value?.focus();
+			},
+			itemTextRefCallback: (node, value, disabled) => {
+				const isFirstValidItem = !firstValidItemFoundRef.value && !disabled;
+				if (valueComparator(rootContext.modelValue.value, value, rootContext.by) || isFirstValidItem) selectedItemText.value = node;
+			},
+			focusSelectedItem,
+			position: props.position,
+			isPositioned,
+			searchRef: search
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollectionSlot), null, {
+				default: withCtx(() => [createVNode(unref(FocusScope_default), {
+					"as-child": "",
+					onMountAutoFocus: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
+					onUnmountAutoFocus: _cache[7] || (_cache[7] = (event) => {
+						emits("closeAutoFocus", event);
+						if (event.defaultPrevented) return;
+						unref(rootContext).triggerElement.value?.focus({ preventScroll: true });
+						event.preventDefault();
+					})
+				}, {
+					default: withCtx(() => [createVNode(unref(DismissableLayer_default), {
+						"as-child": "",
+						"disable-outside-pointer-events": _ctx.disableOutsidePointerEvents,
+						onFocusOutside: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onDismiss: _cache[3] || (_cache[3] = ($event) => unref(rootContext).onOpenChange(false)),
+						onEscapeKeyDown: _cache[4] || (_cache[4] = ($event) => emits("escapeKeyDown", $event)),
+						onPointerDownOutside: _cache[5] || (_cache[5] = ($event) => emits("pointerDownOutside", $event))
+					}, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.position === "popper" ? SelectPopperPosition_default : SelectItemAlignedPosition_default), mergeProps({
+							..._ctx.$attrs,
+							...unref(forwardedProps)
+						}, {
+							id: unref(rootContext).contentId,
+							ref: (vnode) => {
+								if (!vnode) return void 0;
+								const el = unref(unrefElement)(vnode);
+								if (el?.hasAttribute("data-reka-popper-content-wrapper")) content.value = el.firstElementChild;
+								else content.value = el;
+							},
+							role: "listbox",
+							"data-state": unref(rootContext).open.value ? "open" : "closed",
+							dir: unref(rootContext).dir.value,
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								outline: "none"
+							},
+							onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+							onPlaced: _cache[1] || (_cache[1] = ($event) => isPositioned.value = true),
+							onKeydown: handleKeyDown
+						}), {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+							_: 3
+						}, 16, [
+							"id",
+							"data-state",
+							"dir",
+							"onKeydown"
+						]))]),
+						_: 3
+					}, 8, ["disable-outside-pointer-events"])]),
+					_: 3
+				})]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/Select/SelectItemAlignedPosition.js
+var [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext] = /* @__PURE__ */ createContext("SelectItemAlignedPosition");
+var SelectItemAlignedPosition_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "SelectItemAlignedPosition",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	emits: ["placed"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { getItems } = useCollection();
+		const rootContext = injectSelectRootContext();
+		const contentContext = injectSelectContentContext();
+		const shouldExpandOnScrollRef = ref(false);
+		const shouldRepositionRef = ref(true);
+		const contentWrapperElement = ref();
+		const { forwardRef, currentElement: contentElement } = useForwardExpose();
+		const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
+		function position() {
+			if (rootContext.triggerElement.value && rootContext.valueElement.value && contentWrapperElement.value && contentElement.value && viewport?.value && selectedItem?.value && selectedItemText?.value) {
+				const triggerRect = rootContext.triggerElement.value.getBoundingClientRect();
+				const contentRect = contentElement.value.getBoundingClientRect();
+				const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect();
+				const itemTextRect = selectedItemText.value.getBoundingClientRect();
+				if (rootContext.dir.value !== "rtl") {
+					const itemTextOffset = itemTextRect.left - contentRect.left;
+					const left = valueNodeRect.left - itemTextOffset;
+					const leftDelta = triggerRect.left - left;
+					const minContentWidth = triggerRect.width + leftDelta;
+					const contentWidth = Math.max(minContentWidth, contentRect.width);
+					const rightEdge = window.innerWidth - 10;
+					const clampedLeft = clamp(left, 10, Math.max(10, rightEdge - contentWidth));
+					contentWrapperElement.value.style.minWidth = `${minContentWidth}px`;
+					contentWrapperElement.value.style.left = `${clampedLeft}px`;
+				} else {
+					const itemTextOffset = contentRect.right - itemTextRect.right;
+					const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
+					const rightDelta = window.innerWidth - triggerRect.right - right;
+					const minContentWidth = triggerRect.width + rightDelta;
+					const contentWidth = Math.max(minContentWidth, contentRect.width);
+					const leftEdge = window.innerWidth - 10;
+					const clampedRight = clamp(right, 10, Math.max(10, leftEdge - contentWidth));
+					contentWrapperElement.value.style.minWidth = `${minContentWidth}px`;
+					contentWrapperElement.value.style.right = `${clampedRight}px`;
+				}
+				const items = getItems().map((i) => i.ref);
+				const availableHeight = window.innerHeight - 20;
+				const itemsHeight = viewport.value.scrollHeight;
+				const contentStyles = window.getComputedStyle(contentElement.value);
+				const contentBorderTopWidth = Number.parseInt(contentStyles.borderTopWidth, 10);
+				const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10);
+				const contentBorderBottomWidth = Number.parseInt(contentStyles.borderBottomWidth, 10);
+				const contentPaddingBottom = Number.parseInt(contentStyles.paddingBottom, 10);
+				const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
+				const minContentHeight = Math.min(selectedItem.value.offsetHeight * 5, fullContentHeight);
+				const viewportStyles = window.getComputedStyle(viewport.value);
+				const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10);
+				const viewportPaddingBottom = Number.parseInt(viewportStyles.paddingBottom, 10);
+				const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - 10;
+				const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
+				const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2;
+				const itemOffsetMiddle = selectedItem.value.offsetTop + selectedItemHalfHeight;
+				const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
+				const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
+				if (contentTopToItemMiddle <= topEdgeToTriggerMiddle) {
+					const isLastItem = selectedItem.value === items.at(-1);
+					contentWrapperElement.value.style.bottom = `0px`;
+					const viewportOffsetBottom = contentElement.value.clientHeight - viewport.value.offsetTop - viewport.value.offsetHeight;
+					const height = contentTopToItemMiddle + Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
+					contentWrapperElement.value.style.height = `${height}px`;
+				} else {
+					const isFirstItem = selectedItem.value === items[0];
+					contentWrapperElement.value.style.top = `0px`;
+					const height = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.value.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight) + itemMiddleToContentBottom;
+					contentWrapperElement.value.style.height = `${height}px`;
+					viewport.value.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.value.offsetTop;
+				}
+				contentWrapperElement.value.style.margin = `10px 0`;
+				contentWrapperElement.value.style.minHeight = `${minContentHeight}px`;
+				contentWrapperElement.value.style.maxHeight = `${availableHeight}px`;
+				emits("placed");
+				requestAnimationFrame(() => shouldExpandOnScrollRef.value = true);
+			}
+		}
+		const contentZIndex = ref("");
+		onMounted(async () => {
+			await nextTick();
+			position();
+			if (contentElement.value) contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex;
+		});
+		function handleScrollButtonChange(node) {
+			if (node && shouldRepositionRef.value === true) {
+				position();
+				focusSelectedItem?.();
+				shouldRepositionRef.value = false;
+			}
+		}
+		useResizeObserver(rootContext.triggerElement, () => {
+			position();
+		});
+		provideSelectItemAlignedPositionContext({
+			contentWrapper: contentWrapperElement,
+			shouldExpandOnScrollRef,
+			onScrollButtonChange: handleScrollButtonChange
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "contentWrapperElement",
+				ref: contentWrapperElement,
+				style: normalizeStyle({
+					display: "flex",
+					flexDirection: "column",
+					position: "fixed",
+					zIndex: contentZIndex.value
+				})
+			}, [createVNode(unref(Primitive), mergeProps({
+				ref: unref(forwardRef),
+				style: {
+					boxSizing: "border-box",
+					maxHeight: "100%"
+				}
+			}, {
+				..._ctx.$attrs,
+				...props
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)], 4);
+		};
+	}
+});
+//#endregion
+export { provideSelectContentContext as a, injectSelectContentContext as i, SelectContentDefaultContextValue as n, SelectContentImpl_default as r, injectSelectItemAlignedPositionContext as t };