bits-ui 2.4.0 → 2.5.0

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(),

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

@@ -20,7 +20,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * The placeholder date, used to control the view of the
      * calendar when no value is present.
      *
-     * @defaultValue the current date
+     * @default the current date
      */
     placeholder?: DateValue;
     /**
@@ -28,11 +28,23 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * changes.
      */
     onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * 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 or not users can deselect a date once selected
      * without selecting another date.
      *
-     * @defaultValue false
+     * @default false
      */
     preventDeselect?: boolean;
     /**
@@ -46,7 +58,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
     /**
      * Whether or not the calendar is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -60,7 +72,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * February), clicking the next button changes the view to March and April. If `pagedNavigation`
      * is `false`, the view shifts to February and March.
      *
-     * @defaultValue false
+     * @default false
      */
     pagedNavigation?: boolean;
     /**
@@ -68,7 +80,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * be a number between 0 and 6, where 0 is Sunday and 6 is
      * Saturday.
      *
-     * @defaultValue 0 (Sunday)
+     * @default 0 (Sunday)
      */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**
@@ -81,7 +93,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * - "narrow": "S", "M", "T", etc.
      *```
      *
-     * @defaultValue "narrow"
+     * @default "narrow"
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
      */
@@ -119,14 +131,14 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * To display 6 weeks per month, you will need to render out the previous
      * and next month's dates in the calendar as well.
      *
-     * @defaultValue false
+     * @default false
      */
     fixedWeeks?: boolean;
     /**
      * Determines the number of months to display on the calendar simultaneously.
      * For navigation between months, refer to the `pagedNavigation` prop.
      *
-     * @defaultValue 1
+     * @default 1
      */
     numberOfMonths?: number;
     /**
@@ -143,7 +155,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
     /**
      * The default locale setting.
      *
-     * @defaultValue 'en'
+     * @default 'en'
      */
     locale?: string;
     /**
@@ -152,7 +164,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * dates. @see disabled for a similar prop that prevents focusing
      * and selecting dates.
      *
-     * @defaultValue false
+     * @default false
      */
     readonly?: boolean;
     /**
@@ -160,9 +172,17 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * days outside the current month are rendered to fill the calendar grid, but they
      * are not selectable. Setting this prop to `true` will disable this behavior.
      *
-     * @defaultValue false
+     * @default false
      */
     disableDaysOutsideMonth?: boolean;
+    /**
+     * 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;
     /**
      * A callback function called when the start value changes. This doesn't necessarily mean
      * the `value` has updated and should be used to apply cosmetic changes to the calendar when
@@ -175,6 +195,18 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * only part of the value is changed/completed.
      */
     onEndValueChange?: OnChangeFn<DateValue | undefined>;
+    /**
+     * 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);
 }, RangeCalendarRootSnippetProps>;
 export type RangeCalendarRootProps = RangeCalendarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RangeCalendarRootPropsWithoutHTML>;
-export type { CalendarPrevButtonProps as RangeCalendarPrevButtonProps, CalendarPrevButtonPropsWithoutHTML as RangeCalendarPrevButtonPropsWithoutHTML, CalendarNextButtonProps as RangeCalendarNextButtonProps, CalendarNextButtonPropsWithoutHTML as RangeCalendarNextButtonPropsWithoutHTML, CalendarHeadingProps as RangeCalendarHeadingProps, CalendarHeadingPropsWithoutHTML as RangeCalendarHeadingPropsWithoutHTML, CalendarGridProps as RangeCalendarGridProps, CalendarGridPropsWithoutHTML as RangeCalendarGridPropsWithoutHTML, CalendarCellProps as RangeCalendarCellProps, CalendarCellPropsWithoutHTML as RangeCalendarCellPropsWithoutHTML, CalendarDayProps as RangeCalendarDayProps, CalendarDayPropsWithoutHTML as RangeCalendarDayPropsWithoutHTML, CalendarGridBodyProps as RangeCalendarGridBodyProps, CalendarGridBodyPropsWithoutHTML as RangeCalendarGridBodyPropsWithoutHTML, CalendarGridHeadProps as RangeCalendarGridHeadProps, CalendarGridHeadPropsWithoutHTML as RangeCalendarGridHeadPropsWithoutHTML, CalendarGridRowProps as RangeCalendarGridRowProps, CalendarGridRowPropsWithoutHTML as RangeCalendarGridRowPropsWithoutHTML, CalendarHeadCellProps as RangeCalendarHeadCellProps, CalendarHeadCellPropsWithoutHTML as RangeCalendarHeadCellPropsWithoutHTML, CalendarHeaderProps as RangeCalendarHeaderProps, CalendarHeaderPropsWithoutHTML as RangeCalendarHeaderPropsWithoutHTML, } from "../calendar/types.js";
+export type { CalendarPrevButtonProps as RangeCalendarPrevButtonProps, CalendarPrevButtonPropsWithoutHTML as RangeCalendarPrevButtonPropsWithoutHTML, CalendarNextButtonProps as RangeCalendarNextButtonProps, CalendarNextButtonPropsWithoutHTML as RangeCalendarNextButtonPropsWithoutHTML, CalendarHeadingProps as RangeCalendarHeadingProps, CalendarHeadingPropsWithoutHTML as RangeCalendarHeadingPropsWithoutHTML, CalendarGridProps as RangeCalendarGridProps, CalendarGridPropsWithoutHTML as RangeCalendarGridPropsWithoutHTML, CalendarCellProps as RangeCalendarCellProps, CalendarCellPropsWithoutHTML as RangeCalendarCellPropsWithoutHTML, CalendarDayProps as RangeCalendarDayProps, CalendarDayPropsWithoutHTML as RangeCalendarDayPropsWithoutHTML, CalendarGridBodyProps as RangeCalendarGridBodyProps, CalendarGridBodyPropsWithoutHTML as RangeCalendarGridBodyPropsWithoutHTML, CalendarGridHeadProps as RangeCalendarGridHeadProps, CalendarGridHeadPropsWithoutHTML as RangeCalendarGridHeadPropsWithoutHTML, CalendarGridRowProps as RangeCalendarGridRowProps, CalendarGridRowPropsWithoutHTML as RangeCalendarGridRowPropsWithoutHTML, CalendarHeadCellProps as RangeCalendarHeadCellProps, CalendarHeadCellPropsWithoutHTML as RangeCalendarHeadCellPropsWithoutHTML, CalendarHeaderProps as RangeCalendarHeaderProps, CalendarHeaderPropsWithoutHTML as RangeCalendarHeaderPropsWithoutHTML, CalendarMonthSelectProps as RangeCalendarMonthSelectProps, CalendarMonthSelectPropsWithoutHTML as RangeCalendarMonthSelectPropsWithoutHTML, CalendarYearSelectProps as RangeCalendarYearSelectProps, CalendarYearSelectPropsWithoutHTML as RangeCalendarYearSelectPropsWithoutHTML, } from "../calendar/types.js";

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -506,7 +506,7 @@ class ScrollAreaScrollbarSharedState {
                 if (isScrollbarWheel)
                     this.handleWheelScroll(e, maxScrollPos);
             };
-            const unsubListener = addEventListener(document, "wheel", handleWheel, {
+            const unsubListener = addEventListener(this.root.domContext.getDocument(), "wheel", handleWheel, {
                 passive: false,
             });
             return unsubListener;

package/dist/bits/select/components/select-hidden-input.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useSelectHiddenInput } from "../select.svelte.js";
+	import type { HTMLInputAttributes } from "svelte/elements";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	let { value = $bindable("") }: { value?: string } = $props();
+	let {
+		value = $bindable(""),
+		autocomplete,
+	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
 
 	const hiddenInputState = useSelectHiddenInput({
 		value: box.with(() => value),
@@ -11,5 +15,5 @@
 </script>
 
 {#if hiddenInputState.shouldRender}
-	<HiddenInput {...hiddenInputState.props} bind:value />
+	<HiddenInput {...hiddenInputState.props} bind:value {autocomplete} />
 {/if}

package/dist/bits/select/components/select-hidden-input.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     value?: string;
-};
+} & Omit<HTMLInputAttributes, "value">;
 declare const SelectHiddenInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type SelectHiddenInput = ReturnType<typeof SelectHiddenInput>;
 export default SelectHiddenInput;

package/dist/bits/select/components/select.svelte

@@ -20,6 +20,7 @@
 		required = false,
 		items = [],
 		allowDeselect = false,
+		autocomplete,
 		children,
 	}: SelectRootProps = $props();
 
@@ -79,9 +80,9 @@
 {#if Array.isArray(rootState.opts.value.current)}
 	{#if rootState.opts.value.current.length}
 		{#each rootState.opts.value.current as item (item)}
-			<SelectHiddenInput value={item} />
+			<SelectHiddenInput value={item} {autocomplete} />
 		{/each}
 	{/if}
 {:else}
-	<SelectHiddenInput bind:value={rootState.opts.value.current as string} />
+	<SelectHiddenInput bind:value={rootState.opts.value.current as string} {autocomplete} />
 {/if}

package/dist/bits/select/types.d.ts

@@ -5,6 +5,7 @@ import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { HTMLInputAttributes } from "svelte/elements";
 export type SelectBaseRootPropsWithoutHTML = WithChildren<{
     /**
      * Whether the combobox is disabled.
@@ -74,6 +75,10 @@ export type SelectBaseRootPropsWithoutHTML = WithChildren<{
      * This is only applicable to `type="single"` selects/comboboxes.
      */
     allowDeselect?: boolean;
+    /**
+     * The autocomplete attribute to forward to the hidden input element.
+     */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
 }>;
 export type SelectSingleRootPropsWithoutHTML = {
     /**

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

@@ -1,4 +1,4 @@
-import { type Box, type ReadableBox } from "svelte-toolbelt";
+import { type Box, type ReadableBox, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
@@ -22,6 +22,7 @@ declare class SliderBaseRootState {
     isActive: boolean;
     direction: "rl" | "lr" | "tb" | "bt";
     normalizedSteps: number[];
+    domContext: DOMContext;
     constructor(opts: SliderBaseRootStateProps);
     isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];

package/dist/bits/slider/slider.svelte.js

@@ -3,7 +3,7 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, onMountEffect, attachRef, } from "svelte-toolbelt";
+import { executeCallbacks, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
@@ -31,8 +31,10 @@ class SliderBaseRootState {
     normalizedSteps = $derived.by(() => {
         return normalizeSteps(this.opts.step.current, this.opts.min.current, this.opts.max.current);
     });
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
     }
     isThumbActive(_index) {
         return this.isActive;
@@ -101,7 +103,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -191,7 +193,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         const closestThumb = this.getAllThumbs()[0];
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();
@@ -286,7 +288,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -405,7 +407,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         const closestThumb = this.#getClosestThumb(e);
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();

package/dist/bits/utilities/escape-layer/escape-layer.svelte

@@ -9,12 +9,14 @@
 		onEscapeKeydown = noop,
 		children,
 		enabled,
+		ref,
 	}: EscapeLayerImplProps = $props();
 
 	useEscapeLayer({
 		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
 		enabled: box.with(() => enabled),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/escape-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { Box } from "svelte-toolbelt";
 export type EscapeBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
 export type EscapeLayerProps = {
     /**
@@ -24,4 +25,5 @@ export type EscapeLayerImplProps = {
      */
     enabled: boolean;
     children?: Snippet;
+    ref: Box<HTMLElement | null>;
 } & EscapeLayerProps;

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.d.ts

@@ -1,9 +1,13 @@
+import { DOMContext, type Box } from "svelte-toolbelt";
 import type { EscapeLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
+type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> & {
+    ref: Box<HTMLElement | null>;
+};
 export declare class EscapeLayerState {
     #private;
     readonly opts: EscapeLayerStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: EscapeLayerStateProps);
 }
 export declare function useEscapeLayer(props: EscapeLayerStateProps): EscapeLayerState;

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.js

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { kbd } from "../../../internal/kbd.js";
@@ -5,8 +6,10 @@ import { noop } from "../../../internal/noop.js";
 globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
     opts;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
         let unsubEvents = noop;
         watch(() => opts.enabled.current, (enabled) => {
             if (enabled) {
@@ -20,7 +23,7 @@ export class EscapeLayerState {
         });
     }
     #addEventListener = () => {
-        return on(document, "keydown", this.#onkeydown, { passive: false });
+        return on(this.domContext.getDocument(), "keydown", this.#onkeydown, { passive: false });
     };
     #onkeydown = (e) => {
         if (e.key !== kbd.ESCAPE || !isResponsibleEscapeLayer(this))

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -183,6 +183,8 @@ class FloatingContentState {
                 return cleanup;
             },
             open: () => this.opts.enabled.current,
+            sideOffset: () => this.opts.sideOffset.current,
+            alignOffset: () => this.opts.alignOffset.current,
         });
         $effect(() => {
             if (!this.floating.isPositioned)

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -91,7 +91,7 @@
 			{ref}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
-				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
 					<DismissibleLayer
 						{id}
 						{onInteractOutside}

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

@@ -181,7 +181,7 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
     readonly "data-disabled": "" | undefined;
     readonly "data-readonly": "" | undefined;
 };
-export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
+export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading" | "month-select" | "year-select";
 export declare function pickerOpenFocus(e: Event): void;
 export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): DateValue | undefined;
 /**
@@ -198,5 +198,11 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     defaultPlaceholder: DateValue;
 }): void;
 export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
-export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading"]>;
+export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
+type GetDefaultYearsProps = {
+    placeholderYear: number;
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+};
+export declare function getDefaultYears(opts: GetDefaultYearsProps): number[];
 export {};