ropav 0.0.9 → 0.0.11

package/dist/number-input.js

@@ -1,10 +1,11 @@
 import './number-input.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.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";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, renderEffect, setDynamicProps, setInsertionState, 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) {
@@ -186,15 +187,16 @@ function useNumberInput(props, emitUpdate) {
 }
 //#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\">");
+var t0 = template("<button data-v-3cef367f><span data-v-3cef367f class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-3cef367f class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-3cef367f><span data-v-3cef367f class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-3cef367f 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",
+	inheritAttrs: false,
 	__name: "number-input",
 	props: {
 		id: {},
@@ -242,13 +244,31 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		inputAttrs: {},
 		validationMessage: {},
 		incrementLabel: { default: "Increment value" },
-		decrementLabel: { default: "Decrement value" }
+		decrementLabel: { default: "Decrement value" },
+		classNames: {},
+		styles: {}
 	},
 	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));
+		const { attrs, getPartAttrs } = useStylesApi(props, "root");
+		const inputClassNames = computed(() => ({
+			root: [rootClass.value, props.classNames?.root],
+			input: props.classNames?.input
+		}));
+		const inputStyles = computed(() => ({
+			root: props.styles?.root,
+			input: props.styles?.input
+		}));
+		function getControlAttrs(controlType) {
+			return {
+				...getPartAttrs("control", { class: ["rp-number-input__control", `rp-number-input__control--${controlType}`] }),
+				"data-control": controlType,
+				"data-disabled": presence(isControlDisabled(controlType))
+			};
+		}
 		function focusNativeInput(event) {
 			const target = event.currentTarget;
 			if (!(target instanceof Element)) return;
@@ -263,8 +283,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		function onControlClick(event, controlType) {
 			if (controlType === "increment" ? increment() : decrement()) focusNativeInput(event);
 		}
-		return createComponent(input_default, {
-			class: () => unref(rootClass),
+		return createComponent(input_default, { $: [() => unref(attrs), {
 			id: () => unref(control).id,
 			name: () => __props.name,
 			"model-value": () => unref(modelInputValue),
@@ -281,9 +300,11 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			describedby: () => __props.describedby,
 			labelledby: () => __props.labelledby,
 			"input-attrs": () => unref(nativeInputAttrs),
+			"class-names": () => inputClassNames.value,
+			styles: () => inputStyles.value,
 			"validation-message": () => __props.validationMessage,
 			"onUpdate:modelValue": () => unref(onInputUpdate)
-		}, { $: [() => unref(leftControls).length ? {
+		}] }, { $: [() => unref(leftControls).length ? {
 			name: "left",
 			fn: () => {
 				const n13 = t1();
@@ -293,8 +314,17 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					const n11 = child(n12);
 					renderEffect(() => {
 						const _controlType = _for_item0.value;
-						setAttr(n12, "aria-label", getControlLabel(_controlType));
-						setProp(n12, "disabled", isControlDisabled(_controlType));
+						setDynamicProps(n12, [
+							{
+								type: "button",
+								tabindex: "-1"
+							},
+							getControlAttrs(_controlType),
+							{
+								"aria-label": getControlLabel(_controlType),
+								disabled: isControlDisabled(_controlType)
+							}
+						]);
 					});
 					setInsertionState(n11, null, 0);
 					createIf(() => _for_item0.value === "increment", () => {
@@ -308,7 +338,6 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					}, 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;
@@ -323,8 +352,17 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					const n26 = child(n27);
 					renderEffect(() => {
 						const _controlType = _for_item0.value;
-						setAttr(n27, "aria-label", getControlLabel(_controlType));
-						setProp(n27, "disabled", isControlDisabled(_controlType));
+						setDynamicProps(n27, [
+							{
+								type: "button",
+								tabindex: "-1"
+							},
+							getControlAttrs(_controlType),
+							{
+								"aria-label": getControlLabel(_controlType),
+								disabled: isControlDisabled(_controlType)
+							}
+						]);
 					});
 					setInsertionState(n26, null, 0);
 					createIf(() => _for_item0.value === "increment", () => {
@@ -338,13 +376,19 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					}, 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"]]);
+}), [["__scopeId", "data-v-3cef367f"]]);
+//#endregion
+//#region src/components/number-input/types.ts
+var numberInputParts = [
+	"root",
+	"input",
+	"control"
+];
 //#endregion
-export { number_input_default as t };
+export { number_input_default as n, numberInputParts as t };

package/dist/overlay.css

@@ -1,28 +1,30 @@
-.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;
-  position: absolute;
-  inset: 0;
-  z-index: var(--_rp-overlay-z-index);
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: var(--_rp-overlay-color);
-  border-radius: inherit;
-  opacity: var(--_rp-overlay-opacity);
-  pointer-events: none;
+@layer ropav.components {
+.rp-overlay[data-v-972b25a9] {
+    --_rp-overlay-color: rgba(0, 0, 0, 0.55);
+    --_rp-overlay-opacity: 1;
+    --_rp-overlay-blur: 0px;
+    --_rp-overlay-z-index: 1;
+    position: absolute;
+    inset: 0;
+    z-index: var(--_rp-overlay-z-index);
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--_rp-overlay-color);
+    border-radius: inherit;
+    opacity: var(--_rp-overlay-opacity);
+    pointer-events: none;
 }
-.rp-overlay--gradient[data-v-d98cba01] {
-  background-color: transparent;
-  opacity: 1;
+.rp-overlay--gradient[data-v-972b25a9] {
+    background-color: transparent;
+    opacity: 1;
 }
-.rp-overlay--blurred[data-v-d98cba01] {
-  backdrop-filter: blur(var(--_rp-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+.rp-overlay--blurred[data-v-972b25a9] {
+    backdrop-filter: blur(var(--_rp-overlay-blur));
+    -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+}
+.rp-overlay--interactive[data-v-972b25a9] {
+    pointer-events: auto;
 }
-.rp-overlay--interactive[data-v-d98cba01] {
-  pointer-events: auto;
 }

package/dist/overlay.js

@@ -1,7 +1,8 @@
 import './overlay.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createIf, defineVaporComponent, renderEffect, setClass, setStyle, template, unref } from "vue";
+import { computed, createIf, defineVaporComponent, renderEffect, setDynamicProps, template, unref } from "vue";
 //#region src/components/overlay/useOverlay.ts
 function getBlurValue(blur) {
 	if (blur == null || blur === "") return void 0;
@@ -45,11 +46,12 @@ 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-d98cba01 aria-hidden=true>", 1);
+var t0 = template("<div data-v-972b25a9>", 1);
 //#endregion
 //#region src/components/overlay/overlay.vue
 var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpOverlay",
+	inheritAttrs: false,
 	__name: "overlay",
 	props: {
 		color: { default: "rgba(0, 0, 0, 0.55)" },
@@ -64,19 +66,25 @@ var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { isRendered, rootClass, rootStyle } = useOverlay(__props);
+		const props = __props;
+		const { isRendered, rootClass, rootStyle } = useOverlay(props);
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"aria-hidden": "true"
+		}));
 		return createIf(() => unref(isRendered), () => {
 			const n2 = t0();
-			renderEffect(() => {
-				setClass(n2, unref(rootClass));
-				setStyle(n2, unref(rootStyle));
-			});
+			renderEffect(() => setDynamicProps(n2, [rootAttrs.value]));
 			return n2;
 		});
 	}
-}), [["__scopeId", "data-v-d98cba01"]]);
+}), [["__scopeId", "data-v-972b25a9"]]);
 //#endregion
 export { overlay_default as t };

package/dist/overlay2.js

@@ -0,0 +1,4 @@
+//#region src/components/overlay/types.ts
+var overlayParts = ["root"];
+//#endregion
+export { overlayParts as t };

package/dist/popover.css

@@ -1,108 +1,141 @@
-.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);
-  position: relative;
-  display: inline-flex;
-  font-family: var(--rp-font-family);
-  vertical-align: middle;
-}
-.rp-popover__content[data-v-fd62ef9b] {
-  position: absolute;
-  z-index: 100;
-  box-sizing: border-box;
-  min-width: 180px;
-  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-md);
-  line-height: var(--rp-line-height-md);
-  overflow-wrap: anywhere;
-  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-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));
-}
-.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));
-}
-.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-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));
-  translate: 0 -50%;
-}
-.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-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-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-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-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-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-fd62ef9b],
-.rp-popover-content-leave-active[data-v-fd62ef9b] {
-  transition: opacity var(--rp-transition-fast);
-}
-.rp-popover-content-enter-from[data-v-fd62ef9b],
-.rp-popover-content-leave-to[data-v-fd62ef9b] {
-  opacity: 0;
+@layer ropav.components {
+.rp-popover[data-v-8af57bff] {
+    --_rp-popover-main-axis-offset: var(--rp-spacing-2);
+    --_rp-popover-cross-axis-offset: 0px;
+    --_rp-popover-radius: var(--rp-radius-sm);
+    --_rp-popover-arrow-size: 0.5rem;
+    position: relative;
+    display: inline-flex;
+    font-family: var(--rp-font-family);
+    vertical-align: middle;
+}
+.rp-popover__content[data-v-8af57bff] {
+    position: absolute;
+    z-index: 100;
+    box-sizing: border-box;
+    min-width: 180px;
+    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-md);
+    line-height: var(--rp-line-height-md);
+    overflow-wrap: anywhere;
+    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-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-top .rp-popover__content[data-v-8af57bff], .rp-popover--placement-top-end .rp-popover__content[data-v-8af57bff] {
+    bottom: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-right-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-right .rp-popover__content[data-v-8af57bff], .rp-popover--placement-right-end .rp-popover__content[data-v-8af57bff] {
+    left: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-bottom-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-bottom .rp-popover__content[data-v-8af57bff], .rp-popover--placement-bottom-end .rp-popover__content[data-v-8af57bff] {
+    top: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-left-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-left .rp-popover__content[data-v-8af57bff], .rp-popover--placement-left-end .rp-popover__content[data-v-8af57bff] {
+    right: calc(100% + var(--_rp-popover-main-axis-offset));
+}
+.rp-popover--placement-top-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-bottom-start .rp-popover__content[data-v-8af57bff] {
+    left: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--placement-top .rp-popover__content[data-v-8af57bff], .rp-popover--placement-bottom .rp-popover__content[data-v-8af57bff] {
+    left: calc(50% + var(--_rp-popover-cross-axis-offset));
+    translate: -50% 0;
+}
+.rp-popover--placement-top-end .rp-popover__content[data-v-8af57bff], .rp-popover--placement-bottom-end .rp-popover__content[data-v-8af57bff] {
+    right: calc(0px - var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--placement-right-start .rp-popover__content[data-v-8af57bff], .rp-popover--placement-left-start .rp-popover__content[data-v-8af57bff] {
+    top: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--placement-right .rp-popover__content[data-v-8af57bff], .rp-popover--placement-left .rp-popover__content[data-v-8af57bff] {
+    top: calc(50% + var(--_rp-popover-cross-axis-offset));
+    translate: 0 -50%;
+}
+.rp-popover--placement-right-end .rp-popover__content[data-v-8af57bff], .rp-popover--placement-left-end .rp-popover__content[data-v-8af57bff] {
+    bottom: calc(0px - var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--target[data-v-8af57bff] {
+    display: contents;
+}
+.rp-popover--target .rp-popover__content[data-v-8af57bff] {
+    --_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-8af57bff], .rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-8af57bff] {
+    --_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-8af57bff], .rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-x: var(--_rp-popover-main-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-y: var(--_rp-popover-main-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-8af57bff] {
+    --_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-8af57bff], .rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-x: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-x: calc(-50% + var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-x: calc(-100% + var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-y: var(--_rp-popover-cross-axis-offset);
+}
+.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-y: calc(-50% + var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-8af57bff], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-8af57bff] {
+    --_rp-popover-target-translate-y: calc(-100% + var(--_rp-popover-cross-axis-offset));
+}
+.rp-popover__content[data-placement][data-v-8af57bff] {
+    position: absolute;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    translate: none;
+}
+.rp-popover__arrow[data-v-8af57bff] {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--_rp-popover-arrow-size);
+    height: var(--_rp-popover-arrow-size);
+    pointer-events: none;
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-popover__arrow[data-side=top][data-v-8af57bff] {
+    bottom: calc(-1 * var(--_rp-popover-arrow-size) / 2);
+}
+.rp-popover__arrow[data-side=right][data-v-8af57bff] {
+    left: calc(-1 * var(--_rp-popover-arrow-size) / 2);
+}
+.rp-popover__arrow[data-side=bottom][data-v-8af57bff] {
+    top: calc(-1 * var(--_rp-popover-arrow-size) / 2);
+}
+.rp-popover__arrow[data-side=left][data-v-8af57bff] {
+    right: calc(-1 * var(--_rp-popover-arrow-size) / 2);
+}
+.rp-popover-content-enter-active[data-v-8af57bff],
+  .rp-popover-content-leave-active[data-v-8af57bff] {
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-popover-content-enter-from[data-v-8af57bff],
+  .rp-popover-content-leave-to[data-v-8af57bff] {
+    opacity: 0;
+}
 }