feat(RangeCalendar): add highlighted range bounds data attributes on cell trigger

docs/content/components/date-range-picker.md

@@ -388,6 +388,14 @@ Interactable container for displaying the cell dates. Clicking it selects the da
       attribute: '[data-highlighted]',
       values: 'Present when the date is highlighted by the user as they select a range.',
     },
+    {
+      attribute: '[data-highlighted-start]',
+      values: 'Present when the date is the start of the range that is highlighted by the user.',
+    },
+    {
+      attribute: '[data-highlighted-end]',
+      values: 'Present when the date is the end of the range that is highlighted by the user.',
+    },
     {
       attribute: '[data-focused]',
       values: 'Present when focused',

docs/content/components/range-calendar.md

@@ -276,6 +276,14 @@ Interactable container for displaying the cell dates. Clicking it selects the da
       attribute: '[data-highlighted]',
       values: 'Present when the date is highlighted by the user as they select a range.',
     },
+    {
+      attribute: '[data-highlighted-start]',
+      values: 'Present when the date is the start of the range that is highlighted by the user.',
+    },
+    {
+      attribute: '[data-highlighted-end]',
+      values: 'Present when the date is the end of the range that is highlighted by the user.',
+    },
     {
       attribute: '[data-focused]',
       values: 'Present when focused',

packages/radix-vue/src/RangeCalendar/RangeCalendarCellTrigger.vue

@@ -47,6 +47,8 @@ const isUnavailable = computed(() => rootContext.isDateUnavailable?.(props.day))
 const isSelectedDate = computed(() => rootContext.isSelected(props.day))
 const isSelectionStart = computed(() => rootContext.isSelectionStart(props.day))
 const isSelectionEnd = computed(() => rootContext.isSelectionEnd(props.day))
+const isHighlightStart = computed(() => rootContext.isHighlightedStart(props.day))
+const isHighlightEnd = computed(() => rootContext.isHighlightedEnd(props.day))
 const isHighlighted = computed(() => rootContext.highlightedRange.value
   ? isBetweenInclusive(props.day, rootContext.highlightedRange.value.start, rootContext.highlightedRange.value.end)
   : false)
@@ -196,6 +198,8 @@ function handleArrowKey(e: KeyboardEvent) {
     :data-highlighted="isHighlighted ? '' : undefined"
     :data-selection-start="isSelectionStart ? true : undefined"
     :data-selection-end="isSelectionEnd ? true : undefined"
+    :data-highlighted-start="isHighlightStart ? true : undefined"
+    :data-highlighted-end="isHighlightEnd ? true : undefined"
     :data-selected="isSelectedDate ? true : undefined"
     :data-outside-visible-view="isOutsideVisibleView ? '' : undefined"
     :data-value="day.toString()"

packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue

@@ -40,6 +40,8 @@ type RangeCalendarRootContext = {
   isSelected: (date: DateValue) => boolean
   isSelectionEnd: (date: DateValue) => boolean
   isSelectionStart: (date: DateValue) => boolean
+  isHighlightedStart: (date: DateValue) => boolean
+  isHighlightedEnd: (date: DateValue) => boolean
   prevPage: (step?: CalendarIncrement, prevPageFunc?: (date: DateValue) => DateValue) => void
   nextPage: (step?: CalendarIncrement, nextPageFunc?: (date: DateValue) => DateValue) => void
   isNextButtonDisabled: (step?: CalendarIncrement, nextPageFunc?: (date: DateValue) => DateValue) => boolean
@@ -129,7 +131,6 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
-  initialView: 'month',
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
 
@@ -237,6 +238,8 @@ const {
   highlightedRange,
   isSelectionStart,
   isSelectionEnd,
+  isHighlightedStart,
+  isHighlightedEnd,
 } = useRangeCalendarState({
   start: startValue,
   end: endValue,
@@ -327,6 +330,8 @@ provideRangeCalendarRootContext({
   onPlaceholderChange,
   locale,
   dir,
+  isHighlightedStart,
+  isHighlightedEnd,
 })
 
 onMounted(() => {

packages/radix-vue/src/RangeCalendar/useRangeCalendar.ts

@@ -91,11 +91,25 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return null
   })
 
+  const isHighlightedStart = (date: DateValue) => {
+    if (!highlightedRange.value || !highlightedRange.value.start)
+      return false
+    return isSameDay(highlightedRange.value.start, date)
+  }
+
+  const isHighlightedEnd = (date: DateValue) => {
+    if (!highlightedRange.value || !highlightedRange.value.end)
+      return false
+    return isSameDay(highlightedRange.value.end, date)
+  }
+
   return {
     isInvalid,
     isSelected,
     highlightedRange,
     isSelectionStart,
     isSelectionEnd,
+    isHighlightedStart,
+    isHighlightedEnd,
   }
 }