ropav 0.0.9 → 0.0.11

package/dist/progress.css

@@ -1,104 +1,106 @@
-.rp-progress[data-v-7870ef03] {
-  --_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-md);
-  --_rp-progress-radius: var(--rp-radius-full);
-  --_rp-progress-value: 0%;
-  --_rp-progress-ratio: 0;
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  gap: var(--rp-spacing-2);
-  font-family: var(--rp-font-family);
-  font-size: var(--_rp-progress-font-size);
-  line-height: var(--rp-line-height-md);
-}
-.rp-progress__header[data-v-7870ef03] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 0;
-  gap: var(--rp-spacing-3);
-}
-.rp-progress__label[data-v-7870ef03] {
-  min-width: 0;
-  color: var(--rp-color-text);
-}
-.rp-progress__value[data-v-7870ef03] {
-  flex-shrink: 0;
-  color: var(--rp-color-dimmed);
-  font-variant-numeric: tabular-nums;
-}
-.rp-progress__track[data-v-7870ef03] {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: var(--_rp-progress-track-height);
-  overflow: hidden;
-  background: var(--_rp-progress-track-bg);
-  border-radius: var(--_rp-progress-radius);
-}
-.rp-progress__indicator[data-v-7870ef03] {
-  display: block;
-  width: var(--_rp-progress-value);
-  height: 100%;
-  background: var(--_rp-progress-color);
-  border-radius: inherit;
-  transition: width var(--rp-transition-base);
-}
-.rp-progress--indeterminate .rp-progress__indicator[data-v-7870ef03] {
-  position: absolute;
-  width: 38%;
-  min-width: 2rem;
-  animation: rp-progress-indeterminate-7870ef03 1200ms ease-in-out infinite;
-}
-.rp-progress--size-xs[data-v-7870ef03] {
-  --_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: 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-md);
-}
-.rp-progress--size-lg[data-v-7870ef03] {
-  --_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: 16px;
-  --_rp-progress-font-size: var(--rp-font-size-xl);
-}
-.rp-progress--radius-none[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-none);
-}
-.rp-progress--radius-xs[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-xs);
-}
-.rp-progress--radius-sm[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-sm);
-}
-.rp-progress--radius-md[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-md);
-}
-.rp-progress--radius-lg[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-lg);
-}
-.rp-progress--radius-xl[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-xl);
-}
-.rp-progress--radius-full[data-v-7870ef03] {
-  --_rp-progress-radius: var(--rp-radius-full);
-}
-@keyframes rp-progress-indeterminate-7870ef03 {
+@layer ropav.components {
+.rp-progress[data-v-70bd0dd5] {
+    --_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-md);
+    --_rp-progress-radius: var(--rp-radius-full);
+    --_rp-progress-value: 0%;
+    --_rp-progress-ratio: 0;
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-progress-font-size);
+    line-height: var(--rp-line-height-md);
+}
+.rp-progress__header[data-v-70bd0dd5] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 0;
+    gap: var(--rp-spacing-3);
+}
+.rp-progress__label[data-v-70bd0dd5] {
+    min-width: 0;
+    color: var(--rp-color-text);
+}
+.rp-progress__value[data-v-70bd0dd5] {
+    flex-shrink: 0;
+    color: var(--rp-color-dimmed);
+    font-variant-numeric: tabular-nums;
+}
+.rp-progress__track[data-v-70bd0dd5] {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: var(--_rp-progress-track-height);
+    overflow: hidden;
+    background: var(--_rp-progress-track-bg);
+    border-radius: var(--_rp-progress-radius);
+}
+.rp-progress__indicator[data-v-70bd0dd5] {
+    display: block;
+    width: var(--_rp-progress-value);
+    height: 100%;
+    background: var(--_rp-progress-color);
+    border-radius: inherit;
+    transition: width var(--rp-transition-base);
+}
+.rp-progress--indeterminate .rp-progress__indicator[data-v-70bd0dd5] {
+    position: absolute;
+    width: 38%;
+    min-width: 2rem;
+    animation: rp-progress-indeterminate-70bd0dd5 1200ms ease-in-out infinite;
+}
+.rp-progress--size-xs[data-v-70bd0dd5] {
+    --_rp-progress-track-height: 3px;
+    --_rp-progress-font-size: var(--rp-font-size-xs);
+}
+.rp-progress--size-sm[data-v-70bd0dd5] {
+    --_rp-progress-track-height: 5px;
+    --_rp-progress-font-size: var(--rp-font-size-sm);
+}
+.rp-progress--size-md[data-v-70bd0dd5] {
+    --_rp-progress-track-height: 8px;
+    --_rp-progress-font-size: var(--rp-font-size-md);
+}
+.rp-progress--size-lg[data-v-70bd0dd5] {
+    --_rp-progress-track-height: 12px;
+    --_rp-progress-font-size: var(--rp-font-size-lg);
+}
+.rp-progress--size-xl[data-v-70bd0dd5] {
+    --_rp-progress-track-height: 16px;
+    --_rp-progress-font-size: var(--rp-font-size-xl);
+}
+.rp-progress--radius-none[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-none);
+}
+.rp-progress--radius-xs[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-xs);
+}
+.rp-progress--radius-sm[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-sm);
+}
+.rp-progress--radius-md[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-md);
+}
+.rp-progress--radius-lg[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-lg);
+}
+.rp-progress--radius-xl[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-xl);
+}
+.rp-progress--radius-full[data-v-70bd0dd5] {
+    --_rp-progress-radius: var(--rp-radius-full);
+}
+@keyframes rp-progress-indeterminate-70bd0dd5 {
 0% {
-    transform: translateX(-110%);
+      transform: translateX(-110%);
 }
 100% {
-    transform: translateX(270%);
+      transform: translateX(270%);
+}
 }
 }

package/dist/progress.js

@@ -1,9 +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 _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.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";
+import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
 //#region src/components/progress/useProgress.ts
 function normalizeProgressBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -69,15 +70,15 @@ 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-7870ef03 class=rp-progress__label>");
+var t0 = template("<span data-v-70bd0dd5>");
 var t1 = template(" ");
-var t2 = template("<span data-v-7870ef03 class=rp-progress__value aria-hidden=true>");
-var t3 = template("<span data-v-7870ef03 class=rp-progress__header>");
-var t4 = template("<div data-v-7870ef03 role=progressbar><span data-v-7870ef03 class=rp-progress__track aria-hidden=true><span data-v-7870ef03 class=rp-progress__indicator>", 1);
+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);
 //#endregion
 //#region src/components/progress/progress.vue
 var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpProgress",
+	inheritAttrs: false,
 	__name: "progress",
 	props: {
 		id: {},
@@ -99,38 +100,47 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		ariaLabel: {},
 		ariaValueText: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { slots: $slots }) {
-		const { control, rootClass, rootStyle, isIndeterminate, normalizedValue, valuePercent, formattedValue, ariaValueText, ariaValueMin, ariaValueMax, ariaValueNow } = useProgress(__props);
-		const n15 = t4();
-		renderEffect(() => {
-			const _control = unref(control);
-			setProp(n15, "id", _control.id);
-			setClass(n15, unref(rootClass));
-			setStyle(n15, unref(rootStyle));
-			setAttr(n15, "data-state", unref(isIndeterminate) ? "indeterminate" : "determinate");
-			setAttr(n15, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n15, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n15, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n15, "aria-valuemin", unref(ariaValueMin));
-			setAttr(n15, "aria-valuemax", unref(ariaValueMax));
-			setAttr(n15, "aria-valuenow", unref(ariaValueNow));
-			setAttr(n15, "aria-valuetext", unref(ariaValueText));
-		});
-		setInsertionState(n15, 0, 0);
+		const props = __props;
+		const { control, rootClass, rootStyle, isIndeterminate, normalizedValue, valuePercent, formattedValue, ariaValueText, ariaValueMin, ariaValueMax, ariaValueNow } = useProgress(props);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		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-describedby": control.ariaDescribedby,
+			"aria-valuemin": ariaValueMin.value,
+			"aria-valuemax": ariaValueMax.value,
+			"aria-valuenow": ariaValueNow.value,
+			"aria-valuetext": ariaValueText.value
+		}));
+		const n17 = t3();
+		const n16 = child(n17, 1);
+		const n15 = child(n16);
+		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
+		setInsertionState(n17, 0, 0);
 		createIf(() => $slots.default || !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
-			const n14 = t3();
+			const n14 = t2();
 			setInsertionState(n14, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0();
+				renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-progress__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n14, null, 1);
 			createIf(() => !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
-				const n13 = t2();
+				const n13 = t0();
+				renderEffect(() => setDynamicProps(n13, [unref(getPartAttrs)("value", { class: "rp-progress__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n13, null, 0);
 				createIf(() => $slots.value, () => {
 					return createSlot("value", {
@@ -147,11 +157,23 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			});
 			return n14;
 		});
-		return n15;
+		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
+			setDynamicProps(n16, [_getPartAttrs("track", { class: "rp-progress__track" }), { "aria-hidden": "true" }]);
+			setDynamicProps(n15, [_getPartAttrs("indicator", { class: "rp-progress__indicator" })]);
+		});
+		return n17;
 	}
-}), [["__scopeId", "data-v-7870ef03"]]);
+}), [["__scopeId", "data-v-70bd0dd5"]]);
 //#endregion
 //#region src/components/progress/types.ts
+var progressParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"indicator"
+];
 var progressColors = componentColors;
 var progressSizes = [
 	"xs",
@@ -170,4 +192,4 @@ var progressRadiuses = [
 	"full"
 ];
 //#endregion
-export { progress_default as i, progressRadiuses as n, progressSizes as r, progressColors as t };
+export { progress_default as a, progressSizes as i, progressParts as n, progressRadiuses as r, progressColors as t };

package/dist/radio.css

@@ -1,106 +1,115 @@
-.rp-radio[data-v-c9fb5041] {
-  --_rp-radio-color: var(--rp-color-control-selected-bg);
-  --_rp-radio-on-color: var(--rp-color-control-selected-fg);
-  --_rp-radio-size: 24px;
-  --_rp-radio-dot: 10px;
-  --_rp-radio-font-size: var(--rp-font-size-md);
-  --_rp-radio-checked-bg: var(--_rp-radio-color);
-  --_rp-radio-checked-border: var(--_rp-radio-color);
-  --_rp-radio-checked-dot: var(--_rp-radio-on-color);
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  font-family: var(--rp-font-family);
-  user-select: none;
-}
-.rp-radio--disabled[data-v-c9fb5041] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-radio[data-v-c9fb5041] {
-  gap: var(--rp-spacing-2);
-  font-size: var(--_rp-radio-font-size);
-}
-.rp-radio__native[data-v-c9fb5041] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-  pointer-events: none;
-}
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-c9fb5041] {
-  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-c9fb5041] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_rp-radio-size);
-  height: var(--_rp-radio-size);
-  flex-shrink: 0;
-  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
-  border-radius: var(--rp-radius-full);
-  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-c9fb5041]::after {
-  content: "";
-  width: var(--_rp-radio-dot);
-  height: var(--_rp-radio-dot);
-  border-radius: var(--rp-radius-full);
-  background-color: var(--_rp-radio-checked-dot);
-  transform: scale(0);
-  transition: transform var(--rp-transition-fast);
-}
-.rp-radio--checked .rp-radio__dot[data-v-c9fb5041] {
-  background-color: var(--_rp-radio-checked-bg);
-  border-color: var(--_rp-radio-checked-border);
-}
-.rp-radio--checked .rp-radio__dot[data-v-c9fb5041]::after {
-  transform: scale(1);
-}
-.rp-radio__label[data-v-c9fb5041] {
-  line-height: var(--rp-line-height-md);
-  color: var(--rp-color-text);
-}
-.rp-radio--outline[data-v-c9fb5041] {
-  --_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-c9fb5041] {
-  --_rp-radio-size: 16px;
-  --_rp-radio-dot: 6px;
-  --_rp-radio-font-size: var(--rp-font-size-xs);
-}
-.rp-radio--size-sm[data-v-c9fb5041] {
-  --_rp-radio-size: 20px;
-  --_rp-radio-dot: 8px;
-  --_rp-radio-font-size: var(--rp-font-size-sm);
-}
-.rp-radio--size-md[data-v-c9fb5041] {
-  --_rp-radio-size: 24px;
-  --_rp-radio-dot: 10px;
-  --_rp-radio-font-size: var(--rp-font-size-md);
-}
-.rp-radio--size-lg[data-v-c9fb5041] {
-  --_rp-radio-size: 30px;
-  --_rp-radio-dot: 14px;
-  --_rp-radio-font-size: var(--rp-font-size-lg);
-}
-.rp-radio--size-xl[data-v-c9fb5041] {
-  --_rp-radio-size: 36px;
-  --_rp-radio-dot: 16px;
-  --_rp-radio-font-size: var(--rp-font-size-xl);
-}.rp-radio-group[data-v-4ef9fed2] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rp-spacing-3);
-  font-family: var(--rp-font-family);
+@layer ropav.components {
+.rp-radio[data-v-d9c68210] {
+    --_rp-radio-color: var(--rp-color-control-selected-bg);
+    --_rp-radio-on-color: var(--rp-color-control-selected-fg);
+    --_rp-radio-default-size: 24px;
+    --_rp-radio-default-dot: 10px;
+    --_rp-radio-size: var(--rp-radio-control-size, var(--_rp-radio-default-size));
+    --_rp-radio-dot: var(--rp-radio-dot-size, var(--_rp-radio-default-dot));
+    --_rp-radio-font-size: var(--rp-font-size-md);
+    --_rp-radio-checked-bg: var(--_rp-radio-color);
+    --_rp-radio-checked-border: var(--_rp-radio-color);
+    --_rp-radio-checked-dot: var(--_rp-radio-on-color);
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font-family: var(--rp-font-family);
+    user-select: none;
+}
+.rp-radio--disabled[data-v-d9c68210] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-radio[data-v-d9c68210] {
+    gap: var(--rp-spacing-2);
+    font-size: var(--_rp-radio-font-size);
+}
+.rp-radio__native[data-v-d9c68210] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    pointer-events: none;
+}
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-d9c68210] {
+    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-d9c68210] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_rp-radio-size);
+    height: var(--_rp-radio-size);
+    flex-shrink: 0;
+    border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
+    border-radius: var(--rp-radius-full);
+    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-d9c68210]::after {
+    content: "";
+    width: var(--_rp-radio-dot);
+    height: var(--_rp-radio-dot);
+    border-radius: var(--rp-radius-full);
+    background-color: var(--_rp-radio-checked-dot);
+    transform: scale(0);
+    transition: transform var(--rp-transition-fast);
+}
+.rp-radio--checked .rp-radio__dot[data-v-d9c68210] {
+    background-color: var(--_rp-radio-checked-bg);
+    border-color: var(--_rp-radio-checked-border);
+}
+.rp-radio--checked .rp-radio__dot[data-v-d9c68210]::after {
+    transform: scale(1);
+}
+.rp-radio__label[data-v-d9c68210] {
+    line-height: var(--rp-line-height-md);
+    color: var(--rp-color-text);
+}
+.rp-radio--outline[data-v-d9c68210] {
+    --_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-d9c68210] {
+    --_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-d9c68210] {
+    --_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-d9c68210] {
+    --_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-d9c68210] {
+    --_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-d9c68210] {
+    --_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-a0fcf376] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rp-spacing-3);
+    font-family: var(--rp-font-family);
+}
+.rp-radio-group[data-orientation=horizontal][data-v-a0fcf376] {
+    flex-flow: row wrap;
+}
 }