reka-ui 2.9.9 → 2.10.0

package/src/RadioGroup/Radio.vue

@@ -22,10 +22,14 @@ export interface RadioProps extends PrimitiveProps, FormFieldProps {
 import { useVModel } from '@vueuse/core'
 import { computed, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
-import { useFormControl, useForwardExpose } from '@/shared'
+import { useFormControl, useForwardExpose, useForwardScopeId } from '@/shared'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 import { handleSelect } from './utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<RadioProps>(), {
   disabled: false,
   checked: undefined,
@@ -47,6 +51,9 @@ const checked = useVModel(props, 'checked', emits, {
 const { value } = toRefs(props)
 const { forwardRef, currentElement: triggerElement } = useForwardExpose()
 const isFormControl = useFormControl(triggerElement)
+// Hidden form input is a sibling (not nested) of the control to avoid the
+// `nested-interactive` a11y violation; forward the parent scope id for scoped styles.
+const scopeIdAttrs = useForwardScopeId()
 
 const ariaLabel = computed(() => props.id && triggerElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText ?? props.value : undefined)
 
@@ -72,13 +79,12 @@ function handleClick(event: MouseEvent) {
 
 <template>
   <Primitive
-    v-bind="$attrs"
     :id="id"
     :ref="forwardRef"
     role="radio"
     :type="as === 'button' ? 'button' : undefined"
     :as="as"
-    :aria-checked="checked"
+    :aria-checked="checked ?? false"
     :aria-label="ariaLabel"
     :as-child="asChild"
     :disabled="disabled ? '' : undefined"
@@ -87,19 +93,21 @@ function handleClick(event: MouseEvent) {
     :value="value"
     :required="required"
     :name="name"
+    v-bind="{ ...scopeIdAttrs, ...$attrs }"
     @click.stop="handleClick"
   >
     <slot :checked="checked" />
-
-    <VisuallyHiddenInput
-      v-if="isFormControl && name"
-      type="radio"
-      tabindex="-1"
-      :value="value"
-      :checked="!!checked"
-      :name="name"
-      :disabled="disabled"
-      :required="required"
-    />
   </Primitive>
+
+  <VisuallyHiddenInput
+    v-if="isFormControl && name"
+    type="radio"
+    tabindex="-1"
+    :value="value"
+    :checked="!!checked"
+    :name="name"
+    :disabled="disabled"
+    :required="required"
+    v-bind="scopeIdAttrs"
+  />
 </template>

package/src/Rating/RatingItem.vue

@@ -11,6 +11,7 @@ interface RatingItemContext {
 }
 
 export interface RatingItemProps extends PrimitiveProps {
+  /** The 1-based index of this item within the rating (e.g. the 3rd star). */
   item: number
 }
 

package/src/Rating/RatingItemIndicator.vue

@@ -7,13 +7,14 @@ import { useForwardExpose } from '@/shared'
 import { injectRatingItemContext } from './RatingItem.vue'
 import { injectRatingRootContext } from './RatingRoot.vue'
 
-export interface RatingItemProps extends PrimitiveProps {
+export interface RatingItemIndicatorProps extends PrimitiveProps {
+  /** The step value this indicator represents. */
   step: number
 }
 </script>
 
 <script setup lang="ts">
-const props = defineProps<RatingItemProps>()
+const props = defineProps<RatingItemIndicatorProps>()
 
 const rootContext = injectRatingRootContext()
 const { currentElement, forwardRef } = useForwardExpose()

package/src/Rating/RatingRoot.vue

@@ -16,16 +16,19 @@ export interface RatingRootContext {
 
 export interface RatingRootProps extends Omit<RadioGroupRootProps, 'modelValue' | 'defaultValue'> {
   /**
-   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+   * The rating value when initially rendered. Use when you do not need to control the state of the rating.
    */
   defaultValue?: number
-  /** The controlled value of the tab to activate. Can be bind as `v-model`. */
+  /** The controlled rating value. Can be bound with `v-model`. */
   modelValue?: number
+  /** The number of rating items to render. */
   length?: number
+  /** When `true`, clicking the currently selected rating resets the value to `0`. */
   clearable?: boolean
+  /** When `true`, the rating previews the value under the pointer on hover. */
   hoverable?: boolean
+  /** The granularity each rating item is divided into. */
   step?: 1 | 0.5 | 0.25 | 0.1
-
 }
 export type RatingRootEmits = {
   /** Event handler called when the value changes */

package/src/Rating/index.ts

@@ -1,3 +1,3 @@
-export { default as RatingItem, type RatingItemProps } from './RatingItem.vue'
-export { default as RatingItemIndicator } from './RatingItemIndicator.vue'
-export { default as RatingRoot, type RatingRootProps } from './RatingRoot.vue'
+export { injectRatingItemContext, default as RatingItem, type RatingItemProps } from './RatingItem.vue'
+export { default as RatingItemIndicator, type RatingItemIndicatorProps } from './RatingItemIndicator.vue'
+export { injectRatingRootContext, default as RatingRoot, type RatingRootEmits, type RatingRootProps } from './RatingRoot.vue'

package/src/RovingFocus/RovingFocusItem.vue

@@ -16,7 +16,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { useCollection } from '@/Collection'
 import { Primitive } from '@/Primitive'
 import { useId } from '@/shared'
@@ -46,6 +46,17 @@ onUnmounted(() => {
     context.onFocusableItemRemove()
 })
 
+watch(() => props.focusable, (newVal, oldVal) => {
+  if (newVal === oldVal)
+    return
+  if (newVal) {
+    context.onFocusableItemAdd()
+  }
+  else {
+    context.onFocusableItemRemove()
+  }
+})
+
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Tab' && event.shiftKey) {
     context.onItemShiftTab()

package/src/Select/SelectRoot.vue

@@ -14,6 +14,8 @@ export interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {
   defaultValue?: T | Array<T>
   /** The controlled value of the Select. Can be bind as `v-model`. */
   modelValue?: T | Array<T>
+  /** The value of the hidden native select option when the model value is nullish. */
+  nullableValue?: string
   /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */
   by?: string | ((a: T, b: T) => boolean)
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
@@ -75,6 +77,7 @@ defineOptions({
 const props = withDefaults(defineProps<SelectRootProps<T>>(), {
   modelValue: undefined,
   open: undefined,
+  nullableValue: '',
 })
 const emits = defineEmits<SelectRootEmits<T>>()
 
@@ -214,7 +217,7 @@ provideSelectRootContext({
     >
       <option
         v-if="isNullish(modelValue)"
-        value=""
+        :value="nullableValue"
       />
       <option
         v-for="option in Array.from(optionsSet)"

package/src/Select/SelectTrigger.vue

@@ -47,6 +47,52 @@ function handlePointerOpen(event: PointerEvent) {
     y: Math.round(event.pageY),
   }
 }
+
+function isPlainLeftClick(event: MouseEvent) {
+  return event.button === 0 && event.ctrlKey === false
+}
+
+// Tracks direct mouse presses handled in `pointerdown` so the Safari label
+// `click` workaround below does not re-focus the trigger after opening.
+let openedFromPointerDown = false
+
+function onTriggerPointerDown(event: PointerEvent) {
+  // Prevent opening on touch down.
+  // https://github.com/unovue/reka-ui/issues/804
+  if (event.pointerType === 'touch')
+    return event.preventDefault()
+
+  // prevent implicit pointer capture
+  // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
+  const target = event.target as HTMLElement
+  if (target.hasPointerCapture(event.pointerId))
+    target.releasePointerCapture(event.pointerId)
+
+  // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+  // but not when the control key is pressed (avoiding MacOS right click)
+  if (isPlainLeftClick(event)) {
+    handlePointerOpen(event)
+    openedFromPointerDown = true
+  }
+}
+
+function onTriggerMouseDown(event: MouseEvent) {
+  // Prevent trigger from stealing focus from the active item after opening.
+  // We avoid calling `preventDefault` in `pointerdown` because that suppresses
+  // compatibility mouse events (`mousedown`, `mouseup`, `click`).
+  if (isPlainLeftClick(event))
+    event.preventDefault()
+}
+
+function onTriggerClick(event: MouseEvent) {
+  // Safari: label-associated clicks may not run `pointerdown` on the trigger.
+  // Direct mouse clicks open in `pointerdown` and must not re-focus the trigger
+  // here — `mousedown` `preventDefault` does not suppress `click`.
+  if (!openedFromPointerDown)
+    (event.currentTarget as HTMLElement)?.focus()
+
+  openedFromPointerDown = false
+}
 </script>
 
 <template>
@@ -69,39 +115,9 @@ function handlePointerOpen(event: PointerEvent) {
       :data-placeholder="shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined"
       :as-child="asChild"
       :as="as"
-      @click="
-        (event: MouseEvent) => {
-          // Whilst browsers generally have no issue focusing the trigger when clicking
-          // on a label, Safari seems to struggle with the fact that there's no `onClick`.
-          // We force `focus` in this case. Note: this doesn't create any other side-effect
-          // because we are preventing default in `onPointerDown` so effectively
-          // this only runs for a label 'click'
-          (event?.currentTarget as HTMLElement)?.focus();
-        }
-      "
-      @pointerdown="
-        (event: PointerEvent) => {
-          // Prevent opening on touch down.
-          // https://github.com/unovue/reka-ui/issues/804
-          if (event.pointerType === 'touch')
-            return event.preventDefault();
-
-          // prevent implicit pointer capture
-          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
-          const target = event.target as HTMLElement;
-          if (target.hasPointerCapture(event.pointerId)) {
-            target.releasePointerCapture(event.pointerId);
-          }
-
-          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
-          // but not when the control key is pressed (avoiding MacOS right click)
-          if (event.button === 0 && event.ctrlKey === false) {
-            handlePointerOpen(event)
-            // prevent trigger from stealing focus from the active item after opening.
-            event.preventDefault();
-          }
-        }
-      "
+      @click="onTriggerClick"
+      @pointerdown="onTriggerPointerDown"
+      @mousedown="onTriggerMouseDown"
       @pointerup.prevent="
         (event: PointerEvent) => {
           // Only open on pointer up when using touch devices

package/src/Splitter/utils/style.ts

@@ -85,7 +85,7 @@ export function setGlobalCursorStyle(
     document.head.appendChild(styleElement)
   }
 
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`
+  styleElement.textContent = `*{cursor: ${style}!important;}`
 }
 
 // the % of the group's overall space this panel should occupy.

package/src/Switch/SwitchRoot.vue

@@ -2,7 +2,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import type { FormFieldProps } from '@/shared/types'
-import { createContext, useFormControl, useForwardExpose } from '@/shared'
+import { createContext, useFormControl, useForwardExpose, useForwardScopeId } from '@/shared'
 
 export interface SwitchRootProps<T = boolean> extends PrimitiveProps, FormFieldProps {
   /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
@@ -45,6 +45,10 @@ import { computed, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<SwitchRootProps<T>>(), {
   as: 'button',
   modelValue: undefined,
@@ -81,6 +85,9 @@ function toggleCheck() {
 
 const { forwardRef, currentElement } = useForwardExpose()
 const isFormControl = useFormControl(currentElement)
+// Hidden form input is a sibling (not nested) of the control to avoid the
+// `nested-interactive` a11y violation; forward the parent scope id for scoped styles.
+const scopeIdAttrs = useForwardScopeId()
 const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
 
 provideSwitchRootContext({
@@ -92,7 +99,6 @@ provideSwitchRootContext({
 
 <template>
   <Primitive
-    v-bind="$attrs"
     :id="id"
     :ref="forwardRef"
     role="switch"
@@ -106,6 +112,7 @@ provideSwitchRootContext({
     :as-child="asChild"
     :as="as"
     :disabled="disabled"
+    v-bind="{ ...scopeIdAttrs, ...$attrs }"
     @click="toggleCheck"
     @keydown.enter.prevent="toggleCheck"
   >
@@ -113,15 +120,16 @@ provideSwitchRootContext({
       :model-value="modelValue"
       :checked="checked"
     />
-
-    <VisuallyHiddenInput
-      v-if="isFormControl && name"
-      type="checkbox"
-      :name="name"
-      :disabled="disabled"
-      :required="required"
-      :value="value"
-      :checked="checked"
-    />
   </Primitive>
+
+  <VisuallyHiddenInput
+    v-if="isFormControl && name"
+    type="checkbox"
+    :name="name"
+    :disabled="disabled"
+    :required="required"
+    :value="value"
+    :checked="checked"
+    v-bind="scopeIdAttrs"
+  />
 </template>

package/src/Tabs/TabsIndicator.vue

@@ -22,10 +22,12 @@ const isMounted = useMounted()
 
 interface IndicatorStyle {
   size: number | null
+  thickness: number | null
   position: number | null
 }
 const indicatorStyle = ref<IndicatorStyle>({
   size: null,
+  thickness: null,
   position: null,
 })
 const tabs = ref<Array<HTMLElement>>([])
@@ -49,12 +51,14 @@ function updateIndicatorStyle() {
   if (context.orientation.value === 'horizontal') {
     indicatorStyle.value = {
       size: activeTab.offsetWidth,
+      thickness: activeTab.offsetHeight,
       position: activeTab.offsetLeft,
     }
   }
   else {
     indicatorStyle.value = {
       size: activeTab.offsetHeight,
+      thickness: activeTab.offsetWidth,
       position: activeTab.offsetTop,
     }
   }
@@ -67,6 +71,7 @@ function updateIndicatorStyle() {
     v-bind="props"
     :style="{
       '--reka-tabs-indicator-size': `${indicatorStyle.size}px`,
+      '--reka-tabs-indicator-thickness': `${indicatorStyle.thickness}px`,
       '--reka-tabs-indicator-position': `${indicatorStyle.position}px`,
     }"
   >

package/src/Teleport/Teleport.vue

@@ -29,10 +29,14 @@ export interface TeleportProps {
 
 <script setup lang="ts">
 import { useMounted } from '@vueuse/core'
+import { computed } from 'vue'
+import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
 
-withDefaults(defineProps<TeleportProps>(), {
-  to: 'body',
-})
+const props = defineProps<TeleportProps>()
+
+const configContext = injectConfigProviderContext({})
+
+const target = computed(() => props.to ?? configContext.teleportTo?.value ?? 'body')
 
 const isMounted = useMounted()
 </script>
@@ -40,7 +44,7 @@ const isMounted = useMounted()
 <template>
   <Teleport
     v-if="isMounted || forceMount"
-    :to="to"
+    :to="target"
     :disabled="disabled"
     :defer="defer"
   >

package/src/Toggle/Toggle.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import type { FormFieldProps } from '@/shared/types'
-import { useFormControl, useForwardExpose } from '@/shared'
+import { useFormControl, useForwardExpose, useForwardScopeId } from '@/shared'
 import { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'
 import VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'
 
@@ -34,6 +34,10 @@ import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<ToggleProps>(), {
   modelValue: undefined,
   disabled: false,
@@ -56,6 +60,9 @@ defineSlots<{
 }>()
 
 const { forwardRef, currentElement } = useForwardExpose()
+// Hidden form input is a sibling (not nested) of the control to avoid the
+// `nested-interactive` a11y violation; forward the parent scope id for scoped styles.
+const scopeIdAttrs = useForwardScopeId()
 const toggleGroupContext = injectToggleGroupRootContext(null)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
@@ -84,6 +91,7 @@ const isFormControl = useFormControl(currentElement)
     :data-state="dataState"
     :data-disabled="disabled ? '' : undefined"
     :disabled="disabled"
+    v-bind="{ ...scopeIdAttrs, ...$attrs }"
     @click="togglePressed"
   >
     <slot
@@ -92,13 +100,14 @@ const isFormControl = useFormControl(currentElement)
       :pressed="modelValue"
       :state="dataState"
     />
-
-    <VisuallyHiddenInput
-      v-if="isFormControl && name && !toggleGroupContext"
-      type="checkbox"
-      :name="name"
-      :value="modelValue"
-      :required="required"
-    />
   </Primitive>
+
+  <VisuallyHiddenInput
+    v-if="isFormControl && name && !toggleGroupContext"
+    type="checkbox"
+    :name="name"
+    :value="modelValue"
+    :required="required"
+    v-bind="scopeIdAttrs"
+  />
 </template>

package/src/Toolbar/ToolbarToggleItem.vue

@@ -14,7 +14,10 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <ToolbarButton as-child>
+  <ToolbarButton
+    as-child
+    :disabled="props.disabled"
+  >
     <ToggleGroupItem
       v-bind="props"
       :ref="forwardRef"

package/src/Tree/TreeItem.vue

@@ -4,6 +4,8 @@ export interface TreeItemProps<T> extends PrimitiveProps {
   value: T
   /** Level of depth */
   level: number
+  /** When `true`, prevents the user from interacting with the item. */
+  disabled?: boolean
 }
 
 export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
@@ -45,6 +47,7 @@ defineSlots<{
     isExpanded: boolean
     isSelected: boolean
     isIndeterminate: boolean | undefined
+    isDisabled: boolean
     handleToggle: () => void
     handleSelect: () => void
   }) => any
@@ -81,7 +84,11 @@ const isIndeterminate = computed(() => {
   }
 })
 
+const isDisabled = computed(() => rootContext.disabled.value || props.disabled)
+
 function handleKeydownRight(ev: KeyboardEvent) {
+  if (isDisabled.value)
+    return
   if (!hasChildren.value)
     return
 
@@ -103,6 +110,8 @@ function handleKeydownRight(ev: KeyboardEvent) {
 }
 
 function handleKeydownLeft(ev: KeyboardEvent) {
+  if (isDisabled.value)
+    return
   if (isExpanded.value) {
     //  close expanded
     handleToggleCustomEvent(ev)
@@ -121,6 +130,8 @@ function handleKeydownLeft(ev: KeyboardEvent) {
 }
 
 async function handleSelect(ev: SelectEvent<T>) {
+  if (isDisabled.value)
+    return
   emits('select', ev)
   if (ev?.defaultPrevented)
     return
@@ -128,6 +139,8 @@ async function handleSelect(ev: SelectEvent<T>) {
   rootContext.onSelect(props.value)
 }
 async function handleToggle(ev: ToggleEvent<T>) {
+  if (isDisabled.value)
+    return
   emits('toggle', ev)
   if (ev?.defaultPrevented)
     return
@@ -155,6 +168,7 @@ defineExpose({
   isExpanded,
   isSelected,
   isIndeterminate,
+  isDisabled,
   handleToggle: () => rootContext.onToggle(props.value),
   handleSelect: () => rootContext.onSelect(props.value),
 })
@@ -165,6 +179,7 @@ defineExpose({
     as-child
     :value="value"
     allow-shift-key
+    :focusable="!isDisabled"
   >
     <Primitive
       v-bind="$attrs"
@@ -174,9 +189,11 @@ defineExpose({
       :aria-selected="isSelected"
       :aria-expanded="hasChildren ? isExpanded : undefined"
       :aria-level="level"
+      :aria-disabled="isDisabled ? true : undefined"
       :data-indent="level"
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
+      :data-disabled="isDisabled ? '' : undefined"
       @keydown.enter.space.self.prevent="handleSelectCustomEvent"
       @keydown.right.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
       @keydown.left.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
@@ -189,6 +206,7 @@ defineExpose({
         :is-expanded="isExpanded"
         :is-selected="isSelected"
         :is-indeterminate="isIndeterminate"
+        :is-disabled="isDisabled"
         :handle-select="() => rootContext.onSelect(value)"
         :handle-toggle="() => rootContext.onToggle(value)"
       />

package/src/Tree/TreeRoot.vue

@@ -26,9 +26,9 @@ export interface TreeRootProps<T = Record<string, any>, U extends Record<string,
   dir?: Direction
   /** When `true`, prevents the user from interacting with tree  */
   disabled?: boolean
-  /** When `true`, selecting parent will select the descendants. */
+  /** When `true`, selecting parent will select the descendants. Requires `multiple` to be `true`. */
   propagateSelect?: boolean
-  /** When `true`, selecting children will update the parent state. */
+  /** When `true`, selecting children will update the parent state. Requires `multiple` to be `true`. */
   bubbleSelect?: boolean
 }
 

package/src/Tree/TreeVirtualizer.vue

@@ -133,7 +133,9 @@ rootContext.virtualKeydownHook.on((event) => {
     const index = intent === 'first' ? 0 : rootContext.expandedItems.value.length - 1
     virtualizer.value.scrollToIndex(index)
     requestAnimationFrame(() => {
-      const items = getItems()
+      const items = getItems().filter(i => i.ref.dataset.disabled !== '')
+      if (!items.length)
+        return
       const item = intent === 'first' ? items[0] : items.at(-1)!
       item.ref.focus()
     })

package/src/VisuallyHidden/VisuallyHidden.vue

@@ -16,7 +16,7 @@ withDefaults(defineProps<VisuallyHiddenProps>(), { as: 'span', feature: 'focusab
   <Primitive
     :as="as"
     :as-child="asChild"
-    :aria-hidden="feature === 'focusable' ? 'true' : undefined"
+    :aria-hidden="feature === 'focusable' || feature === 'fully-hidden' ? 'true' : undefined"
     :data-hidden="feature === 'fully-hidden' ? '' : undefined"
     :tabindex="feature === 'fully-hidden' ? '-1' : undefined"
     :style="{

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './DateRangeField'
 export * from './DateRangePicker'
 export * from './Dialog'
 export { type FocusOutsideEvent, type PointerDownOutsideEvent } from './DismissableLayer'
+export * from './Drawer'
 export * from './DropdownMenu'
 export * from './Editable'
 export * from './FocusScope'
@@ -40,6 +41,7 @@ export { type AsTag, Primitive, type PrimitiveProps, Slot } from './Primitive'
 export * from './Progress'
 export * from './RadioGroup'
 export * from './RangeCalendar'
+export * from './Rating'
 export * from './RovingFocus'
 export * from './ScrollArea'
 export * from './Select'

package/src/shared/date/utils.ts

@@ -62,7 +62,7 @@ export function handleCalendarInitialFocus(calendar: HTMLElement) {
   if (today)
     return today.focus()
 
-  const firstDay = calendar.querySelector<HTMLElement>('[data-reka-calendar-day]')
+  const firstDay = calendar.querySelector<HTMLElement>('[data-value]:not([data-outside-view]):not([data-disabled])')
   if (firstDay)
     return firstDay.focus()
 }