bits-ui 1.7.0 → 1.8.0

package/dist/bits/navigation-menu/components/navigation-menu-item.svelte

@@ -10,6 +10,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		openOnHover = true,
 		...restProps
 	}: NavigationMenuItemProps = $props();
 
@@ -20,6 +21,7 @@
 			(v) => (ref = v)
 		),
 		value: box.with(() => value),
+		openOnHover: box.with(() => openOnHover),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/navigation-menu/components/navigation-menu-viewport.svelte

@@ -4,6 +4,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
+	import { Mounted } from "../../utilities/index.js";
 
 	let {
 		id = useId(),
@@ -34,5 +35,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:mounted={viewportState.mounted} />
 	{/snippet}
 </PresenceLayer>

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -9,6 +9,7 @@ import { SvelteMap } from "svelte/reactivity";
 import { type Direction, type Orientation } from "../../shared/index.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     dir: Direction;
     orientation: Orientation;
@@ -18,11 +19,11 @@ type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     previousValue: string;
 }> & {
     isRootMenu: boolean;
-    onTriggerEnter: (itemValue: string) => void;
+    onTriggerEnter: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onTriggerLeave?: () => void;
     onContentEnter?: () => void;
     onContentLeave?: () => void;
-    onItemSelect: (itemValue: string) => void;
+    onItemSelect: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onItemDismiss: () => void;
 };
 declare class NavigationMenuProviderState {
@@ -36,7 +37,10 @@ declare class NavigationMenuProviderState {
     onContentLeave: () => void;
     onItemSelect: NavigationMenuProviderStateProps["onItemSelect"];
     onItemDismiss: NavigationMenuProviderStateProps["onItemDismiss"];
+    activeItem: NavigationMenuItemState | null;
+    prevActiveItem: NavigationMenuItemState | null;
     constructor(opts: NavigationMenuProviderStateProps);
+    setActiveItem: (item: NavigationMenuItemState | null) => void;
 }
 type NavigationMenuRootStateProps = WithRefProps<WritableBoxedValues<{
     value: string;
@@ -53,7 +57,7 @@ declare class NavigationMenuRootState {
     previousValue: WritableBox<string>;
     isDelaySkipped: WritableBox<boolean>;
     constructor(opts: NavigationMenuRootStateProps);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -71,8 +75,9 @@ declare class NavigationMenuSubState {
     readonly opts: NavigationMenuSubStateProps;
     readonly context: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
+    subProvider: NavigationMenuProviderState;
     constructor(opts: NavigationMenuSubStateProps, context: NavigationMenuProviderState);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -102,6 +107,7 @@ declare class NavigationMenuListState {
 }
 type NavigationMenuItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;
+    openOnHover: boolean;
 }>>;
 export declare class NavigationMenuItemState {
     #private;
@@ -147,13 +153,14 @@ declare class NavigationMenuTriggerState {
         provider: NavigationMenuProviderState;
         item: NavigationMenuItemState;
         list: NavigationMenuListState;
+        sub: NavigationMenuSubState | null;
     });
     onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-    onpointermove: BitsPointerEventHandler<HTMLElement>;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
-    onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-    onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
-    focusProxyOnFocus: (e: BitsFocusEvent) => void;
+    onpointermove: PointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
+    onclick: MouseEventHandler<HTMLButtonElement>;
+    onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+    focusProxyOnFocus: FocusEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly disabled: boolean | null | undefined;
@@ -163,16 +170,16 @@ declare class NavigationMenuTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
         readonly "data-navigation-menu-trigger": "";
-        readonly onpointermove: BitsPointerEventHandler<HTMLElement>;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
         readonly onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-        readonly onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
     focusProxyProps: {
         readonly id: string;
         readonly tabindex: 0;
-        readonly onfocus: (e: BitsFocusEvent) => void;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
     };
     restructureSpanProps: {
         readonly "aria-owns": string | undefined;
@@ -183,6 +190,7 @@ type NavigationMenuLinkStateProps = WithRefProps & ReadableBoxedValues<{
     onSelect: (e: Event) => void;
 }>;
 declare class NavigationMenuLinkState {
+    #private;
     readonly opts: NavigationMenuLinkStateProps;
     readonly context: {
         provider: NavigationMenuProviderState;
@@ -197,6 +205,8 @@ declare class NavigationMenuLinkState {
     onkeydown: (e: BitsKeyboardEvent) => void;
     onfocus: (_: BitsFocusEvent) => void;
     onblur: (_: BitsFocusEvent) => void;
+    onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+    onpointermove: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly "data-active": "" | undefined;
@@ -206,6 +216,8 @@ declare class NavigationMenuLinkState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
         readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
         readonly "data-navigation-menu-link": "";
     };
 }
@@ -266,11 +278,11 @@ declare class NavigationMenuContentState {
         list: NavigationMenuListState;
     });
     onpointerenter: (_: BitsPointerEvent) => void;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly onpointerenter: (_: BitsPointerEvent) => void;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
     };
 }
 type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
@@ -309,6 +321,7 @@ declare class NavigationMenuViewportState {
     viewportWidth: string | undefined;
     viewportHeight: string | undefined;
     activeContentValue: string;
+    mounted: boolean;
     constructor(opts: NavigationMenuViewportImplStateProps, context: NavigationMenuProviderState);
     props: {
         readonly id: string;
@@ -338,5 +351,4 @@ export declare function useNavigationMenuLink(props: NavigationMenuLinkStateProp
 export declare function useNavigationMenuContentImpl(props: NavigationMenuContentImplStateProps, itemState?: NavigationMenuItemState): NavigationMenuContentImplState;
 export declare function useNavigationMenuViewport(props: NavigationMenuViewportImplStateProps): NavigationMenuViewportState;
 export declare function useNavigationMenuIndicator(): NavigationMenuIndicatorState;
-type BitsPointerEventHandler<T extends HTMLElement = HTMLElement> = (e: BitsPointerEvent<T>) => void;
 export {};

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

@@ -38,6 +38,8 @@ class NavigationMenuProviderState {
     onContentLeave = noop;
     onItemSelect;
     onItemDismiss;
+    activeItem = null;
+    prevActiveItem = null;
     constructor(opts) {
         this.opts = opts;
         this.onTriggerEnter = opts.onTriggerEnter;
@@ -47,6 +49,10 @@ class NavigationMenuProviderState {
         this.onItemDismiss = opts.onItemDismiss;
         this.onItemSelect = opts.onItemSelect;
     }
+    setActiveItem = (item) => {
+        this.prevActiveItem = this.activeItem;
+        this.activeItem = item;
+    };
 }
 class NavigationMenuRootState {
     opts;
@@ -74,8 +80,8 @@ class NavigationMenuRootState {
             orientation: this.opts.orientation,
             rootNavigationMenuRef: this.opts.ref,
             isRootMenu: true,
-            onTriggerEnter: (itemValue) => {
-                this.#onTriggerEnter(itemValue);
+            onTriggerEnter: (itemValue, itemState) => {
+                this.#onTriggerEnter(itemValue, itemState);
             },
             onTriggerLeave: this.#onTriggerLeave,
             onContentEnter: this.#onContentEnter,
@@ -84,34 +90,44 @@ class NavigationMenuRootState {
             onItemDismiss: this.#onItemDismiss,
         });
     }
-    #debouncedFn = useDebounce((val) => {
+    #debouncedFn = useDebounce((val, itemState) => {
         // passing `undefined` meant to reset the debounce timer
         if (typeof val === "string") {
-            this.setValue(val);
+            this.setValue(val, itemState);
         }
     }, () => this.#derivedDelay);
-    #onTriggerEnter = (itemValue) => {
-        this.#debouncedFn(itemValue);
+    #onTriggerEnter = (itemValue, itemState) => {
+        this.#debouncedFn(itemValue, itemState);
     };
     #onTriggerLeave = () => {
         this.isDelaySkipped.current = false;
-        this.#debouncedFn("");
+        this.#debouncedFn("", null);
     };
     #onContentEnter = () => {
-        this.#debouncedFn();
+        this.#debouncedFn(undefined, null);
     };
     #onContentLeave = () => {
-        this.#debouncedFn("");
+        if (this.provider.activeItem &&
+            this.provider.activeItem.opts.openOnHover.current === false) {
+            return;
+        }
+        this.#debouncedFn("", null);
     };
-    #onItemSelect = (itemValue) => {
-        this.setValue(itemValue);
+    #onItemSelect = (itemValue, itemState) => {
+        this.setValue(itemValue, itemState);
     };
     #onItemDismiss = () => {
-        this.setValue("");
+        this.setValue("", null);
     };
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
         this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.provider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -125,11 +141,12 @@ class NavigationMenuSubState {
     opts;
     context;
     previousValue = box("");
+    subProvider;
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
         useRefById(opts);
-        useNavigationMenuProvider({
+        this.subProvider = useNavigationMenuProvider({
             isRootMenu: false,
             value: this.opts.value,
             dir: this.context.opts.dir,
@@ -137,12 +154,19 @@ class NavigationMenuSubState {
             rootNavigationMenuRef: this.opts.ref,
             onTriggerEnter: this.setValue,
             onItemSelect: this.setValue,
-            onItemDismiss: () => this.setValue(""),
+            onItemDismiss: () => this.setValue("", null),
             previousValue: this.previousValue,
         });
     }
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
+        this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.subProvider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -281,28 +305,30 @@ class NavigationMenuTriggerState {
         if (this.opts.disabled.current ||
             this.wasClickClose ||
             this.itemContext.wasEscapeClose ||
-            this.hasPointerMoveOpened.current) {
+            this.hasPointerMoveOpened.current ||
+            !this.itemContext.opts.openOnHover.current) {
             return;
         }
-        this.context.onTriggerEnter(this.itemContext.opts.value.current);
+        this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
         this.hasPointerMoveOpened.current = true;
     });
     onpointerleave = whenMouse(() => {
-        if (this.opts.disabled.current)
+        if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current)
             return;
         this.context.onTriggerLeave();
         this.hasPointerMoveOpened.current = false;
     });
-    onclick = (_) => {
+    onclick = () => {
         // if opened via pointer move, we prevent the click event
         if (this.hasPointerMoveOpened.current)
             return;
-        const shouldClose = this.open && this.context.opts.isRootMenu;
+        const shouldClose = this.open &&
+            (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
         if (shouldClose) {
-            this.context.onItemSelect("");
+            this.context.onItemSelect("", null);
         }
         else if (!this.open) {
-            this.context.onItemSelect(this.itemContext.opts.value.current);
+            this.context.onItemSelect(this.itemContext.opts.value.current, this.itemContext);
         }
         this.wasClickClose = shouldClose;
     };
@@ -386,6 +412,23 @@ class NavigationMenuLinkState {
     onblur = (_) => {
         this.isFocused = false;
     };
+    #handlePointerDismiss = () => {
+        // only close submenu if this link is not inside the currently open submenu content
+        const currentlyOpenValue = this.context.provider.opts.value.current;
+        const isInsideOpenSubmenu = this.context.item.opts.value.current === currentlyOpenValue;
+        const activeItem = this.context.item.listContext.context.activeItem;
+        if (activeItem && !activeItem.opts.openOnHover.current)
+            return;
+        if (currentlyOpenValue && !isInsideOpenSubmenu) {
+            this.context.provider.onItemDismiss();
+        }
+    };
+    onpointerenter = () => {
+        this.#handlePointerDismiss();
+    };
+    onpointermove = whenMouse(() => {
+        this.#handlePointerDismiss();
+    });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-active": this.opts.active.current ? "" : undefined,
@@ -395,6 +438,8 @@ class NavigationMenuLinkState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        onpointerenter: this.onpointerenter,
+        onpointermove: this.onpointermove,
         [NAVIGATION_MENU_LINK_ATTR]: "",
     }));
 }
@@ -497,6 +542,8 @@ class NavigationMenuContentState {
         this.context.onContentEnter();
     };
     onpointerleave = whenMouse(() => {
+        if (!this.itemContext.opts.openOnHover.current)
+            return;
         this.context.onContentLeave();
     });
     props = $derived.by(() => ({
@@ -520,6 +567,11 @@ class NavigationMenuContentImplState {
         const prevIndex = values.indexOf(this.context.opts.previousValue.current);
         const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
         const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
+        // When all menus are closed, we want to reset motion state to prevent residual animations
+        if (!this.context.opts.value.current && !this.context.opts.previousValue.current) {
+            untrack(() => (this.prevMotionAttribute = null));
+            return null;
+        }
         // We only want to update selected and the last selected content
         // this avoids animations being interrupted outside of that range
         if (!isSelected && !wasSelected)
@@ -585,8 +637,17 @@ class NavigationMenuContentImplState {
         const target = e.target;
         const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
         const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
-        if (isTrigger || isRootViewport || !this.context.opts.isRootMenu)
+        if (!this.context.opts.isRootMenu && !isTrigger) {
+            this.context.onItemDismiss();
+            return;
+        }
+        if (isTrigger || isRootViewport) {
             e.preventDefault();
+            return;
+        }
+        if (!this.itemContext.opts.openOnHover.current) {
+            this.context.onItemSelect("", null);
+        }
     };
     onkeydown = (e) => {
         // prevent parent menus handling sub-menu keydown events
@@ -661,6 +722,7 @@ class NavigationMenuViewportState {
     viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
     viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
     activeContentValue = $derived.by(() => this.context.opts.value.current);
+    mounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
@@ -695,6 +757,12 @@ class NavigationMenuViewportState {
                 };
             }
         });
+        // reset size when viewport closes to prevent residual size animations
+        watch(() => this.mounted, () => {
+            if (!this.mounted && this.size) {
+                this.size = null;
+            }
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -714,6 +782,7 @@ const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
 export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
 const NavigationMenuListContext = new Context("NavigationMenu.List");
 const NavigationMenuContentContext = new Context("NavigationMenu.Content");
+const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
 export function useNavigationMenuRoot(props) {
     return new NavigationMenuRootState(props);
 }
@@ -740,6 +809,7 @@ export function useNavigationMenuTrigger(props) {
         provider: NavigationMenuProviderContext.get(),
         item: NavigationMenuItemContext.get(),
         list: NavigationMenuListContext.get(),
+        sub: NavigationMenuSubContext.getOr(null),
     });
 }
 export function useNavigationMenuContent(props) {

package/dist/bits/navigation-menu/types.d.ts

@@ -15,21 +15,22 @@ export type NavigationMenuRootPropsWithoutHTML = WithChild<{
      */
     onValueChange?: OnChangeFn<string>;
     /**
-     * The duration from when the mouse enters a trigger until the content opens.
+     * The amount of time in ms from when the mouse enters a trigger until the content opens.
      *
-     * @defaultValue 200
+     * @default 200
      */
     delayDuration?: number;
     /**
-     * How much time a user has to enter another trigger without incurring a delay again.
+     * The amount of time in ms that a user has to enter another trigger without
+     * incurring a delay again.
      *
-     * @defaultValue 300
+     * @default 300
      */
     skipDelayDuration?: number;
     /**
      * The reading direction of the content.
      *
-     * @defaultValue "ltr"
+     * @default "ltr"
      */
     dir?: Direction;
     /**
@@ -68,6 +69,13 @@ export type NavigationMenuItemPropsWithoutHTML = WithChild<{
      * The value of the menu item.
      */
     value?: string;
+    /**
+     * Whether to open the menu associated with the item when the item's trigger
+     * is hovered.
+     *
+     * @default true
+     */
+    openOnHover?: boolean;
 }>;
 export type NavigationMenuItemProps = NavigationMenuItemPropsWithoutHTML & Without<BitsPrimitiveLiAttributes, NavigationMenuItemPropsWithoutHTML>;
 export type NavigationMenuTriggerPropsWithoutHTML = WithChild<{
@@ -82,7 +90,6 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
     /**
      * Callback fired when an interaction occurs outside the content.
      * Default behavior can be prevented with `event.preventDefault()`
-     *
      */
     onInteractOutside?: (event: PointerEvent) => void;
     /**
@@ -108,7 +115,7 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
      * This is useful when wanting to use more custom transition and animation
      * libraries.
      *
-     * @defaultValue false
+     * @default false
      */
     forceMount?: boolean;
 }>;

package/dist/bits/slider/components/slider.svelte

@@ -22,6 +22,7 @@
 		dir = "ltr",
 		autoSort = true,
 		orientation = "horizontal",
+		thumbPositioning = "contain",
 		...restProps
 	}: SliderRootProps = $props();
 
@@ -63,6 +64,7 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		thumbPositioning: box.with(() => thumbPositioning),
 		type,
 	});
 

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

@@ -1,7 +1,7 @@
 import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
-import type { Direction, Orientation } from "../../shared/index.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
@@ -10,6 +10,7 @@ type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
+    thumbPositioning: SliderThumbPositioning;
 }>>;
 declare class SliderBaseRootState {
     #private;

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

@@ -46,6 +46,10 @@ class SliderBaseRootState {
         return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
     };
     getThumbScale = () => {
+        if (this.opts.thumbPositioning.current === "exact") {
+            // User opted out of containment
+            return [0, 100];
+        }
         const isVertical = this.opts.orientation.current === "vertical";
         // this assumes all thumbs are the same width
         const activeThumb = this.getAllThumbs()[0];

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

@@ -1,6 +1,6 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { Direction, Orientation } from "../../shared/index.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 export type SliderRootSnippetProps = {
     ticks: number[];
     thumbs: number[];
@@ -53,6 +53,12 @@ export type BaseSliderRootPropsWithoutHTML = {
      * @defaultValue false
      */
     disabled?: boolean;
+    /**
+     * The positioning of the slider thumb.
+     *
+     * @defaultValue "contain"
+     */
+    thumbPositioning?: SliderThumbPositioning;
 };
 export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
     /**

package/dist/shared/index.d.ts

@@ -12,6 +12,13 @@ export type StyleProperties = CSS.Properties & {
 };
 export type Orientation = "horizontal" | "vertical";
 export type Direction = "ltr" | "rtl";
+/**
+ * Controls positioning of the slider thumb.
+ *
+ * - `exact`: The thumb is centered exactly at the value of the slider.
+ * - `contain`: The thumb is centered exactly at the value of the slider, but will be contained within the slider track at the ends.
+ */
+export type SliderThumbPositioning = "exact" | "contain";
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithoutChildren<T> = T extends {
     children?: any;

package/package.json

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