ropav 0.0.7 → 0.0.9

package/dist/number-input.css

@@ -0,0 +1,86 @@
+.rp-number-input[data-v-b5d8edf1] {
+  --_rp-number-input-control-size: var(--_rp-input-height);
+  --_rp-number-input-text-align: left;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__native {
+  appearance: textfield;
+  text-align: var(--_rp-number-input-text-align);
+}
+.rp-number-input--text-align-center[data-v-b5d8edf1] {
+  --_rp-number-input-text-align: center;
+}
+.rp-number-input--text-align-right[data-v-b5d8edf1] {
+  --_rp-number-input-text-align: right;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-inner-spin-button,
+.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__left,
+.rp-number-input[data-v-b5d8edf1] .rp-input__right {
+  align-self: stretch;
+  margin-block: calc(-1 * var(--rp-border-width-thin));
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__left {
+  margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__right {
+  margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input__controls[data-v-b5d8edf1] {
+  display: inline-flex;
+  height: var(--_rp-input-height);
+  flex-shrink: 0;
+}
+.rp-number-input__controls--left[data-v-b5d8edf1] {
+  border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__controls--right[data-v-b5d8edf1] {
+  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-b5d8edf1] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_rp-number-input-control-size);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--rp-color-control-icon);
+  transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-number-input__control + .rp-number-input__control[data-v-b5d8edf1] {
+  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-b5d8edf1]:hover:not(:disabled) {
+  color: var(--rp-color-control-fg);
+  background-color: var(--rp-color-default-hover);
+}
+.rp-number-input__control[data-v-b5d8edf1]:disabled {
+  cursor: not-allowed;
+  opacity: var(--rp-opacity-disabled);
+}
+.rp-number-input__control-icon[data-v-b5d8edf1] {
+  display: inline-flex;
+  align-items: center;
+  width: 0.875em;
+  height: 0.875em;
+  flex-shrink: 0;
+}
+.rp-number-input__control-icon svg[data-v-b5d8edf1] {
+  width: 100%;
+  height: 100%;
+}
+.rp-number-input__control-icon[data-v-b5d8edf1] >  svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/dist/number-input.js

@@ -0,0 +1,350 @@
+import './number-input.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as minus_default } from "./minus.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as input_default } from "./input.js";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref, withModifiers, withVaporModifiers } from "vue";
+//#region ~icons/lucide/plus
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M5 12h14m-7-7v14\">", 3, 1);
+function render(_ctx) {
+	return t0$1();
+}
+var plus_default = markRaw(defineVaporComponent({
+	name: "lucide-plus",
+	render
+}));
+//#endregion
+//#region src/components/number-input/useNumberInput.ts
+function finiteOrUndefined(value) {
+	return value !== void 0 && Number.isFinite(value) ? value : void 0;
+}
+function normalizeZero(value) {
+	return Object.is(value, -0) ? 0 : value;
+}
+function getDecimalPlaces(value) {
+	const [coefficient = "", exponentText] = String(value).toLowerCase().split("e");
+	const fractionLength = coefficient.split(".")[1]?.length ?? 0;
+	const exponent = Number(exponentText ?? 0);
+	return Math.max(0, fractionLength - (Number.isFinite(exponent) ? exponent : 0));
+}
+function roundWithPrecision(value, ...operands) {
+	const precision = Math.min(15, Math.max(0, ...operands.map(getDecimalPlaces)));
+	return normalizeZero(Number(value.toFixed(precision)));
+}
+function normalizeNumberInputBounds(min, max) {
+	const safeMin = finiteOrUndefined(min);
+	const safeMax = finiteOrUndefined(max);
+	if (safeMin !== void 0 && safeMax !== void 0 && safeMax < safeMin) return {
+		min: safeMax,
+		max: safeMin
+	};
+	return {
+		min: safeMin,
+		max: safeMax
+	};
+}
+function normalizeNumberInputStep(step) {
+	return step !== void 0 && Number.isFinite(step) && step > 0 ? step : 1;
+}
+function clampNumberInputValue(value, bounds) {
+	const aboveMin = bounds.min === void 0 ? value : Math.max(bounds.min, value);
+	return normalizeZero(bounds.max === void 0 ? aboveMin : Math.min(bounds.max, aboveMin));
+}
+function stepNumberInputValue(value, direction, step, bounds) {
+	const current = value ?? 0;
+	const rawNext = current + direction * step;
+	if (!Number.isFinite(rawNext)) {
+		if (direction === 1 && bounds.max !== void 0) return bounds.max;
+		if (direction === -1 && bounds.min !== void 0) return bounds.min;
+		return normalizeZero(current);
+	}
+	return clampNumberInputValue(roundWithPrecision(rawNext, current, step), bounds);
+}
+function parseNumberInputValue(value) {
+	if (value === "") return null;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) ? normalizeZero(parsed) : null;
+}
+function normalizeNumberInputControlsPosition(position) {
+	return position === "left" || position === "split" ? position : "right";
+}
+function normalizeNumberInputTextAlign(textAlign) {
+	return textAlign === "center" || textAlign === "right" ? textAlign : "left";
+}
+function getModelInputValue(value) {
+	return value !== null && Number.isFinite(value) ? String(normalizeZero(value)) : "";
+}
+function useNumberInput(props, emitUpdate) {
+	const control = useControlState(props);
+	const bounds = computed(() => normalizeNumberInputBounds(props.min, props.max));
+	const nativeStep = computed(() => normalizeNumberInputStep(props.step));
+	const modelInputValue = computed(() => getModelInputValue(props.modelValue));
+	const isInteractive = computed(() => !control.disabled && !props.readonly);
+	const controlsPosition = computed(() => normalizeNumberInputControlsPosition(props.controlsPosition));
+	const textAlign = computed(() => normalizeNumberInputTextAlign(props.textAlign));
+	const leftControls = computed(() => {
+		if (!props.controls || controlsPosition.value === "right") return [];
+		if (controlsPosition.value === "split") return ["decrement"];
+		return ["decrement", "increment"];
+	});
+	const rightControls = computed(() => {
+		if (!props.controls || controlsPosition.value === "left") return [];
+		if (controlsPosition.value === "split") return ["increment"];
+		return ["decrement", "increment"];
+	});
+	const rootClass = computed(() => bem("rp-number-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		controls: props.controls,
+		[`controls-${controlsPosition.value}`]: props.controls,
+		[`text-align-${textAlign.value}`]: true,
+		disabled: control.disabled,
+		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
+		readonly: props.readonly
+	}));
+	const canIncrement = computed(() => {
+		if (!isInteractive.value) return false;
+		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
+		return bounds.value.max === void 0 || props.modelValue < bounds.value.max;
+	});
+	const canDecrement = computed(() => {
+		if (!isInteractive.value) return false;
+		if (props.modelValue === null || !Number.isFinite(props.modelValue)) return true;
+		return bounds.value.min === void 0 || props.modelValue > bounds.value.min;
+	});
+	function emitStep(direction) {
+		if (!(direction === 1 ? canIncrement.value : canDecrement.value)) return false;
+		const current = Number.isFinite(props.modelValue) ? props.modelValue : null;
+		const next = stepNumberInputValue(current, direction, nativeStep.value, bounds.value);
+		if (current !== null && next === current) return false;
+		emitUpdate(next);
+		return true;
+	}
+	function onInputUpdate(value) {
+		if (!isInteractive.value) return;
+		emitUpdate(parseNumberInputValue(value));
+	}
+	function onKeydown(event) {
+		if (!isInteractive.value) return;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			emitStep(1);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			emitStep(-1);
+		}
+	}
+	function onBlur(event) {
+		if (!isInteractive.value || !props.clampOnBlur) return;
+		const input = event.currentTarget;
+		if (!(input instanceof HTMLInputElement) || input.value === "") return;
+		const current = parseNumberInputValue(input.value);
+		if (current === null) {
+			input.value = modelInputValue.value;
+			return;
+		}
+		const next = clampNumberInputValue(current, bounds.value);
+		if (next === current) return;
+		input.value = String(next);
+		emitUpdate(next);
+	}
+	return {
+		control,
+		rootClass,
+		bounds,
+		nativeStep,
+		nativeInputAttrs: computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				min: bounds.value.min,
+				max: bounds.value.max,
+				step: nativeStep.value,
+				inputmode: attrs.inputmode ?? "decimal",
+				style: [attrs.style, { textAlign: textAlign.value }],
+				onBlur(event) {
+					onBlur(event);
+					attrs.onBlur?.(event);
+				},
+				onKeydown(event) {
+					onKeydown(event);
+					attrs.onKeydown?.(event);
+				}
+			};
+		}),
+		modelInputValue,
+		leftControls,
+		rightControls,
+		canIncrement,
+		canDecrement,
+		increment: () => emitStep(1),
+		decrement: () => emitStep(-1),
+		onInputUpdate
+	};
+}
+//#endregion
+//#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button data-v-b5d8edf1 type=button tabindex=-1><span data-v-b5d8edf1 class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-b5d8edf1 class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-b5d8edf1 type=button tabindex=-1><span data-v-b5d8edf1 class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-b5d8edf1 class=\"rp-number-input__controls rp-number-input__controls--right\">");
+delegateEvents("mousedown");
+//#endregion
+//#region src/components/number-input/number-input.vue
+var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpNumberInput",
+	__name: "number-input",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		size: {},
+		radius: {},
+		placeholder: { default: "" },
+		controls: {
+			type: Boolean,
+			default: true
+		},
+		controlsPosition: { default: "right" },
+		textAlign: { default: "left" },
+		clampOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		incrementLabel: { default: "Increment value" },
+		decrementLabel: { default: "Decrement value" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => emit("update:modelValue", value));
+		function focusNativeInput(event) {
+			const target = event.currentTarget;
+			if (!(target instanceof Element)) return;
+			target.closest(".rp-number-input")?.querySelector("input")?.focus();
+		}
+		function getControlLabel(controlType) {
+			return controlType === "increment" ? props.incrementLabel : props.decrementLabel;
+		}
+		function isControlDisabled(controlType) {
+			return controlType === "increment" ? !canIncrement.value : !canDecrement.value;
+		}
+		function onControlClick(event, controlType) {
+			if (controlType === "increment" ? increment() : decrement()) focusNativeInput(event);
+		}
+		return createComponent(input_default, {
+			class: () => unref(rootClass),
+			id: () => unref(control).id,
+			name: () => __props.name,
+			"model-value": () => unref(modelInputValue),
+			type: "number",
+			size: () => __props.size,
+			radius: () => __props.radius,
+			placeholder: () => __props.placeholder,
+			disabled: () => unref(control).disabled || void 0,
+			readonly: () => __props.readonly || void 0,
+			required: () => unref(control).required || void 0,
+			invalid: () => unref(control).invalid || void 0,
+			valid: () => unref(control).valid && !unref(control).invalid ? true : void 0,
+			"aria-label": () => __props.ariaLabel,
+			describedby: () => __props.describedby,
+			labelledby: () => __props.labelledby,
+			"input-attrs": () => unref(nativeInputAttrs),
+			"validation-message": () => __props.validationMessage,
+			"onUpdate:modelValue": () => unref(onInputUpdate)
+		}, { $: [() => unref(leftControls).length ? {
+			name: "left",
+			fn: () => {
+				const n13 = t1();
+				setInsertionState(n13, null, 0);
+				createFor(() => unref(leftControls), (_for_item0) => {
+					const n12 = t0();
+					const n11 = child(n12);
+					renderEffect(() => {
+						const _controlType = _for_item0.value;
+						setAttr(n12, "aria-label", getControlLabel(_controlType));
+						setProp(n12, "disabled", isControlDisabled(_controlType));
+					});
+					setInsertionState(n11, null, 0);
+					createIf(() => _for_item0.value === "increment", () => {
+						return createSlot("increment-icon", null, () => {
+							return createComponent(unref(plus_default));
+						}, 1);
+					}, () => {
+						return createSlot("decrement-icon", null, () => {
+							return createComponent(unref(minus_default));
+						}, 1);
+					}, 261);
+					n12.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+					on(n12, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
+					setClass(n12, ["rp-number-input__control", `rp-number-input__control--${_for_item0.value}`]);
+					return n12;
+				}, (controlType) => controlType, 9);
+				return n13;
+			}
+		} : void 0, () => unref(rightControls).length ? {
+			name: "right",
+			fn: () => {
+				const n28 = t3();
+				setInsertionState(n28, null, 0);
+				createFor(() => unref(rightControls), (_for_item0) => {
+					const n27 = t2();
+					const n26 = child(n27);
+					renderEffect(() => {
+						const _controlType = _for_item0.value;
+						setAttr(n27, "aria-label", getControlLabel(_controlType));
+						setProp(n27, "disabled", isControlDisabled(_controlType));
+					});
+					setInsertionState(n26, null, 0);
+					createIf(() => _for_item0.value === "increment", () => {
+						return createSlot("increment-icon", null, () => {
+							return createComponent(unref(plus_default));
+						}, 1);
+					}, () => {
+						return createSlot("decrement-icon", null, () => {
+							return createComponent(unref(minus_default));
+						}, 1);
+					}, 517);
+					n27.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+					on(n27, "click", withModifiers(($event) => onControlClick($event, _for_item0.value), ["stop"]));
+					setClass(n27, ["rp-number-input__control", `rp-number-input__control--${_for_item0.value}`]);
+					return n27;
+				}, (controlType) => controlType, 9);
+				return n28;
+			}
+		} : void 0] }, true);
+	}
+}), [["__scopeId", "data-v-b5d8edf1"]]);
+//#endregion
+export { number_input_default as t };

package/dist/overlay.css

@@ -1,5 +1,5 @@
-.rp-overlay[data-v-4a733439] {
-  --_rp-overlay-color: var(--rp-color-overlay);
+.rp-overlay[data-v-d98cba01] {
+  --_rp-overlay-color: rgba(0, 0, 0, 0.55);
   --_rp-overlay-opacity: 1;
   --_rp-overlay-blur: 0px;
   --_rp-overlay-z-index: 1;
@@ -15,14 +15,14 @@
   opacity: var(--_rp-overlay-opacity);
   pointer-events: none;
 }
-.rp-overlay--gradient[data-v-4a733439] {
+.rp-overlay--gradient[data-v-d98cba01] {
   background-color: transparent;
   opacity: 1;
 }
-.rp-overlay--blurred[data-v-4a733439] {
+.rp-overlay--blurred[data-v-d98cba01] {
   backdrop-filter: blur(var(--_rp-overlay-blur));
   -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
 }
-.rp-overlay--interactive[data-v-4a733439] {
+.rp-overlay--interactive[data-v-d98cba01] {
   pointer-events: auto;
 }

package/dist/overlay.js

@@ -45,14 +45,14 @@ function useOverlay(props) {
 }
 //#endregion
 //#region src/components/overlay/overlay.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-4a733439 aria-hidden=true>", 1);
+var t0 = template("<div data-v-d98cba01 aria-hidden=true>", 1);
 //#endregion
 //#region src/components/overlay/overlay.vue
 var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpOverlay",
 	__name: "overlay",
 	props: {
-		color: { default: "var(--rp-color-overlay)" },
+		color: { default: "rgba(0, 0, 0, 0.55)" },
 		opacity: { default: 1 },
 		gradient: { default: "" },
 		blur: {},
@@ -77,8 +77,6 @@ var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return n2;
 		});
 	}
-}), [["__scopeId", "data-v-4a733439"]]);
+}), [["__scopeId", "data-v-d98cba01"]]);
 //#endregion
 export { overlay_default as t };
-
-//# sourceMappingURL=overlay.js.map

package/dist/popover.css

@@ -1,4 +1,4 @@
-.rp-popover[data-v-afdc2686] {
+.rp-popover[data-v-fd62ef9b] {
   --_rp-popover-main-axis-offset: var(--rp-spacing-2);
   --_rp-popover-cross-axis-offset: 0px;
   --_rp-popover-radius: var(--rp-radius-sm);
@@ -7,7 +7,7 @@
   font-family: var(--rp-font-family);
   vertical-align: middle;
 }
-.rp-popover__content[data-v-afdc2686] {
+.rp-popover__content[data-v-fd62ef9b] {
   position: absolute;
   z-index: 100;
   box-sizing: border-box;
@@ -15,61 +15,94 @@
   max-width: min(24rem, 100vw - var(--rp-spacing-6));
   padding: var(--rp-spacing-4);
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
   overflow-wrap: anywhere;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-popover-radius);
   box-shadow: var(--rp-shadow-base);
 }
-.rp-popover--placement-top .rp-popover__content[data-v-afdc2686] {
+.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b] {
   bottom: calc(100% + var(--_rp-popover-main-axis-offset));
-  left: calc(50% + var(--_rp-popover-cross-axis-offset));
-  translate: -50% 0;
 }
-.rp-popover--placement-right .rp-popover__content[data-v-afdc2686] {
-  top: calc(50% + var(--_rp-popover-cross-axis-offset));
+.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b] {
   left: calc(100% + var(--_rp-popover-main-axis-offset));
-  translate: 0 -50%;
 }
-.rp-popover--placement-bottom .rp-popover__content[data-v-afdc2686] {
+.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
   top: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+  right: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b] {
+  left: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
   left: calc(50% + var(--_rp-popover-cross-axis-offset));
   translate: -50% 0;
 }
-.rp-popover--placement-left .rp-popover__content[data-v-afdc2686] {
+.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+  right: calc(0px - var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b] {
+  top: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
   top: calc(50% + var(--_rp-popover-cross-axis-offset));
-  right: calc(100% + var(--_rp-popover-main-axis-offset));
   translate: 0 -50%;
 }
-.rp-popover--target[data-v-afdc2686] {
+.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+  bottom: calc(0px - var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--target[data-v-fd62ef9b] {
   display: contents;
 }
-.rp-popover--target .rp-popover__content[data-v-afdc2686] {
+.rp-popover--target .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: 0px;
+  --_rp-popover-target-translate-y: 0px;
   position: fixed;
   top: var(--_rp-popover-target-y, 0);
   right: auto;
   bottom: auto;
   left: var(--_rp-popover-target-x, 0);
+  translate: var(--_rp-popover-target-translate-x) var(--_rp-popover-target-translate-y);
+}
+.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-y: calc(-100% - var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: var(--_rp-popover-main-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-y: var(--_rp-popover-main-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: calc(-100% - var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: calc(-50% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-afdc2686] {
-  translate: calc(-50% + var(--_rp-popover-cross-axis-offset)) calc(-100% - var(--_rp-popover-main-axis-offset));
+.rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-x: calc(-100% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-afdc2686] {
-  translate: var(--_rp-popover-main-axis-offset) calc(-50% + var(--_rp-popover-cross-axis-offset));
+.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-y: var(--_rp-popover-cross-axis-offset);
 }
-.rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-afdc2686] {
-  translate: calc(-50% + var(--_rp-popover-cross-axis-offset)) var(--_rp-popover-main-axis-offset);
+.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-y: calc(-50% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-afdc2686] {
-  translate: calc(-100% - var(--_rp-popover-main-axis-offset)) calc(-50% + var(--_rp-popover-cross-axis-offset));
+.rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+  --_rp-popover-target-translate-y: calc(-100% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover-content-enter-active[data-v-afdc2686],
-.rp-popover-content-leave-active[data-v-afdc2686] {
+.rp-popover-content-enter-active[data-v-fd62ef9b],
+.rp-popover-content-leave-active[data-v-fd62ef9b] {
   transition: opacity var(--rp-transition-fast);
 }
-.rp-popover-content-enter-from[data-v-afdc2686],
-.rp-popover-content-leave-to[data-v-afdc2686] {
+.rp-popover-content-enter-from[data-v-fd62ef9b],
+.rp-popover-content-leave-to[data-v-fd62ef9b] {
   opacity: 0;
 }