ropav 0.1.5 → 0.1.6

package/dist/number-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-number-input[data-v-eb2db673] {
+.rp-number-input[data-v-988300ea] {
     --_rp-number-input-control-size: var(--_rp-input-height);
     --_rp-number-input-text-align: left;
     overflow: hidden;
@@ -7,39 +7,39 @@
     padding-inline: 0;
     vertical-align: middle;
 }
-.rp-number-input[data-v-eb2db673] .rp-input__native {
+.rp-number-input[data-v-988300ea] .rp-input__native {
     appearance: textfield;
     padding-inline: var(--_rp-input-padding-x);
     text-align: var(--_rp-number-input-text-align);
 }
-.rp-number-input--text-align-center[data-v-eb2db673] {
+.rp-number-input--text-align-center[data-v-988300ea] {
     --_rp-number-input-text-align: center;
 }
-.rp-number-input--text-align-right[data-v-eb2db673] {
+.rp-number-input--text-align-right[data-v-988300ea] {
     --_rp-number-input-text-align: right;
 }
-.rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-inner-spin-button,
-  .rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-outer-spin-button {
+.rp-number-input[data-v-988300ea] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-988300ea] .rp-input__native::-webkit-outer-spin-button {
     margin: 0;
     appearance: none;
 }
-.rp-number-input[data-v-eb2db673] .rp-input__left,
-  .rp-number-input[data-v-eb2db673] .rp-input__right {
+.rp-number-input[data-v-988300ea] .rp-input__left,
+  .rp-number-input[data-v-988300ea] .rp-input__right {
     align-self: stretch;
     margin-block: calc(-1 * var(--rp-border-width-thin));
 }
-.rp-number-input__controls[data-v-eb2db673] {
+.rp-number-input__controls[data-v-988300ea] {
     display: inline-flex;
     height: var(--_rp-input-height);
     flex-shrink: 0;
 }
-.rp-number-input__controls--left[data-v-eb2db673] {
+.rp-number-input__controls--left[data-v-988300ea] {
     border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__controls--right[data-v-eb2db673] {
+.rp-number-input__controls--right[data-v-988300ea] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-eb2db673] {
+.rp-number-input__control[data-v-988300ea] {
     padding: 0;
     font: inherit;
     background: none;
@@ -55,29 +55,29 @@
     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-eb2db673] {
+.rp-number-input__control + .rp-number-input__control[data-v-988300ea] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-eb2db673]:hover:not(:disabled) {
+.rp-number-input__control[data-v-988300ea]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
     background-color: var(--rp-color-default-hover);
 }
-.rp-number-input__control[data-v-eb2db673]:disabled {
+.rp-number-input__control[data-v-988300ea]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-number-input__control-icon[data-v-eb2db673] {
+.rp-number-input__control-icon[data-v-988300ea] {
     display: inline-flex;
     align-items: center;
     width: 0.875em;
     height: 0.875em;
     flex-shrink: 0;
 }
-.rp-number-input__control-icon svg[data-v-eb2db673] {
+.rp-number-input__control-icon svg[data-v-988300ea] {
     width: 100%;
     height: 100%;
 }
-.rp-number-input__control-icon[data-v-eb2db673] >  svg {
+.rp-number-input__control-icon[data-v-988300ea] >  svg {
     display: block;
     width: 100%;
     height: 100%;

package/dist/number-input.js

@@ -1,9 +1,9 @@
 import './number-input.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 { t as minus_default } from "./minus.js";
-import { t as useControllableValue } from "./useControllableValue.js";
 import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as input_default } from "./input.js";
@@ -190,10 +190,10 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 }
 //#endregion
 //#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true></button>");
-var t1 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--left\">");
-var t2 = template("<button data-v-eb2db673><span data-v-eb2db673 class=rp-number-input__control-icon aria-hidden=true>");
-var t3 = template("<span data-v-eb2db673 class=\"rp-number-input__controls rp-number-input__controls--right\">");
+var t0 = template("<button data-v-988300ea><span data-v-988300ea class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-988300ea class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-988300ea><span data-v-988300ea class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-988300ea class=\"rp-number-input__controls rp-number-input__controls--right\">");
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/number-input/number-input.vue
@@ -411,7 +411,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		setStaticTemplateRef(n30, inputComponentRef, null, "inputComponentRef");
 		return n30;
 	}
-}), [["__scopeId", "data-v-eb2db673"]]);
+}), [["__scopeId", "data-v-988300ea"]]);
 //#endregion
 //#region src/components/number-input/types.ts
 var numberInputParts = [

package/dist/overlay.js

@@ -1,6 +1,6 @@
 import './overlay.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } 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 { computed, createIf, defineVaporComponent, renderEffect, setDynamicProps, template, unref } from "vue";
 //#region src/components/overlay/useOverlay.ts

package/dist/pagination.js

@@ -1,9 +1,9 @@
 import './pagination.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 { i as getComponentVariantColorRoles, 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 { t as useControllableValue } from "./useControllableValue.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

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 = [

package/dist/radio.js

@@ -1,9 +1,9 @@
 import './radio.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 { n as getComponentColorValue, r as getComponentContrastColor } 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 { t as useControllableValue } from "./useControllableValue.js";
+import { i as getComponentContrastColor, r as getComponentColorValue } from "./componentColors.js";
 import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, useId } from "vue";

package/dist/scroll-area.css

@@ -60,6 +60,9 @@
     user-select: none;
     transition: opacity var(--rp-transition-fast);
 }
+.rp-scroll-area__scrollbar[data-direction=rtl][data-v-f5c4e940] {
+    direction: rtl;
+}
 .rp-scroll-area__scrollbar[data-visible][data-v-f5c4e940] {
     opacity: 1;
     pointer-events: auto;
@@ -102,6 +105,9 @@
     height: 100%;
     transform: translateX(var(--_rp-scroll-area-thumb-offset));
 }
+.rp-scroll-area__scrollbar--horizontal[data-direction=rtl] .rp-scroll-area__thumb[data-v-f5c4e940] {
+    transform: translateX(calc(-1 * var(--_rp-scroll-area-thumb-offset)));
+}
 .rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-f5c4e940] {
     width: 100%;
     height: var(--_rp-scroll-area-thumb-size);
@@ -109,7 +115,7 @@
 }
 .rp-scroll-area__corner[data-v-f5c4e940] {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 1;
     width: var(--_rp-scroll-area-scrollbar-size);
@@ -118,6 +124,9 @@
     pointer-events: none;
     transition: opacity var(--rp-transition-fast);
 }
+.rp-scroll-area__corner[data-direction=rtl][data-v-f5c4e940] {
+    direction: rtl;
+}
 .rp-scroll-area__corner[data-visible][data-v-f5c4e940] {
     opacity: 1;
 }