bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,14 +1,13 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { untrack } from "svelte";
-import { CalendarGridBodyState, CalendarGridHeadState, CalendarGridRowState, CalendarGridState, CalendarHeadCellState, CalendarHeaderState, CalendarHeadingState, CalendarNextButtonState, CalendarPrevButtonState, } from "../calendar/calendar.svelte.js";
-import { getAnnouncer } from "../../shared/date/announcer.js";
-import { createFormatter } from "../../shared/date/formatter.js";
-import { useId } from "../../internal/useId.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { areAllDaysBetweenValid, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../shared/date/index.js";
-import { createMonths, getCalendarBitsAttr, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../shared/date/calendar-helpers.svelte.js";
+import { useRefById } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { CalendarRootContext } from "../calendar/calendar.svelte.js";
+import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
+import { getAnnouncer } from "../../internal/date-time/announcer.js";
+import { createFormatter } from "../../internal/date-time/formatter.js";
+import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { areAllDaysBetweenValid, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
 export class RangeCalendarRootState {
     id;
     ref;
@@ -91,7 +90,7 @@ export class RangeCalendarRootState {
             locale: this.locale,
             fixedWeeks: this.fixedWeeks,
             numberOfMonths: this.numberOfMonths,
-            setMonths: this.#setMonths,
+            setMonths: this.setMonths,
         });
         /**
          * Updates the displayed months based on changes in the options values,
@@ -102,7 +101,7 @@ export class RangeCalendarRootState {
             locale: this.locale,
             numberOfMonths: this.numberOfMonths,
             placeholder: this.placeholder,
-            setMonths: this.#setMonths,
+            setMonths: this.setMonths,
             weekStartsOn: this.weekStartsOn,
         });
         /**
@@ -115,69 +114,97 @@ export class RangeCalendarRootState {
                 return;
             node.textContent = this.fullCalendarLabel;
         });
+        /**
+         * Synchronize the start and end values with the `value` in case
+         * it is updated externally.
+         */
+        watch(() => this.value.current, (value) => {
+            if (value.start && value.end) {
+                this.startValue.current = value.start;
+                this.endValue.current = value.end;
+            }
+            else if (value.start) {
+                this.startValue.current = value.start;
+                this.endValue.current = undefined;
+            }
+            else if (value.start === undefined && value.end === undefined) {
+                this.startValue.current = undefined;
+                this.endValue.current = undefined;
+            }
+        });
         /**
          * Synchronize the placeholder value with the current start value
          */
-        $effect(() => {
-            this.value.current;
-            untrack(() => {
-                const startValue = this.value.current.start;
-                if (startValue && this.placeholder.current !== startValue) {
-                    this.placeholder.current = startValue;
-                }
-            });
+        watch(() => this.value.current, (value) => {
+            const startValue = value.start;
+            if (startValue && this.placeholder.current !== startValue) {
+                this.placeholder.current = startValue;
+            }
         });
-        $effect(() => {
-            const startValue = this.startValue.current;
-            const endValue = this.endValue.current;
-            untrack(() => {
-                const value = this.value.current;
-                if (value && value.start === startValue && value.end === endValue) {
-                    return;
-                }
-                if (startValue && endValue) {
-                    this.#updateValue((prev) => {
-                        if (prev.start === startValue && prev.end === endValue)
-                            return prev;
-                        if (isBefore(endValue, startValue)) {
-                            const start = startValue;
-                            const end = endValue;
-                            this.setStartValue(end);
-                            this.setEndValue(start);
-                            return { start: endValue, end: startValue };
-                        }
-                        else {
-                            return {
-                                start: startValue,
-                                end: endValue,
-                            };
-                        }
-                    });
-                }
-                else if (value && value.start && value.end) {
-                    this.value.current = {
-                        start: undefined,
-                        end: undefined,
-                    };
-                }
-            });
+        watch([() => this.startValue.current, () => this.endValue.current], ([startValue, endValue]) => {
+            if (this.value.current &&
+                this.value.current.start === startValue &&
+                this.value.current.end === endValue) {
+                return;
+            }
+            if (startValue && endValue) {
+                this.#updateValue((prev) => {
+                    if (prev.start === startValue && prev.end === endValue) {
+                        return prev;
+                    }
+                    if (isBefore(endValue, startValue)) {
+                        const start = startValue;
+                        const end = endValue;
+                        this.#setStartValue(end);
+                        this.#setEndValue(start);
+                        return { start: endValue, end: startValue };
+                    }
+                    else {
+                        return {
+                            start: startValue,
+                            end: endValue,
+                        };
+                    }
+                });
+            }
+            else if (this.value.current &&
+                this.value.current.start &&
+                this.value.current.end) {
+                this.value.current.start = undefined;
+                this.value.current.end = undefined;
+            }
         });
+        this.shiftFocus = this.shiftFocus.bind(this);
+        this.handleCellClick = this.handleCellClick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.nextPage = this.nextPage.bind(this);
+        this.prevPage = this.prevPage.bind(this);
+        this.nextYear = this.nextYear.bind(this);
+        this.prevYear = this.prevYear.bind(this);
+        this.setYear = this.setYear.bind(this);
+        this.setMonth = this.setMonth.bind(this);
+        this.isDateDisabled = this.isDateDisabled.bind(this);
+        this.isDateUnavailable = this.isDateUnavailable.bind(this);
+        this.isOutsideVisibleMonths = this.isOutsideVisibleMonths.bind(this);
+        this.isSelected = this.isSelected.bind(this);
     }
-    #updateValue = (cb) => {
+    #updateValue(cb) {
         const value = this.value.current;
         const newValue = cb(value);
         this.value.current = newValue;
         if (newValue.start && newValue.end) {
             this.onRangeSelect?.current?.();
         }
-    };
-    setStartValue = (value) => {
+    }
+    #setStartValue(value) {
         this.startValue.current = value;
-    };
-    setEndValue = (value) => {
+    }
+    #setEndValue(value) {
         this.endValue.current = value;
+    }
+    setMonths = (months) => {
+        this.months = months;
     };
-    #setMonths = (months) => (this.months = months);
     /**
      * This derived state holds an array of localized day names for the current
      * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
@@ -192,10 +219,10 @@ export class RangeCalendarRootState {
             weekdayFormat: this.weekdayFormat.current,
         });
     });
-    isOutsideVisibleMonths = (date) => {
+    isOutsideVisibleMonths(date) {
         return !this.visibleMonths.some((month) => isSameMonth(date, month));
-    };
-    isDateDisabled = (date) => {
+    }
+    isDateDisabled(date) {
         if (this.isDateDisabledProp.current(date) || this.disabled.current)
             return true;
         const minValue = this.minValue.current;
@@ -205,12 +232,12 @@ export class RangeCalendarRootState {
         if (maxValue && isAfter(date, maxValue))
             return true;
         return false;
-    };
-    isDateUnavailable = (date) => {
+    }
+    isDateUnavailable(date) {
         if (this.isDateUnavailableProp.current(date))
             return true;
         return false;
-    };
+    }
     isStartInvalid = $derived.by(() => {
         if (!this.startValue.current)
             return false;
@@ -254,17 +281,17 @@ export class RangeCalendarRootState {
         });
     });
     fullCalendarLabel = $derived.by(() => `${this.calendarLabel.current} ${this.headingValue}`);
-    isSelectionStart = (date) => {
+    isSelectionStart(date) {
         if (!this.startValue.current)
             return false;
         return isSameDay(date, this.startValue.current);
-    };
-    isSelectionEnd = (date) => {
+    }
+    isSelectionEnd(date) {
         if (!this.endValue.current)
             return false;
         return isSameDay(date, this.endValue.current);
-    };
-    isSelected = (date) => {
+    }
+    isSelected(date) {
         if (this.startValue.current && isSameDay(this.startValue.current, date))
             return true;
         if (this.endValue.current && isSameDay(this.endValue.current, date))
@@ -273,7 +300,7 @@ export class RangeCalendarRootState {
             return isBetweenInclusive(date, this.startValue.current, this.endValue.current);
         }
         return false;
-    };
+    }
     highlightedRange = $derived.by(() => {
         if (this.startValue.current && this.endValue.current)
             return null;
@@ -297,7 +324,7 @@ export class RangeCalendarRootState {
         }
         return null;
     });
-    #shiftFocus = (node, add) => {
+    shiftFocus(node, add) {
         return shiftCalendarFocus({
             node,
             add,
@@ -308,17 +335,17 @@ export class RangeCalendarRootState {
             months: this.months,
             numberOfMonths: this.numberOfMonths.current,
         });
-    };
-    #announceEmpty = () => {
+    }
+    #announceEmpty() {
         this.announcer.announce("Selected date is now empty.", "polite");
-    };
-    #announceSelectedDate = (date) => {
+    }
+    #announceSelectedDate(date) {
         this.announcer.announce(`Selected Date: ${this.formatter.selectedDate(date, false)}`, "polite");
-    };
-    #announceSelectedRange = (start, end) => {
+    }
+    #announceSelectedRange(start, end) {
         this.announcer.announce(`Selected Dates: ${this.formatter.selectedDate(start, false)} to ${this.formatter.selectedDate(end, false)}`, "polite");
-    };
-    handleCellClick = (e, date) => {
+    }
+    handleCellClick(e, date) {
         if (this.isDateDisabled(date) || this.isDateUnavailable(date))
             return;
         const prevLastPressedDate = this.lastPressedDateValue;
@@ -327,7 +354,7 @@ export class RangeCalendarRootState {
             if (isSameDay(this.startValue.current, date) &&
                 !this.preventDeselect.current &&
                 !this.endValue.current) {
-                this.setStartValue(undefined);
+                this.#setStartValue(undefined);
                 this.placeholder.current = date;
                 this.#announceEmpty();
                 return;
@@ -335,7 +362,7 @@ export class RangeCalendarRootState {
             else if (!this.endValue.current) {
                 e.preventDefault();
                 if (prevLastPressedDate && isSameDay(prevLastPressedDate, date)) {
-                    this.setStartValue(date);
+                    this.#setStartValue(date);
                     this.#announceSelectedDate(date);
                 }
             }
@@ -344,79 +371,79 @@ export class RangeCalendarRootState {
             this.endValue.current &&
             isSameDay(this.endValue.current, date) &&
             !this.preventDeselect.current) {
-            this.setStartValue(undefined);
-            this.setEndValue(undefined);
+            this.#setStartValue(undefined);
+            this.#setEndValue(undefined);
             this.placeholder.current = date;
             this.#announceEmpty();
             return;
         }
         if (!this.startValue.current) {
             this.#announceSelectedDate(date);
-            this.setStartValue(date);
+            this.#setStartValue(date);
         }
         else if (!this.endValue.current) {
             this.#announceSelectedRange(this.startValue.current, date);
-            this.setEndValue(date);
+            this.#setEndValue(date);
         }
         else if (this.endValue.current && this.startValue.current) {
-            this.setEndValue(undefined);
+            this.#setEndValue(undefined);
             this.#announceSelectedDate(date);
-            this.setStartValue(date);
+            this.#setStartValue(date);
         }
-    };
-    #onkeydown = (event) => {
+    }
+    onkeydown(event) {
         return handleCalendarKeydown({
             event,
             handleCellClick: this.handleCellClick,
             placeholderValue: this.placeholder.current,
-            shiftFocus: this.#shiftFocus,
+            shiftFocus: this.shiftFocus,
         });
-    };
+    }
     /**
      * Navigates to the next page of the calendar.
      */
-    nextPage = () => {
+    nextPage() {
         handleCalendarNextPage({
             fixedWeeks: this.fixedWeeks.current,
             locale: this.locale.current,
             numberOfMonths: this.numberOfMonths.current,
             pagedNavigation: this.pagedNavigation.current,
-            setMonths: this.#setMonths,
+            setMonths: this.setMonths,
             setPlaceholder: (date) => (this.placeholder.current = date),
             weekStartsOn: this.weekStartsOn.current,
             months: this.months,
         });
-    };
+    }
     /**
      * Navigates to the previous page of the calendar.
      */
-    prevPage = () => {
+    prevPage() {
         handleCalendarPrevPage({
             fixedWeeks: this.fixedWeeks.current,
             locale: this.locale.current,
             numberOfMonths: this.numberOfMonths.current,
             pagedNavigation: this.pagedNavigation.current,
-            setMonths: this.#setMonths,
+            setMonths: this.setMonths,
             setPlaceholder: (date) => (this.placeholder.current = date),
             weekStartsOn: this.weekStartsOn.current,
             months: this.months,
         });
-    };
-    nextYear = () => {
+    }
+    nextYear() {
         this.placeholder.current = this.placeholder.current.add({ years: 1 });
-    };
-    prevYear = () => {
+    }
+    prevYear() {
         this.placeholder.current = this.placeholder.current.subtract({ years: 1 });
-    };
-    setYear = (year) => {
+    }
+    setYear(year) {
         this.placeholder.current = this.placeholder.current.set({ year });
-    };
-    setMonth = (month) => {
+    }
+    setMonth(month) {
         this.placeholder.current = this.placeholder.current.set({ month });
-    };
-    getBitsAttr = (part) => {
-        return getCalendarBitsAttr(this, part);
-    };
+    }
+    getBitsAttr(part) {
+        return `data-range-calendar-${part}`;
+    }
     snippetProps = $derived.by(() => ({
         months: this.months,
         weekdays: this.weekdays,
@@ -431,38 +458,8 @@ export class RangeCalendarRootState {
         }),
         [this.getBitsAttr("root")]: "",
         //
-        onkeydown: this.#onkeydown,
+        onkeydown: this.onkeydown,
     }));
-    createHeading = (props) => {
-        return new CalendarHeadingState(props, this);
-    };
-    createGrid = (props) => {
-        return new CalendarGridState(props, this);
-    };
-    createCell = (props) => {
-        return new RangeCalendarCellState(props, this);
-    };
-    createNextButton = (props) => {
-        return new CalendarNextButtonState(props, this);
-    };
-    createPrevButton = (props) => {
-        return new CalendarPrevButtonState(props, this);
-    };
-    createGridBody = (props) => {
-        return new CalendarGridBodyState(props, this);
-    };
-    createGridHead = (props) => {
-        return new CalendarGridHeadState(props, this);
-    };
-    createGridRow = (props) => {
-        return new CalendarGridRowState(props, this);
-    };
-    createHeadCell = (props) => {
-        return new CalendarHeadCellState(props, this);
-    };
-    createHeader = (props) => {
-        return new CalendarHeaderState(props, this);
-    };
 }
 export class RangeCalendarCellState {
     root;
@@ -472,7 +469,7 @@ export class RangeCalendarCellState {
     month;
     cellDate = $derived.by(() => toDate(this.date.current));
     isDisabled = $derived.by(() => this.root.isDateDisabled(this.date.current));
-    isUnvailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current));
+    isUnavailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current));
     isDateToday = $derived.by(() => isToday(this.date.current, getLocalTimeZone()));
     isOutsideMonth = $derived.by(() => !isSameMonth(this.date.current, this.month.current));
     isOutsideVisibleMonths = $derived.by(() => this.root.isOutsideVisibleMonths(this.date.current));
@@ -502,16 +499,16 @@ export class RangeCalendarCellState {
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
-        unavailable: this.isUnvailable,
+        unavailable: this.isUnavailable,
         selected: this.isSelectedDate,
     }));
     ariaDisabled = $derived.by(() => {
         return (this.isDisabled ||
             (this.isOutsideMonth && this.root.disableDaysOutsideMonth.current) ||
-            this.isUnvailable);
+            this.isUnavailable);
     });
     sharedDataAttrs = $derived.by(() => ({
-        "data-unavailable": getDataUnavailable(this.isUnvailable),
+        "data-unavailable": getDataUnavailable(this.isUnavailable),
         "data-today": this.isDateToday ? "" : undefined,
         "data-outside-month": this.isOutsideMonth ? "" : undefined,
         "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined,
@@ -532,9 +529,6 @@ export class RangeCalendarCellState {
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
     }));
-    createDay(props) {
-        return new RangeCalendarDayState(props, this);
-    }
 }
 class RangeCalendarDayState {
     cell;
@@ -548,6 +542,9 @@ class RangeCalendarDayState {
             id: this.id,
             ref: this.ref,
         });
+        this.onclick = this.onclick.bind(this);
+        this.onmouseenter = this.onmouseenter.bind(this);
+        this.onfocusin = this.onfocusin.bind(this);
     }
     #tabindex = $derived.by(() => this.cell.isFocusedDate
         ? 0
@@ -555,24 +552,24 @@ class RangeCalendarDayState {
             this.cell.isDisabled
             ? undefined
             : -1);
-    #onclick = (e) => {
+    onclick(e) {
         if (this.cell.isDisabled)
             return;
         this.cell.root.handleCellClick(e, this.cell.date.current);
-    };
-    #onmouseenter = () => {
+    }
+    onmouseenter(_) {
         if (this.cell.isDisabled)
             return;
         this.cell.root.focusedValue = this.cell.date.current;
-    };
-    #onfocusin = () => {
+    }
+    onfocusin(_) {
         if (this.cell.isDisabled)
             return;
         this.cell.root.focusedValue = this.cell.date.current;
-    };
+    }
     snippetProps = $derived.by(() => ({
         disabled: this.cell.isDisabled,
-        unavailable: this.cell.isUnvailable,
+        unavailable: this.cell.isUnavailable,
         selected: this.cell.isSelectedDate,
         day: `${this.cell.date.current.day}`,
     }));
@@ -587,19 +584,18 @@ class RangeCalendarDayState {
         // Shared logic for range calendar and calendar
         "data-bits-day": "",
         //
-        onclick: this.#onclick,
-        onmouseenter: this.#onmouseenter,
-        onfocusin: this.#onfocusin,
+        onclick: this.onclick,
+        onmouseenter: this.onmouseenter,
+        onfocusin: this.onfocusin,
     }));
 }
-const [setRangeCalendarRootContext, getRangeCalendarRootContext] = createContext(["Calendar.Root", "RangeCalendar.Root"], "Calendar.Root", false);
-const [setRangeCalendarCellContext, getRangeCalendarCellContext] = createContext("RangeCalendar.Cell");
+const RangeCalendarCellContext = new Context("RangeCalendar.Cell");
 export function useRangeCalendarRoot(props) {
-    return setRangeCalendarRootContext(new RangeCalendarRootState(props));
+    return CalendarRootContext.set(new RangeCalendarRootState(props));
 }
 export function useRangeCalendarCell(props) {
-    return setRangeCalendarCellContext(getRangeCalendarRootContext().createCell(props));
+    return RangeCalendarCellContext.set(new RangeCalendarCellState(props, CalendarRootContext.get()));
 }
 export function useRangeCalendarDay(props) {
-    return getRangeCalendarCellContext().createDay(props);
+    return new RangeCalendarDayState(props, RangeCalendarCellContext.get());
 }

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

@@ -1,8 +1,7 @@
 import type { DateValue } from "@internationalized/date";
-import type { DateMatcher, Month } from "../../shared/date/types.js";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { DateRange } from "../../shared/index.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { DateMatcher, DateRange, Month } from "../../shared/index.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type RangeCalendarRootSnippetProps = {
     months: Month<DateValue>[];
     weekdays: string[];
@@ -176,23 +175,6 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * only part of the value is changed/completed.
      */
     onEndValueChange?: OnChangeFn<DateValue | undefined>;
-    /**
-     * Whether or not the value is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
-    /**
-     * Whether or not the placeholder is controlled or not. If `true`, the component will not
-     * update the placeholder state internally, instead it will call `onPlaceholderChange` when
-     * it would have otherwise, and it is up to you to update the `value` prop that is passed
-     * to the component.
-     *
-     * @defaultValue false
-     */
-    controlledPlaceholder?: boolean;
 }, RangeCalendarRootSnippetProps>;
-export type RangeCalendarRootProps = RangeCalendarRootPropsWithoutHTML & Without<PrimitiveDivAttributes, RangeCalendarRootPropsWithoutHTML>;
+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";

package/dist/bits/scroll-area/components/scroll-area-corner-impl.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CornerProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ScrollAreaCornerProps } from "../types.js";
 	import { useScrollAreaCorner } from "../scroll-area.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +9,7 @@
 		children,
 		child,
 		...restProps
-	}: Omit<CornerProps, "id"> & {
+	}: Omit<ScrollAreaCornerProps, "id"> & {
 		id: string;
 	} = $props();
 

package/dist/bits/scroll-area/components/scroll-area-corner-impl.svelte.d.ts

@@ -1,21 +1,7 @@
-import type { CornerProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ScrollAreaCornerImpl: $$__sveltets_2_IsomorphicComponent<Omit<CornerProps, "id"> & {
+import type { ScrollAreaCornerProps } from "../types.js";
+type $$ComponentProps = Omit<ScrollAreaCornerProps, "id"> & {
     id: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ScrollAreaCornerImpl = InstanceType<typeof ScrollAreaCornerImpl>;
+};
+declare const ScrollAreaCornerImpl: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ScrollAreaCornerImpl = ReturnType<typeof ScrollAreaCornerImpl>;
 export default ScrollAreaCornerImpl;

package/dist/bits/scroll-area/components/scroll-area-corner.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { CornerProps } from "../index.js";
-	import { getScrollAreaRootContext } from "../scroll-area.svelte.js";
+	import type { ScrollAreaCornerProps } from "../types.js";
+	import { ScrollAreaRootContext } from "../scroll-area.svelte.js";
 	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
-	let { ref = $bindable(null), id = useId(), ...restProps }: CornerProps = $props();
+	let { ref = $bindable(null), id = useId(), ...restProps }: ScrollAreaCornerProps = $props();
 
-	const scrollAreaState = getScrollAreaRootContext();
+	const scrollAreaState = ScrollAreaRootContext.get();
 
 	const hasBothScrollbarsVisible = $derived(
 		Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode)