diff --git a/docs/components/demo/Calendar/tailwind/index.vue b/docs/components/demo/Calendar/tailwind/index.vue
index 0a18ffbd7..251997269 100644
--- a/docs/components/demo/Calendar/tailwind/index.vue
+++ b/docs/components/demo/Calendar/tailwind/index.vue
@@ -68,7 +68,7 @@ const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
               <CalendarCellTrigger
                 :day="weekDate"
                 :month="month.value"
-                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
+                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[outside-view]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
               />
             </CalendarCell>
           </CalendarGridRow>
diff --git a/docs/components/demo/CalendarSelect/tailwind/index.vue b/docs/components/demo/CalendarSelect/tailwind/index.vue
index 036a7176d..11072dee3 100644
--- a/docs/components/demo/CalendarSelect/tailwind/index.vue
+++ b/docs/components/demo/CalendarSelect/tailwind/index.vue
@@ -234,7 +234,7 @@ const value = computed(() => toCalendar(today(getLocalTimeZone()), createCalenda
                 <CalendarCellTrigger
                   :day="weekDate"
                   :month="month.value"
-                  class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
+                  class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[outside-view]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
                 />
               </CalendarCell>
             </CalendarGridRow>
diff --git a/docs/components/demo/CalendarYearIncrement/tailwind/index.vue b/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
index 05b6b6f91..5418455d5 100644
--- a/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
+++ b/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
@@ -94,7 +94,7 @@ function pagingFunc(date: DateValue, sign: -1 | 1) {
               <CalendarCellTrigger
                 :day="weekDate"
                 :month="month.value"
-                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
+                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[outside-view]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
               />
             </CalendarCell>
           </CalendarGridRow>
diff --git a/docs/components/demo/DatePicker/tailwind/index.vue b/docs/components/demo/DatePicker/tailwind/index.vue
index 041e281e3..dc44f6dc0 100644
--- a/docs/components/demo/DatePicker/tailwind/index.vue
+++ b/docs/components/demo/DatePicker/tailwind/index.vue
@@ -125,7 +125,7 @@ import {
                     <DatePickerCellTrigger
                       :day="weekDate"
                       :month="month.value"
-                      class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 data-[selected]:before:bg-white"
+                      class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 data-[selected]:before:bg-white"
                     />
                   </DatePickerCell>
                 </DatePickerGridRow>
diff --git a/docs/components/demo/DateRangePicker/tailwind/index.vue b/docs/components/demo/DateRangePicker/tailwind/index.vue
index 4585883b2..7f5e5ac75 100644
--- a/docs/components/demo/DateRangePicker/tailwind/index.vue
+++ b/docs/components/demo/DateRangePicker/tailwind/index.vue
@@ -152,7 +152,7 @@ import {
                     <DateRangePickerCellTrigger
                       :day="weekDate"
                       :month="month.value"
-                      class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
+                      class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[outside-view]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
                     />
                   </DateRangePickerCell>
                 </DateRangePickerGridRow>
diff --git a/docs/components/demo/RangeCalendar/tailwind/index.vue b/docs/components/demo/RangeCalendar/tailwind/index.vue
index f0107914d..91c1edbf6 100644
--- a/docs/components/demo/RangeCalendar/tailwind/index.vue
+++ b/docs/components/demo/RangeCalendar/tailwind/index.vue
@@ -67,7 +67,7 @@ function isDateUnavailable(date: DateValue) {
               <RangeCalendarCellTrigger
                 :day="weekDate"
                 :month="month.value"
-                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
+                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[outside-view]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
               />
             </RangeCalendarCell>
           </RangeCalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/CalendarCellTrigger.vue b/packages/radix-vue/src/Calendar/CalendarCellTrigger.vue
index baf357c6e..71d9f0ba9 100644
--- a/packages/radix-vue/src/Calendar/CalendarCellTrigger.vue
+++ b/packages/radix-vue/src/Calendar/CalendarCellTrigger.vue
@@ -70,7 +70,7 @@ const isFocusedDate = computed(() => {
 const isSelectedDate = computed(() => rootContext.isDateSelected(props.day))
 
 const SELECTOR
-  = '[data-radix-vue-calendar-cell-trigger]:not([data-disabled]):not([data-outside-month]):not([data-outside-visible-months])'
+  = '[data-radix-vue-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'
 
 function changeDate(date: DateValue) {
   if (rootContext.readonly.value)
@@ -158,10 +158,10 @@ function handleArrowKey(e: KeyboardEvent) {
     role="button"
     :aria-label="labelText"
     data-radix-vue-calendar-cell-trigger
-    :aria-disabled="isOutsideView || isDisabled || isUnavailable ? true : undefined"
+    :aria-disabled="isDisabled || isUnavailable ? true : undefined"
     :data-selected="isSelectedDate ? true : undefined"
     :data-value="day.toString()"
-    :data-disabled="isDisabled || isOutsideView ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
     :data-unavailable="isUnavailable ? '' : undefined"
     :data-today="isDateToday ? '' : undefined"
     :data-outside-view="isOutsideView ? '' : undefined"
diff --git a/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue b/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue
index 961ac96a6..2e82de34e 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue
@@ -69,7 +69,7 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
                   <CalendarCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </CalendarCell>
               </CalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarDir.story.vue b/packages/radix-vue/src/Calendar/story/CalendarDir.story.vue
index ee0c02b9b..e6985e85e 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarDir.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarDir.story.vue
@@ -72,7 +72,7 @@ import { ConfigProvider } from '@/ConfigProvider'
                     <CalendarCellTrigger
                       :day="weekDate"
                       :month="month.value"
-                      class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                      class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                     />
                   </CalendarCell>
                 </CalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarPopover.story.vue b/packages/radix-vue/src/Calendar/story/CalendarPopover.story.vue
index 1d30a33b6..f33929eaa 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarPopover.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarPopover.story.vue
@@ -115,7 +115,7 @@ const formatter = useDateFormatter('en')
                   <CalendarCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </CalendarCell>
               </CalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarSelect.story.vue b/packages/radix-vue/src/Calendar/story/CalendarSelect.story.vue
index d5bcfbfb9..e521c2c3f 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarSelect.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarSelect.story.vue
@@ -260,7 +260,7 @@ const value = computed(() => toCalendar(today(getLocalTimeZone()), createCalenda
                     <CalendarCellTrigger
                       :day="weekDate"
                       :month="month.value"
-                      class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                      class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                     />
                   </CalendarCell>
                 </CalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue b/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
index 75b0f2737..5e2a8df7a 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
@@ -94,7 +94,7 @@ function paging(date: DateValue, sign: -1 | 1) {
                   <CalendarCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </CalendarCell>
               </CalendarGridRow>
diff --git a/packages/radix-vue/src/Calendar/story/_DummyCalendar.vue b/packages/radix-vue/src/Calendar/story/_DummyCalendar.vue
index 09a7352b5..ef112deec 100644
--- a/packages/radix-vue/src/Calendar/story/_DummyCalendar.vue
+++ b/packages/radix-vue/src/Calendar/story/_DummyCalendar.vue
@@ -69,7 +69,7 @@ const forwarded = useForwardPropsEmits(props, emits)
               <CalendarCellTrigger
                 :day="weekDate"
                 :month="month.value"
-                class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white data-[disabled]:pointer-events-none data-[unavailable]:pointer-events-none"
+                class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white data-[disabled]:pointer-events-none data-[unavailable]:pointer-events-none"
               />
             </CalendarCell>
           </CalendarGridRow>
diff --git a/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue b/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
index 38dd83b97..5fbdfb310 100644
--- a/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
+++ b/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
@@ -129,7 +129,7 @@ import { Label } from '@/Label'
                         <DatePickerCellTrigger
                           :day="weekDate"
                           :month="month.value"
-                          class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                          class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                         />
                       </DatePickerCell>
                     </DatePickerGridRow>
diff --git a/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue b/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue
index 3b18c5096..4b23b60ff 100644
--- a/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue
+++ b/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue
@@ -126,7 +126,7 @@ const forwarded = useForwardPropsEmits(props, emits)
                   <DatePickerCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </DatePickerCell>
               </DatePickerGridRow>
diff --git a/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue b/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue
index 0007da7e8..eaede5581 100644
--- a/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue
+++ b/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue
@@ -153,7 +153,7 @@ import { Label } from '@/Label'
                         <DateRangePickerCellTrigger
                           :day="weekDate"
                           :month="month.value"
-                          class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                          class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                         />
                       </DateRangePickerCell>
                     </DateRangePickerGridRow>
diff --git a/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue b/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue
index c6b0d92ed..98bd87b2c 100644
--- a/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue
+++ b/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue
@@ -149,7 +149,7 @@ const forwarded = useForwardPropsEmits(props, emits)
                   <DateRangePickerCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap bg-transparent text-sm font-normal text-black w-8 h-8 outline-offset-0 outline-none data-[selection-start]:rounded-l-lg data-[selection-end]:rounded-r-lg focus:outline-black hover:outline-black data-[selected]:bg-green10 data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[selection-start]:bg-green10  data-[selection-end]:bg-green10  data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap bg-transparent text-sm font-normal text-black w-8 h-8 outline-offset-0 outline-none data-[selection-start]:rounded-l-lg data-[selection-end]:rounded-r-lg focus:outline-black hover:outline-black data-[selected]:bg-green10 data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[selection-start]:bg-green10  data-[selection-end]:bg-green10  data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </DateRangePickerCell>
               </DateRangePickerGridRow>
diff --git a/packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue
index 1037385a8..8411d823b 100644
--- a/packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue
+++ b/packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue
@@ -54,7 +54,7 @@ const isHighlighted = computed(() => rootContext.highlightedRange.value
   : false)
 
 const SELECTOR
-  = '[data-radix-vue-calendar-cell-trigger]:not([data-disabled]):not([data-outside-month]):not([data-outside-visible-months])'
+  = '[data-radix-vue-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'
 
 const isDateToday = computed(() => {
   return isToday(props.day, getLocalTimeZone())
@@ -196,7 +196,7 @@ function handleArrowKey(e: KeyboardEvent) {
     :aria-label="labelText"
     data-radix-vue-calendar-cell-trigger
     :aria-selected="isSelectedDate ? true : undefined"
-    :aria-disabled="isOutsideView || isDisabled || isUnavailable ? true : undefined"
+    :aria-disabled="isDisabled || isUnavailable ? true : undefined"
     :data-highlighted="isHighlighted ? '' : undefined"
     :data-selection-start="isSelectionStart ? true : undefined"
     :data-selection-end="isSelectionEnd ? true : undefined"
@@ -205,10 +205,10 @@ function handleArrowKey(e: KeyboardEvent) {
     :data-selected="isSelectedDate ? true : undefined"
     :data-outside-visible-view="isOutsideVisibleView ? '' : undefined"
     :data-value="day.toString()"
-    :data-disabled="isDisabled || isOutsideView ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
     :data-unavailable="isUnavailable ? '' : undefined"
     :data-today="isDateToday ? '' : undefined"
-    :data-outside-month="isOutsideView ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
     :data-focused="isFocusedDate ? '' : undefined"
     :tabindex="isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1"
     @click="handleClick"
diff --git a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarDefault.story.vue b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarDefault.story.vue
index 051f3b12b..16dac46db 100644
--- a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarDefault.story.vue
+++ b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarDefault.story.vue
@@ -67,7 +67,7 @@ import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCa
                   <RangeCalendarCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </RangeCalendarCell>
               </RangeCalendarGridRow>
diff --git a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarPopover.story.vue b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarPopover.story.vue
index b4e6d174f..f62ae933b 100644
--- a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarPopover.story.vue
+++ b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarPopover.story.vue
@@ -111,7 +111,7 @@ const formatter = useDateFormatter('en')
                   <RangeCalendarCellTrigger
                     :day="weekDate"
                     :month="month.value"
-                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                    class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black p-2 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
                   />
                 </RangeCalendarCell>
               </RangeCalendarGridRow>
diff --git a/packages/radix-vue/src/RangeCalendar/story/_DummyRangeCalendar.vue b/packages/radix-vue/src/RangeCalendar/story/_DummyRangeCalendar.vue
index 3aa4198c7..a0a5eae58 100644
--- a/packages/radix-vue/src/RangeCalendar/story/_DummyRangeCalendar.vue
+++ b/packages/radix-vue/src/RangeCalendar/story/_DummyRangeCalendar.vue
@@ -68,7 +68,7 @@ const forwarded = useForwardPropsEmits(props, emits)
               <RangeCalendarCellTrigger
                 :day="weekDate"
                 :month="month.value"
-                class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
+                class="relative flex items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[outside-view]:text-black/30 data-[selected]:text-white data-[highlighted]:bg-grass9/30 data-[highlighted]:rounded-none data-[selection-start]:bg-black data-[selection-start]:rounded-none data-[selection-start]:rounded-l-[9px] data-[selection-end]:rounded-none data-[selection-end]:bg-black data-[selection-end]:rounded-r-[9px] data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-grass9 data-[selected]:before:bg-white"
               />
             </RangeCalendarCell>
           </RangeCalendarGridRow>