bits-ui 2.4.1 → 2.6.0

package/dist/bits/date-picker/types.d.ts

@@ -226,6 +226,18 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{
      * date is invalid.
      */
     errorMessageId?: string;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }>;
 export type DatePickerRootProps = DatePickerRootPropsWithoutHTML;
 export type { PopoverTriggerPropsWithoutHTML as DatePickerTriggerPropsWithoutHTML, PopoverTriggerProps as DatePickerTriggerProps, PopoverContentPropsWithoutHTML as DatePickerContentPropsWithoutHTML, PopoverContentProps as DatePickerContentProps, PopoverContentStaticPropsWithoutHTML as DatePickerContentStaticPropsWithoutHTML, PopoverContentStaticProps as DatePickerContentStaticProps, PopoverArrowPropsWithoutHTML as DatePickerArrowPropsWithoutHTML, PopoverArrowProps as DatePickerArrowProps, PopoverClosePropsWithoutHTML as DatePickerClosePropsWithoutHTML, PopoverCloseProps as DatePickerCloseProps, } from "../popover/types.js";
@@ -234,4 +246,4 @@ export type DatePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnipp
 export type DatePickerCalendarProps = DatePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DatePickerCalendarPropsWithoutHTML>;
 export type DatePickerPortalPropsWithoutHTML = PortalProps;
 export type DatePickerPortalProps = DatePickerPortalPropsWithoutHTML;
-export type { CalendarCellPropsWithoutHTML as DatePickerCellPropsWithoutHTML, CalendarCellProps as DatePickerCellProps, CalendarDayPropsWithoutHTML as DatePickerDayPropsWithoutHTML, CalendarDayProps as DatePickerDayProps, CalendarGridPropsWithoutHTML as DatePickerGridPropsWithoutHTML, CalendarGridProps as DatePickerGridProps, CalendarGridBodyPropsWithoutHTML as DatePickerGridBodyPropsWithoutHTML, CalendarGridBodyProps as DatePickerGridBodyProps, CalendarGridHeadPropsWithoutHTML as DatePickerGridHeadPropsWithoutHTML, CalendarGridHeadProps as DatePickerGridHeadProps, CalendarGridRowPropsWithoutHTML as DatePickerGridRowPropsWithoutHTML, CalendarGridRowProps as DatePickerGridRowProps, CalendarHeadCellPropsWithoutHTML as DatePickerHeadCellPropsWithoutHTML, CalendarHeadCellProps as DatePickerHeadCellProps, CalendarHeaderPropsWithoutHTML as DatePickerHeaderPropsWithoutHTML, CalendarHeaderProps as DatePickerHeaderProps, CalendarHeadingPropsWithoutHTML as DatePickerHeadingPropsWithoutHTML, CalendarHeadingProps as DatePickerHeadingProps, CalendarNextButtonPropsWithoutHTML as DatePickerNextButtonPropsWithoutHTML, CalendarNextButtonProps as DatePickerNextButtonProps, CalendarPrevButtonPropsWithoutHTML as DatePickerPrevButtonPropsWithoutHTML, CalendarPrevButtonProps as DatePickerPrevButtonProps, } from "../calendar/types.js";
+export type { CalendarCellPropsWithoutHTML as DatePickerCellPropsWithoutHTML, CalendarCellProps as DatePickerCellProps, CalendarDayPropsWithoutHTML as DatePickerDayPropsWithoutHTML, CalendarDayProps as DatePickerDayProps, CalendarGridPropsWithoutHTML as DatePickerGridPropsWithoutHTML, CalendarGridProps as DatePickerGridProps, CalendarGridBodyPropsWithoutHTML as DatePickerGridBodyPropsWithoutHTML, CalendarGridBodyProps as DatePickerGridBodyProps, CalendarGridHeadPropsWithoutHTML as DatePickerGridHeadPropsWithoutHTML, CalendarGridHeadProps as DatePickerGridHeadProps, CalendarGridRowPropsWithoutHTML as DatePickerGridRowPropsWithoutHTML, CalendarGridRowProps as DatePickerGridRowProps, CalendarHeadCellPropsWithoutHTML as DatePickerHeadCellPropsWithoutHTML, CalendarHeadCellProps as DatePickerHeadCellProps, CalendarHeaderPropsWithoutHTML as DatePickerHeaderPropsWithoutHTML, CalendarHeaderProps as DatePickerHeaderProps, CalendarHeadingPropsWithoutHTML as DatePickerHeadingPropsWithoutHTML, CalendarHeadingProps as DatePickerHeadingProps, CalendarNextButtonPropsWithoutHTML as DatePickerNextButtonPropsWithoutHTML, CalendarNextButtonProps as DatePickerNextButtonProps, CalendarPrevButtonPropsWithoutHTML as DatePickerPrevButtonPropsWithoutHTML, CalendarPrevButtonProps as DatePickerPrevButtonProps, CalendarMonthSelectProps as DatePickerMonthSelectProps, CalendarMonthSelectPropsWithoutHTML as DatePickerMonthSelectPropsWithoutHTML, CalendarYearSelectProps as DatePickerYearSelectProps, CalendarYearSelectPropsWithoutHTML as DatePickerYearSelectPropsWithoutHTML, } from "../calendar/types.js";

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -26,7 +26,11 @@ export class DateRangeFieldRootState {
     domContext;
     constructor(opts) {
         this.opts = opts;
-        this.formatter = createFormatter(this.opts.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.opts.locale.current,
+            monthFormat: box.with(() => "long"),
+            yearFormat: box.with(() => "numeric"),
+        });
         this.domContext = new DOMContext(this.opts.ref);
         onDestroyEffect(() => {
             removeDescriptionElement(this.descriptionId, this.domContext.getDocument());

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -40,10 +40,15 @@
 		minValue: dateRangePickerRootState.opts.minValue,
 		placeholder: dateRangePickerRootState.opts.placeholder,
 		value: dateRangePickerRootState.opts.value,
+		excludeDisabled: dateRangePickerRootState.opts.excludeDisabled,
 		onRangeSelect: dateRangePickerRootState.opts.onRangeSelect,
 		startValue: dateRangePickerRootState.opts.startValue,
 		endValue: dateRangePickerRootState.opts.endValue,
 		defaultPlaceholder: dateRangePickerRootState.opts.defaultPlaceholder,
+		minDays: dateRangePickerRootState.opts.minDays,
+		maxDays: dateRangePickerRootState.opts.maxDays,
+		monthFormat: dateRangePickerRootState.opts.monthFormat,
+		yearFormat: dateRangePickerRootState.opts.yearFormat,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rangeCalendarState.props));

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -48,8 +48,13 @@
 		onEndValueChange = noop,
 		validate = noop,
 		errorMessageId,
+		minDays,
+		maxDays,
+		excludeDisabled = false,
 		child,
 		children,
+		monthFormat = "long",
+		yearFormat = "numeric",
 		...restProps
 	}: DateRangePickerRootProps = $props();
 
@@ -132,6 +137,8 @@
 		isDateUnavailable: box.with(() => isDateUnavailable),
 		minValue: box.with(() => minValue),
 		maxValue: box.with(() => maxValue),
+		minDays: box.with(() => minDays),
+		maxDays: box.with(() => maxDays),
 		disabled: box.with(() => disabled),
 		readonly: box.with(() => readonly),
 		granularity: box.with(() => granularity),
@@ -149,6 +156,7 @@
 		isDateDisabled: box.with(() => isDateDisabled),
 		fixedWeeks: box.with(() => fixedWeeks),
 		numberOfMonths: box.with(() => numberOfMonths),
+		excludeDisabled: box.with(() => excludeDisabled),
 		onRangeSelect: box.with(() => onRangeSelect),
 		startValue: box.with(
 			() => startValue,
@@ -164,6 +172,8 @@
 				onEndValueChange(v);
 			}
 		),
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 		defaultPlaceholder,
 	});
 

package/dist/bits/date-range-picker/date-range-picker.svelte.d.ts

@@ -15,6 +15,8 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     isDateDisabled: DateMatcher;
     minValue: DateValue | undefined;
     maxValue: DateValue | undefined;
+    minDays: number | undefined;
+    maxDays: number | undefined;
     disabled: boolean;
     readonly: boolean;
     granularity: Granularity | undefined;
@@ -30,7 +32,10 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     numberOfMonths: number;
     calendarLabel: string;
     disableDaysOutsideMonth: boolean;
+    excludeDisabled: boolean;
     onRangeSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 };

package/dist/bits/date-range-picker/exports.d.ts

@@ -16,6 +16,8 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
 export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";
-export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, } from "./types.js";
+export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, DateRangePickerMonthSelectProps as MonthSelectProps, DateRangePickerYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/date-range-picker/exports.js

@@ -16,5 +16,7 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
 export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";

package/dist/bits/date-range-picker/types.d.ts

@@ -233,10 +233,42 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{
      * date is invalid.
      */
     errorMessageId?: string;
+    /**
+     * The minimum number of days that can be selected in a range.
+     *
+     * @default undefined
+     */
+    minDays?: number;
+    /**
+     * The maximum number of days that can be selected in a range.
+     *
+     * @default undefined
+     */
+    maxDays?: number;
+    /**
+     * Whether to automatically reset the range if any date within the selected range
+     * becomes disabled. When true, the entire range will be cleared if a disabled
+     * date is found between the start and end dates.
+     *
+     * @default false
+     */
+    excludeDisabled?: boolean;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }>;
 export type DateRangePickerRootProps = DateRangePickerRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerRootPropsWithoutHTML>;
 export type { PopoverTriggerPropsWithoutHTML as DateRangePickerTriggerPropsWithoutHTML, PopoverTriggerProps as DateRangePickerTriggerProps, PopoverContentPropsWithoutHTML as DateRangePickerContentPropsWithoutHTML, PopoverContentProps as DateRangePickerContentProps, PopoverArrowPropsWithoutHTML as DateRangePickerArrowPropsWithoutHTML, PopoverArrowProps as DateRangePickerArrowProps, PopoverClosePropsWithoutHTML as DateRangePickerClosePropsWithoutHTML, PopoverCloseProps as DateRangePickerCloseProps, } from "../popover/types.js";
 export type { DateRangeFieldInputPropsWithoutHTML as DateRangePickerInputPropsWithoutHTML, DateRangeFieldInputProps as DateRangePickerInputProps, DateRangeFieldLabelPropsWithoutHTML as DateRangePickerLabelPropsWithoutHTML, DateRangeFieldLabelProps as DateRangePickerLabelProps, DateRangeFieldSegmentPropsWithoutHTML as DateRangePickerSegmentPropsWithoutHTML, DateRangeFieldSegmentProps as DateRangePickerSegmentProps, } from "../date-range-field/types.js";
 export type DateRangePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnippetProps>;
 export type DateRangePickerCalendarProps = DateRangePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerCalendarPropsWithoutHTML>;
-export type { RangeCalendarCellPropsWithoutHTML as DateRangePickerCellPropsWithoutHTML, RangeCalendarCellProps as DateRangePickerCellProps, RangeCalendarDayPropsWithoutHTML as DateRangePickerDayPropsWithoutHTML, RangeCalendarDayProps as DateRangePickerDayProps, RangeCalendarGridPropsWithoutHTML as DateRangePickerGridPropsWithoutHTML, RangeCalendarGridProps as DateRangePickerGridProps, RangeCalendarGridBodyPropsWithoutHTML as DateRangePickerGridBodyPropsWithoutHTML, RangeCalendarGridBodyProps as DateRangePickerGridBodyProps, RangeCalendarGridHeadPropsWithoutHTML as DateRangePickerGridHeadPropsWithoutHTML, RangeCalendarGridHeadProps as DateRangePickerGridHeadProps, RangeCalendarGridRowPropsWithoutHTML as DateRangePickerGridRowPropsWithoutHTML, RangeCalendarGridRowProps as DateRangePickerGridRowProps, RangeCalendarHeadCellPropsWithoutHTML as DateRangePickerHeadCellPropsWithoutHTML, RangeCalendarHeadCellProps as DateRangePickerHeadCellProps, RangeCalendarHeaderPropsWithoutHTML as DateRangePickerHeaderPropsWithoutHTML, RangeCalendarHeaderProps as DateRangePickerHeaderProps, RangeCalendarHeadingPropsWithoutHTML as DateRangePickerHeadingPropsWithoutHTML, RangeCalendarHeadingProps as DateRangePickerHeadingProps, RangeCalendarNextButtonPropsWithoutHTML as DateRangePickerNextButtonPropsWithoutHTML, RangeCalendarNextButtonProps as DateRangePickerNextButtonProps, RangeCalendarPrevButtonPropsWithoutHTML as DateRangePickerPrevButtonPropsWithoutHTML, RangeCalendarPrevButtonProps as DateRangePickerPrevButtonProps, } from "../range-calendar/types.js";
+export type { RangeCalendarCellPropsWithoutHTML as DateRangePickerCellPropsWithoutHTML, RangeCalendarCellProps as DateRangePickerCellProps, RangeCalendarDayPropsWithoutHTML as DateRangePickerDayPropsWithoutHTML, RangeCalendarDayProps as DateRangePickerDayProps, RangeCalendarGridPropsWithoutHTML as DateRangePickerGridPropsWithoutHTML, RangeCalendarGridProps as DateRangePickerGridProps, RangeCalendarGridBodyPropsWithoutHTML as DateRangePickerGridBodyPropsWithoutHTML, RangeCalendarGridBodyProps as DateRangePickerGridBodyProps, RangeCalendarGridHeadPropsWithoutHTML as DateRangePickerGridHeadPropsWithoutHTML, RangeCalendarGridHeadProps as DateRangePickerGridHeadProps, RangeCalendarGridRowPropsWithoutHTML as DateRangePickerGridRowPropsWithoutHTML, RangeCalendarGridRowProps as DateRangePickerGridRowProps, RangeCalendarHeadCellPropsWithoutHTML as DateRangePickerHeadCellPropsWithoutHTML, RangeCalendarHeadCellProps as DateRangePickerHeadCellProps, RangeCalendarHeaderPropsWithoutHTML as DateRangePickerHeaderPropsWithoutHTML, RangeCalendarHeaderProps as DateRangePickerHeaderProps, RangeCalendarHeadingPropsWithoutHTML as DateRangePickerHeadingPropsWithoutHTML, RangeCalendarHeadingProps as DateRangePickerHeadingProps, RangeCalendarNextButtonPropsWithoutHTML as DateRangePickerNextButtonPropsWithoutHTML, RangeCalendarNextButtonProps as DateRangePickerNextButtonProps, RangeCalendarPrevButtonPropsWithoutHTML as DateRangePickerPrevButtonPropsWithoutHTML, RangeCalendarPrevButtonProps as DateRangePickerPrevButtonProps, RangeCalendarMonthSelectProps as DateRangePickerMonthSelectProps, RangeCalendarMonthSelectPropsWithoutHTML as DateRangePickerMonthSelectPropsWithoutHTML, RangeCalendarYearSelectProps as DateRangePickerYearSelectProps, RangeCalendarYearSelectPropsWithoutHTML as DateRangePickerYearSelectPropsWithoutHTML, } from "../range-calendar/types.js";

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -35,8 +35,13 @@
 		maxValue = undefined,
 		preventDeselect = false,
 		disableDaysOutsideMonth = true,
+		minDays,
+		maxDays,
 		onStartValueChange = noop,
 		onEndValueChange = noop,
+		excludeDisabled = false,
+		monthFormat = "long",
+		yearFormat = "numeric",
 		...restProps
 	}: RangeCalendarRootProps = $props();
 
@@ -112,6 +117,9 @@
 		calendarLabel: box.with(() => calendarLabel),
 		fixedWeeks: box.with(() => fixedWeeks),
 		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
+		minDays: box.with(() => minDays),
+		maxDays: box.with(() => maxDays),
+		excludeDisabled: box.with(() => excludeDisabled),
 		startValue: box.with(
 			() => startValue,
 			(v) => {
@@ -126,6 +134,8 @@
 				onEndValueChange(v);
 			}
 		),
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 		defaultPlaceholder,
 	});
 

package/dist/bits/range-calendar/exports.d.ts

@@ -10,4 +10,6 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
-export type { RangeCalendarRootProps as RootProps, RangeCalendarPrevButtonProps as PrevButtonProps, RangeCalendarNextButtonProps as NextButtonProps, RangeCalendarHeadingProps as HeadingProps, RangeCalendarHeaderProps as HeaderProps, RangeCalendarGridProps as GridProps, RangeCalendarGridHeadProps as GridHeadProps, RangeCalendarHeadCellProps as HeadCellProps, RangeCalendarGridBodyProps as GridBodyProps, RangeCalendarCellProps as CellProps, RangeCalendarGridRowProps as GridRowProps, RangeCalendarDayProps as DayProps, } from "./types.js";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
+export type { RangeCalendarRootProps as RootProps, RangeCalendarPrevButtonProps as PrevButtonProps, RangeCalendarNextButtonProps as NextButtonProps, RangeCalendarHeadingProps as HeadingProps, RangeCalendarHeaderProps as HeaderProps, RangeCalendarGridProps as GridProps, RangeCalendarGridHeadProps as GridHeadProps, RangeCalendarHeadCellProps as HeadCellProps, RangeCalendarGridBodyProps as GridBodyProps, RangeCalendarCellProps as CellProps, RangeCalendarGridRowProps as GridRowProps, RangeCalendarDayProps as DayProps, RangeCalendarMonthSelectProps as MonthSelectProps, RangeCalendarYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/range-calendar/exports.js

@@ -10,3 +10,5 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";

package/dist/bits/range-calendar/range-calendar.svelte.d.ts

@@ -28,11 +28,16 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     calendarLabel: string;
     readonly: boolean;
     disableDaysOutsideMonth: boolean;
+    excludeDisabled: boolean;
+    minDays: number | undefined;
+    maxDays: number | undefined;
     /**
      * This is strictly used by the `DateRangePicker` component to close the popover when a date range
      * is selected. It is not intended to be used by the user.
      */
     onRangeSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 }>;
@@ -66,6 +71,8 @@ export declare class RangeCalendarRootState {
         start: DateValue;
         end: DateValue;
     } | null;
+    readonly initialPlaceholderYear: number;
+    readonly defaultYears: number[];
     constructor(opts: RangeCalendarRootStateProps);
     setMonths: (months: Month<DateValue>[]) => void;
     isOutsideVisibleMonths(date: DateValue): boolean;
@@ -120,6 +127,10 @@ export declare class RangeCalendarCellState {
     readonly isFocusedDate: boolean;
     readonly isSelectedDate: boolean;
     readonly isSelectionStart: boolean;
+    readonly isRangeStart: boolean;
+    readonly isRangeEnd: boolean;
+    readonly isRangeMiddle: boolean;
+    readonly isSelectionMiddle: boolean;
     readonly isSelectionEnd: boolean;
     readonly isHighlighted: boolean;
     readonly labelText: string;
@@ -138,6 +149,9 @@ export declare class RangeCalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
@@ -152,6 +166,9 @@ export declare class RangeCalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
@@ -191,6 +208,9 @@ declare class RangeCalendarDayState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -6,9 +6,9 @@ import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
-import { onMount } from "svelte";
+import { onMount, untrack } from "svelte";
 export class RangeCalendarRootState {
     opts;
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
@@ -69,6 +69,8 @@ export class RangeCalendarRootState {
         });
     });
     headingValue = $derived.by(() => {
+        this.opts.monthFormat.current;
+        this.opts.yearFormat.current;
         return getCalendarHeadingValue({
             months: this.months,
             formatter: this.formatter,
@@ -93,11 +95,23 @@ export class RangeCalendarRootState {
             return range;
         return null;
     });
+    initialPlaceholderYear = $derived.by(() => untrack(() => this.opts.placeholder.current.year));
+    defaultYears = $derived.by(() => {
+        return getDefaultYears({
+            minValue: this.opts.minValue.current,
+            maxValue: this.opts.maxValue.current,
+            placeholderYear: this.initialPlaceholderYear,
+        });
+    });
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
-        this.formatter = createFormatter(this.opts.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.opts.locale.current,
+            monthFormat: this.opts.monthFormat,
+            yearFormat: this.opts.yearFormat,
+        });
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -105,7 +119,7 @@ export class RangeCalendarRootState {
             fixedWeeks: this.opts.fixedWeeks.current,
             numberOfMonths: this.opts.numberOfMonths.current,
         });
-        $effect(() => {
+        $effect.pre(() => {
             if (this.formatter.getLocale() === this.opts.locale.current)
                 return;
             this.formatter.setLocale(this.opts.locale.current);
@@ -175,6 +189,22 @@ export class RangeCalendarRootState {
                 this.opts.placeholder.current = startValue;
             }
         });
+        /**
+         * Check for disabled dates in the selected range when excludeDisabled is enabled
+         */
+        watch([
+            () => this.opts.startValue.current,
+            () => this.opts.endValue.current,
+            () => this.opts.excludeDisabled.current,
+        ], ([startValue, endValue, excludeDisabled]) => {
+            if (!excludeDisabled || !startValue || !endValue)
+                return;
+            if (this.#hasDisabledDatesInRange(startValue, endValue)) {
+                this.#setStartValue(undefined);
+                this.#setEndValue(undefined);
+                this.#announceEmpty();
+            }
+        });
         watch([() => this.opts.startValue.current, () => this.opts.endValue.current], ([startValue, endValue]) => {
             if (this.opts.value.current &&
                 this.opts.value.current.start === startValue &&
@@ -191,9 +221,19 @@ export class RangeCalendarRootState {
                         const end = endValue;
                         this.#setStartValue(end);
                         this.#setEndValue(start);
+                        if (!this.#isRangeValid(endValue, startValue)) {
+                            this.#setStartValue(startValue);
+                            this.#setEndValue(undefined);
+                            return { start: startValue, end: undefined };
+                        }
                         return { start: endValue, end: startValue };
                     }
                     else {
+                        if (!this.#isRangeValid(startValue, endValue)) {
+                            this.#setStartValue(endValue);
+                            this.#setEndValue(undefined);
+                            return { start: endValue, end: undefined };
+                        }
                         return {
                             start: startValue,
                             end: endValue,
@@ -240,9 +280,19 @@ export class RangeCalendarRootState {
     }
     #setStartValue(value) {
         this.opts.startValue.current = value;
+        // update the main value prop immediately for external consumers
+        this.#updateValue((prev) => ({
+            ...prev,
+            start: value,
+        }));
     }
     #setEndValue(value) {
         this.opts.endValue.current = value;
+        // update the main value prop immediately for external consumers
+        this.#updateValue((prev) => ({
+            ...prev,
+            end: value,
+        }));
     }
     setMonths = (months) => {
         this.months = months;
@@ -286,6 +336,26 @@ export class RangeCalendarRootState {
         }
         return false;
     }
+    #isRangeValid(start, end) {
+        // ensure we always use the correct order for calculation
+        const orderedStart = isBefore(end, start) ? end : start;
+        const orderedEnd = isBefore(end, start) ? start : end;
+        const startDate = orderedStart.toDate(getLocalTimeZone());
+        const endDate = orderedEnd.toDate(getLocalTimeZone());
+        const timeDifference = endDate.getTime() - startDate.getTime();
+        const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+        const daysInRange = daysDifference + 1; // +1 to include both start and end days
+        if (this.opts.minDays.current && daysInRange < this.opts.minDays.current)
+            return false;
+        if (this.opts.maxDays.current && daysInRange > this.opts.maxDays.current)
+            return false;
+        // check for disabled dates in range if excludeDisabled is enabled
+        if (this.opts.excludeDisabled.current &&
+            this.#hasDisabledDatesInRange(orderedStart, orderedEnd)) {
+            return false;
+        }
+        return true;
+    }
     shiftFocus(node, add) {
         return shiftCalendarFocus({
             node,
@@ -344,8 +414,32 @@ export class RangeCalendarRootState {
             this.#setStartValue(date);
         }
         else if (!this.opts.endValue.current) {
-            this.#announceSelectedRange(this.opts.startValue.current, date);
-            this.#setEndValue(date);
+            // determine the start and end dates for validation
+            const startDate = this.opts.startValue.current;
+            const endDate = date;
+            const orderedStart = isBefore(endDate, startDate) ? endDate : startDate;
+            const orderedEnd = isBefore(endDate, startDate) ? startDate : endDate;
+            // check if the range violates constraints
+            if (!this.#isRangeValid(orderedStart, orderedEnd)) {
+                // reset to just the clicked date
+                this.#setStartValue(date);
+                this.#setEndValue(undefined);
+                this.#announceSelectedDate(date);
+            }
+            else {
+                // ensure start and end are properly ordered
+                if (isBefore(endDate, startDate)) {
+                    // backward selection - reorder the values
+                    this.#setStartValue(endDate);
+                    this.#setEndValue(startDate);
+                    this.#announceSelectedRange(endDate, startDate);
+                }
+                else {
+                    // forward selection - keep original order
+                    this.#setEndValue(date);
+                    this.#announceSelectedRange(this.opts.startValue.current, date);
+                }
+            }
         }
         else if (this.opts.endValue.current && this.opts.startValue.current) {
             this.#setEndValue(undefined);
@@ -423,6 +517,13 @@ export class RangeCalendarRootState {
         onkeydown: this.onkeydown,
         ...attachRef(this.opts.ref),
     }));
+    #hasDisabledDatesInRange(start, end) {
+        for (let date = start; isBefore(date, end) || isSameDay(date, end); date = date.add({ days: 1 })) {
+            if (this.isDateDisabled(date))
+                return true;
+        }
+        return false;
+    }
 }
 export class RangeCalendarCellState {
     opts;
@@ -436,6 +537,16 @@ export class RangeCalendarCellState {
     isFocusedDate = $derived.by(() => isSameDay(this.opts.date.current, this.root.opts.placeholder.current));
     isSelectedDate = $derived.by(() => this.root.isSelected(this.opts.date.current));
     isSelectionStart = $derived.by(() => this.root.isSelectionStart(this.opts.date.current));
+    isRangeStart = $derived.by(() => this.root.isSelectionStart(this.opts.date.current));
+    isRangeEnd = $derived.by(() => {
+        if (!this.root.opts.endValue.current)
+            return this.root.isSelectionStart(this.opts.date.current);
+        return this.root.isSelectionEnd(this.opts.date.current);
+    });
+    isRangeMiddle = $derived.by(() => this.isSelectionMiddle);
+    isSelectionMiddle = $derived.by(() => {
+        return this.isSelectedDate && !this.isSelectionStart && !this.isSelectionEnd;
+    });
     isSelectionEnd = $derived.by(() => this.root.isSelectionEnd(this.opts.date.current));
     isHighlighted = $derived.by(() => this.root.highlightedRange
         ? isBetweenInclusive(this.opts.date.current, this.root.highlightedRange.start, this.root.highlightedRange.end)
@@ -468,6 +579,9 @@ export class RangeCalendarCellState {
         "data-focused": this.isFocusedDate ? "" : undefined,
         "data-selection-start": this.isSelectionStart ? "" : undefined,
         "data-selection-end": this.isSelectionEnd ? "" : undefined,
+        "data-range-start": this.isRangeStart ? "" : undefined,
+        "data-range-end": this.isRangeEnd ? "" : undefined,
+        "data-range-middle": this.isRangeMiddle ? "" : undefined,
         "data-highlighted": this.isHighlighted ? "" : undefined,
         "data-selected": getDataSelected(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),