ropav 0.1.5 → 0.1.7

package/dist/radio.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-radio[data-v-0cdcdcfa] {
+.rp-radio[data-v-d1001176] {
     --_rp-radio-color: var(--rp-color-control-selected-bg);
     --_rp-radio-on-color: var(--rp-color-control-selected-fg);
     --_rp-radio-default-size: 24px;
@@ -16,15 +16,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-radio--disabled[data-v-0cdcdcfa] {
+.rp-radio--disabled[data-v-d1001176] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-radio[data-v-0cdcdcfa] {
+.rp-radio[data-v-d1001176] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-0cdcdcfa] {
+.rp-radio__native[data-v-d1001176] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -36,11 +36,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-0cdcdcfa] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-d1001176] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-radio__dot[data-v-0cdcdcfa] {
+.rp-radio__dot[data-v-d1001176] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -52,7 +52,7 @@
     background-color: var(--rp-color-control-bg);
     transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-radio__dot[data-v-0cdcdcfa]::after {
+.rp-radio__dot[data-v-d1001176]::after {
     content: "";
     width: var(--_rp-radio-dot);
     height: var(--_rp-radio-dot);
@@ -61,55 +61,55 @@
     transform: scale(0);
     transition: transform var(--rp-transition-fast);
 }
-.rp-radio--checked .rp-radio__dot[data-v-0cdcdcfa] {
+.rp-radio--checked .rp-radio__dot[data-v-d1001176] {
     background-color: var(--_rp-radio-checked-bg);
     border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-0cdcdcfa]::after {
+.rp-radio--checked .rp-radio__dot[data-v-d1001176]::after {
     transform: scale(1);
 }
-.rp-radio__label[data-v-0cdcdcfa] {
+.rp-radio__label[data-v-d1001176] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-radio--outline[data-v-0cdcdcfa] {
+.rp-radio--outline[data-v-d1001176] {
     --_rp-radio-checked-bg: var(--rp-color-control-bg);
     --_rp-radio-checked-border: var(--_rp-radio-color);
     --_rp-radio-checked-dot: var(--_rp-radio-color);
 }
-.rp-radio--size-xs[data-v-0cdcdcfa] {
+.rp-radio--size-xs[data-v-d1001176] {
     --_rp-radio-default-size: 16px;
     --_rp-radio-default-dot: 6px;
     --_rp-radio-font-size: var(--rp-font-size-xs);
 }
-.rp-radio--size-sm[data-v-0cdcdcfa] {
+.rp-radio--size-sm[data-v-d1001176] {
     --_rp-radio-default-size: 20px;
     --_rp-radio-default-dot: 8px;
     --_rp-radio-font-size: var(--rp-font-size-sm);
 }
-.rp-radio--size-md[data-v-0cdcdcfa] {
+.rp-radio--size-md[data-v-d1001176] {
     --_rp-radio-default-size: 24px;
     --_rp-radio-default-dot: 10px;
     --_rp-radio-font-size: var(--rp-font-size-md);
 }
-.rp-radio--size-lg[data-v-0cdcdcfa] {
+.rp-radio--size-lg[data-v-d1001176] {
     --_rp-radio-default-size: 30px;
     --_rp-radio-default-dot: 14px;
     --_rp-radio-font-size: var(--rp-font-size-lg);
 }
-.rp-radio--size-xl[data-v-0cdcdcfa] {
+.rp-radio--size-xl[data-v-d1001176] {
     --_rp-radio-default-size: 36px;
     --_rp-radio-default-dot: 16px;
     --_rp-radio-font-size: var(--rp-font-size-xl);
 }
 }@layer ropav.components {
-.rp-radio-group[data-v-fc40a22d] {
+.rp-radio-group[data-v-9c16fa9f] {
     display: flex;
     flex-direction: column;
     gap: var(--rp-spacing-3);
     font-family: var(--rp-font-family);
 }
-.rp-radio-group[data-orientation=horizontal][data-v-fc40a22d] {
+.rp-radio-group[data-orientation=horizontal][data-v-9c16fa9f] {
     flex-flow: row wrap;
 }
 }

package/dist/radio.js

@@ -1,10 +1,12 @@
 import './radio.css';
+import { t as useControllableValue } from "./useControllableValue.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.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 _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as useControllableValue } from "./useControllableValue.js";
+import { n as getComponentCheckedColorStyle } from "./componentColors.js";
 import { i as useFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.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";
 //#region src/components/radio/types.ts
@@ -18,18 +20,6 @@ var radioGroupParts = ["root"];
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
-function getRadioColorStyle(color, autoContrast, contrastColor) {
-	const colorValue = getComponentColorValue(color);
-	if (color && !colorValue) return void 0;
-	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
-	const style = {};
-	if (colorValue) style["--_rp-radio-color"] = colorValue;
-	if (autoContrast !== false || contrastColor !== void 0) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", {
-		autoContrast,
-		contrastColor
-	});
-	return style;
-}
 function useRadio(props, emitChange) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
@@ -52,7 +42,13 @@ function useRadio(props, emitChange) {
 		[variant.value ?? ""]: Boolean(variant.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
-	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value, contrastColor.value));
+	const rootStyle = computed(() => getComponentCheckedColorStyle({
+		color: color.value,
+		autoContrast: autoContrast.value,
+		contrastColor: contrastColor.value,
+		colorProperty: "--_rp-radio-color",
+		checkedColorProperty: "--_rp-radio-on-color"
+	}));
 	function onSelect(event) {
 		if (isDisabled.value) return;
 		group?.select(props.value);
@@ -190,8 +186,8 @@ function useRadioGroup(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-0cdcdcfa>");
-var t1 = template("<label data-v-0cdcdcfa><input data-v-0cdcdcfa><span data-v-0cdcdcfa></span>", 1);
+var t0$1 = template("<span data-v-d1001176>");
+var t1 = template("<label data-v-d1001176><input data-v-d1001176><span data-v-d1001176></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -244,26 +240,24 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
-			"data-disabled": presence(isDisabled.value),
-			"data-invalid": presence(isInvalid.value),
+			"data-disabled": toPresenceAttribute(isDisabled.value),
+			"data-invalid": toPresenceAttribute(isInvalid.value),
 			"data-state": isChecked.value ? "checked" : "unchecked"
 		}));
 		const nativeInputAttrs = computed(() => {
-			const { class: groupClass, style: groupStyle, onChange: groupOnChange, ...groupForwardedAttrs } = groupInputAttrs.value ?? {};
-			const { class: itemClass, style: itemStyle, onChange: itemOnChange, ...itemForwardedAttrs } = props.inputAttrs ?? {};
+			const groupAttrs = groupInputAttrs.value ?? {};
+			const itemAttrs = props.inputAttrs ?? {};
+			const { compatibilityClass: groupClass, compatibilityStyle: groupStyle, forwardedAttributes: groupForwardedAttributes } = splitCompatibilityAttributes(groupAttrs);
+			const { compatibilityClass: itemClass, compatibilityStyle: itemStyle, forwardedAttributes: itemForwardedAttributes } = splitCompatibilityAttributes(itemAttrs);
 			return {
-				...groupForwardedAttrs,
-				...itemForwardedAttrs,
+				...groupForwardedAttributes,
+				...itemForwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-radio__native",
 					compatibilityClass: [groupClass, itemClass],
 					compatibilityStyle: [groupStyle, itemStyle]
 				}),
-				onChange(event) {
-					onSelect(event);
-					groupOnChange?.(event);
-					itemOnChange?.(event);
-				}
+				onChange: composeEventHandlers(onSelect, groupAttrs.onChange, itemAttrs.onChange)
 			};
 		});
 		__expose({
@@ -280,7 +274,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const _isChecked = unref(isChecked);
 			const _isDisabled = unref(isDisabled);
 			const _isInvalid = unref(isInvalid);
-			const _presence = unref(presence);
+			const _toPresenceAttribute = unref(toPresenceAttribute);
 			setDynamicProps(n6, [rootAttrs.value]);
 			setDynamicProps(n0, [_nativeInputAttrs, {
 				id: _control.id,
@@ -296,8 +290,8 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				"aria-describedby": _control.ariaDescribedby,
 				"aria-invalid": _isInvalid || void 0,
 				"aria-required": unref(isRequired) || void 0,
-				"data-disabled": _presence(_isDisabled),
-				"data-invalid": _presence(_isInvalid),
+				"data-disabled": _toPresenceAttribute(_isDisabled),
+				"data-invalid": _toPresenceAttribute(_isInvalid),
 				"data-state": _isChecked ? "checked" : "unchecked"
 			}]);
 			setDynamicProps(n1, [unref(getPartAttrs)("indicator", { class: "rp-radio__dot" })]);
@@ -312,10 +306,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n6;
 	}
-}), [["__scopeId", "data-v-0cdcdcfa"]]);
+}), [["__scopeId", "data-v-d1001176"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-fc40a22d>", 1);
+var t0 = template("<div data-v-9c16fa9f>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -370,8 +364,8 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			class: rootClass.value,
 			role: "radiogroup",
 			"data-orientation": props.orientation,
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"aria-label": props.ariaLabel || void 0,
 			"aria-labelledby": control.ariaLabelledby,
 			"aria-describedby": control.ariaDescribedby,
@@ -385,6 +379,6 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-fc40a22d"]]);
+}), [["__scopeId", "data-v-9c16fa9f"]]);
 //#endregion
 export { radioParts as i, radio_default as n, radioGroupParts as r, radio_group_default as t };

package/dist/rafScheduler.js

@@ -0,0 +1,34 @@
+//#region src/utils/rafScheduler.ts
+function createRafScheduler(callback, getView) {
+	let frameId;
+	let frameView;
+	let generation = 0;
+	function cancel() {
+		generation += 1;
+		if (frameId !== void 0) frameView?.cancelAnimationFrame(frameId);
+		frameId = void 0;
+		frameView = void 0;
+	}
+	function schedule() {
+		if (frameId !== void 0) return;
+		const view = getView();
+		if (!view?.requestAnimationFrame) {
+			callback();
+			return;
+		}
+		const scheduledGeneration = generation;
+		frameView = view;
+		frameId = view.requestAnimationFrame(() => {
+			if (generation !== scheduledGeneration || frameView !== view) return;
+			frameId = void 0;
+			frameView = void 0;
+			callback();
+		});
+	}
+	return {
+		cancel,
+		schedule
+	};
+}
+//#endregion
+export { createRafScheduler as t };

package/dist/scroll-area.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-scroll-area[data-v-f5c4e940] {
+.rp-scroll-area[data-v-cd2fe353] {
     --_rp-scroll-area-scrollbar-size: 10px;
     --_rp-scroll-area-scrollbar-padding: 2px;
     --_rp-scroll-area-thumb-bg: var(--rp-color-dimmed);
@@ -11,7 +11,7 @@
     min-width: 0;
     overflow: hidden;
 }
-.rp-scroll-area__viewport[data-v-f5c4e940] {
+.rp-scroll-area__viewport[data-v-cd2fe353] {
     box-sizing: border-box;
     flex: 1 1 auto;
     width: 100%;
@@ -22,33 +22,33 @@
     scrollbar-width: none;
     outline: none;
 }
-.rp-scroll-area__viewport[data-v-f5c4e940]::-webkit-scrollbar {
+.rp-scroll-area__viewport[data-v-cd2fe353]::-webkit-scrollbar {
     display: none;
 }
-.rp-scroll-area__viewport[data-v-f5c4e940]:focus-visible {
+.rp-scroll-area__viewport[data-v-cd2fe353]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: calc(-1 * var(--rp-border-width-medium));
 }
-.rp-scroll-area[data-scrollbars=both] .rp-scroll-area__viewport[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbars=both] .rp-scroll-area__viewport[data-v-cd2fe353] {
     overflow: scroll;
 }
-.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-cd2fe353] {
     overflow-x: scroll;
     overflow-y: hidden;
 }
-.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-cd2fe353] {
     overflow-x: hidden;
     overflow-y: scroll;
 }
-.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-cd2fe353] {
     overflow: hidden;
 }
-.rp-scroll-area__content[data-v-f5c4e940] {
+.rp-scroll-area__content[data-v-cd2fe353] {
     display: table;
     box-sizing: border-box;
     min-width: 100%;
 }
-.rp-scroll-area__scrollbar[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar[data-v-cd2fe353] {
     position: absolute;
     z-index: 1;
     box-sizing: border-box;
@@ -60,56 +60,62 @@
     user-select: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__scrollbar[data-visible][data-v-f5c4e940] {
+.rp-scroll-area__scrollbar[data-direction=rtl][data-v-cd2fe353] {
+    direction: rtl;
+}
+.rp-scroll-area__scrollbar[data-visible][data-v-cd2fe353] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-scroll-area__scrollbar[data-v-f5c4e940]:focus-visible {
+.rp-scroll-area__scrollbar[data-v-cd2fe353]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: calc(-1 * var(--rp-border-width-medium));
 }
-.rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar--horizontal[data-v-cd2fe353] {
     inset-inline: 0;
     bottom: 0;
     align-items: center;
     width: auto;
     height: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar--vertical[data-v-cd2fe353] {
     inset-block: 0;
     inset-inline-end: 0;
     justify-content: center;
     width: var(--_rp-scroll-area-scrollbar-size);
     height: auto;
 }
-.rp-scroll-area[data-scrollbar-y-active] .rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbar-y-active] .rp-scroll-area__scrollbar--horizontal[data-v-cd2fe353] {
     inset-inline-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
+.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-cd2fe353] {
     inset-block-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area__thumb[data-v-f5c4e940] {
+.rp-scroll-area__thumb[data-v-cd2fe353] {
     flex: 0 0 auto;
     background: var(--_rp-scroll-area-thumb-bg);
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-scroll-area__scrollbar:hover .rp-scroll-area__thumb[data-v-f5c4e940], .rp-scroll-area__scrollbar:focus-visible .rp-scroll-area__thumb[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar:hover .rp-scroll-area__thumb[data-v-cd2fe353], .rp-scroll-area__scrollbar:focus-visible .rp-scroll-area__thumb[data-v-cd2fe353] {
     background: var(--_rp-scroll-area-thumb-bg-hover);
 }
-.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-cd2fe353] {
     width: var(--_rp-scroll-area-thumb-size);
     height: 100%;
     transform: translateX(var(--_rp-scroll-area-thumb-offset));
 }
-.rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar--horizontal[data-direction=rtl] .rp-scroll-area__thumb[data-v-cd2fe353] {
+    transform: translateX(calc(-1 * var(--_rp-scroll-area-thumb-offset)));
+}
+.rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-cd2fe353] {
     width: 100%;
     height: var(--_rp-scroll-area-thumb-size);
     transform: translateY(var(--_rp-scroll-area-thumb-offset));
 }
-.rp-scroll-area__corner[data-v-f5c4e940] {
+.rp-scroll-area__corner[data-v-cd2fe353] {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 1;
     width: var(--_rp-scroll-area-scrollbar-size);
@@ -118,13 +124,16 @@
     pointer-events: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__corner[data-visible][data-v-f5c4e940] {
+.rp-scroll-area__corner[data-direction=rtl][data-v-cd2fe353] {
+    direction: rtl;
+}
+.rp-scroll-area__corner[data-visible][data-v-cd2fe353] {
     opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-scroll-area__scrollbar[data-v-f5c4e940],
-    .rp-scroll-area__corner[data-v-f5c4e940],
-    .rp-scroll-area__thumb[data-v-f5c4e940] {
+.rp-scroll-area__scrollbar[data-v-cd2fe353],
+    .rp-scroll-area__corner[data-v-cd2fe353],
+    .rp-scroll-area__thumb[data-v-cd2fe353] {
       transition: none;
 }
 }