ropav 0.1.3 → 0.1.4

package/dist/components/scroll-area/scroll-area.d.ts

@@ -1,11 +1,45 @@
-import { ScrollAreaProps } from './types.js';
+import { PropType } from 'vue';
+import { ScrollAreaProps, ScrollAreaScrollbars } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<ScrollAreaProps & {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<import('vue').ExtractPublicPropTypes<{
+        id: StringConstructor;
+        embedded: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        type: {
+            type: PropType<ScrollAreaProps["type"]>;
+            default: string;
+        };
+        scrollbars: {
+            type: PropType<ScrollAreaScrollbars | false>;
+            default: string;
+        };
+        scrollbarSize: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        scrollHideDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
+        ariaLabel: StringConstructor;
+        ariaLabelledby: StringConstructor;
+        ariaDescribedby: StringConstructor;
+        viewportAttrs: PropType<ScrollAreaProps["viewportAttrs"]>;
+        contentAttrs: PropType<ScrollAreaProps["contentAttrs"]>;
+        classNames: PropType<ScrollAreaProps["classNames"]>;
+        styles: PropType<ScrollAreaProps["styles"]>;
+    }> & {
         onScroll?: ((event: Event) => any) | undefined;
         onScrollPositionChange?: ((position: {
             x: number;
             y: number;
         }) => any) | undefined;
+        onReachTop?: ((event: Event) => any) | undefined;
+        onReachBottom?: ((event: Event) => any) | undefined;
+        onReachLeft?: ((event: Event) => any) | undefined;
+        onReachRight?: ((event: Event) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -29,7 +63,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     emit: ((evt: "scroll", event: Event) => void) & ((evt: "scrollPositionChange", position: {
         x: number;
         y: number;
-    }) => void);
+    }) => void) & ((evt: "reachTop", event: Event) => void) & ((evt: "reachBottom", event: Event) => void) & ((evt: "reachLeft", event: Event) => void) & ((evt: "reachRight", event: Event) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/scroll-area/types.d.ts

@@ -30,4 +30,5 @@ export interface ScrollAreaProps extends StylesApiProps<ScrollAreaPart> {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
     viewportAttrs?: HTMLAttributes;
+    contentAttrs?: HTMLAttributes;
 }

package/dist/components/scroll-area/useScrollArea.d.ts

@@ -3,6 +3,10 @@ interface UseScrollAreaOptions {
     props: Readonly<ScrollAreaProps>;
     emitScroll: (event: Event) => void;
     emitPositionChange: (position: ScrollAreaPosition) => void;
+    emitReachTop: (event: Event) => void;
+    emitReachBottom: (event: Event) => void;
+    emitReachLeft: (event: Event) => void;
+    emitReachRight: (event: Event) => void;
 }
 export declare function useScrollArea(options: UseScrollAreaOptions): {
     onScrollbarPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;

package/dist/components/scroll-area/useScrollAreaControls.d.ts

@@ -8,6 +8,10 @@ interface UseScrollAreaControlsOptions {
     showDuringScroll: () => void;
     emitScroll: (event: Event) => void;
     emitPositionChange: (position: ScrollAreaPosition) => void;
+    emitReachTop: (event: Event) => void;
+    emitReachBottom: (event: Event) => void;
+    emitReachLeft: (event: Event) => void;
+    emitReachRight: (event: Event) => void;
 }
 export declare function useScrollAreaControls(options: UseScrollAreaControlsOptions): {
     onViewportScroll: (event: Event) => void;

package/dist/components/scroll-area/useScrollAreaPresentation.d.ts

@@ -4,7 +4,7 @@ import { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaSlotProps } from './t
 export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProps>, scrollArea: ScrollAreaController): {
     rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
     viewportAttrs: import('vue').ComputedRef<HTMLAttributes>;
-    contentAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    contentAttrs: import('vue').ComputedRef<HTMLAttributes>;
     horizontalScrollbarAttrs: import('vue').ComputedRef<{
         role: string;
         tabindex: number;

package/dist/scroll-area.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-scroll-area[data-v-bf91f9cc] {
+.rp-scroll-area[data-v-f5c4e940] {
     --_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-bf91f9cc] {
+.rp-scroll-area__viewport[data-v-f5c4e940] {
     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-bf91f9cc]::-webkit-scrollbar {
+.rp-scroll-area__viewport[data-v-f5c4e940]::-webkit-scrollbar {
     display: none;
 }
-.rp-scroll-area__viewport[data-v-bf91f9cc]:focus-visible {
+.rp-scroll-area__viewport[data-v-f5c4e940]: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] {
+.rp-scroll-area[data-scrollbars=both] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow: scroll;
 }
-.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow-x: scroll;
     overflow-y: hidden;
 }
-.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow-x: hidden;
     overflow-y: scroll;
 }
-.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow: hidden;
 }
-.rp-scroll-area__content[data-v-bf91f9cc] {
+.rp-scroll-area__content[data-v-f5c4e940] {
     display: table;
     box-sizing: border-box;
     min-width: 100%;
 }
-.rp-scroll-area__scrollbar[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar[data-v-f5c4e940] {
     position: absolute;
     z-index: 1;
     box-sizing: border-box;
@@ -60,54 +60,54 @@
     user-select: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__scrollbar[data-visible][data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar[data-visible][data-v-f5c4e940] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-scroll-area__scrollbar[data-v-bf91f9cc]:focus-visible {
+.rp-scroll-area__scrollbar[data-v-f5c4e940]: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] {
+.rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
     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] {
+.rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
     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] {
+.rp-scroll-area[data-scrollbar-y-active] .rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
     inset-inline-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
     inset-block-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__thumb[data-v-f5c4e940] {
     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] {
+.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] {
     background: var(--_rp-scroll-area-thumb-bg-hover);
 }
-.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-f5c4e940] {
     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] {
+.rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-f5c4e940] {
     width: 100%;
     height: var(--_rp-scroll-area-thumb-size);
     transform: translateY(var(--_rp-scroll-area-thumb-offset));
 }
-.rp-scroll-area__corner[data-v-bf91f9cc] {
+.rp-scroll-area__corner[data-v-f5c4e940] {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -118,13 +118,13 @@
     pointer-events: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__corner[data-visible][data-v-bf91f9cc] {
+.rp-scroll-area__corner[data-visible][data-v-f5c4e940] {
     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] {
+.rp-scroll-area__scrollbar[data-v-f5c4e940],
+    .rp-scroll-area__corner[data-v-f5c4e940],
+    .rp-scroll-area__thumb[data-v-f5c4e940] {
       transition: none;
 }
 }

package/dist/scroll-area.js

@@ -38,14 +38,62 @@ function getLengthValue(value) {
 //#endregion
 //#region src/components/scroll-area/useScrollAreaControls.ts
 function useScrollAreaControls(options) {
+	let previousPosition = {
+		x: 0,
+		y: 0
+	};
 	function onViewportScroll(event) {
 		options.metrics.update();
 		options.showDuringScroll();
+		const position = {
+			x: options.metrics.getPosition("x"),
+			y: options.metrics.getPosition("y")
+		};
+		const reachedBoundaries = getReachedBoundaries(position);
+		previousPosition = position;
 		options.emitScroll(event);
 		options.emitPositionChange({
 			x: options.metrics.metrics.x,
 			y: options.metrics.metrics.y
 		});
+		for (const boundary of reachedBoundaries) emitReachedBoundary(boundary, event);
+	}
+	function getReachedBoundaries(position) {
+		const boundaries = [];
+		if (options.metrics.getOverflow("y")) {
+			const maxPosition = options.metrics.getMaxPosition("y");
+			if (position.y <= 1 && previousPosition.y > 1) boundaries.push("top");
+			if (position.y >= maxPosition - 1 && previousPosition.y < maxPosition - 1) boundaries.push("bottom");
+		}
+		if (options.metrics.getOverflow("x")) {
+			const maxPosition = options.metrics.getMaxPosition("x");
+			const reachedStart = position.x <= 1 && previousPosition.x > 1;
+			const reachedEnd = position.x >= maxPosition - 1 && previousPosition.x < maxPosition - 1;
+			if (reachedStart || reachedEnd) {
+				const viewport = options.viewportRef.value;
+				const view = viewport?.ownerDocument.defaultView;
+				const rtl = viewport ? view?.getComputedStyle(viewport).direction === "rtl" : false;
+				if (reachedStart) boundaries.push(rtl ? "right" : "left");
+				if (reachedEnd) boundaries.push(rtl ? "left" : "right");
+			}
+		}
+		return boundaries;
+	}
+	function emitReachedBoundary(boundary, event) {
+		switch (boundary) {
+			case "top":
+				options.emitReachTop(event);
+				break;
+			case "bottom":
+				options.emitReachBottom(event);
+				break;
+			case "left":
+				options.emitReachLeft(event);
+				break;
+			case "right":
+				options.emitReachRight(event);
+				break;
+		}
 	}
 	function writeAxisPosition(axis, value) {
 		const viewport = options.viewportRef.value;
@@ -446,7 +494,11 @@ function useScrollArea(options) {
 		metrics: measurements,
 		showDuringScroll: visibility.showDuringScroll,
 		emitScroll: options.emitScroll,
-		emitPositionChange: options.emitPositionChange
+		emitPositionChange: options.emitPositionChange,
+		emitReachTop: options.emitReachTop,
+		emitReachBottom: options.emitReachBottom,
+		emitReachLeft: options.emitReachLeft,
+		emitReachRight: options.emitReachRight
 	});
 	const pointer = useScrollAreaPointer({
 		horizontalScrollbarRef,
@@ -523,7 +575,17 @@ function useScrollAreaPresentation(props, scrollArea) {
 			}
 		};
 	});
-	const contentAttrs = computed(() => getPartAttrs("content", { class: "rp-scroll-area__content" }));
+	const contentAttrs = computed(() => {
+		const { class: compatibilityClass, style: compatibilityStyle, ...attrs } = props.contentAttrs ?? {};
+		return {
+			...attrs,
+			...getPartAttrs("content", {
+				class: "rp-scroll-area__content",
+				compatibilityClass,
+				compatibilityStyle
+			})
+		};
+	});
 	const horizontalScrollbarAttrs = computed(() => getScrollbarAttrs("x"));
 	const verticalScrollbarAttrs = computed(() => getScrollbarAttrs("y"));
 	const horizontalThumbAttrs = computed(() => getThumbAttrs("x"));
@@ -592,9 +654,9 @@ function hasAccessibleName(props, attrs) {
 }
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-bf91f9cc><div data-v-bf91f9cc></div>");
-var t1 = template("<div data-v-bf91f9cc>");
-var t2 = template("<div data-v-bf91f9cc><div data-v-bf91f9cc><div data-v-bf91f9cc></div></div>", 1);
+var t0 = template("<div data-v-f5c4e940><div data-v-f5c4e940></div>");
+var t1 = template("<div data-v-f5c4e940>");
+var t2 = template("<div data-v-f5c4e940><div data-v-f5c4e940><div data-v-f5c4e940></div></div>", 1);
 delegateEvents("pointerdown", "keydown");
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue
@@ -603,33 +665,54 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	inheritAttrs: false,
 	__name: "scroll-area",
 	props: {
-		id: {},
+		id: String,
 		embedded: {
 			type: Boolean,
 			default: false
 		},
-		type: { default: "hover" },
+		type: {
+			type: String,
+			default: "hover"
+		},
 		scrollbars: {
-			type: Boolean,
+			type: [String, Boolean],
 			default: "both"
 		},
-		scrollbarSize: { default: 10 },
-		scrollHideDelay: { default: 600 },
-		ariaLabel: {},
-		ariaLabelledby: {},
-		ariaDescribedby: {},
-		viewportAttrs: {},
-		classNames: {},
-		styles: {}
+		scrollbarSize: {
+			type: [Number, String],
+			default: 10
+		},
+		scrollHideDelay: {
+			type: Number,
+			default: 600
+		},
+		ariaLabel: String,
+		ariaLabelledby: String,
+		ariaDescribedby: String,
+		viewportAttrs: Object,
+		contentAttrs: Object,
+		classNames: Object,
+		styles: Object
 	},
-	emits: ["scroll", "scrollPositionChange"],
+	emits: [
+		"scroll",
+		"scrollPositionChange",
+		"reachTop",
+		"reachBottom",
+		"reachLeft",
+		"reachRight"
+	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const scrollArea = useScrollArea({
 			props,
 			emitScroll: (event) => emit("scroll", event),
-			emitPositionChange: (position) => emit("scrollPositionChange", position)
+			emitPositionChange: (position) => emit("scrollPositionChange", position),
+			emitReachTop: (event) => emit("reachTop", event),
+			emitReachBottom: (event) => emit("reachBottom", event),
+			emitReachLeft: (event) => emit("reachLeft", event),
+			emitReachRight: (event) => emit("reachRight", event)
 		});
 		const { rootRef, viewportRef, contentRef, horizontalScrollbarRef, verticalScrollbarRef, renderHorizontalScrollbar, renderVerticalScrollbar, onScrollbarKeydown, onScrollbarWheel, onScrollbarPointerdown, onThumbPointerdown, scrollTo, scrollBy, update } = scrollArea;
 		const { rootAttrs, viewportAttrs, contentAttrs, horizontalScrollbarAttrs, verticalScrollbarAttrs, horizontalThumbAttrs, verticalThumbAttrs, cornerAttrs, slotProps } = useScrollAreaPresentation(props, scrollArea);
@@ -691,6 +774,6 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		_setTemplateRef(n14, rootRef, null, "rootRef");
 		return n14;
 	}
-}), [["__scopeId", "data-v-bf91f9cc"]]);
+}), [["__scopeId", "data-v-f5c4e940"]]);
 //#endregion
 export { scroll_area_default as t };

package/dist/tabs.css

@@ -34,7 +34,7 @@
     flex: 1 1 0;
 }
 }@layer ropav.components {
-.rp-tabs-list[data-v-af4a8aa3] {
+.rp-tabs-list[data-v-9bb1525b] {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -47,37 +47,37 @@
     background-color: transparent;
     border: 0;
 }
-.rp-tabs-list[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list[data-v-9bb1525b] .rp-scroll-area__content {
     display: flex;
     align-items: stretch;
     width: max-content;
     min-width: 100%;
     gap: 0;
 }
-.rp-tabs-list--vertical[data-v-af4a8aa3] {
+.rp-tabs-list--vertical[data-v-9bb1525b] {
     width: max-content;
 }
-.rp-tabs-list--vertical[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list--vertical[data-v-9bb1525b] .rp-scroll-area__content {
     flex-direction: column;
 }
-.rp-tabs-list--line[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list--line[data-v-9bb1525b] .rp-scroll-area__content {
     border-bottom: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
-.rp-tabs-list--line.rp-tabs-list--vertical[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list--line.rp-tabs-list--vertical[data-v-9bb1525b] .rp-scroll-area__content {
     border-bottom: 0;
     border-left: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
-.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-9bb1525b] .rp-scroll-area__content {
     border-right: var(--rp-border-width-medium) solid var(--rp-color-default-border);
     border-left: 0;
 }
-.rp-tabs-list--pills[data-v-af4a8aa3] .rp-scroll-area__content {
+.rp-tabs-list--pills[data-v-9bb1525b] .rp-scroll-area__content {
     gap: var(--rp-spacing-2);
 }
-.rp-tabs-list--outline[data-v-af4a8aa3] {
+.rp-tabs-list--outline[data-v-9bb1525b] {
     position: relative;
 }
-.rp-tabs-list--outline[data-v-af4a8aa3]::after {
+.rp-tabs-list--outline[data-v-9bb1525b]::after {
     position: absolute;
     z-index: 0;
     right: 0;
@@ -88,7 +88,7 @@
     background-color: var(--rp-color-default-border);
     pointer-events: none;
 }
-.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-af4a8aa3]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-9bb1525b]::after {
     top: 0;
     right: auto;
     bottom: 0;
@@ -96,11 +96,11 @@
     width: var(--rp-border-width-thin);
     height: auto;
 }
-.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-9bb1525b]::after {
     right: 0;
     left: auto;
 }
-.rp-tabs-list--disabled[data-v-af4a8aa3] {
+.rp-tabs-list--disabled[data-v-9bb1525b] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }

package/dist/tabs.js

@@ -4,9 +4,9 @@ import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as scroll_area_default } from "./scroll-area.js";
-import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
 //#region src/components/tabs/useTabs.ts
-var TABLIST_SELECTOR = ".rp-tabs-list";
+var TABLIST_SELECTOR = "[role=\"tablist\"]";
 var TRIGGER_SELECTOR = ".rp-tabs-trigger";
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "line";
@@ -494,21 +494,50 @@ var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const props = __props;
 		const { rootProps: internalRootProps, slotProps } = useTabsList(props);
 		const scrollbarAxis = computed(() => slotProps.value.orientation === "horizontal" ? "x" : "y");
-		const { getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			...internalRootProps.value,
-			"data-disabled": presence(internalRootProps.value["data-disabled"])
-		}));
+		const { attrs: forwardedAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const forwardedContentAttrNames = computed(() => Object.keys(forwardedAttrs).filter(isContentAttr));
+		const rootAttrs = computed(() => {
+			const internal = internalRootProps.value;
+			return getRootAttrs({
+				id: internal.id,
+				class: internal.class,
+				"data-disabled": presence(internal["data-disabled"]),
+				"data-variant": internal["data-variant"],
+				"data-orientation": internal["data-orientation"],
+				"data-placement": internal["data-placement"]
+			}, {}, forwardedContentAttrNames.value);
+		});
+		const contentAttrs = computed(() => {
+			const internal = internalRootProps.value;
+			const internalAttrs = {
+				role: internal.role,
+				"aria-orientation": internal["aria-orientation"],
+				"aria-label": internal["aria-label"],
+				"aria-labelledby": internal["aria-labelledby"],
+				"aria-describedby": internal["aria-describedby"],
+				onKeydown: internal.onKeydown
+			};
+			const merged = mergeProps(internalAttrs, Object.fromEntries(forwardedContentAttrNames.value.map((name) => [name, forwardedAttrs[name]])));
+			for (const [name, value] of Object.entries(internalAttrs)) {
+				if (name === "onKeydown") continue;
+				merged[name] = value;
+			}
+			return merged;
+		});
+		function isContentAttr(name) {
+			return name === "role" || name === "onKeydown" || name.startsWith("aria-");
+		}
 		return createComponent(scroll_area_default, { $: [() => rootAttrs.value, {
 			embedded: "",
 			type: "auto",
 			scrollbars: () => scrollbarAxis.value,
-			"viewport-attrs": () => ({ tabindex: -1 })
+			"viewport-attrs": () => ({ tabindex: -1 }),
+			"content-attrs": () => contentAttrs.value
 		}] }, extend(() => {
 			return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-af4a8aa3"]]);
+}), [["__scopeId", "data-v-9bb1525b"]]);
 //#endregion
 //#region src/components/tabs/tabs-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button data-v-6df68725>", 1);

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ropav",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@11.13.1",
+  "packageManager": "pnpm@11.14.0",
   "engines": {
     "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   },