bits-ui 1.5.0 → 1.5.2

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

@@ -7,6 +7,7 @@ import type { DateMatcher, Month } from "../../shared/index.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type CalendarParts } from "../../internal/date-time/calendar-helpers.svelte.js";
+import type { WeekStartsOn } from "../../shared/date/types.js";
 type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateValue | undefined | DateValue[];
     placeholder: DateValue;
@@ -16,7 +17,7 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     maxValue: DateValue | undefined;
     disabled: boolean;
     pagedNavigation: boolean;
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekStartsOn: WeekStartsOn | undefined;
     weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
     isDateDisabled: DateMatcher;
     isDateUnavailable: DateMatcher;

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

@@ -18,7 +18,7 @@
 		placeholder = $bindable(),
 		onPlaceholderChange = noop,
 		weekdayFormat = "narrow",
-		weekStartsOn = 0,
+		weekStartsOn,
 		pagedNavigation = false,
 		isDateDisabled = () => false,
 		isDateUnavailable = () => false,

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -94,6 +94,7 @@ export declare class DateFieldRootState {
     };
     isInvalid: boolean;
     inferredGranularity: Granularity;
+    dateRef: DateValue;
     allSegmentContent: {
         obj: import("../../internal/date-time/field/types.js").SegmentContentObj;
         arr: {

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

@@ -317,12 +317,13 @@ export class DateFieldRootState {
         const inferred = inferGranularity(this.placeholder.current, this.granularity.current);
         return inferred;
     });
+    dateRef = $derived.by(() => this.value.current ?? this.placeholder.current);
     allSegmentContent = $derived.by(() => createContent({
         segmentValues: this.segmentValues,
         formatter: this.formatter,
         locale: this.locale.current,
         granularity: this.inferredGranularity,
-        dateRef: this.placeholder.current,
+        dateRef: this.dateRef,
         hideTimeZone: this.hideTimeZone.current,
         hourCycle: this.hourCycle.current,
     }));

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

@@ -35,7 +35,7 @@
 		disableDaysOutsideMonth = true,
 		preventDeselect = false,
 		pagedNavigation = false,
-		weekStartsOn = 0,
+		weekStartsOn,
 		weekdayFormat = "narrow",
 		isDateDisabled = () => false,
 		fixedWeeks = false,

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

@@ -22,7 +22,7 @@ type DatePickerRootStateProps = WritableBoxedValues<{
     required: boolean;
     preventDeselect: boolean;
     pagedNavigation: boolean;
-    weekStartsOn: WeekStartsOn;
+    weekStartsOn: WeekStartsOn | undefined;
     weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
     fixedWeeks: boolean;
     numberOfMonths: number;

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

@@ -37,7 +37,7 @@
 		disableDaysOutsideMonth = true,
 		preventDeselect = false,
 		pagedNavigation = false,
-		weekStartsOn = 0,
+		weekStartsOn,
 		weekdayFormat = "narrow",
 		isDateDisabled = () => false,
 		fixedWeeks = false,

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

@@ -24,7 +24,7 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     required: boolean;
     preventDeselect: boolean;
     pagedNavigation: boolean;
-    weekStartsOn: WeekStartsOn;
+    weekStartsOn: WeekStartsOn | undefined;
     weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
     fixedWeeks: boolean;
     numberOfMonths: number;

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -173,8 +173,7 @@ class NavigationMenuListState {
         });
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: opts.id,
-            candidateAttr: NAVIGATION_MENU_ITEM_ATTR,
-            candidateSelector: `:is([${NAVIGATION_MENU_TRIGGER_ATTR}], [data-list-link]):not([data-disabled])`,
+            candidateSelector: `:is([${NAVIGATION_MENU_TRIGGER_ATTR}], [${NAVIGATION_MENU_LINK_ATTR}]):not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
         });

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

@@ -18,7 +18,7 @@
 		placeholder = $bindable(),
 		onPlaceholderChange = noop,
 		weekdayFormat = "narrow",
-		weekStartsOn = 0,
+		weekStartsOn,
 		pagedNavigation = false,
 		isDateDisabled = () => false,
 		isDateUnavailable = () => false,

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

@@ -5,6 +5,7 @@ import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps }
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type CalendarParts } from "../../internal/date-time/calendar-helpers.svelte.js";
+import type { WeekStartsOn } from "../../shared/date/types.js";
 type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateRange;
     placeholder: DateValue;
@@ -16,7 +17,7 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     maxValue: DateValue | undefined;
     disabled: boolean;
     pagedNavigation: boolean;
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekStartsOn: WeekStartsOn | undefined;
     weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
     isDateDisabled: (date: DateValue) => boolean;
     isDateUnavailable: (date: DateValue) => boolean;

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -21,7 +21,7 @@ export type CreateMonthProps = {
     /**
      * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
      */
-    weekStartsOn: number;
+    weekStartsOn: number | undefined;
     /**
      * Whether to always render 6 weeks in the calendar, even if the month doesn't
      * span 6 weeks.
@@ -102,7 +102,7 @@ type HandleCalendarPageProps = {
     setMonths: (months: Month<DateValue>[]) => void;
     numberOfMonths: number;
     pagedNavigation: boolean;
-    weekStartsOn: number;
+    weekStartsOn: number | undefined;
     locale: string;
     fixedWeeks: boolean;
     setPlaceholder: (date: DateValue) => void;
@@ -116,7 +116,7 @@ type GetWeekdaysProps = {
 };
 export declare function getWeekdays({ months, formatter, weekdayFormat }: GetWeekdaysProps): string[];
 type UseMonthViewSyncProps = {
-    weekStartsOn: ReadableBox<number>;
+    weekStartsOn: ReadableBox<number | undefined>;
     locale: ReadableBox<string>;
     fixedWeeks: ReadableBox<boolean>;
     numberOfMonths: ReadableBox<number>;
@@ -141,7 +141,7 @@ export declare function createAccessibleHeading({ calendarNode, label, accessibl
 type UseMonthViewPlaceholderSyncProps = {
     placeholder: WritableBox<DateValue>;
     getVisibleMonths: () => DateValue[];
-    weekStartsOn: ReadableBox<number>;
+    weekStartsOn: ReadableBox<number | undefined>;
     locale: ReadableBox<string>;
     fixedWeeks: ReadableBox<boolean>;
     numberOfMonths: ReadableBox<number>;

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -52,8 +52,12 @@ function createMonth(props) {
     const datesArray = Array.from({ length: daysInMonth }, (_, i) => dateObj.set({ day: i + 1 }));
     const firstDayOfMonth = startOfMonth(dateObj);
     const lastDayOfMonth = endOfMonth(dateObj);
-    const lastSunday = getLastFirstDayOfWeek(firstDayOfMonth, weekStartsOn, locale);
-    const nextSaturday = getNextLastDayOfWeek(lastDayOfMonth, weekStartsOn, locale);
+    const lastSunday = weekStartsOn !== undefined
+        ? getLastFirstDayOfWeek(firstDayOfMonth, weekStartsOn, "en-US")
+        : getLastFirstDayOfWeek(firstDayOfMonth, 0, locale);
+    const nextSaturday = weekStartsOn !== undefined
+        ? getNextLastDayOfWeek(lastDayOfMonth, weekStartsOn, "en-US")
+        : getNextLastDayOfWeek(lastDayOfMonth, 0, locale);
     const lastMonthDays = getDaysBetween(lastSunday.subtract({ days: 1 }), firstDayOfMonth);
     const nextMonthDays = getDaysBetween(lastDayOfMonth, nextSaturday.add({ days: 1 }));
     const totalDays = lastMonthDays.length + datesArray.length + nextMonthDays.length;

package/dist/internal/use-roving-focus.svelte.d.ts

@@ -1,14 +1,18 @@
 import { type ReadableBox } from "svelte-toolbelt";
 import type { Orientation } from "../shared/index.js";
-type UseRovingFocusProps = {
+type UseRovingFocusProps = ({
     /**
      * The selector used to find the focusable candidates.
      */
     candidateAttr: string;
+    candidateSelector?: undefined;
+} | {
     /**
      * Custom candidate selector
      */
-    candidateSelector?: string;
+    candidateSelector: string;
+    candidateAttr?: undefined;
+}) & {
     /**
      * The id of the root node
      */

package/dist/internal/use-roving-focus.svelte.js

@@ -15,10 +15,11 @@ export function useRovingFocus(props) {
             const candidates = Array.from(node.querySelectorAll(props.candidateSelector));
             return candidates;
         }
-        else {
+        else if (props.candidateAttr) {
             const candidates = Array.from(node.querySelectorAll(`[${props.candidateAttr}]:not([data-disabled])`));
             return candidates;
         }
+        return [];
     }
     function focusFirstCandidate() {
         const items = getCandidateNodes();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",