ropav 0.1.1 → 0.1.3

package/dist/modal.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-modal[data-v-04a5d994] {
+.rp-modal[data-v-bb0b8ca8] {
     --_rp-modal-width: 32rem;
     --_rp-modal-max-height: calc(100vh - var(--rp-spacing-12));
     --_rp-modal-radius: var(--rp-radius-sm);
@@ -13,25 +13,25 @@
     overflow: auto;
     font-family: var(--rp-font-family);
 }
-.rp-modal--size-sm[data-v-04a5d994] {
+.rp-modal--size-sm[data-v-bb0b8ca8] {
     --_rp-modal-width: 22rem;
 }
-.rp-modal--size-lg[data-v-04a5d994] {
+.rp-modal--size-lg[data-v-bb0b8ca8] {
     --_rp-modal-width: 45rem;
 }
-.rp-modal--size-xl[data-v-04a5d994] {
+.rp-modal--size-xl[data-v-bb0b8ca8] {
     --_rp-modal-width: 58rem;
 }
-.rp-modal--size-full[data-v-04a5d994] {
+.rp-modal--size-full[data-v-bb0b8ca8] {
     --_rp-modal-width: 100vw;
     --_rp-modal-max-height: 100vh;
     --_rp-modal-radius: var(--rp-radius-none);
     padding: 0;
 }
-.rp-modal__overlay[data-v-04a5d994] {
+.rp-modal__overlay[data-v-bb0b8ca8] {
     border-radius: 0;
 }
-.rp-modal__panel[data-v-04a5d994] {
+.rp-modal__panel[data-v-bb0b8ca8] {
     position: relative;
     z-index: 1;
     box-sizing: border-box;
@@ -47,52 +47,51 @@
     box-shadow: var(--rp-shadow-lg);
     outline: none;
 }
-.rp-modal--size-full .rp-modal__panel[data-v-04a5d994] {
+.rp-modal--size-full .rp-modal__panel[data-v-bb0b8ca8] {
     min-height: 100vh;
     border: 0;
 }
-.rp-modal__header[data-v-04a5d994] {
+.rp-modal__header[data-v-bb0b8ca8] {
     box-sizing: border-box;
     padding: var(--rp-spacing-5) calc(var(--rp-spacing-6) + var(--rp-size-control-sm)) var(--rp-spacing-4) var(--rp-spacing-5);
     border-bottom: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-modal__heading[data-v-04a5d994] {
+.rp-modal__heading[data-v-bb0b8ca8] {
     display: grid;
     gap: var(--rp-spacing-1);
 }
-.rp-modal__title[data-v-04a5d994] {
+.rp-modal__title[data-v-bb0b8ca8] {
     margin: 0;
     color: var(--rp-color-text);
     font-size: var(--rp-font-size-xl);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-modal__description[data-v-04a5d994] {
+.rp-modal__description[data-v-bb0b8ca8] {
     margin: 0;
     color: var(--rp-color-dimmed);
     font-size: var(--rp-font-size-sm);
     line-height: var(--rp-line-height-md);
 }
-.rp-modal__close[data-v-04a5d994] {
+.rp-modal__close[data-v-bb0b8ca8] {
     position: absolute;
     top: var(--rp-spacing-3);
     right: var(--rp-spacing-3);
     z-index: 1;
 }
-.rp-modal__body[data-v-04a5d994] {
+.rp-modal__body[data-v-bb0b8ca8] {
     box-sizing: border-box;
     flex: 1 1 auto;
     min-height: 0;
     padding: var(--rp-spacing-5);
-    overflow: auto;
     color: var(--rp-color-text);
     font-size: var(--rp-font-size-md);
     line-height: var(--rp-line-height-md);
 }
-.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-04a5d994] {
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-bb0b8ca8] {
     padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
 }
-.rp-modal__footer[data-v-04a5d994] {
+.rp-modal__footer[data-v-bb0b8ca8] {
     box-sizing: border-box;
     display: flex;
     flex: 0 0 auto;
@@ -102,34 +101,34 @@
     padding: var(--rp-spacing-4) var(--rp-spacing-5);
     border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-modal-enter-active[data-v-04a5d994],
-  .rp-modal-leave-active[data-v-04a5d994] {
+.rp-modal-enter-active[data-v-bb0b8ca8],
+  .rp-modal-leave-active[data-v-bb0b8ca8] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-modal-enter-active .rp-modal__panel[data-v-04a5d994],
-  .rp-modal-leave-active .rp-modal__panel[data-v-04a5d994] {
+.rp-modal-enter-active .rp-modal__panel[data-v-bb0b8ca8],
+  .rp-modal-leave-active .rp-modal__panel[data-v-bb0b8ca8] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-modal-enter-from[data-v-04a5d994],
-  .rp-modal-leave-to[data-v-04a5d994] {
+.rp-modal-enter-from[data-v-bb0b8ca8],
+  .rp-modal-leave-to[data-v-bb0b8ca8] {
     opacity: 0;
 }
-.rp-modal-enter-from .rp-modal__panel[data-v-04a5d994],
-  .rp-modal-leave-to .rp-modal__panel[data-v-04a5d994] {
+.rp-modal-enter-from .rp-modal__panel[data-v-bb0b8ca8],
+  .rp-modal-leave-to .rp-modal__panel[data-v-bb0b8ca8] {
     opacity: 0;
     transform: translateY(var(--rp-spacing-2)) scale(0.98);
 }
 @media (max-width: 480px) {
-.rp-modal[data-v-04a5d994] {
+.rp-modal[data-v-bb0b8ca8] {
       padding: var(--rp-spacing-3);
 }
-.rp-modal__header[data-v-04a5d994] {
+.rp-modal__header[data-v-bb0b8ca8] {
       padding-left: var(--rp-spacing-4);
 }
-.rp-modal__body[data-v-04a5d994] {
+.rp-modal__body[data-v-bb0b8ca8] {
       padding: var(--rp-spacing-4);
 }
-.rp-modal__footer[data-v-04a5d994] {
+.rp-modal__footer[data-v-bb0b8ca8] {
       padding: var(--rp-spacing-4);
 }
 }

package/dist/modal.js

@@ -6,6 +6,7 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { a as dialog_overlay_default, c as dialog_close_default, i as dialog_portal_default, l as resolveDialogCloseReason, n as dialog_title_default, o as dialog_description_default, r as dialog_root_default, s as dialog_content_default } from "./dialog.js";
 import { t as icon_button_default } from "./icon-button.js";
 import { t as overlay_default } from "./overlay.js";
+import { t as scroll_area_default } from "./scroll-area.js";
 import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/modal/useModal.ts
 var DEFAULT_ROLE = "dialog";
@@ -106,8 +107,8 @@ function useModal(props, emit = {}) {
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<div data-v-04a5d994 class=rp-modal__heading>");
-var t2 = template("<div data-v-04a5d994>");
+var t1 = template("<div data-v-bb0b8ca8 class=rp-modal__heading>");
+var t2 = template("<div data-v-bb0b8ca8>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -210,10 +211,7 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				teleport: () => __props.teleport,
 				"teleport-to": () => __props.teleportTo
 			}, () => {
-				return createComponent(VaporTransition, {
-					name: "rp-modal",
-					persisted: ""
-				}, extend(() => {
+				return createComponent(VaporTransition, { name: "rp-modal" }, extend(() => {
 					return createIf(() => unref(shouldRender), () => {
 						const n30 = t2();
 						renderEffect(() => setDynamicProps(n30, [getLayeredRootAttrs(_slotProps0.zIndex)]));
@@ -290,11 +288,12 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 									});
 								}, null, 129),
 								createIf(() => $slots.default, () => {
-									const n24 = t2();
-									renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("body", { class: "rp-modal__body" })]));
-									setInsertionState(n24, null, 0);
-									createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-									return n24;
+									return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("body", { class: "rp-modal__body" }), {
+										embedded: "",
+										scrollbars: "y"
+									}] }, extend(() => {
+										return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+									}, { _: 8 }));
 								}, null, 129),
 								createIf(() => unref(hasFooter), () => {
 									const n28 = t2();
@@ -312,7 +311,7 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			});
 		}, true);
 	}
-}), [["__scopeId", "data-v-04a5d994"]]);
+}), [["__scopeId", "data-v-bb0b8ca8"]]);
 //#endregion
 //#region src/components/modal/types.ts
 var modalParts = [

package/dist/number-input.css

@@ -3,10 +3,13 @@
     --_rp-number-input-control-size: var(--_rp-input-height);
     --_rp-number-input-text-align: left;
     overflow: hidden;
+    gap: 0;
+    padding-inline: 0;
     vertical-align: middle;
 }
 .rp-number-input[data-v-eb2db673] .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] {
@@ -25,12 +28,6 @@
     align-self: stretch;
     margin-block: calc(-1 * var(--rp-border-width-thin));
 }
-.rp-number-input[data-v-eb2db673] .rp-input__left {
-    margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
-}
-.rp-number-input[data-v-eb2db673] .rp-input__right {
-    margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
-}
 .rp-number-input__controls[data-v-eb2db673] {
     display: inline-flex;
     height: var(--_rp-input-height);

package/dist/popover.js

@@ -421,10 +421,7 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			to: () => unref(teleportTo),
 			disabled: () => !__props.teleport
 		}, () => {
-			return createComponent(VaporTransition, {
-				name: "rp-popover-content",
-				persisted: ""
-			}, extend(() => {
+			return createComponent(VaporTransition, { name: "rp-popover-content" }, extend(() => {
 				return createIf(() => unref(shouldRenderContent), () => {
 					const n13 = t1();
 					renderEffect(() => setDynamicProps(n13, [

package/dist/progress.js

@@ -126,7 +126,7 @@ var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const n16 = child(n17, 1);
 		const n15 = child(n16);
 		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
-		setInsertionState(n17, 0, 0);
+		setInsertionState(n17, 0);
 		createIf(() => $slots.default || !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
 			const n14 = t2();
 			setInsertionState(n14, null, 0);

package/dist/scroll-area.css

@@ -0,0 +1,131 @@
+@layer ropav.components {
+.rp-scroll-area[data-v-bf91f9cc] {
+    --_rp-scroll-area-scrollbar-size: 10px;
+    --_rp-scroll-area-scrollbar-padding: 2px;
+    --_rp-scroll-area-thumb-bg: var(--rp-color-dimmed);
+    --_rp-scroll-area-thumb-bg-hover: var(--rp-color-text);
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+}
+.rp-scroll-area__viewport[data-v-bf91f9cc] {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    outline: none;
+}
+.rp-scroll-area__viewport[data-v-bf91f9cc]::-webkit-scrollbar {
+    display: none;
+}
+.rp-scroll-area__viewport[data-v-bf91f9cc]: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-bf91f9cc] {
+    overflow: scroll;
+}
+.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+    overflow: hidden;
+}
+.rp-scroll-area__content[data-v-bf91f9cc] {
+    display: table;
+    box-sizing: border-box;
+    min-width: 100%;
+}
+.rp-scroll-area__scrollbar[data-v-bf91f9cc] {
+    position: absolute;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    padding: var(--_rp-scroll-area-scrollbar-padding);
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    user-select: none;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-scroll-area__scrollbar[data-visible][data-v-bf91f9cc] {
+    opacity: 1;
+    pointer-events: auto;
+}
+.rp-scroll-area__scrollbar[data-v-bf91f9cc]: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-bf91f9cc] {
+    inset-inline: 0;
+    bottom: 0;
+    align-items: center;
+    width: auto;
+    height: var(--_rp-scroll-area-scrollbar-size);
+}
+.rp-scroll-area__scrollbar--vertical[data-v-bf91f9cc] {
+    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-bf91f9cc] {
+    inset-inline-end: var(--_rp-scroll-area-scrollbar-size);
+}
+.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-bf91f9cc] {
+    inset-block-end: var(--_rp-scroll-area-scrollbar-size);
+}
+.rp-scroll-area__thumb[data-v-bf91f9cc] {
+    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-bf91f9cc], .rp-scroll-area__scrollbar:focus-visible .rp-scroll-area__thumb[data-v-bf91f9cc] {
+    background: var(--_rp-scroll-area-thumb-bg-hover);
+}
+.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-bf91f9cc] {
+    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-bf91f9cc] {
+    width: 100%;
+    height: var(--_rp-scroll-area-thumb-size);
+    transform: translateY(var(--_rp-scroll-area-thumb-offset));
+}
+.rp-scroll-area__corner[data-v-bf91f9cc] {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: var(--_rp-scroll-area-scrollbar-size);
+    height: var(--_rp-scroll-area-scrollbar-size);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-scroll-area__corner[data-visible][data-v-bf91f9cc] {
+    opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-scroll-area__scrollbar[data-v-bf91f9cc],
+    .rp-scroll-area__corner[data-v-bf91f9cc],
+    .rp-scroll-area__thumb[data-v-bf91f9cc] {
+      transition: none;
+}
+}
+}