bits-ui 0.10.1 → 0.10.3

package/dist/bits/accordion/ctx.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
 import { type Accordion as AccordionReturn, type CreateAccordionProps } from "@melt-ui/svelte";
 import type { ItemProps } from "./types.js";
-export declare const getAttrs: (part: "content" | "root" | "header" | "item" | "trigger") => Record<string, string>;
+export declare const getAttrs: (part: "content" | "header" | "root" | "item" | "trigger") => Record<string, string>;
 type GetReturn = AccordionReturn;
 export declare function setCtx<Multiple extends boolean>(props: CreateAccordionProps<Multiple>): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;

package/dist/bits/avatar/ctx.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateAvatarProps, type Avatar as AvatarReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "image" | "fallback") => Record<string, string>;
+export declare const getAttrs: (part: "image" | "root" | "fallback") => Record<string, string>;
 export declare function setCtx(props: CreateAvatarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

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

@@ -33,6 +33,14 @@ type Props<Multiple extends boolean = false> = Expand<OmitCalendarProps<CreateCa
      * A callback function called when the placeholder changes.
      */
     onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * If `true`, the calendar will focus the selected day,
+     * today, or the first day of the month in that order depending
+     * on what is visible when the calendar is mounted.
+     *
+     * @default false
+     */
+    initialFocus?: boolean;
 } & AsChild>;
 type PrevButtonProps = AsChild;
 type NextButtonProps = AsChild;

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

@@ -1,5 +1,7 @@
-<script>import { createDispatcher } from "../../../internal/events.js";
+<script>import { handleCalendarInitialFocus } from "../../../internal/focus.js";
+import { createDispatcher } from "../../../internal/events.js";
 import { melt } from "@melt-ui/svelte";
+import { onMount } from "svelte";
 import { setCtx, getAttrs } from "../ctx.js";
 export let placeholder = void 0;
 export let onPlaceholderChange = void 0;
@@ -22,6 +24,13 @@ export let multiple = false;
 export let asChild = false;
 export let id = void 0;
 export let numberOfMonths = void 0;
+export let initialFocus = false;
+let el = void 0;
+onMount(() => {
+  if (!initialFocus || !el)
+    return;
+  handleCalendarInitialFocus(el);
+});
 const {
   elements: { calendar },
   states: {
@@ -118,7 +127,12 @@ $:
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
+	<div
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+		bind:this={el}
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}

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

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateCalendarProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "date" | "root" | "header" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
+export declare const getAttrs: (part: "date" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
 export declare function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/checkbox/ctx.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type Checkbox as CheckboxReturn, type CreateCheckboxProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "input" | "indicator") => Record<string, string>;
+export declare const getAttrs: (part: "input" | "root" | "indicator") => Record<string, string>;
 export declare function setCtx(props: CreateCheckboxProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/radio-group/ctx.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
 import { type CreateRadioGroupProps, type RadioGroup as RadioGroupReturn } from "@melt-ui/svelte";
 import type { Readable } from "svelte/store";
-export declare const getAttrs: (part: "root" | "item" | "input" | "item-indicator") => Record<string, string>;
+export declare const getAttrs: (part: "input" | "root" | "item" | "item-indicator") => Record<string, string>;
 export declare function setCtx(props: CreateRadioGroupProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

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

@@ -8,10 +8,39 @@ import type { DateRange } from "../../shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateRangeCalendarProps } from "@melt-ui/svelte";
 type Props = Expand<Omit<CreateRangeCalendarProps, "placeholder" | "defaultPlaceholder" | "value" | "defaultValue" | "onPlaceholderChange" | "onValueChange" | "ids"> & {
-    placeholder?: DateValue;
+    /**
+     * The selected date range. This updates as the user selects
+     * date ranges in the calendar.
+     *
+     * You can bind this to a value to programmatically control the
+     * value state.
+     */
     value?: DateRange;
-    onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * A callback function called when the value changes.
+     */
     onValueChange?: OnChangeFn<DateRange>;
+    /**
+     * The placeholder date, used to display the calendar when no
+     * date is selected. This updates as the user navigates
+     * the calendar.
+     *
+     * You can bind this to a value to programmatically control the
+     * placeholder state.
+     */
+    placeholder?: DateValue;
+    /**
+     * A callback function called when the placeholder changes.
+     */
+    onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * If `true`, the calendar will focus the selected day,
+     * today, or the first day of the month in that order depending
+     * on what is visible when the calendar is mounted.
+     *
+     * @default false
+     */
+    initialFocus?: boolean;
 } & AsChild>;
 type PrevButtonProps = AsChild;
 type NextButtonProps = AsChild;

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

@@ -1,6 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { setCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
+import { onMount } from "svelte";
+import { handleCalendarInitialFocus } from "../../../internal/focus.js";
 export let placeholder = void 0;
 export let onPlaceholderChange = void 0;
 export let value = void 0;
@@ -20,6 +22,13 @@ export let calendarLabel = void 0;
 export let asChild = false;
 export let id = void 0;
 export let weekdayFormat = void 0;
+export let initialFocus = false;
+let el = void 0;
+onMount(() => {
+  if (!initialFocus || !el)
+    return;
+  handleCalendarInitialFocus(el);
+});
 const {
   elements: { calendar },
   states: {
@@ -112,7 +121,12 @@ $:
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
+	<div
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+		bind:this={el}
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}

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

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateRangeCalendarProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "date" | "root" | "header" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
+export declare const getAttrs: (part: "date" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
 export declare function setCtx(props: CreateRangeCalendarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/select/components/select-trigger.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
             } & {
                 [x: `data-melt-${string}`]: "";
             } & {
-                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "input">;
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "click">;
             };
         };
     };

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

@@ -2,7 +2,7 @@
 import { type CreateSelectProps, type Select as SelectReturn } from "@melt-ui/svelte";
 import type { Writable } from "svelte/store";
 import type { FloatingProps } from "../floating/_types.js";
-export declare const getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "item" | "trigger" | "input" | "indicator") => Record<string, string>;
+export declare const getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
 type GetReturn = SelectReturn;
 export declare function getCtx(): GetReturn;
 type Items<T> = {
@@ -26,7 +26,7 @@ export declare function setCtx<T = unknown, M extends boolean = false>(props: Pr
             update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
             set: (this: void, value: boolean) => void;
             subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
-        }, Writable<HTMLElement | null>, Writable<boolean>, Writable<string>, Writable<string>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "input">, ([$open, $highlightedItem, $disabled, $menuId, $triggerId, $labelId]: [boolean, HTMLElement | null, boolean, string, string, string]) => {
+        }, Writable<HTMLElement | null>, Writable<boolean>, Writable<string>, Writable<string>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "click">, ([$open, $highlightedItem, $disabled, $menuId, $triggerId, $labelId]: [boolean, HTMLElement | null, boolean, string, string, string]) => {
             readonly 'aria-activedescendant': string | undefined;
             readonly 'aria-autocomplete': "list";
             readonly 'aria-controls': string;

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

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateSliderProps, type Slider as SliderReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "input" | "range" | "thumb" | "tick") => Record<string, string>;
+export declare const getAttrs: (part: "input" | "root" | "range" | "thumb" | "tick") => Record<string, string>;
 export declare function setCtx(props: CreateSliderProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/switch/ctx.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateSwitchProps, type Switch as SwitchReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "input" | "thumb") => Record<string, string>;
+export declare const getAttrs: (part: "input" | "root" | "thumb") => Record<string, string>;
 export declare function setCtx(props: CreateSwitchProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/toggle/ctx.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateToggleProps, type Toggle as ToggleReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "input") => Record<string, string>;
+export declare const getAttrs: (part: "input" | "root") => Record<string, string>;
 export declare function setCtx(props: CreateToggleProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/internal/focus.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Handles `initialFocus` prop behavior for the
+ * Calendar & RangeCalendar components.
+ */
+export declare function handleCalendarInitialFocus(calendar: HTMLElement): void;
+export declare function focusWithoutScroll(element: HTMLElement): void;

package/dist/internal/focus.js

@@ -0,0 +1,26 @@
+import { isBrowser } from ".";
+/**
+ * Handles `initialFocus` prop behavior for the
+ * Calendar & RangeCalendar components.
+ */
+export function handleCalendarInitialFocus(calendar) {
+    if (!isBrowser)
+        return;
+    const selectedDay = calendar.querySelector("[data-selected]");
+    if (selectedDay)
+        return focusWithoutScroll(selectedDay);
+    const today = calendar.querySelector("[data-today]");
+    if (today)
+        return focusWithoutScroll(today);
+    const firstDay = calendar.querySelector("[data-calendar-date]");
+    if (firstDay)
+        return focusWithoutScroll(firstDay);
+}
+export function focusWithoutScroll(element) {
+    const scrollPosition = {
+        x: window.pageXOffset || document.documentElement.scrollLeft,
+        y: window.pageYOffset || document.documentElement.scrollTop
+    };
+    element.focus();
+    window.scrollTo(scrollPosition.x, scrollPosition.y);
+}

package/dist/internal/index.d.ts

@@ -8,3 +8,4 @@ export * from "./sleep.js";
 export * from "./style.js";
 export * from "./types.js";
 export * from "./updater.js";
+export * from "./focus.js";

package/dist/internal/index.js

@@ -8,3 +8,4 @@ export * from "./sleep.js";
 export * from "./style.js";
 export * from "./types.js";
 export * from "./updater.js";
+export * from "./focus.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {
@@ -74,7 +74,7 @@
   "type": "module",
   "dependencies": {
     "@internationalized/date": "^3.5.0",
-    "@melt-ui/svelte": "0.64.3",
+    "@melt-ui/svelte": "0.64.4",
     "nanoid": "^5.0.4"
   },
   "peerDependencies": {