WidgetDateRangeField

Source: client/lib/theme/vueda-tailwind/widgets/index.js

Pass-through hook for the segment shell. The shell recipe lives on DateRangeField.root.

Vue component: WidgetDateRangeField

Slot	Default classes	Description
field		Pass-through hook for the segment shell. The shell recipe lives on DateRangeField.root.
literal		Pass-through hook for the literal separators between date segments ("/"). Segment type comes from DateRangeFieldInput.root.
trigger	4 classes	Calendar popover trigger, pinned to the field's end edge so it lands where the WidgetCombobox.trigger chevron does. Muted at rest and inked on hover, because the segments, not this button, are the field's primary target.
triggerIcon	size-4 shrink-0 text-center leading-4 select-none	The trigger's glyph. Applied to a registered calendar icon and to the built-in fallback character alike, so a registry with no calendar entry still gets a sized glyph that inherits the trigger's color. An icon component that carries its own sizing keeps it: Font Awesome sizes by em, which matches the WidgetCombobox.trigger chevron.
separator	px-1 text-muted-foreground	The en dash between the start and end segment groups. Muted and padded so it reads as a range connector rather than another segment.
popoverContent		Pass-through hook for the calendar popover panel. The floating surface recipe lives on PopoverContent.root.

field

Pass-through hook for the segment shell. The shell recipe lives on DateRangeField.root.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:17

literal

Pass-through hook for the literal separators between date segments ("/"). Segment type comes from DateRangeFieldInput.root.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:21

trigger

Calendar popover trigger, pinned to the field's end edge so it lands where the WidgetCombobox.trigger chevron does. Muted at rest and inked on hover, because the segments, not this button, are the field's primary target.

Default classes:

ml-auto flex shrink-0 items-center justify-center cursor-pointer
text-muted-foreground hover:text-foreground transition-colors
disabled:pointer-events-none disabled:text-disabled-foreground
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:25

triggerIcon

The trigger's glyph. Applied to a registered calendar icon and to the built-in fallback character alike, so a registry with no calendar entry still gets a sized glyph that inherits the trigger's color. An icon component that carries its own sizing keeps it: Font Awesome sizes by em, which matches the WidgetCombobox.trigger chevron.

Default classes:

size-4 shrink-0 text-center leading-4 select-none

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:40

separator

The en dash between the start and end segment groups. Muted and padded so it reads as a range connector rather than another segment.

Default classes:

px-1 text-muted-foreground

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:44

popoverContent

Pass-through hook for the calendar popover panel. The floating surface recipe lives on PopoverContent.root.

Source: client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:48