ropav 0.1.4 → 0.1.6

package/dist/pagination.js

@@ -0,0 +1,442 @@
+import './pagination.css';
+import { t as useControllableValue } from "./useControllableValue.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as chevron_right_default } from "./chevron-right.js";
+import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, markRaw, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
+//#region ~icons/lucide/chevron-left
+var t0$4 = 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=\"m15 18l-6-6l6-6\">", 3, 1);
+function render$3(_ctx) {
+	return t0$4();
+}
+var chevron_left_default = markRaw(defineVaporComponent({
+	name: "lucide-chevron-left",
+	render: render$3
+}));
+//#endregion
+//#region ~icons/lucide/chevrons-left
+var t0$3 = 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=\"m11 17l-5-5l5-5m7 10l-5-5l5-5\">", 3, 1);
+function render$2(_ctx) {
+	return t0$3();
+}
+var chevrons_left_default = markRaw(defineVaporComponent({
+	name: "lucide-chevrons-left",
+	render: render$2
+}));
+//#endregion
+//#region ~icons/lucide/chevrons-right
+var t0$2 = 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=\"m6 17l5-5l-5-5m7 10l5-5l-5-5\">", 3, 1);
+function render$1(_ctx) {
+	return t0$2();
+}
+var chevrons_right_default = markRaw(defineVaporComponent({
+	name: "lucide-chevrons-right",
+	render: render$1
+}));
+//#endregion
+//#region ~icons/lucide/ellipsis
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=1></circle><circle cx=19 cy=12 r=1></circle><circle cx=5 cy=12 r=1>", 3, 1);
+function render(_ctx) {
+	return t0$1();
+}
+var ellipsis_default = markRaw(defineVaporComponent({
+	name: "lucide-ellipsis",
+	render
+}));
+//#endregion
+//#region src/components/pagination/usePagination.ts
+function normalizeCount(value, fallback) {
+	return Number.isFinite(value) ? Math.max(0, Math.floor(value)) : fallback;
+}
+function normalizePaginationTotal(total) {
+	return normalizeCount(total, 0);
+}
+function normalizePaginationPage(page, total) {
+	const safeTotal = normalizePaginationTotal(total);
+	return Math.min(Math.max(Number.isFinite(page) ? Math.floor(page) : 1, 1), Math.max(safeTotal, 1));
+}
+function getRange(start, end) {
+	return Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
+}
+function getPaginationItems(total, page, siblings = 1, boundaries = 1) {
+	const safeTotal = normalizePaginationTotal(total);
+	if (safeTotal === 0) return [];
+	const currentPage = normalizePaginationPage(page, safeTotal);
+	const siblingCount = normalizeCount(siblings, 1);
+	const boundaryCount = normalizeCount(boundaries, 1);
+	if (safeTotal <= siblingCount * 2 + boundaryCount * 2 + 3) return getRange(1, safeTotal).map((pageValue) => ({
+		type: "page",
+		key: `page-${pageValue}`,
+		page: pageValue
+	}));
+	const leftSibling = Math.max(currentPage - siblingCount, boundaryCount);
+	const rightSibling = Math.min(currentPage + siblingCount, safeTotal - boundaryCount);
+	const showLeftEllipsis = leftSibling > boundaryCount + 2;
+	const showRightEllipsis = rightSibling < safeTotal - boundaryCount - 1;
+	let pages;
+	if (!showLeftEllipsis && showRightEllipsis) pages = [...getRange(1, siblingCount * 2 + boundaryCount + 2), ...getRange(safeTotal - boundaryCount + 1, safeTotal)];
+	else if (showLeftEllipsis && !showRightEllipsis) {
+		const rightItemCount = siblingCount * 2 + boundaryCount + 2;
+		pages = [...getRange(1, boundaryCount), ...getRange(safeTotal - rightItemCount + 1, safeTotal)];
+	} else pages = [
+		...getRange(1, boundaryCount),
+		...getRange(leftSibling, rightSibling),
+		...getRange(safeTotal - boundaryCount + 1, safeTotal)
+	];
+	const items = [];
+	let previous = 0;
+	function addGap(next) {
+		const missingPages = next - previous - 1;
+		if (missingPages === 1) {
+			const pageValue = previous + 1;
+			items.push({
+				type: "page",
+				key: `page-${pageValue}`,
+				page: pageValue
+			});
+		} else if (missingPages > 1) items.push({
+			type: "ellipsis",
+			key: `ellipsis-${previous}-${next}`
+		});
+	}
+	for (const pageValue of pages) {
+		addGap(pageValue);
+		items.push({
+			type: "page",
+			key: `page-${pageValue}`,
+			page: pageValue
+		});
+		previous = pageValue;
+	}
+	addGap(safeTotal + 1);
+	return items;
+}
+function getPaginationColorStyle(color, autoContrast, contrastColor) {
+	const roles = getComponentVariantColorRoles({
+		color: color ?? "primary",
+		variant: "solid",
+		autoContrast,
+		contrastColor
+	});
+	if (!roles) return void 0;
+	return {
+		"--_rp-pagination-active-bg": roles.background,
+		"--_rp-pagination-active-bg-hover": roles.hover,
+		"--_rp-pagination-active-fg": roles.color,
+		"--_rp-pagination-active-fg-hover": roles.colorHover
+	};
+}
+function usePagination(props, getCurrentValue, onChange) {
+	const totalPages = computed(() => normalizePaginationTotal(props.total));
+	const currentPage = computed(() => normalizePaginationPage(getCurrentValue(), totalPages.value));
+	const items = computed(() => getPaginationItems(totalPages.value, currentPage.value, props.siblings ?? 1, props.boundaries ?? 1));
+	const rootClass = computed(() => bem("rp-pagination", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: props.disabled
+	}));
+	const rootStyle = computed(() => getPaginationColorStyle(props.color, props.autoContrast ?? true, props.contrastColor));
+	const firstPage = computed(() => 1);
+	const previousPage = computed(() => Math.max(1, currentPage.value - 1));
+	const nextPage = computed(() => Math.min(Math.max(totalPages.value, 1), currentPage.value + 1));
+	const lastPage = computed(() => Math.max(totalPages.value, 1));
+	const isFirstDisabled = computed(() => props.disabled || totalPages.value === 0 || currentPage.value <= 1);
+	const isLastDisabled = computed(() => props.disabled || totalPages.value === 0 || currentPage.value >= totalPages.value);
+	function selectPage(page) {
+		if (props.disabled || totalPages.value === 0) return false;
+		const next = normalizePaginationPage(page, totalPages.value);
+		if (next === currentPage.value) return false;
+		onChange(next);
+		return true;
+	}
+	return {
+		totalPages,
+		currentPage,
+		items,
+		rootClass,
+		rootStyle,
+		firstPage,
+		previousPage,
+		nextPage,
+		lastPage,
+		isFirstDisabled,
+		isLastDisabled,
+		selectPage
+	};
+}
+//#endregion
+//#region src/components/pagination/pagination.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<li data-v-6ae45781 class=rp-pagination__item><button data-v-6ae45781></button>");
+var t1 = template(" ");
+var t2 = template("<button data-v-6ae45781></button>");
+var t3 = template("<span data-v-6ae45781>");
+var t4 = template("<li data-v-6ae45781 class=rp-pagination__item>");
+var t5 = template("<li data-v-6ae45781 class=rp-pagination__item><button data-v-6ae45781>");
+var t6 = template("<nav data-v-6ae45781><ul data-v-6ae45781>", 1);
+delegateEvents("click");
+//#endregion
+//#region src/components/pagination/pagination.vue
+var pagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpPagination",
+	inheritAttrs: false,
+	__name: "pagination",
+	props: {
+		id: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: 1 },
+		total: {},
+		siblings: { default: 1 },
+		boundaries: { default: 1 },
+		withControls: {
+			type: Boolean,
+			default: true
+		},
+		withEdges: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		color: {},
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
+		size: { default: "md" },
+		radius: { default: "sm" },
+		ariaLabel: { default: "Pagination" },
+		labelledby: {},
+		describedby: {},
+		firstLabel: { default: "Go to first page" },
+		previousLabel: { default: "Go to previous page" },
+		nextLabel: { default: "Go to next page" },
+		lastLabel: { default: "Go to last page" },
+		getPageAriaLabel: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange(page) {
+				emit("update:modelValue", page);
+				emit("change", page);
+			}
+		});
+		const { totalPages, currentPage, items, rootClass, rootStyle, firstPage, previousPage, nextPage, lastPage, isFirstDisabled, isLastDisabled, selectPage } = usePagination(props, () => controllable.value.value, (page) => controllable.setValue(page));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: props.id,
+			class: rootClass.value,
+			style: rootStyle.value,
+			"data-page": currentPage.value,
+			"data-total": totalPages.value,
+			"data-disabled": presence(props.disabled),
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": props.labelledby,
+			"aria-describedby": props.describedby
+		}));
+		function getControlAttrs(control, isDisabled) {
+			return {
+				...getPartAttrs("control", { class: ["rp-pagination__control", `rp-pagination__control--${control}`] }),
+				"data-control": control,
+				"data-disabled": presence(isDisabled)
+			};
+		}
+		function getPageAttrs(page) {
+			const active = page === currentPage.value;
+			return {
+				...getPartAttrs("page", { class: ["rp-pagination__page", { "rp-pagination__page--active": active }] }),
+				"data-page": page,
+				"data-active": presence(active),
+				"data-disabled": presence(props.disabled)
+			};
+		}
+		function getPageLabel(page) {
+			const active = page === currentPage.value;
+			if (props.getPageAriaLabel) return props.getPageAriaLabel(page, active);
+			return active ? `Page ${page}, current page` : `Go to page ${page}`;
+		}
+		const n43 = t6();
+		const n42 = child(n43);
+		renderEffect(() => {
+			setDynamicProps(n43, [rootAttrs.value]);
+			setDynamicProps(n42, [unref(getPartAttrs)("items", { class: "rp-pagination__items" })]);
+		});
+		setInsertionState(n42, null, 0);
+		createIf(() => __props.withEdges, () => {
+			const n6 = t0();
+			const n5 = child(n6);
+			renderEffect(() => {
+				const _isFirstDisabled = unref(isFirstDisabled);
+				setDynamicProps(n5, [getControlAttrs("first", _isFirstDisabled), {
+					type: "button",
+					"aria-label": __props.firstLabel,
+					disabled: _isFirstDisabled
+				}]);
+			});
+			setInsertionState(n5, null, 0);
+			createSlot("first", {
+				page: () => unref(firstPage),
+				disabled: () => unref(isFirstDisabled)
+			}, () => {
+				return createComponent(unref(chevrons_left_default), {
+					class: "rp-pagination__control-icon",
+					"aria-hidden": "true"
+				});
+			}, 1);
+			n5.$evtclick = createInvoker(() => unref(selectPage)(unref(firstPage)));
+			return n6;
+		});
+		setInsertionState(n42, null, 1);
+		createIf(() => __props.withControls, () => {
+			const n13 = t0();
+			const n12 = child(n13);
+			renderEffect(() => {
+				const _isFirstDisabled = unref(isFirstDisabled);
+				setDynamicProps(n12, [getControlAttrs("previous", _isFirstDisabled), {
+					type: "button",
+					"aria-label": __props.previousLabel,
+					disabled: _isFirstDisabled
+				}]);
+			});
+			setInsertionState(n12, null, 0);
+			createSlot("previous", {
+				page: () => unref(previousPage),
+				disabled: () => unref(isFirstDisabled)
+			}, () => {
+				return createComponent(unref(chevron_left_default), {
+					class: "rp-pagination__control-icon",
+					"aria-hidden": "true"
+				});
+			}, 1);
+			n12.$evtclick = createInvoker(() => unref(selectPage)(unref(previousPage)));
+			return n13;
+		});
+		setInsertionState(n42, null, 2);
+		createFor(() => unref(items), (_for_item0) => {
+			const n27 = t4();
+			setInsertionState(n27, null, 0);
+			createIf(() => _for_item0.value.type === "page", () => {
+				const n21 = t2();
+				renderEffect(() => {
+					const _item = _for_item0.value;
+					setDynamicProps(n21, [getPageAttrs(_item.page), {
+						type: "button",
+						"aria-label": getPageLabel(_item.page),
+						"aria-current": _item.page === unref(currentPage) ? "page" : void 0,
+						disabled: __props.disabled
+					}]);
+				});
+				setInsertionState(n21, null, 0);
+				createSlot("page", {
+					page: () => _for_item0.value.page,
+					active: () => _for_item0.value.page === unref(currentPage)
+				}, () => {
+					const n20 = t1();
+					renderEffect(() => setText(n20, toDisplayString(_for_item0.value.page)));
+					return n20;
+				}, 1);
+				n21.$evtclick = createInvoker(() => unref(selectPage)(_for_item0.value.page));
+				return n21;
+			}, () => {
+				const n26 = t3();
+				renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("ellipsis", { class: "rp-pagination__ellipsis" }), { "aria-hidden": "true" }]));
+				setInsertionState(n26, null, 0);
+				createSlot("ellipsis", null, () => {
+					return createComponent(unref(ellipsis_default));
+				}, 1);
+				return n26;
+			}, 773);
+			return n27;
+		}, (item) => item.key, 8);
+		setInsertionState(n42, null, 3);
+		createIf(() => __props.withControls, () => {
+			const n34 = t0();
+			const n33 = child(n34);
+			renderEffect(() => {
+				const _isLastDisabled = unref(isLastDisabled);
+				setDynamicProps(n33, [getControlAttrs("next", _isLastDisabled), {
+					type: "button",
+					"aria-label": __props.nextLabel,
+					disabled: _isLastDisabled
+				}]);
+			});
+			setInsertionState(n33, null, 0);
+			createSlot("next", {
+				page: () => unref(nextPage),
+				disabled: () => unref(isLastDisabled)
+			}, () => {
+				return createComponent(unref(chevron_right_default), {
+					class: "rp-pagination__control-icon",
+					"aria-hidden": "true"
+				});
+			}, 1);
+			n33.$evtclick = createInvoker(() => unref(selectPage)(unref(nextPage)));
+			return n34;
+		});
+		setInsertionState(n42, null, 4);
+		createIf(() => __props.withEdges, () => {
+			const n41 = t5();
+			const n40 = child(n41);
+			renderEffect(() => {
+				const _isLastDisabled = unref(isLastDisabled);
+				setDynamicProps(n40, [getControlAttrs("last", _isLastDisabled), {
+					type: "button",
+					"aria-label": __props.lastLabel,
+					disabled: _isLastDisabled
+				}]);
+			});
+			setInsertionState(n40, null, 0);
+			createSlot("last", {
+				page: () => unref(lastPage),
+				disabled: () => unref(isLastDisabled)
+			}, () => {
+				return createComponent(unref(chevrons_right_default), {
+					class: "rp-pagination__control-icon",
+					"aria-hidden": "true"
+				});
+			}, 1);
+			n40.$evtclick = createInvoker(() => unref(selectPage)(unref(lastPage)));
+			return n41;
+		});
+		return n43;
+	}
+}), [["__scopeId", "data-v-6ae45781"]]);
+//#endregion
+//#region src/components/pagination/types.ts
+var paginationParts = [
+	"root",
+	"items",
+	"control",
+	"page",
+	"ellipsis"
+];
+var paginationColors = componentColors;
+var paginationSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var paginationRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+//#endregion
+export { pagination_default as a, normalizePaginationTotal as c, paginationSizes as i, usePagination as l, paginationParts as n, getPaginationItems as o, paginationRadiuses as r, normalizePaginationPage as s, paginationColors as t };

package/dist/popover.js

@@ -1,6 +1,7 @@
 import './popover.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
@@ -55,7 +56,11 @@ function usePopover(props, emitOpenChange) {
 	const rootRef = ref(null);
 	const contentRef = ref(null);
 	const arrowRef = ref(null);
-	const uncontrolledOpen = ref(false);
+	const controllableOpen = useControllableValue({
+		modelValue: () => props.open,
+		defaultValue: () => false,
+		onChange: (open) => emitOpenChange?.(open)
+	});
 	const popoverId = computed(() => props.id ?? `${generatedId}-popover`);
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
@@ -65,7 +70,7 @@ function usePopover(props, emitOpenChange) {
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const hasContent = computed(() => Boolean(slots.content || isExplicitTarget.value && slots.default));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
-	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const isOpen = controllableOpen.value;
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const layer = useOverlayLayer({
 		active: isVisible,
@@ -153,9 +158,7 @@ function usePopover(props, emitOpenChange) {
 		allowOutsideClick: true
 	});
 	function setOpen(nextOpen) {
-		const previousOpen = isOpen.value;
-		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
-		if (previousOpen !== nextOpen) emitOpenChange?.(nextOpen);
+		if (isOpen.value !== nextOpen) controllableOpen.setValue(nextOpen);
 	}
 	function openPopover() {
 		if (!isDisabled.value) setOpen(true);

package/dist/progress.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-progress[data-v-70bd0dd5] {
+.rp-progress[data-v-4a492ff8] {
     --_rp-progress-color: var(--rp-color-control-selected-bg);
     --_rp-progress-track-bg: var(--rp-color-control-track-bg);
     --_rp-progress-track-height: 8px;
@@ -15,23 +15,23 @@
     font-size: var(--_rp-progress-font-size);
     line-height: var(--rp-line-height-md);
 }
-.rp-progress__header[data-v-70bd0dd5] {
+.rp-progress__header[data-v-4a492ff8] {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-width: 0;
     gap: var(--rp-spacing-3);
 }
-.rp-progress__label[data-v-70bd0dd5] {
+.rp-progress__label[data-v-4a492ff8] {
     min-width: 0;
     color: var(--rp-color-text);
 }
-.rp-progress__value[data-v-70bd0dd5] {
+.rp-progress__value[data-v-4a492ff8] {
     flex-shrink: 0;
     color: var(--rp-color-dimmed);
     font-variant-numeric: tabular-nums;
 }
-.rp-progress__track[data-v-70bd0dd5] {
+.rp-progress__track[data-v-4a492ff8] {
     position: relative;
     display: block;
     width: 100%;
@@ -40,7 +40,7 @@
     background: var(--_rp-progress-track-bg);
     border-radius: var(--_rp-progress-radius);
 }
-.rp-progress__indicator[data-v-70bd0dd5] {
+.rp-progress__indicator[data-v-4a492ff8] {
     display: block;
     width: var(--_rp-progress-value);
     height: 100%;
@@ -48,54 +48,62 @@
     border-radius: inherit;
     transition: width var(--rp-transition-base);
 }
-.rp-progress--indeterminate .rp-progress__indicator[data-v-70bd0dd5] {
+.rp-progress--indeterminate .rp-progress__indicator[data-v-4a492ff8] {
     position: absolute;
     width: 38%;
     min-width: 2rem;
-    animation: rp-progress-indeterminate-70bd0dd5 1200ms ease-in-out infinite;
+    animation: rp-progress-indeterminate-4a492ff8 1200ms ease-in-out infinite;
 }
-.rp-progress--size-xs[data-v-70bd0dd5] {
+.rp-progress--size-xs[data-v-4a492ff8] {
     --_rp-progress-track-height: 3px;
     --_rp-progress-font-size: var(--rp-font-size-xs);
 }
-.rp-progress--size-sm[data-v-70bd0dd5] {
+.rp-progress--size-sm[data-v-4a492ff8] {
     --_rp-progress-track-height: 5px;
     --_rp-progress-font-size: var(--rp-font-size-sm);
 }
-.rp-progress--size-md[data-v-70bd0dd5] {
+.rp-progress--size-md[data-v-4a492ff8] {
     --_rp-progress-track-height: 8px;
     --_rp-progress-font-size: var(--rp-font-size-md);
 }
-.rp-progress--size-lg[data-v-70bd0dd5] {
+.rp-progress--size-lg[data-v-4a492ff8] {
     --_rp-progress-track-height: 12px;
     --_rp-progress-font-size: var(--rp-font-size-lg);
 }
-.rp-progress--size-xl[data-v-70bd0dd5] {
+.rp-progress--size-xl[data-v-4a492ff8] {
     --_rp-progress-track-height: 16px;
     --_rp-progress-font-size: var(--rp-font-size-xl);
 }
-.rp-progress--radius-none[data-v-70bd0dd5] {
+.rp-progress--radius-none[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-none);
 }
-.rp-progress--radius-xs[data-v-70bd0dd5] {
+.rp-progress--radius-xs[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-xs);
 }
-.rp-progress--radius-sm[data-v-70bd0dd5] {
+.rp-progress--radius-sm[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-sm);
 }
-.rp-progress--radius-md[data-v-70bd0dd5] {
+.rp-progress--radius-md[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-md);
 }
-.rp-progress--radius-lg[data-v-70bd0dd5] {
+.rp-progress--radius-lg[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-lg);
 }
-.rp-progress--radius-xl[data-v-70bd0dd5] {
+.rp-progress--radius-xl[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-xl);
 }
-.rp-progress--radius-full[data-v-70bd0dd5] {
+.rp-progress--radius-full[data-v-4a492ff8] {
     --_rp-progress-radius: var(--rp-radius-full);
 }
-@keyframes rp-progress-indeterminate-70bd0dd5 {
+@media (prefers-reduced-motion: reduce) {
+.rp-progress__indicator[data-v-4a492ff8] {
+      transition: none;
+}
+.rp-progress--indeterminate .rp-progress__indicator[data-v-4a492ff8] {
+      animation: none;
+}
+}
+@keyframes rp-progress-indeterminate-4a492ff8 {
 0% {
       transform: translateX(-110%);
 }

package/dist/progress.js

@@ -1,10 +1,10 @@
 import './progress.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/progress/useProgress.ts
 function normalizeProgressBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -70,10 +70,10 @@ function useProgress(props) {
 }
 //#endregion
 //#region src/components/progress/progress.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-70bd0dd5>");
+var t0 = template("<span data-v-4a492ff8>");
 var t1 = template(" ");
-var t2 = template("<span data-v-70bd0dd5 class=rp-progress__header>");
-var t3 = template("<div data-v-70bd0dd5><span data-v-70bd0dd5><span data-v-70bd0dd5>", 1);
+var t2 = template("<span data-v-4a492ff8 class=rp-progress__header>");
+var t3 = template("<div data-v-4a492ff8><span data-v-4a492ff8><span data-v-4a492ff8>", 1);
 //#endregion
 //#region src/components/progress/progress.vue
 var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -106,16 +106,23 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
+		const slots = useSlots();
+		const labelId = `${useId()}-label`;
 		const { control, rootClass, rootStyle, isIndeterminate, normalizedValue, valuePercent, formattedValue, ariaValueText, ariaValueMin, ariaValueMax, ariaValueNow } = useProgress(props);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const ariaLabel = computed(() => props.ariaLabel?.trim() || void 0);
+		const ariaLabelledby = computed(() => {
+			if (ariaLabel.value) return void 0;
+			return control.ariaLabelledby || (slots.default ? labelId : void 0);
+		});
 		const rootAttrs = computed(() => getRootAttrs({
 			id: control.id,
 			class: rootClass.value,
 			style: rootStyle.value,
 			role: "progressbar",
 			"data-state": isIndeterminate.value ? "indeterminate" : "determinate",
-			"aria-label": props.ariaLabel || void 0,
-			"aria-labelledby": control.ariaLabelledby,
+			"aria-label": ariaLabel.value,
+			"aria-labelledby": ariaLabelledby.value,
 			"aria-describedby": control.ariaDescribedby,
 			"aria-valuemin": ariaValueMin.value,
 			"aria-valuemax": ariaValueMax.value,
@@ -132,7 +139,7 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			setInsertionState(n14, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0();
-				renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-progress__label" })]));
+				renderEffect(() => setDynamicProps(n5, [{ id: labelId }, unref(getPartAttrs)("label", { class: "rp-progress__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
@@ -164,7 +171,7 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-70bd0dd5"]]);
+}), [["__scopeId", "data-v-4a492ff8"]]);
 //#endregion
 //#region src/components/progress/types.ts
 var progressParts = [