ropav 0.1.2 → 0.1.3

package/dist/tabs.css

@@ -34,45 +34,50 @@
     flex: 1 1 0;
 }
 }@layer ropav.components {
-.rp-tabs-list[data-v-5016edc1] {
+.rp-tabs-list[data-v-af4a8aa3] {
     box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     align-items: stretch;
     width: 100%;
     min-width: 0;
+    max-width: 100%;
     padding: 0;
-    gap: 0;
     font-family: var(--rp-font-family);
     background-color: transparent;
     border: 0;
 }
-.rp-tabs-list--vertical[data-v-5016edc1] {
-    flex-direction: column;
+.rp-tabs-list[data-v-af4a8aa3] .rp-scroll-area__content {
+    display: flex;
+    align-items: stretch;
     width: max-content;
+    min-width: 100%;
+    gap: 0;
 }
-.rp-tabs-list--line[data-v-5016edc1] {
+.rp-tabs-list--vertical[data-v-af4a8aa3] {
+    width: max-content;
+}
+.rp-tabs-list--vertical[data-v-af4a8aa3] .rp-scroll-area__content {
+    flex-direction: column;
+}
+.rp-tabs-list--line[data-v-af4a8aa3] .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-5016edc1] {
+.rp-tabs-list--line.rp-tabs-list--vertical[data-v-af4a8aa3] .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-5016edc1] {
+.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3] .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-5016edc1], .rp-tabs-list--outline[data-v-5016edc1] {
-    max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-.rp-tabs-list--pills[data-v-5016edc1] {
+.rp-tabs-list--pills[data-v-af4a8aa3] .rp-scroll-area__content {
     gap: var(--rp-spacing-2);
 }
-.rp-tabs-list--outline[data-v-5016edc1] {
+.rp-tabs-list--outline[data-v-af4a8aa3] {
     position: relative;
 }
-.rp-tabs-list--outline[data-v-5016edc1]::after {
+.rp-tabs-list--outline[data-v-af4a8aa3]::after {
     position: absolute;
     z-index: 0;
     right: 0;
@@ -83,7 +88,7 @@
     background-color: var(--rp-color-default-border);
     pointer-events: none;
 }
-.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-5016edc1]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-af4a8aa3]::after {
     top: 0;
     right: auto;
     bottom: 0;
@@ -91,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-5016edc1]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3]::after {
     right: 0;
     left: auto;
 }
-.rp-tabs-list--disabled[data-v-5016edc1] {
+.rp-tabs-list--disabled[data-v-af4a8aa3] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }

package/dist/tabs.js

@@ -3,7 +3,8 @@ import { t as bem } from "./bem.js";
 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 { computed, createIf, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
+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";
 //#region src/components/tabs/useTabs.ts
 var TABLIST_SELECTOR = ".rp-tabs-list";
 var TRIGGER_SELECTOR = ".rp-tabs-trigger";
@@ -389,7 +390,7 @@ function useTabsContent(props) {
 }
 //#endregion
 //#region src/components/tabs/tabs.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$3 = template("<div data-v-163486d1>", 1);
+var t0$2 = template("<div data-v-163486d1>", 1);
 //#endregion
 //#region src/components/tabs/tabs.vue
 var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -432,7 +433,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			...internalRootProps.value,
 			"data-disabled": presence(props.disabled)
 		}));
-		const n1 = t0$3();
+		const n1 = t0$2();
 		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
@@ -441,7 +442,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 }), [["__scopeId", "data-v-163486d1"]]);
 //#endregion
 //#region src/components/tabs/tabs-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<section data-v-7206185c>", 1);
+var t0$1 = template("<section data-v-7206185c>", 1);
 //#endregion
 //#region src/components/tabs/tabs-content.vue
 var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -467,7 +468,7 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const { getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs(internalRootProps.value));
 		return createIf(() => unref(shouldRenderContent), () => {
-			const n3 = t0$2();
+			const n3 = t0$1();
 			renderEffect(() => setDynamicProps(n3, [rootAttrs.value]));
 			setInsertionState(n3, null, 0);
 			createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
@@ -476,9 +477,6 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	}
 }), [["__scopeId", "data-v-7206185c"]]);
 //#endregion
-//#region src/components/tabs/tabs-list.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-5016edc1>", 1);
-//#endregion
 //#region src/components/tabs/tabs-list.vue
 var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTabsList",
@@ -495,18 +493,22 @@ var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	setup(__props) {
 		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 n1 = t0$1();
-		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
-		setInsertionState(n1, null, 0);
-		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-		return n1;
+		return createComponent(scroll_area_default, { $: [() => rootAttrs.value, {
+			embedded: "",
+			type: "auto",
+			scrollbars: () => scrollbarAxis.value,
+			"viewport-attrs": () => ({ tabindex: -1 })
+		}] }, extend(() => {
+			return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-5016edc1"]]);
+}), [["__scopeId", "data-v-af4a8aa3"]]);
 //#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/docs/public-styles-api.md

@@ -94,7 +94,7 @@ Boolean states use presence semantics: the attribute value is empty when true an
 - `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
 - `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
 - `data-submenu`: DropdownMenu items that own children.
-- `data-orientation="horizontal|vertical"`: Accordion, ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
+- `data-orientation="horizontal|vertical"`: ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
 - `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
 - `data-side="top|right|bottom|left"`: the side component of the final placement for Popover, DropdownMenu and Tooltip.
 - `data-control="increment|decrement"`: NumberInput controls.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "type": "module",
   "packageManager": "pnpm@11.13.1",
@@ -132,6 +132,10 @@
       "types": "./dist/components/radio/index.d.ts",
       "import": "./dist/components/radio/index.js"
     },
+    "./scroll-area": {
+      "types": "./dist/components/scroll-area/index.d.ts",
+      "import": "./dist/components/scroll-area/index.js"
+    },
     "./select": {
       "types": "./dist/components/select/index.d.ts",
       "import": "./dist/components/select/index.js"