ropav 0.0.8 → 0.0.9

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,6 +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 };

package/dist/popover.css

@@ -15,55 +15,88 @@
   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-fd62ef9b] {
+.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-fd62ef9b] {
-  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-fd62ef9b] {
+.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-fd62ef9b] {
+.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--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 .rp-popover__content[data-v-fd62ef9b] {
-  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-fd62ef9b] {
-  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-fd62ef9b] {
-  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-fd62ef9b] {
-  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-fd62ef9b],
 .rp-popover-content-leave-active[data-v-fd62ef9b] {

package/dist/popover.js

@@ -16,21 +16,24 @@ function isHTMLElement(value) {
 function getTargetPosition(rect, placement) {
 	const centerX = rect.left + rect.width / 2;
 	const centerY = rect.top + rect.height / 2;
-	switch (placement) {
+	const [side, alignment = "center"] = placement.split("-");
+	const alignedX = alignment === "start" ? rect.left : alignment === "end" ? rect.right : centerX;
+	const alignedY = alignment === "start" ? rect.top : alignment === "end" ? rect.bottom : centerY;
+	switch (side) {
 		case "right": return {
 			x: rect.right,
-			y: centerY
+			y: alignedY
 		};
 		case "bottom": return {
-			x: centerX,
+			x: alignedX,
 			y: rect.bottom
 		};
 		case "left": return {
 			x: rect.left,
-			y: centerY
+			y: alignedY
 		};
 		default: return {
-			x: centerX,
+			x: alignedX,
 			y: rect.top
 		};
 	}

package/dist/popover2.js

@@ -0,0 +1,17 @@
+//#region src/components/popover/types.ts
+var popoverPlacements = [
+	"top-start",
+	"top",
+	"top-end",
+	"right-start",
+	"right",
+	"right-end",
+	"bottom-start",
+	"bottom",
+	"bottom-end",
+	"left-start",
+	"left",
+	"left-end"
+];
+//#endregion
+export { popoverPlacements as t };

package/dist/progress.css

@@ -1,8 +1,8 @@
 .rp-progress[data-v-7870ef03] {
-  --_rp-progress-color: var(--_rp-progress-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-progress-color: var(--rp-color-control-selected-bg);
   --_rp-progress-track-bg: var(--rp-color-control-track-bg);
   --_rp-progress-track-height: 8px;
-  --_rp-progress-font-size: var(--rp-font-size-base);
+  --_rp-progress-font-size: var(--rp-font-size-md);
   --_rp-progress-radius: var(--rp-radius-full);
   --_rp-progress-value: 0%;
   --_rp-progress-ratio: 0;
@@ -12,7 +12,7 @@
   gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
   font-size: var(--_rp-progress-font-size);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
 .rp-progress__header[data-v-7870ef03] {
   display: flex;
@@ -27,7 +27,7 @@
 }
 .rp-progress__value[data-v-7870ef03] {
   flex-shrink: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-variant-numeric: tabular-nums;
 }
 .rp-progress__track[data-v-7870ef03] {
@@ -53,45 +53,24 @@
   min-width: 2rem;
   animation: rp-progress-indeterminate-7870ef03 1200ms ease-in-out infinite;
 }
-.rp-progress--color-primary[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-primary);
-}
-.rp-progress--color-secondary[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-secondary);
-}
-.rp-progress--color-success[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-success);
-}
-.rp-progress--color-warning[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-warning);
-}
-.rp-progress--color-danger[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-danger);
-}
-.rp-progress--color-info[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-info);
-}
-.rp-progress--color-neutral[data-v-7870ef03] {
-  --_rp-progress-color: var(--rp-color-neutral);
-}
 .rp-progress--size-xs[data-v-7870ef03] {
-  --_rp-progress-track-height: 4px;
+  --_rp-progress-track-height: 3px;
   --_rp-progress-font-size: var(--rp-font-size-xs);
 }
 .rp-progress--size-sm[data-v-7870ef03] {
-  --_rp-progress-track-height: 6px;
+  --_rp-progress-track-height: 5px;
   --_rp-progress-font-size: var(--rp-font-size-sm);
 }
 .rp-progress--size-md[data-v-7870ef03] {
   --_rp-progress-track-height: 8px;
-  --_rp-progress-font-size: var(--rp-font-size-base);
+  --_rp-progress-font-size: var(--rp-font-size-md);
 }
 .rp-progress--size-lg[data-v-7870ef03] {
-  --_rp-progress-track-height: 10px;
+  --_rp-progress-track-height: 12px;
   --_rp-progress-font-size: var(--rp-font-size-lg);
 }
 .rp-progress--size-xl[data-v-7870ef03] {
-  --_rp-progress-track-height: 12px;
+  --_rp-progress-track-height: 16px;
   --_rp-progress-font-size: var(--rp-font-size-xl);
 }
 .rp-progress--radius-none[data-v-7870ef03] {

package/dist/progress.js

@@ -1,7 +1,7 @@
 import './progress.css';
 import { t as bem } from "./bem.js";
+import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
 import { t as useControlState } from "./useControlState.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref } from "vue";
 //#region src/components/progress/useProgress.ts
@@ -33,9 +33,6 @@ function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
 	if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
 	if (formatter) return String(formatter(value, percent));
 }
-function setProgressStyleValue(style, property, value) {
-	if (value) style[property] = value;
-}
 function useProgress(props) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeProgressBounds(props.min, props.max));
@@ -47,7 +44,6 @@ function useProgress(props) {
 	return {
 		control,
 		rootClass: computed(() => bem("rp-progress", {
-			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius),
 			indeterminate: isIndeterminate.value
@@ -57,7 +53,8 @@ function useProgress(props) {
 				"--_rp-progress-value": `${valuePercent.value}%`,
 				"--_rp-progress-ratio": `${valuePercent.value / 100}`
 			};
-			setProgressStyleValue(style, "--_rp-progress-custom-color", getComponentCustomColor(props.color));
+			const colorValue = getComponentColorValue(props.color);
+			if (colorValue) style["--_rp-progress-color"] = colorValue;
 			return style;
 		}),
 		isIndeterminate,