fix(components): add missing data-orientation for consistency

Author: benjamincanac

src/runtime/components/Carousel.vue

@@ -298,6 +298,7 @@ defineExpose({
     :as="as"
     role="region"
     aria-roledescription="carousel"
+    :data-orientation="orientation"
     tabindex="0"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"

src/runtime/components/FieldGroup.vue

@@ -53,7 +53,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ orientation, class: props.class })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: props.class })">
     <slot />
   </Primitive>
 </template>

src/runtime/components/Marquee.vue

@@ -49,7 +49,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-for="i in repeat" :key="i" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>

src/runtime/components/Progress.vue

@@ -166,7 +166,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%

test/components/__snapshots__/Carousel-vue.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Carousel > renders with arrows correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -26,7 +26,7 @@ exports[`Carousel > renders with arrows correctly 1`] = `
 `;
 
 exports[`Carousel > renders with as correctly 1`] = `
-"<nav role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -42,7 +42,7 @@ exports[`Carousel > renders with as correctly 1`] = `
 `;
 
 exports[`Carousel > renders with class correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -58,7 +58,7 @@ exports[`Carousel > renders with class correctly 1`] = `
 `;
 
 exports[`Carousel > renders with dots correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -77,7 +77,7 @@ exports[`Carousel > renders with dots correctly 1`] = `
 `;
 
 exports[`Carousel > renders with items correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -93,7 +93,7 @@ exports[`Carousel > renders with items correctly 1`] = `
 `;
 
 exports[`Carousel > renders with next correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -118,7 +118,7 @@ exports[`Carousel > renders with next correctly 1`] = `
 `;
 
 exports[`Carousel > renders with nextIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -143,7 +143,7 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with orientation vertical correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -159,7 +159,7 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prev correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -184,7 +184,7 @@ exports[`Carousel > renders with prev correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prevIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -209,7 +209,7 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with ui correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden h-[320px]">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>

test/components/__snapshots__/Carousel.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Carousel > renders with arrows correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -26,7 +26,7 @@ exports[`Carousel > renders with arrows correctly 1`] = `
 `;
 
 exports[`Carousel > renders with as correctly 1`] = `
-"<nav role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<nav role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -42,7 +42,7 @@ exports[`Carousel > renders with as correctly 1`] = `
 `;
 
 exports[`Carousel > renders with class correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -58,7 +58,7 @@ exports[`Carousel > renders with class correctly 1`] = `
 `;
 
 exports[`Carousel > renders with dots correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -77,7 +77,7 @@ exports[`Carousel > renders with dots correctly 1`] = `
 `;
 
 exports[`Carousel > renders with items correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -93,7 +93,7 @@ exports[`Carousel > renders with items correctly 1`] = `
 `;
 
 exports[`Carousel > renders with next correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -118,7 +118,7 @@ exports[`Carousel > renders with next correctly 1`] = `
 `;
 
 exports[`Carousel > renders with nextIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -143,7 +143,7 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with orientation vertical correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="vertical" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-col -mt-4" style="transform: translate3d(0px,NaNpx,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pt-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -159,7 +159,7 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prev correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -184,7 +184,7 @@ exports[`Carousel > renders with prev correctly 1`] = `
 `;
 
 exports[`Carousel > renders with prevIcon correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
@@ -209,7 +209,7 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
 `;
 
 exports[`Carousel > renders with ui correctly 1`] = `
-"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none">
   <div class="overflow-hidden h-[320px]">
     <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
       <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>