bits-ui 1.0.0-next.94 → 1.0.0-next.96

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

@@ -66,6 +66,8 @@ export type AccordionRootMultiplePropsWithoutHTML = BaseAccordionRootPropsWithou
 };
 export type AccordionRootPropsWithoutHTML = WithChild<AccordionRootSinglePropsWithoutHTML> | WithChild<AccordionRootMultiplePropsWithoutHTML>;
 export type AccordionRootProps = AccordionRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootPropsWithoutHTML>;
+export type AccordionRootSingleProps = AccordionRootSinglePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootSinglePropsWithoutHTML>;
+export type AccordionMultipleProps = AccordionRootMultiplePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootMultiplePropsWithoutHTML>;
 export type AccordionTriggerPropsWithoutHTML = WithChild;
 export type AccordionTriggerProps = AccordionTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, AccordionTriggerPropsWithoutHTML>;
 export type AccordionContentSnippetProps = {

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

@@ -1,10 +1,11 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 type CheckboxGroupStateProps = WithRefProps<ReadableBoxedValues<{
     name: string | undefined;
     disabled: boolean;
     required: boolean;
+    onValueChange: OnChangeFn<string[]>;
 }> & WritableBoxedValues<{
     value: string[];
 }>>;

package/dist/bits/checkbox/checkbox.svelte.js

@@ -17,6 +17,7 @@ class CheckboxGroupState {
             return;
         if (!this.opts.value.current.includes(checkboxValue)) {
             this.opts.value.current.push(checkboxValue);
+            this.opts.onValueChange.current(this.opts.value.current);
         }
     }
     removeValue(checkboxValue) {
@@ -26,6 +27,7 @@ class CheckboxGroupState {
         if (index === -1)
             return;
         this.opts.value.current.splice(index, 1);
+        this.opts.onValueChange.current(this.opts.value.current);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/checkbox/components/checkbox-group.svelte

@@ -29,8 +29,12 @@
 		name: box.with(() => name),
 		value: box.with(
 			() => value,
-			(v) => onValueChange(v)
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
 		),
+		onValueChange: box.with(() => onValueChange),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));

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

@@ -28,9 +28,95 @@ declare class CommandRootState {
     _commandState: CommandState;
     setState<K extends keyof CommandState>(key: K, value: CommandState[K], opts?: boolean): void;
     constructor(opts: CommandRootStateProps);
+    /**
+     * Sets current value and triggers re-render if cleared.
+     *
+     * @param value - New value to set
+     */
     setValue(value: string, opts?: boolean): void;
-    registerValue(id: string, value: string, keywords?: string[]): (() => void) | undefined;
+    /**
+     * Gets all non-disabled, visible command items.
+     *
+     * @returns Array of valid item elements
+     * @remarks Exposed for direct item access and bound checking
+     */
+    getValidItems(): HTMLElement[];
+    /**
+     * Sets selection to item at specified index in valid items array.
+     * If index is out of bounds, does nothing.
+     *
+     * @param index - Zero-based index of item to select
+     * @remarks
+     * Uses `getValidItems()` to get selectable items, filtering out disabled/hidden ones.
+     * Access valid items directly via `getValidItems()` to check bounds before calling.
+     *
+     * @example
+     * // get valid items length for bounds check
+     * const items = getValidItems()
+     * if (index < items.length) {
+     *   updateSelectedToIndex(index)
+     * }
+     */
+    updateSelectedToIndex(index: number): void;
+    /**
+     * Updates selected item by moving up/down relative to current selection.
+     * Handles wrapping when loop option is enabled.
+     *
+     * @param change - Direction to move: 1 for next item, -1 for previous item
+     * @remarks
+     * The loop behavior wraps:
+     * - From last item to first when moving next
+     * - From first item to last when moving previous
+     *
+     * Uses `getValidItems()` to get all selectable items, which filters out disabled/hidden items.
+     * You can call `getValidItems()` directly to get the current valid items array.
+     *
+     * @example
+     * // select next item
+     * updateSelectedByItem(1)
+     *
+     * // get all valid items
+     * const items = getValidItems()
+     */
+    updateSelectedByItem(change: 1 | -1): void;
+    /**
+     * Moves selection to the first valid item in the next/previous group.
+     * If no group is found, falls back to selecting the next/previous item globally.
+     *
+     * @param change - Direction to move: 1 for next group, -1 for previous group
+     * @example
+     * // move to first item in next group
+     * updateSelectedByGroup(1)
+     *
+     * // move to first item in previous group
+     * updateSelectedByGroup(-1)
+     */
+    updateSelectedByGroup(change: 1 | -1): void;
+    /**
+     * Maps item id to display value and search keywords.
+     * Returns cleanup function to remove mapping.
+     *
+     * @param id - Unique item identifier
+     * @param value - Display text
+     * @param keywords - Optional search boost terms
+     * @returns Cleanup function
+     */
+    registerValue(id: string, value: string, keywords?: string[]): () => void;
+    /**
+     * Registers item in command list and its group.
+     * Handles filtering, sorting and selection updates.
+     *
+     * @param id - Item identifier
+     * @param groupId - Optional group to add item to
+     * @returns Cleanup function that handles selection
+     */
     registerItem(id: string, groupId: string | undefined): () => void;
+    /**
+     * Creates empty group if not exists.
+     *
+     * @param id - Group identifier
+     * @returns Cleanup function
+     */
     registerGroup(id: string): () => void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {

package/dist/bits/command/command.svelte.js

@@ -5,6 +5,7 @@ import { kbd } from "../../internal/kbd.js";
 import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
+import { noop } from "../../internal/noop.js";
 // attributes
 const COMMAND_ROOT_ATTR = "data-command-root";
 const COMMAND_LIST_ATTR = "data-command-list";
@@ -100,11 +101,24 @@ class CommandRootState {
         useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
     }
+    /**
+     * Calculates score for an item based on search text and keywords.
+     * Higher score = better match.
+     *
+     * @param value - Item's display text
+     * @param keywords - Optional keywords to boost scoring
+     * @returns Score from 0-1, where 0 = no match
+     */
     #score(value, keywords) {
         const filter = this.opts.filter.current ?? computeCommandScore;
         const score = value ? filter(value, this._commandState.search, keywords) : 0;
         return score;
     }
+    /**
+     * Sorts items and groups based on search scores.
+     * Groups are sorted by their highest scoring item.
+     * When no search active, selects first item.
+     */
     #sort() {
         if (!this._commandState.search || this.opts.shouldFilter.current === false) {
             // If no search and no selection yet, select first item
@@ -133,7 +147,7 @@ class CommandRootState {
         // Sort items outside of groups
         // Sort groups to bottom (pushes all non-grouped items to the top)
         const listInsertionElement = this.viewportNode;
-        const sorted = this.#getValidItems().sort((a, b) => {
+        const sorted = this.getValidItems().sort((a, b) => {
             const valueA = a.getAttribute("id");
             const valueB = b.getAttribute("id");
             const scoresA = scores.get(valueA) ?? 0;
@@ -165,6 +179,11 @@ class CommandRootState {
             element?.parentElement?.appendChild(element);
         }
     }
+    /**
+     * Sets current value and triggers re-render if cleared.
+     *
+     * @param value - New value to set
+     */
     setValue(value, opts) {
         if (value !== this.opts.value.current && value === "") {
             afterTick(() => {
@@ -174,13 +193,20 @@ class CommandRootState {
         this.setState("value", value, opts);
         this.opts.value.current = value;
     }
+    /**
+     * Selects first non-disabled item on next tick.
+     */
     #selectFirstItem() {
         afterTick(() => {
-            const item = this.#getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true");
+            const item = this.getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true");
             const value = item?.getAttribute(COMMAND_VALUE_ATTR);
             this.setValue(value || "");
         });
     }
+    /**
+     * Updates filtered items/groups based on search.
+     * Recalculates scores and filtered count.
+     */
     #filterItems() {
         if (!this._commandState.search || this.opts.shouldFilter.current === false) {
             this._commandState.filtered.count = this.allItems.size;
@@ -210,13 +236,24 @@ class CommandRootState {
         }
         this._commandState.filtered.count = itemCount;
     }
-    #getValidItems() {
+    /**
+     * Gets all non-disabled, visible command items.
+     *
+     * @returns Array of valid item elements
+     * @remarks Exposed for direct item access and bound checking
+     */
+    getValidItems() {
         const node = this.opts.ref.current;
         if (!node)
             return [];
         const validItems = Array.from(node.querySelectorAll(COMMAND_VALID_ITEM_SELECTOR)).filter((el) => !!el);
         return validItems;
     }
+    /**
+     * Gets currently selected command item.
+     *
+     * @returns Selected element or undefined
+     */
     #getSelectedItem() {
         const node = this.opts.ref.current;
         if (!node)
@@ -226,6 +263,10 @@ class CommandRootState {
             return;
         return selectedNode;
     }
+    /**
+     * Scrolls selected item into view.
+     * Special handling for first items in groups.
+     */
     #scrollSelectedIntoView() {
         afterSleep(1, () => {
             const item = this.#getSelectedItem();
@@ -245,16 +286,52 @@ class CommandRootState {
             item.scrollIntoView({ block: "nearest" });
         });
     }
-    #updateSelectedToIndex(index) {
-        const items = this.#getValidItems();
+    /**
+     * Sets selection to item at specified index in valid items array.
+     * If index is out of bounds, does nothing.
+     *
+     * @param index - Zero-based index of item to select
+     * @remarks
+     * Uses `getValidItems()` to get selectable items, filtering out disabled/hidden ones.
+     * Access valid items directly via `getValidItems()` to check bounds before calling.
+     *
+     * @example
+     * // get valid items length for bounds check
+     * const items = getValidItems()
+     * if (index < items.length) {
+     *   updateSelectedToIndex(index)
+     * }
+     */
+    updateSelectedToIndex(index) {
+        const items = this.getValidItems();
         const item = items[index];
         if (item) {
             this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
     }
-    #updateSelectedByItem(change) {
+    /**
+     * Updates selected item by moving up/down relative to current selection.
+     * Handles wrapping when loop option is enabled.
+     *
+     * @param change - Direction to move: 1 for next item, -1 for previous item
+     * @remarks
+     * The loop behavior wraps:
+     * - From last item to first when moving next
+     * - From first item to last when moving previous
+     *
+     * Uses `getValidItems()` to get all selectable items, which filters out disabled/hidden items.
+     * You can call `getValidItems()` directly to get the current valid items array.
+     *
+     * @example
+     * // select next item
+     * updateSelectedByItem(1)
+     *
+     * // get all valid items
+     * const items = getValidItems()
+     */
+    updateSelectedByItem(change) {
         const selected = this.#getSelectedItem();
-        const items = this.#getValidItems();
+        const items = this.getValidItems();
         const index = items.findIndex((item) => item === selected);
         // Get item at this index
         let newSelected = items[index + change];
@@ -270,7 +347,19 @@ class CommandRootState {
             this.setValue(newSelected.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
     }
-    #updateSelectedByGroup(change) {
+    /**
+     * Moves selection to the first valid item in the next/previous group.
+     * If no group is found, falls back to selecting the next/previous item globally.
+     *
+     * @param change - Direction to move: 1 for next group, -1 for previous group
+     * @example
+     * // move to first item in next group
+     * updateSelectedByGroup(1)
+     *
+     * // move to first item in previous group
+     * updateSelectedByGroup(-1)
+     */
+    updateSelectedByGroup(change) {
         const selected = this.#getSelectedItem();
         let group = selected?.closest(COMMAND_GROUP_SELECTOR);
         let item;
@@ -285,13 +374,21 @@ class CommandRootState {
             this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
         }
         else {
-            this.#updateSelectedByItem(change);
+            this.updateSelectedByItem(change);
         }
     }
-    // keep id -> { value, keywords } mapping up to date
+    /**
+     * Maps item id to display value and search keywords.
+     * Returns cleanup function to remove mapping.
+     *
+     * @param id - Unique item identifier
+     * @param value - Display text
+     * @param keywords - Optional search boost terms
+     * @returns Cleanup function
+     */
     registerValue(id, value, keywords) {
         if (value === this.allIds.get(id)?.value)
-            return;
+            return noop;
         this.allIds.set(id, { value, keywords });
         this._commandState.filtered.items.set(id, this.#score(value, keywords));
         this.#sort();
@@ -299,6 +396,14 @@ class CommandRootState {
             this.allIds.delete(id);
         };
     }
+    /**
+     * Registers item in command list and its group.
+     * Handles filtering, sorting and selection updates.
+     *
+     * @param id - Item identifier
+     * @param groupId - Optional group to add item to
+     * @returns Cleanup function that handles selection
+     */
     registerItem(id, groupId) {
         this.allItems.add(id);
         // Track this item within the group
@@ -326,6 +431,12 @@ class CommandRootState {
             this.#scheduleUpdate();
         };
     }
+    /**
+     * Creates empty group if not exists.
+     *
+     * @param id - Group identifier
+     * @returns Cleanup function
+     */
     registerGroup(id) {
         if (!this.allGroups.has(id)) {
             this.allGroups.set(id, new Set());
@@ -335,34 +446,53 @@ class CommandRootState {
             this.allGroups.delete(id);
         };
     }
+    /**
+     * Selects last valid item.
+     */
     #last() {
-        return this.#updateSelectedToIndex(this.#getValidItems().length - 1);
-    }
+        return this.updateSelectedToIndex(this.getValidItems().length - 1);
+    }
+    /**
+     * Handles next item selection:
+     * - Meta: Jump to last
+     * - Alt: Next group
+     * - Default: Next item
+     *
+     * @param e - Keyboard event
+     */
     #next(e) {
         e.preventDefault();
         if (e.metaKey) {
             this.#last();
         }
         else if (e.altKey) {
-            this.#updateSelectedByGroup(1);
+            this.updateSelectedByGroup(1);
         }
         else {
-            this.#updateSelectedByItem(1);
+            this.updateSelectedByItem(1);
         }
     }
+    /**
+     * Handles previous item selection:
+     * - Meta: Jump to first
+     * - Alt: Previous group
+     * - Default: Previous item
+     *
+     * @param e - Keyboard event
+     */
     #prev(e) {
         e.preventDefault();
         if (e.metaKey) {
             // First item
-            this.#updateSelectedToIndex(0);
+            this.updateSelectedToIndex(0);
         }
         else if (e.altKey) {
             // Previous group
-            this.#updateSelectedByGroup(-1);
+            this.updateSelectedByGroup(-1);
         }
         else {
             // Previous item
-            this.#updateSelectedByItem(-1);
+            this.updateSelectedByItem(-1);
         }
     }
     onkeydown(e) {
@@ -392,7 +522,7 @@ class CommandRootState {
             case kbd.HOME:
                 // first item
                 e.preventDefault();
-                this.#updateSelectedToIndex(0);
+                this.updateSelectedToIndex(0);
                 break;
             case kbd.END:
                 // last item

package/dist/bits/command/components/command.svelte

@@ -45,6 +45,70 @@
 		onStateChange: box.with(() => onStateChange),
 	});
 
+	// Imperative APIs - DO NOT REMOVE OR RENAME
+
+	/**
+	 * Sets selection to item at specified index in valid items array.
+	 * If index is out of bounds, does nothing.
+	 *
+	 * @param index - Zero-based index of item to select
+	 * @remarks
+	 * Uses `getValidItems()` to get selectable items, filtering out disabled/hidden ones.
+	 * Access valid items directly via `getValidItems()` to check bounds before calling.
+	 *
+	 * @example
+	 * // get valid items length for bounds check
+	 * const items = getValidItems()
+	 * if (index < items.length) {
+	 *   updateSelectedToIndex(index)
+	 * }
+	 */
+	export const updateSelectedToIndex: (typeof rootState)["updateSelectedToIndex"] = (i) =>
+		rootState.updateSelectedToIndex(i);
+	/**
+	 * Moves selection to the first valid item in the next/previous group.
+	 * If no group is found, falls back to selecting the next/previous item globally.
+	 *
+	 * @param change - Direction to move: 1 for next group, -1 for previous group
+	 * @example
+	 * // move to first item in next group
+	 * updateSelectedByGroup(1)
+	 *
+	 * // move to first item in previous group
+	 * updateSelectedByGroup(-1)
+	 */
+	export const updateSelectedByGroup: (typeof rootState)["updateSelectedByGroup"] = (c) =>
+		rootState.updateSelectedByGroup(c);
+	/**
+	 * Updates selected item by moving up/down relative to current selection.
+	 * Handles wrapping when loop option is enabled.
+	 *
+	 * @param change - Direction to move: 1 for next item, -1 for previous item
+	 * @remarks
+	 * The loop behavior wraps:
+	 * - From last item to first when moving next
+	 * - From first item to last when moving previous
+	 *
+	 * Uses `getValidItems()` to get all selectable items, which filters out disabled/hidden items.
+	 * You can call `getValidItems()` directly to get the current valid items array.
+	 *
+	 * @example
+	 * // select next item
+	 * updateSelectedByItem(1)
+	 *
+	 * // get all valid items
+	 * const items = getValidItems()
+	 */
+	export const updateSelectedByItem: (typeof rootState)["updateSelectedByItem"] = (c) =>
+		rootState.updateSelectedByItem(c);
+	/**
+	 * Gets all non-disabled, visible command items.
+	 *
+	 * @returns Array of valid item elements
+	 * @remarks Exposed for direct item access and bound checking
+	 */
+	export const getValidItems = () => rootState.getValidItems();
+
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));
 </script>
 

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

@@ -1,4 +1,59 @@
 import type { CommandRootProps } from "../types.js";
-declare const Command: import("svelte").Component<CommandRootProps, {}, "value" | "ref">;
+declare const Command: import("svelte").Component<CommandRootProps, {
+    /**
+         * Sets selection to item at specified index in valid items array.
+         * If index is out of bounds, does nothing.
+         *
+         * @param index - Zero-based index of item to select
+         * @remarks
+         * Uses `getValidItems()` to get selectable items, filtering out disabled/hidden ones.
+         * Access valid items directly via `getValidItems()` to check bounds before calling.
+         *
+         * @example
+         * // get valid items length for bounds check
+         * const items = getValidItems()
+         * if (index < items.length) {
+         *   updateSelectedToIndex(index)
+         * }
+         */ updateSelectedToIndex: (index: number) => void;
+    /**
+         * Moves selection to the first valid item in the next/previous group.
+         * If no group is found, falls back to selecting the next/previous item globally.
+         *
+         * @param change - Direction to move: 1 for next group, -1 for previous group
+         * @example
+         * // move to first item in next group
+         * updateSelectedByGroup(1)
+         *
+         * // move to first item in previous group
+         * updateSelectedByGroup(-1)
+         */ updateSelectedByGroup: (change: 1 | -1) => void;
+    /**
+         * Updates selected item by moving up/down relative to current selection.
+         * Handles wrapping when loop option is enabled.
+         *
+         * @param change - Direction to move: 1 for next item, -1 for previous item
+         * @remarks
+         * The loop behavior wraps:
+         * - From last item to first when moving next
+         * - From first item to last when moving previous
+         *
+         * Uses `getValidItems()` to get all selectable items, which filters out disabled/hidden items.
+         * You can call `getValidItems()` directly to get the current valid items array.
+         *
+         * @example
+         * // select next item
+         * updateSelectedByItem(1)
+         *
+         * // get all valid items
+         * const items = getValidItems()
+         */ updateSelectedByItem: (change: 1 | -1) => void;
+    /**
+         * Gets all non-disabled, visible command items.
+         *
+         * @returns Array of valid item elements
+         * @remarks Exposed for direct item access and bound checking
+         */ getValidItems: () => HTMLElement[];
+}, "value" | "ref">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/package.json

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