bits-ui 1.0.0-next.6 → 1.0.0-next.61

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

@@ -1,52 +1,50 @@
-import type { HTMLSelectAttributes } from "svelte/elements";
 import type { Expand } from "svelte-toolbelt";
-import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
+import type { PortalProps } from "../utilities/portal/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { Direction } from "../../shared/index.js";
-import type { PortalProps } from "../utilities/portal/index.js";
-export type SelectRootPropsWithoutHTML = WithChildren<{
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+export type SelectBaseRootPropsWithoutHTML = WithChildren<{
     /**
-     * The open state of the select.
-     */
-    open?: boolean;
-    /**
-     * A callback that is called when the select's open state changes.
-     */
-    onOpenChange?: OnChangeFn<boolean>;
-    /**
-     * The value of the select.
-     */
-    value?: string;
-    /**
-     * A callback that is called when the select's value changes.
+     * Whether the combobox is disabled.
+     *
+     * @defaultValue `false`
      */
-    onValueChange?: OnChangeFn<string>;
+    disabled?: boolean;
     /**
-     * The reading direction of the select.
+     * Whether the combobox is required (for form submission).
+     *
+     * @defaultValue `false`
      */
-    dir?: Direction;
+    required?: boolean;
     /**
-     * The name of the select used in form submission.
+     * The name to apply to the hidden input element for form submission.
+     * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
      */
     name?: string;
     /**
-     * The native HTML select autocomplete attribute.
+     * Whether the combobox popover is open.
+     *
+     * @defaultValue `false`
+     * @bindable
      */
-    autocomplete?: HTMLSelectAttributes["autocomplete"];
+    open?: boolean;
     /**
-     * The native HTML select `form` attribute.
+     * A callback function called when the open state changes.
      */
-    form?: string;
+    onOpenChange?: OnChangeFn<boolean>;
     /**
-     * Whether the select is disabled.
+     * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
+     *
+     * @defaultValue `false`
      */
-    disabled?: boolean;
+    loop?: boolean;
     /**
-     * Whether the select is required.
+     * How to scroll the combobox items into view when navigating with the keyboard.
+     *
+     * @defaultValue `"nearest"`
      */
-    required?: boolean;
+    scrollAlignment?: "nearest" | "center";
     /**
      * Whether or not the open state is controlled or not. If `true`, the component will not update
      * the open state internally, instead it will call `onOpenChange` when it would have
@@ -63,7 +61,74 @@ export type SelectRootPropsWithoutHTML = WithChildren<{
      * @defaultValue false
      */
     controlledValue?: boolean;
+    /**
+     * Optionally provide an array of `value` and `label` pairs that will be used to match
+     * and trigger selection when the trigger is focused and a key is pressed while the content
+     * is closed. It's also used to handle form autofill.
+     *
+     * By providing this value, you enable selecting a value when the trigger is focused and a key
+     * is pressed without the content being open, similar to how a native `<select>` works.
+     * For this to work, you must
+     *
+     * The label is what the user will potentially search for via typeahead, and the value is what
+     * is set as the selected value when a typeahead match is found.
+     *
+     * We can't rely on the individual `Item` components to do this because they may not ever be
+     * mounted to do the DOM if using a conditional block with a Svelte transition or certain
+     * animation libraries.
+     *
+     * IMPORTANT: This functionality is only available for single-select listboxes.
+     */
+    items?: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    /**
+     * Whether to allow the user to deselect an item by clicking on an already selected item.
+     * This is only applicable to `type="single"` selects/comboboxes.
+     */
+    allowDeselect?: boolean;
 }>;
+export type SelectSingleRootPropsWithoutHTML = {
+    /**
+     * The value of the selected combobox item.
+     *
+     * @bindable
+     */
+    value?: string;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * The type of combobox.
+     *
+     * @required
+     */
+    type: "single";
+};
+export type SelectMultipleRootPropsWithoutHTML = {
+    /**
+     * The value of the selected combobox item.
+     *
+     * @bindable
+     */
+    value?: string[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string[]>;
+    /**
+     * The type of combobox.
+     *
+     * @required
+     */
+    type: "multiple";
+};
+export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSingleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & (SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
 export type SelectRootProps = SelectRootPropsWithoutHTML;
 export type _SharedSelectContentProps = {
     /**
@@ -73,79 +138,68 @@ export type _SharedSelectContentProps = {
      */
     loop?: boolean;
 };
-export type SelectContentImplPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerProps, "content"> & {
-    /**
-     *  The positioning mode to use
-     *
-     *  `item-aligned` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>
-     *  `floating  (default)` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
-     */
-    position?: "item-aligned" | "floating";
-} & _SharedSelectContentProps>>;
-export type SelectContentImplProps = SelectContentImplPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectContentImplPropsWithoutHTML>;
-export type SelectContentPropsWithoutHTML = SelectContentImplPropsWithoutHTML & {
+export type SelectContentSnippetProps = {
     /**
-     * Whether to force mount the content for use with certain animation libraries.
+     * Whether the content is open or closed. Used alongside the `forceMount` prop to conditionally
+     * render the content using Svelte transitions.
      */
-    forceMount?: boolean;
+    open: boolean;
 };
-export type SelectContentProps = SelectContentPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, SelectContentSnippetProps>>;
+export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, SelectContentSnippetProps>>;
+export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
+export type SelectTriggerPropsWithoutHTML = WithChild;
+export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
 export type SelectItemSnippetProps = {
     selected: boolean;
+    highlighted: boolean;
 };
 export type SelectItemPropsWithoutHTML = WithChild<{
     /**
      * The value of the item.
+     *
+     * @required
      */
     value: string;
     /**
-     * Whether the item is disabled.
-     *
-     * @defaultValue false
+     * The label of the item. If provided, this is the item that users will search for.
+     * If not provided, the value will be used as the label.
      */
-    disabled?: boolean;
+    label?: string;
     /**
-     * Optionally provide text to use for typeahead purposes.
+     * Whether the item is disabled.
      *
-     * By default, the typeahead behavior will use the `textContent` of the `SelectItemText`
-     * component. Use this prop if the text content is not suitable for typeahead.
+     * @defaultValue `false`
      */
-    textValue?: string;
-}, SelectItemSnippetProps>;
-export type SelectItemProps = SelectItemPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
-export type SelectTriggerPropsWithoutHTML = WithChild<{
+    disabled?: boolean;
     /**
-     * Whether the trigger is disabled.
-     *
-     * @defaultValue false
+     * A callback function called when the item is highlighted. This can be used as a
+     * replacement for `onfocus` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    disabled?: boolean | null | undefined;
-}>;
-export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
-export type SelectValuePropsWithoutHTML = WithChild<{
+    onHighlight?: () => void;
     /**
-     * The content to render inside the `Select.Value` when no `value` is set.
+     * A callback function called when the item is unhighlighted. This can be used as a
+     * replacement for `onblur` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    placeholder?: string;
-}>;
-export type SelectValueProps = SelectValuePropsWithoutHTML & Without<Omit<PrimitiveSpanAttributes, "id">, SelectValuePropsWithoutHTML>;
-export type SelectItemTextPropsWithoutHTML = WithChild;
-export type SelectItemTextProps = SelectItemTextPropsWithoutHTML & Without<PrimitiveSpanAttributes, SelectItemTextPropsWithoutHTML>;
-export type SelectViewportPropsWithoutHTML = WithChild;
-export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
-export type SelectPortalPropsWithoutHTML = PortalProps;
-export type SelectPortalProps = SelectPortalPropsWithoutHTML;
-export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
-export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
-export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
-export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;
-export type SelectIconPropsWithoutHTML = WithChild;
-export type SelectIconProps = SelectIconPropsWithoutHTML & Without<PrimitiveSpanAttributes, SelectIconPropsWithoutHTML>;
+    onUnhighlight?: () => void;
+}, SelectItemSnippetProps>;
+export type SelectItemProps = SelectItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
 export type SelectGroupPropsWithoutHTML = WithChild;
-export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
+export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
 export type SelectGroupHeadingPropsWithoutHTML = WithChild;
-export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
 export type SelectSeparatorPropsWithoutHTML = WithChild;
-export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<PrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+export type SelectPortalPropsWithoutHTML = PortalProps;
+export type SelectPortalProps = SelectPortalPropsWithoutHTML;
 export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type SelectArrowProps = ArrowProps;
+export type SelectViewportPropsWithoutHTML = WithChild;
+export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
+export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
+export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
+export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
+export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

package/dist/bits/separator/components/separator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSeparatorRoot } from "../separator.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { SeparatorRootProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -13,7 +12,7 @@
 		decorative = false,
 		orientation = "horizontal",
 		...restProps
-	}: RootProps = $props();
+	}: SeparatorRootProps = $props();
 
 	const rootState = useSeparatorRoot({
 		ref: box.with(

package/dist/bits/separator/components/separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { SeparatorRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Separator: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Separator: $$__sveltets_2_IsomorphicComponent<SeparatorRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type Separator = InstanceType<typeof Separator>;

package/dist/bits/separator/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/separator.svelte";
+export type { SeparatorRootProps as RootProps } from "./types.js";

package/dist/bits/separator/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/separator.svelte";

package/dist/bits/separator/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/separator.svelte";
-export type { SeparatorRootProps as RootProps } from "./types.js";
+export * as Separator from "./exports.js";

package/dist/bits/separator/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/separator.svelte";
+export * as Separator from "./exports.js";

package/dist/bits/separator/separator.svelte.js

@@ -1,5 +1,5 @@
+import { useRefById } from "svelte-toolbelt";
 import { getAriaHidden, getAriaOrientation, getDataOrientation } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 const ROOT_ATTR = "data-separator-root";
 class SeparatorRootState {
     #id;

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

@@ -1,6 +1,6 @@
 import type { WithChild, Without } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type SeparatorRootPropsWithoutHTML = WithChild<{
     /**
      * The orientation of the separator.
@@ -15,4 +15,4 @@ export type SeparatorRootPropsWithoutHTML = WithChild<{
      */
     decorative?: boolean;
 }>;
-export type SeparatorRootProps = SeparatorRootPropsWithoutHTML & Without<PrimitiveDivAttributes, SeparatorRootPropsWithoutHTML>;
+export type SeparatorRootProps = SeparatorRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SeparatorRootPropsWithoutHTML>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RangeProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderRangeProps } from "../types.js";
 	import { useSliderRange } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -11,7 +10,7 @@
 		ref = $bindable(null),
 		id = useId(),
 		...restProps
-	}: RangeProps = $props();
+	}: SliderRangeProps = $props();
 
 	const rangeState = useSliderRange({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-range.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RangeProps } from "../index.js";
+import type { SliderRangeProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SliderRange: $$__sveltets_2_IsomorphicComponent<RangeProps, {
+declare const SliderRange: $$__sveltets_2_IsomorphicComponent<SliderRangeProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type SliderRange = InstanceType<typeof SliderRange>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ThumbProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderThumbProps } from "../types.js";
 	import { useSliderThumb } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -13,7 +12,7 @@
 		index,
 		disabled = false,
 		...restProps
-	}: ThumbProps = $props();
+	}: SliderThumbProps = $props();
 
 	const thumbState = useSliderThumb({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-thumb.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ThumbProps } from "../index.js";
+import type { SliderThumbProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SliderThumb: $$__sveltets_2_IsomorphicComponent<ThumbProps, {
+declare const SliderThumb: $$__sveltets_2_IsomorphicComponent<SliderThumbProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type SliderThumb = InstanceType<typeof SliderThumb>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TickProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderTickProps } from "../types.js";
 	import { useSliderTick } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -12,7 +11,7 @@
 		id = useId(),
 		index,
 		...restProps
-	}: TickProps = $props();
+	}: SliderTickProps = $props();
 
 	const tickState = useSliderTick({
 		id: box.with(() => id),

package/dist/bits/slider/components/slider-tick.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TickProps } from "../index.js";
+import type { SliderTickProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SliderTick: $$__sveltets_2_IsomorphicComponent<TickProps, {
+declare const SliderTick: $$__sveltets_2_IsomorphicComponent<SliderTickProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type SliderTick = InstanceType<typeof SliderTick>;

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

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderRootProps } from "../types.js";
 	import { useSliderRoot } from "../slider.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
@@ -13,7 +12,7 @@
 		ref = $bindable(null),
 		value = $bindable([]),
 		onValueChange = noop,
-		onValueChangeEnd = noop,
+		onValueCommit = noop,
 		disabled = false,
 		min = 0,
 		max = 100,
@@ -23,7 +22,7 @@
 		orientation = "horizontal",
 		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: SliderRootProps = $props();
 
 	const rootState = useSliderRoot({
 		id: box.with(() => id),
@@ -42,7 +41,7 @@
 				}
 			}
 		),
-		onValueChangeEnd: box.with(() => onValueChangeEnd),
+		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
 		max: box.with(() => max),

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { SliderRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Slider: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Slider: $$__sveltets_2_IsomorphicComponent<SliderRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type Slider = InstanceType<typeof Slider>;

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

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/slider.svelte";
+export { default as Range } from "./components/slider-range.svelte";
+export { default as Thumb } from "./components/slider-thumb.svelte";
+export { default as Tick } from "./components/slider-tick.svelte";
+export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, } from "./types.js";

package/dist/bits/slider/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/slider.svelte";
+export { default as Range } from "./components/slider-range.svelte";
+export { default as Thumb } from "./components/slider-thumb.svelte";
+export { default as Tick } from "./components/slider-tick.svelte";

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

@@ -1,5 +1 @@
-export { default as Root } from "./components/slider.svelte";
-export { default as Range } from "./components/slider-range.svelte";
-export { default as Thumb } from "./components/slider-thumb.svelte";
-export { default as Tick } from "./components/slider-tick.svelte";
-export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, } from "./types.js";
+export * as Slider from "./exports.js";

package/dist/bits/slider/index.js

@@ -1,4 +1 @@
-export { default as Root } from "./components/slider.svelte";
-export { default as Range } from "./components/slider-range.svelte";
-export { default as Thumb } from "./components/slider-thumb.svelte";
-export { default as Tick } from "./components/slider-tick.svelte";
+export * as Slider from "./exports.js";

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

@@ -13,11 +13,12 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
-    onValueChangeEnd: OnChangeFn<number[]>;
+    onValueCommit: OnChangeFn<number[]>;
 }> & WritableBoxedValues<{
     value: number[];
 }>>;
 declare class SliderRootState {
+    #private;
     id: SliderRootStateProps["id"];
     ref: SliderRootStateProps["ref"];
     value: SliderRootStateProps["value"];
@@ -35,7 +36,7 @@ declare class SliderRootState {
     isActive: boolean;
     currentThumbIdx: number;
     direction: "rl" | "lr" | "tb" | "bt";
-    onValueChangeEnd: SliderRootStateProps["onValueChangeEnd"];
+    onValueCommit: SliderRootStateProps["onValueCommit"];
     constructor(props: SliderRootStateProps);
     applyPosition: ({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;
@@ -58,7 +59,7 @@ declare class SliderRootState {
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
         readonly tabindex: 0 | -1;
@@ -84,13 +85,10 @@ declare class SliderRootState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
         readonly style: {
-            readonly touchAction: "pan-x" | "pan-y";
+            readonly touchAction: string | undefined;
         };
         readonly "data-slider-root": "";
     };
-    createThumb: (props: SliderThumbStateProps) => SliderThumbState;
-    createRange: (props: SliderRangeStateProps) => SliderRangeState;
-    createTick: (props: SliderTickStateProps) => SliderTickState;
 }
 type SliderRangeStateProps = WithRefProps;
 declare class SliderRangeState {
@@ -1774,7 +1772,7 @@ declare class SliderThumbState {
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
         readonly tabindex: 0 | -1;