solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/useRender-CryVdCjs.js

@@ -0,0 +1,16 @@
+import { merge, untrack } from "solid-js";
+//#region src/use-render/useRender.ts
+/**
+* Creates a root renderer with a native JSX fallback. The renderer is selected at
+* mount; conditional roots belong inside the callback, using Solid control flow.
+*/
+function useRender(props, state, fallback) {
+	return (rootProps) => {
+		const render = untrack(() => props.render);
+		if (!render) return untrack(() => fallback(rootProps));
+		const liveState = merge(state);
+		return untrack(() => render(rootProps, liveState));
+	};
+}
+//#endregion
+export { useRender as t };

package/dist/lib/types/accordion/header/AccordionHeader.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 import type { AccordionItemState } from '../item/AccordionItem.js';
 export interface AccordionHeaderState extends AccordionItemState {

package/dist/lib/types/accordion/item/AccordionItem.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import { REASONS } from '../../internals/reasons.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 import type { AccordionRootState } from '../root/AccordionRoot.js';

package/dist/lib/types/accordion/panel/AccordionPanel.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { JSX, ValidComponent } from '@solidjs/web';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 import type { AccordionItemState } from '../item/AccordionItem.js';

package/dist/lib/types/accordion/root/AccordionRoot.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { JSX, ValidComponent } from '@solidjs/web';
 import type { BaseUIChangeEventDetails } from '../../internals/createBaseUIEventDetails.js';
 import { REASONS } from '../../internals/reasons.js';
 import type { Orientation } from '../../internals/types.js';
@@ -26,13 +26,8 @@ interface AccordionRootOwnProps<Value> {
     orientation?: Orientation | undefined;
 }
 export type AccordionRootProps<Value = any, Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, AccordionRootState<Value>, AccordionRootOwnProps<Value>>;
-type AccordionRootIntrinsicProps<Value> = {
-    [Component in keyof JSX.IntrinsicElements]: Omit<AccordionRootProps<Value, Component>, 'as'> & {
-        as: Component;
-    };
-}[keyof JSX.IntrinsicElements];
 /** Groups all parts of the accordion. Renders a `<div>` element by default. */
-export declare function AccordionRoot<Value = any>(props: AccordionRootProps<Value, 'div'> | AccordionRootIntrinsicProps<Value>): JSX.Element;
+export declare function AccordionRoot<Value = any>(props: AccordionRootProps<Value, 'div'>): JSX.Element;
 export declare function AccordionRoot<Value = any, Component extends ValidComponent = 'div'>(props: AccordionRoot.Props<Value, Component>): JSX.Element;
 export type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRootChangeEventReason>;

package/dist/lib/types/accordion/trigger/AccordionTrigger.d.ts

@@ -1,7 +1,7 @@
-import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
-import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
-import type { BaseUIComponentProps } from '../../types/index.js';
-import type { AccordionItemState } from '../item/AccordionItem.js';
+import type { ComponentProps, JSX, ValidComponent } from "@solidjs/web";
+import { type BaseUIEventHandlerUnion } from "../../internals/composeEventHandlers.js";
+import type { BaseUIComponentProps } from "../../types/index.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 export interface AccordionTriggerState extends AccordionItemState {
 }
 type TriggerEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
@@ -17,11 +17,11 @@ interface AccordionTriggerOwnProps<Component extends ValidComponent> {
     onMouseUp?: BaseUIEventHandlerUnion<TriggerEventTarget<Component>, MouseEvent> | undefined;
     onPointerDown?: BaseUIEventHandlerUnion<TriggerEventTarget<Component>, PointerEvent> | undefined;
 }
-export type AccordionTriggerProps<Component extends ValidComponent = 'button'> = BaseUIComponentProps<Component, AccordionTriggerState, AccordionTriggerOwnProps<Component>>;
+export type AccordionTriggerProps<Component extends ValidComponent = "button"> = BaseUIComponentProps<Component, AccordionTriggerState, AccordionTriggerOwnProps<Component>>;
 /** A button that opens and closes the corresponding panel. */
-export declare function AccordionTrigger<Component extends ValidComponent = 'button'>(props: AccordionTrigger.Props<Component>): JSX.Element;
+export declare function AccordionTrigger<Component extends ValidComponent = "button">(props: AccordionTrigger.Props<Component>): JSX.Element;
 export declare namespace AccordionTrigger {
     type State = AccordionTriggerState;
-    type Props<Component extends ValidComponent = 'button'> = AccordionTriggerProps<Component>;
+    type Props<Component extends ValidComponent = "button"> = AccordionTriggerProps<Component>;
 }
 export {};

package/dist/lib/types/alert-dialog/trigger/AlertDialogTrigger.d.ts

@@ -1,8 +1,7 @@
 import type { JSX, ValidComponent } from '@solidjs/web';
 import { type DialogTriggerProps, type DialogTriggerState } from '../../dialog/trigger/DialogTrigger.js';
 import type { AlertDialogHandle } from '../handle.js';
-export type AlertDialogTriggerProps<Payload = unknown, Component extends ValidComponent = 'button'> = Omit<DialogTriggerProps<Payload, Component>, 'as' | 'handle'> & {
-    as?: Component | undefined;
+export type AlertDialogTriggerProps<Payload = unknown, Component extends ValidComponent = 'button'> = Omit<DialogTriggerProps<Payload, Component>, 'handle'> & {
     handle?: AlertDialogHandle<Payload> | undefined;
 };
 export interface AlertDialogTriggerState extends DialogTriggerState {

package/dist/lib/types/autocomplete/trigger/AutocompleteTrigger.d.ts

@@ -3,6 +3,7 @@ import type { FieldState } from '../../internals/field-constants.js';
 import type { AnchorSide } from '../../internals/overlay/index.js';
 import { ComboboxTrigger, type ComboboxTriggerProps } from '../../combobox/trigger/ComboboxTrigger.js';
 export interface AutocompleteTriggerState extends FieldState {
+    readOnly: boolean;
     /** Whether the popup is open. */
     open: boolean;
     /** Whether the component should ignore user interaction. */

package/dist/lib/types/avatar/fallback/AvatarFallback.d.ts

@@ -1,4 +1,4 @@
-import type { NativeComponentProps } from '../../types/index.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
 import type { AvatarRootState } from '../root/AvatarRoot.js';
 export interface AvatarFallbackState extends AvatarRootState {
 }
@@ -6,7 +6,7 @@ interface AvatarFallbackOwnProps {
     /** How long to wait before showing the fallback, in milliseconds. @default 0 */
     delay?: number | undefined;
 }
-export type AvatarFallbackProps = NativeComponentProps<'span', AvatarFallbackState, AvatarFallbackOwnProps>;
+export type AvatarFallbackProps = BaseUIComponentProps<'span', AvatarFallbackState, AvatarFallbackOwnProps>;
 /** Content displayed while the image is unavailable. */
 export declare function AvatarFallback(props: AvatarFallback.Props): import("@solidjs/web").JSX.Element;
 export declare namespace AvatarFallback {

package/dist/lib/types/avatar/image/AvatarImage.d.ts

@@ -1,4 +1,6 @@
-import type { NativeComponentProps } from '../../types/index.js';
+import type { JSX } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { AvatarRootState, ImageLoadingStatus } from '../root/AvatarRoot.js';
 export interface AvatarImageState extends AvatarRootState {
@@ -6,10 +8,14 @@ export interface AvatarImageState extends AvatarRootState {
 }
 interface AvatarImageOwnProps {
     onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
+    /** Keep the image mounted and load in place, supporting native lazy loading. @default false */
+    keepMounted?: boolean | undefined;
+    onLoad?: BaseUIEventHandlerUnion<HTMLImageElement, Event> | undefined;
+    onError?: BaseUIEventHandlerUnion<HTMLImageElement, ErrorEvent> | undefined;
 }
-export type AvatarImageProps = NativeComponentProps<'img', AvatarImageState, AvatarImageOwnProps>;
+export type AvatarImageProps = BaseUIComponentProps<'img', AvatarImageState, AvatarImageOwnProps>;
 /** The image displayed after its source has loaded successfully. */
-export declare function AvatarImage(props: AvatarImage.Props): import("@solidjs/web").JSX.Element;
+export declare function AvatarImage(props: AvatarImage.Props): JSX.Element;
 export declare namespace AvatarImage {
     type State = AvatarImageState;
     type Props = AvatarImageProps;

package/dist/lib/types/avatar/image/createImageLoadingStatus.d.ts

@@ -1,4 +1,4 @@
-import { type Accessor } from 'solid-js';
+import { type Accessor, type Setter } from 'solid-js';
 import type { ImageLoadingStatus } from '../root/AvatarRoot.js';
 export interface ImageLoadingOptions {
     src: string | undefined;
@@ -6,5 +6,6 @@ export interface ImageLoadingOptions {
     sizes: string | undefined;
     crossorigin: string | undefined;
     referrerpolicy: ReferrerPolicy | undefined;
+    keepMounted: boolean;
 }
-export declare function createImageLoadingStatus(options: Accessor<ImageLoadingOptions>): Accessor<ImageLoadingStatus>;
+export declare function createImageLoadingStatus(options: Accessor<ImageLoadingOptions>, element: Accessor<HTMLImageElement | undefined>, onInitiallyLoaded: () => void): [Accessor<ImageLoadingStatus>, Setter<ImageLoadingStatus>];

package/dist/lib/types/avatar/root/AvatarRoot.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarRootState {

package/dist/lib/types/button/Button.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
+import type { ComponentProps, JSX, ValidComponent } from '@solidjs/web';
 import { type BaseUIEventHandlerUnion } from '../internals/composeEventHandlers.js';
 import type { BaseUIComponentProps } from '../types/index.js';
 export interface ButtonState {

package/dist/lib/types/checkbox-group/CheckboxGroupContext.d.ts

@@ -1,7 +1,9 @@
 import { type Accessor } from 'solid-js';
 import type { BaseUIChangeEventDetails } from '../types/index.js';
+import type { LabelableContextValue } from '../internals/labelable-provider/LabelableContext.js';
 export interface RegisteredCheckbox {
     token: symbol;
+    id: Accessor<string>;
     disabled: Accessor<boolean>;
     element: Accessor<HTMLElement | undefined>;
     input: Accessor<HTMLInputElement | undefined>;
@@ -12,7 +14,7 @@ export interface CheckboxGroupParentContextValue {
     id: string;
     checked: Accessor<boolean>;
     indeterminate: Accessor<boolean>;
-    ariaControls: Accessor<string>;
+    ariaControls: Accessor<string | undefined>;
     changeParent: (details: BaseUIChangeEventDetails<'none'>) => boolean;
     changeChild: (value: string, checked: boolean, details: BaseUIChangeEventDetails<'none'>) => boolean;
 }
@@ -20,6 +22,7 @@ export interface CheckboxGroupContextValue {
     allValues: Accessor<string[] | undefined>;
     disabled: Accessor<boolean>;
     fieldControlSource: symbol;
+    registerControlId: LabelableContextValue['registerControlId'];
     getValue: () => string[];
     parent: CheckboxGroupParentContextValue;
     registerCheckbox: (checkbox: RegisteredCheckbox) => () => void;

package/dist/lib/types/collapsible/panel/CollapsiblePanel.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { JSX, ValidComponent } from '@solidjs/web';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 import type { CollapsibleRootState } from '../root/CollapsibleRoot.js';

package/dist/lib/types/collapsible/root/CollapsibleRoot.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { JSX, ValidComponent } from '@solidjs/web';
 import { REASONS } from '../../internals/reasons.js';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIChangeEventDetails, BaseUIComponentProps } from '../../types/index.js';

package/dist/lib/types/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
+import type { ComponentProps, JSX, ValidComponent } from '@solidjs/web';
 import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 import type { CollapsibleRootState } from '../root/CollapsibleRoot.js';

package/dist/lib/types/combobox/chip/ComboboxChip.d.ts

@@ -5,7 +5,9 @@ export interface ComboboxChipState {
     disabled: boolean;
 }
 interface ComboboxChipOwnProps {
+    onContextMenu?: BaseUIEventHandlerUnion<HTMLElement, MouseEvent> | undefined;
     onKeyDown?: BaseUIEventHandlerUnion<HTMLElement, KeyboardEvent> | undefined;
+    onMouseDown?: BaseUIEventHandlerUnion<HTMLElement, MouseEvent> | undefined;
 }
 export type ComboboxChipProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, ComboboxChipState, ComboboxChipOwnProps>;
 /** An individual chip representing one value in a multiselectable input. */

package/dist/lib/types/combobox/index.d.ts

@@ -27,3 +27,5 @@ export type * from './clear/ComboboxClear.js';
 export type * from './separator/ComboboxSeparator.js';
 export type * from './types.js';
 export type { ComboboxFilterOptions, Filter as ComboboxFilter, } from './root/utils/useFilter.js';
+export { createComboboxItems } from './items/createItems.js';
+export type { ComboboxItemCollection, ComboboxPrimitiveValue, CreateComboboxItemsOptions } from './items/createItems.js';

package/dist/lib/types/combobox/index.parts.d.ts

@@ -26,3 +26,4 @@ export { ComboboxClear as Clear } from './clear/ComboboxClear.js';
 export { ComboboxSeparator as Separator } from './separator/ComboboxSeparator.js';
 export { useFilter } from './root/utils/useFilter.js';
 export { useFilteredItems } from './root/utils/useFilteredItems.js';
+export { createComboboxItems as createItems } from './items/createItems.js';

package/dist/lib/types/combobox/items/createItems.d.ts

@@ -0,0 +1,42 @@
+import { type ItemEqualityComparer } from '../../internals/itemEquality.js';
+import { type ItemGroup } from '../../internals/valueLabel.js';
+export type ComboboxPrimitiveValue = string | number | bigint | boolean;
+type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
+};
+type HasGroupShape<T> = T extends object ? 'items' extends keyof RemoveIndexSignature<T> ? [Extract<NonNullable<T['items']>, readonly unknown[]>] extends [never] ? never[] extends NonNullable<T['items']> ? true : never : true : never : never;
+type RejectGroups<T> = 0 extends 1 & T ? unknown : true extends HasGroupShape<T> ? 'Base UI: items passed to createItems() cannot have an `items` array property because it marks a group. Rename the field or cast the data.' : unknown;
+type ItemsData<T> = (Extract<T, {
+    items: readonly unknown[];
+}> extends never ? readonly T[] : never) | readonly {
+    items: ReadonlyArray<T>;
+}[];
+/** Opaque source collection. Pass directly to Combobox.Root's items prop. */
+export declare class ComboboxItemCollection<in out Item, Value = Item> {
+    private constructor();
+    private readonly __itemCollectionBrand;
+}
+export interface CreateComboboxItemsOptions<Item, Value extends ComboboxPrimitiveValue = ComboboxPrimitiveValue> {
+    /** A unique non-null primitive ID. Use stable application IDs. */
+    getValue: (item: Item) => Value;
+    /** The label used for selection display and default filtering. */
+    getLabel: (item: Item) => string;
+}
+export interface ItemCollection<Item, Value> {
+    data: readonly Item[] | readonly ItemGroup<Item>[] | undefined;
+    value(item: Item): Value;
+    itemLabel(item: Item): string;
+    hasValue(value: Value, compare: ItemEqualityComparer<Value>): boolean;
+    label(value: Value, compare: ItemEqualityComparer<Value>, fallback?: (value: Value) => string): string;
+}
+/**
+ * Creates a lazy flat or grouped collection. Use a memo for data that changes.
+ * Accessors receive leaf items; remove nullish entries before passing data.
+ * Items cannot have an `items` array property because that marks a group.
+ * Pass the result to Root, and pass each derived ID to Item's `value` prop.
+ */
+export declare function createComboboxItems<Item, Value extends ComboboxPrimitiveValue>(data: readonly {
+    items: ReadonlyArray<Item>;
+}[] & RejectGroups<Item>, options: CreateComboboxItemsOptions<Item, Value>): ComboboxItemCollection<Item, Value>;
+export declare function createComboboxItems<Item, Value extends ComboboxPrimitiveValue>(data: (ItemsData<Item> & RejectGroups<Item>) | undefined, options: CreateComboboxItemsOptions<Item, Value>): ComboboxItemCollection<Item, Value>;
+export {};

package/dist/lib/types/combobox/root/AriaCombobox.d.ts

@@ -3,10 +3,12 @@ import type { JSX } from '@solidjs/web';
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from '../../internals/createBaseUIEventDetails.js';
 import { type ItemEqualityComparer } from '../../internals/itemEquality.js';
 import { REASONS } from '../../internals/reasons.js';
+import type { ItemCollection } from '../items/createItems.js';
 import type { ComboboxAutoComplete, ComboboxAutoHighlight, ComboboxItemFilter, ComboboxItemsInput, ComboboxSelectionMode } from '../types.js';
 export type ComboboxRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.inputPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.cancelOpen | typeof REASONS.none;
 export type ComboboxRootChangeEventDetails = BaseUIChangeEventDetails<ComboboxRootChangeEventReason> & {
     preventUnmountOnClose(): void;
+    isItemPress?: boolean | undefined;
 };
 export type ComboboxHighlightEventReason = typeof REASONS.keyboard | typeof REASONS.pointer | typeof REASONS.none;
 export type ComboboxHighlightEventDetails = BaseUIGenericEventDetails<ComboboxHighlightEventReason, {
@@ -20,6 +22,8 @@ export interface AriaComboboxState {
 }
 type ComboboxItemValueType<Item, Mode extends ComboboxSelectionMode> = Mode extends 'multiple' ? Item[] : Item;
 export interface AriaComboboxProps<Value, Mode extends ComboboxSelectionMode = 'none'> {
+    itemCollection?: ItemCollection<Value, Value> | undefined;
+    filterQuery?: string | undefined;
     children?: JSX.Element;
     /** How the combobox remembers what was picked. */
     selectionMode: Mode;

package/dist/lib/types/combobox/root/ComboboxRoot.d.ts

@@ -1,9 +1,10 @@
+import type { ComboboxItemCollection } from '../items/createItems.js';
 import type { JSX } from '@solidjs/web';
 import type { ItemEqualityComparer } from '../../internals/itemEquality.js';
 import type { ComboboxItemFilter, ComboboxItemsInput } from '../types.js';
 import { type AriaComboboxState, type ComboboxHighlightEventDetails, type ComboboxHighlightEventReason, type ComboboxRootActions, type ComboboxRootChangeEventDetails, type ComboboxRootChangeEventReason } from './AriaCombobox.js';
 type ComboboxValueType<Value, Multiple extends boolean | undefined> = Multiple extends true ? Value[] : Value;
-export interface ComboboxRootProps<Value, Multiple extends boolean | undefined = false> {
+export interface ComboboxRootProps<Value, Multiple extends boolean | undefined = false, Item = Value> {
     children?: JSX.Element;
     /**
      * Whether multiple items can be selected.
@@ -109,23 +110,26 @@ export interface ComboboxRootProps<Value, Multiple extends boolean | undefined =
      * @default false
      */
     grid?: boolean | undefined;
-    /** The items to display, either a flat array or an array of groups. */
-    items?: ComboboxItemsInput<Value> | undefined;
+    /** The items to display: a flat array, grouped array, or opaque createItems collection. */
+    items?: ComboboxItemsInput<Value> | ComboboxItemCollection<Item, Value> | undefined;
     /**
      * Filtered items to display in the list. When provided, the list uses these instead of
-     * filtering `items` internally. Use with the `useFilter()` helper.
+     * filtering `items` internally. With createItems, these are source records, not derived IDs.
+     * Use with the `useFilter()` helper.
      */
-    filteredItems?: ComboboxItemsInput<Value> | undefined;
+    filteredItems?: ComboboxItemsInput<Item> | undefined;
     /** Filter function used to match items against the input query. */
-    filter?: ComboboxItemFilter<Value> | null | undefined;
+    filter?: ComboboxItemFilter<Item> | null | undefined;
     /**
      * Converts an object item value to the string shown in the input.
      * A `{ value, label }` shape uses its label automatically.
+     * With createItems, receives the derived value as a fallback for missing source records.
      */
     itemToStringLabel?: ((itemValue: Value) => string) | undefined;
     /**
      * Converts an object item value to the string submitted with a form.
      * A `{ value, label }` shape uses its value automatically.
+     * With createItems, receives the derived value.
      */
     itemToStringValue?: ((itemValue: Value) => string) | undefined;
     /**
@@ -165,12 +169,17 @@ export interface ComboboxRootState extends AriaComboboxState {
  * Groups all parts of the combobox.
  * Doesn't render its own HTML element.
  */
-export declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>(props: ComboboxRoot.Props<Value, Multiple>): JSX.Element;
+export declare function ComboboxRoot<Items extends readonly {
+    items: readonly unknown[];
+}[], Multiple extends boolean | undefined = false>(props: Omit<ComboboxRootProps<Items[number]['items'][number], Multiple>, 'items'> & {
+    items: Items;
+}): JSX.Element;
+export declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false, Item = Value>(props: ComboboxRoot.Props<Value, Multiple, Item>): JSX.Element;
 export type { ComboboxRootActions, ComboboxRootChangeEventDetails, ComboboxRootChangeEventReason, };
 export type ComboboxRootHighlightEventReason = ComboboxHighlightEventReason;
 export type ComboboxRootHighlightEventDetails = ComboboxHighlightEventDetails;
 export declare namespace ComboboxRoot {
-    type Props<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps<Value, Multiple>;
+    type Props<Value, Multiple extends boolean | undefined = false, Item = Value> = ComboboxRootProps<Value, Multiple, Item>;
     type State = ComboboxRootState;
     type Actions = ComboboxRootActions;
     type ChangeEventReason = ComboboxRootChangeEventReason;

package/dist/lib/types/combobox/root/ComboboxRootContext.d.ts

@@ -28,6 +28,8 @@ export interface ComboboxRootContextValue<Value = unknown> {
     listEmpty: Accessor<boolean>;
     /** Item values addressed by index, whether they come from `items` or from rendered items. */
     itemValues: Accessor<ReadonlyArray<Value>>;
+    itemLabels: Accessor<Array<string | null>>;
+    hasItemCollection: Accessor<boolean>;
     selectedValue: Accessor<Value | Value[] | null>;
     inputValue: Accessor<string>;
     hasSelectedValue: Accessor<boolean>;

package/dist/lib/types/combobox/store/ComboboxStore.d.ts

@@ -4,6 +4,7 @@ import type { AnchorSide } from '../../internals/overlay/createAnchorPositioning
 import type { ComboboxRootChangeEventDetails } from '../root/AriaCombobox.js';
 import { ComboboxItemRegistry } from './ComboboxItemRegistry.js';
 export interface ComboboxStoreOptions extends PopupStoreOptions<ComboboxRootChangeEventDetails> {
+    inputOwnsFormValue?: boolean;
 }
 /**
  * Combobox popup state shared by every part.

package/dist/lib/types/combobox/trigger/ComboboxTrigger.d.ts

@@ -4,6 +4,7 @@ import type { FieldState } from '../../internals/field-constants.js';
 import { type AnchorSide } from '../../internals/overlay/index.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface ComboboxTriggerState extends FieldState {
+    readOnly: boolean;
     open: boolean;
     disabled: boolean;
     popupSide: AnchorSide | null;

package/dist/lib/types/combobox/utils/handleInputPress.d.ts

@@ -4,4 +4,4 @@ import type { BaseUIEvent } from '../../types/index.js';
  * Routes a press anywhere in the input's surroundings back to the input, so clicking the padding
  * of an input group or the empty space beside the chips focuses and opens the combobox.
  */
-export declare function handleInputPress(event: BaseUIEvent<MouseEvent>, context: ComboboxRootContextValue<never>, disabled: boolean, readOnly: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;
+export declare function handleInputPress(event: BaseUIEvent<MouseEvent>, context: ComboboxRootContextValue<never>, disabled: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;

package/dist/lib/types/dialog/backdrop/DialogBackdrop.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DialogBackdropState {

package/dist/lib/types/dialog/description/DialogDescription.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DialogDescriptionState {
 }

package/dist/lib/types/dialog/title/DialogTitle.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DialogTitleState {
 }

package/dist/lib/types/dialog/viewport/DialogViewport.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DialogViewportState {

package/dist/lib/types/drawer/backdrop/DrawerBackdrop.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DrawerBackdropState {

package/dist/lib/types/drawer/content/DrawerContent.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DrawerContentState {
 }

package/dist/lib/types/drawer/indent/DrawerIndent.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DrawerIndentState {
     /** Whether any drawer within the nearest `<Drawer.Provider>` is open. */

package/dist/lib/types/drawer/indent-background/DrawerIndentBackground.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface DrawerIndentBackgroundState {
     /** Whether any drawer within the nearest `<Drawer.Provider>` is open. */

package/dist/lib/types/field/control/FieldControl.d.ts

@@ -2,12 +2,12 @@ import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web
 import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
 import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails.js';
 import { REASONS } from '../../internals/reasons.js';
-import type { BaseUIComponentProps } from '../../types/index.js';
+import type { BaseUIComponentProps, BaseUIEvent } from '../../types/index.js';
 import type { FieldRootState } from '../root/FieldRoot.js';
 export interface FieldControlState extends FieldRootState {
 }
 type FieldControlEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
-    onInput?: JSX.EventHandlerUnion<infer Target, InputEvent> | undefined;
+    onInput?: JSX.InputEventHandlerUnion<infer Target, InputEvent> | undefined;
 } ? Target extends HTMLElement ? Target : HTMLElement : HTMLElement;
 interface FieldControlOwnProps<Component extends ValidComponent> {
     defaultValue?: string | number | string[] | undefined;
@@ -16,9 +16,9 @@ interface FieldControlOwnProps<Component extends ValidComponent> {
     name?: string | undefined;
     onValueChange?: ((value: string, eventDetails: FieldControlChangeEventDetails) => void) | undefined;
     value?: string | number | string[] | undefined;
-    onBlur?: BaseUIEventHandlerUnion<FieldControlEventTarget<Component>, FocusEvent> | undefined;
-    onFocus?: BaseUIEventHandlerUnion<FieldControlEventTarget<Component>, FocusEvent> | undefined;
-    onInput?: BaseUIEventHandlerUnion<FieldControlEventTarget<Component>, InputEvent> | undefined;
+    onBlur?: JSX.FocusEventHandlerUnion<FieldControlEventTarget<Component>, BaseUIEvent<FocusEvent>> | undefined;
+    onFocus?: JSX.FocusEventHandlerUnion<FieldControlEventTarget<Component>, BaseUIEvent<FocusEvent>> | undefined;
+    onInput?: JSX.InputEventHandlerUnion<FieldControlEventTarget<Component>, BaseUIEvent<InputEvent>> | undefined;
     onKeyDown?: BaseUIEventHandlerUnion<FieldControlEventTarget<Component>, KeyboardEvent> | undefined;
 }
 export type FieldControlProps<Component extends ValidComponent = 'input'> = BaseUIComponentProps<Component, FieldControlState, FieldControlOwnProps<Component>>;

package/dist/lib/types/field/root/FieldRoot.d.ts

@@ -15,7 +15,7 @@ interface FieldRootOwnProps {
     invalid?: boolean | undefined;
     name?: string | undefined;
     touched?: boolean | undefined;
-    validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined;
+    validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | void | Promise<string | string[] | null | void>) | undefined;
     validationDebounceTime?: number | undefined;
     validationMode?: Form.ValidationMode | undefined;
 }

package/dist/lib/types/field/root/createFieldValidation.d.ts

@@ -4,7 +4,7 @@ import type { FormContextValue } from '../../internals/form-context/FormContext.
 export type NativeFieldControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export interface FieldValidationController {
     commit: (value: unknown, revalidate?: boolean) => void;
-    change: (value: unknown) => void;
+    change: (value: unknown, cancelPending?: boolean) => void;
     registerInput: (source: symbol, element: NativeFieldControl, getControl?: () => HTMLElement | null) => () => void;
     getInputControl: () => HTMLElement | null;
     setActiveInputSource: (source: symbol | null) => void;
@@ -13,10 +13,11 @@ export interface CreateFieldValidationOptions {
     form: FormContextValue;
     getValidityData: () => FieldValidityData;
     publish: (data: FieldValidityData) => void;
-    validate: () => ((value: unknown, formValues: Record<string, unknown>) => string | string[] | null | Promise<string | string[] | null>) | undefined;
+    validate: () => ((value: unknown, formValues: Record<string, unknown>) => string | string[] | null | void | Promise<string | string[] | null | void>) | undefined;
     validationDebounceTime: Accessor<number>;
     state: Accessor<FieldState>;
     isMarkedDirty: () => boolean;
     shouldValidateOnChange: () => boolean;
+    validationMode: FormContextValue['validationMode'];
 }
 export declare function createFieldValidation(options: CreateFieldValidationOptions): FieldValidationController;

package/dist/lib/types/fieldset/legend/FieldsetLegend.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface FieldsetLegendState {
     /** Whether the component should ignore user interaction. */

package/dist/lib/types/fieldset/root/FieldsetRoot.d.ts

@@ -1,4 +1,4 @@
-import { type ValidComponent } from '@solidjs/web';
+import type { ValidComponent } from '@solidjs/web';
 import type { BaseUIComponentProps } from '../../types/index.js';
 export interface FieldsetRootState {
     /** Whether the component should ignore user interaction. */

package/dist/lib/types/index.d.ts

@@ -38,4 +38,5 @@ export * from './toolbar/index.js';
 export * from './tooltip/index.js';
 export * from './toggle/index.js';
 export * from './toggle-group/index.js';
+export * from './use-render/index.js';
 export type * from './types/index.js';

package/dist/lib/types/internals/composeEventHandlers.d.ts

@@ -3,9 +3,16 @@ import type { JSX } from '@solidjs/web';
 import type { BaseUIEvent } from '../types/index.js';
 export type BaseUIEventHandlerUnion<T, EventType extends Event> = JSX.EventHandlerUnion<T, BaseUIEvent<EventType>>;
 export type EventHandlerSource<T, EventType extends Event> = Accessor<BaseUIEventHandlerUnion<T, EventType> | undefined>;
+interface LiveEventHandler<T, EventType extends Event> {
+    readonly getHandler: EventHandlerSource<T, EventType>;
+}
 /**
- * Composes native event handlers in argument order. Calling
+ * Composes handlers in argument order, enhancing the native event before dispatch. Calling
  * `event.preventBaseUIHandler()` prevents the remaining handlers from running.
+ * Use `liveEventHandler` for replaceable callback props instead of snapshotting them.
  */
-export declare function composeEventHandlers<T, EventType extends Event>(...getHandlers: Array<EventHandlerSource<T, EventType>>): JSX.EventHandler<T, BaseUIEvent<EventType>>;
+export declare function composeEventHandlers<T, EventType extends Event>(...handlers: Array<BaseUIEventHandlerUnion<T, EventType> | LiveEventHandler<T, EventType> | undefined>): JSX.EventHandler<T, EventType>;
+/** Resolves a replaceable handler at dispatch time; pass the adapter to `composeEventHandlers`. */
+export declare function liveEventHandler<T, EventType extends Event>(getHandler: EventHandlerSource<T, EventType>): LiveEventHandler<T, EventType>;
 export declare function makeEventPreventable<EventType extends Event>(event: EventType): BaseUIEvent<EventType>;
+export {};

package/dist/lib/types/internals/createTransitionStatus.d.ts

@@ -6,4 +6,4 @@ export interface TransitionStatusState {
     transitionStatus: Accessor<TransitionStatus>;
 }
 /** Tracks mount retention and CSS starting/ending states for a visibility accessor. */
-export declare function createTransitionStatus(open: Accessor<boolean>): TransitionStatusState;
+export declare function createTransitionStatus(open: Accessor<boolean>, animateInitialOpen?: boolean): TransitionStatusState;

package/dist/lib/types/internals/field-root-context/FieldRootContext.d.ts

@@ -25,6 +25,7 @@ export interface FieldRootContextValue {
     validation: FieldValidationController;
 }
 declare const MISSING_CONTEXT: unique symbol;
+export declare const DEFAULT_FIELD_ROOT_CONTEXT: FieldRootContextValue;
 export declare const FieldRootContext: import("solid-js").Context<FieldRootContextValue | typeof MISSING_CONTEXT>;
 export declare function useFieldRootContext(optional: true): FieldRootContextValue;
 export declare function useFieldRootContext(optional?: false): FieldRootContextValue;