@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/collection-dnd.d.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/GridList.tsx.
+ * Modified for Solid Aria: collections, selection, drag and drop, and DOM rendering use Solid 2 ownership and reactive getters; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { DragAndDropContextValue, DropIndicatorProps } from "./drag-and-drop.js";
+import { DragAndDropHooks } from "./create-drag-and-drop.js";
+import { JSX } from "@solidjs/web";
+import { Accessor } from "solid-js";
+import { DroppableCollectionOptions } from "@solid2-aria/core/dnd/create-droppable-collection";
+import { DraggableCollectionState } from "@solid2-aria/stately/dnd/create-draggable-collection-state";
+import { DroppableCollectionState } from "@solid2-aria/stately/dnd/create-droppable-collection-state";
+import { Collection, DropTargetDelegate, DroppableCollectionProps, Key, KeyboardDelegate, Node, Orientation } from "@solid2-aria/types-shared";
+import { HTMLAttributes } from "@solid2-aria/core/types";
+import { MultipleSelectionManager } from "@solid2-aria/stately/selection/types";
+export interface CollectionDragAndDrop<T> {
+  readonly collectionProps: HTMLAttributes | undefined;
+  dragAndDropHooks: DragAndDropHooks<T> | undefined;
+  dragState: DraggableCollectionState | undefined;
+  dropState: DroppableCollectionState | undefined;
+  readonly preview: JSX.Element;
+}
+export declare function createCollectionDragAndDrop<T>(options: {
+  hooks?: DragAndDropHooks<T>;
+  collection: Collection<Node<T>>;
+  selectionManager: MultipleSelectionManager;
+  ref: Accessor<HTMLElement | null>;
+  keyboardDelegate?: KeyboardDelegate;
+  dropTargetCollection?: Iterable<Node<T>>;
+  onDropActivate?: DroppableCollectionProps["onDropActivate"];
+  onKeyDown?: DroppableCollectionOptions["onKeyDown"];
+  dropTargetDelegate?: DropTargetDelegate;
+  layout?: "stack" | "grid";
+  orientation?: Orientation;
+  direction?: "ltr" | "rtl";
+}): CollectionDragAndDrop<T>;
+export declare function CollectionDropIndicator(props: DropIndicatorProps & {
+  table?: boolean;
+  columnCount?: number;
+}): JSX.Element;
+export declare function createCollectionItemDragAndDrop(context: DragAndDropContextValue, key: Key, dropRef: Accessor<HTMLElement | null>, activateButtonRef?: Accessor<HTMLElement | null>): {
+  drag: import("@solid2-aria/core/dnd/create-draggable-item").DraggableItemResult | undefined;
+  drop: import("@solid2-aria/core/dnd/create-drop-indicator").DropIndicatorAria | undefined;
+};
+//# sourceMappingURL=collection-dnd.d.ts.map

package/dist/browser/collection-dnd.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/GridList.tsx.
+ * Modified for Solid Aria: collections, selection, drag and drop, and DOM rendering use Solid 2 ownership and reactive getters; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef, createRenderProps, dom } from "./utils.js";
+import { DragAndDropContext } from "./drag-and-drop.js";
+import { createComponent, dynamic, getNextElement, memo, mergeProps, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { Show, createMemo, createSignal, merge, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { createVisuallyHidden } from "@solid2-aria/core/visually-hidden/visually-hidden";
+import { ListKeyboardDelegate } from "@solid2-aria/core/selection/list-keyboard-delegate";
+// src/collection-dnd.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function createCollectionDragAndDrop(options) {
+	const hooks = untrack(() => options.hooks);
+	const [previewRef, setPreviewRef] = createSignal(null, { ownedWrite: true });
+	const dragState = hooks?.createDraggableCollectionState?.({
+		get collection() {
+			return options.collection;
+		},
+		preview: hooks.renderDragPreview ? previewRef : void 0,
+		get selectionManager() {
+			return options.selectionManager;
+		}
+	});
+	if (dragState) hooks?.createDraggableCollection?.({}, dragState, options.ref);
+	const dropState = hooks?.createDroppableCollectionState?.({
+		get collection() {
+			return options.collection;
+		},
+		get selectionManager() {
+			return options.selectionManager;
+		}
+	});
+	const liveCollection = { [Symbol.iterator]() {
+		return (options.dropTargetCollection ?? options.collection)[Symbol.iterator]();
+	} };
+	const fallbackKeyboard = createMemo(() => new ListKeyboardDelegate(options.collection, options.selectionManager.disabledKeys, options.ref));
+	const result = dropState ? hooks?.createDroppableCollection?.({
+		dropTargetDelegate: options.dropTargetDelegate ?? hooks.dropTargetDelegate ?? new hooks.ListDropTargetDelegate(liveCollection, options.ref, {
+			direction: options.direction,
+			layout: options.layout,
+			orientation: options.orientation
+		}),
+		get keyboardDelegate() {
+			return options.keyboardDelegate ?? fallbackKeyboard();
+		},
+		onDropActivate: options.onDropActivate,
+		onKeyDown: options.onKeyDown
+	}, dropState, options.ref) : void 0;
+	const Preview = hooks?.DragPreview;
+	const renderDragPreview = hooks?.renderDragPreview;
+	return {
+		get collectionProps() {
+			return result?.collectionProps;
+		},
+		dragAndDropHooks: hooks,
+		dragState,
+		dropState,
+		get preview() {
+			return Preview && renderDragPreview && createComponent(Preview, {
+				ref: (element) => {
+					setPreviewRef(() => element);
+				},
+				children: renderDragPreview
+			});
+		}
+	};
+}
+function CollectionDropIndicator(props) {
+	const context = useContext(DragAndDropContext);
+	const [buttonRef, setButtonRef] = createSignal(null, { ownedWrite: true });
+	const aria = untrack(() => requireValue(requireValue(context.dragAndDropHooks, "Expected context.dragAndDropHooks").createDropIndicator, "Expected context.dragAndDropHooks!.createDropIndicator")(props, requireValue(context.dropState, "Expected context.dropState"), buttonRef));
+	const hidden = createVisuallyHidden();
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-DropIndicator",
+		get values() {
+			return { isDropTarget: aria.isDropTarget };
+		}
+	}));
+	const Tag = dynamic(() => props.table === true ? dom.tr : dom.div);
+	const Cell = dynamic(() => props.table === true ? dom.td : dom.div);
+	return createComponent(Show, {
+		get when() {
+			return !aria.isHidden;
+		},
+		get children() {
+			return createComponent(Tag, mergeProps(render, {
+				role: "row",
+				ref: (element) => {
+					assignRef(untrack(() => props.ref), element);
+				},
+				get "data-drop-target"() {
+					return aria.isDropTarget || void 0;
+				},
+				get children() {
+					return createComponent(Cell, {
+						role: "gridcell",
+						get colspan() {
+							return props.columnCount;
+						},
+						get children() {
+							return [(() => {
+								var _el$ = getNextElement(_tmpl$);
+								spread(_el$, [() => {
+									return mergeProps$1(merge(() => hidden.visuallyHiddenProps ?? {}), merge(() => aria.dropIndicatorProps ?? {}));
+								}, { role: "button" }], false);
+								ref(() => {
+									return (element) => {
+										setButtonRef(element);
+									};
+								}, _el$);
+								runHydrationEvents();
+								return _el$;
+							})(), memo(() => {
+								return render.children;
+							})];
+						}
+					});
+				}
+			}));
+		}
+	});
+}
+function createCollectionItemDragAndDrop(context, key, dropRef, activateButtonRef) {
+	return {
+		drag: context.dragState ? context.dragAndDropHooks?.createDraggableItem?.({
+			hasDragButton: true,
+			key
+		}, context.dragState) : void 0,
+		drop: context.dropState ? context.dragAndDropHooks?.createDropIndicator?.({
+			activateButtonRef,
+			target: {
+				dropPosition: "on",
+				key,
+				type: "item"
+			}
+		}, context.dropState, dropRef) : void 0
+	};
+}
+export { CollectionDropIndicator, createCollectionDragAndDrop, createCollectionItemDragAndDrop };
+
+//# sourceMappingURL=collection-dnd.js.map

package/dist/browser/collection-dnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-dnd.js","names":["<Preview\n              ref={(element: DragPreviewRenderer | null) => {\n                setPreviewRef(() => element);\n              }}\n            >\n              {renderDragPreview}\n            </Preview>","ref={(element: DragPreviewRenderer | null) => {\n                setPreviewRef(() => element);\n              }}","<Show when={!aria.isHidden}>\n      <Tag\n        {...render}\n        role=\"row\"\n        ref={(element: HTMLElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        }}\n        data-drop-target={aria.isDropTarget || undefined}\n      >\n        <Cell role=\"gridcell\" colspan={props.columnCount}>\n          <div\n            {...mergeProps(\n              merge(() => hidden.visuallyHiddenProps ?? {}),\n              merge(() => aria.dropIndicatorProps ?? {})\n            )}\n            role=\"button\"\n            ref={(element: HTMLDivElement) => {\n              setButtonRef(element);\n            }}\n          />\n          {render.children}\n        </Cell>\n      </Tag>\n    </Show>","<Tag\n        {...render}\n        role=\"row\"\n        ref={(element: HTMLElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        }}\n        data-drop-target={aria.isDropTarget || undefined}\n      >\n        <Cell role=\"gridcell\" colspan={props.columnCount}>\n          <div\n            {...mergeProps(\n              merge(() => hidden.visuallyHiddenProps ?? {}),\n              merge(() => aria.dropIndicatorProps ?? {})\n            )}\n            role=\"button\"\n            ref={(element: HTMLDivElement) => {\n              setButtonRef(element);\n            }}\n          />\n          {render.children}\n        </Cell>\n      </Tag>","role=\"row\"","ref={(element: HTMLElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        }}","<Cell role=\"gridcell\" colspan={props.columnCount}>\n          <div\n            {...mergeProps(\n              merge(() => hidden.visuallyHiddenProps ?? {}),\n              merge(() => aria.dropIndicatorProps ?? {})\n            )}\n            role=\"button\"\n            ref={(element: HTMLDivElement) => {\n              setButtonRef(element);\n            }}\n          />\n          {render.children}\n        </Cell>","role=\"gridcell\"","role=\"button\"","ref={(element: HTMLDivElement) => {\n              setButtonRef(element);\n            }}","render.children","_$createComponent","mergeProps","_$mergeProps","_$getNextElement","_$memo"],"sources":["../../src/collection-dnd.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/GridList.tsx.\n * Modified for Solid Aria: collections, selection, drag and drop, and DOM rendering use Solid 2 ownership and reactive getters; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type { DroppableCollectionOptions } from \"@solid2-aria/core/dnd/create-droppable-collection\";\nimport { ListKeyboardDelegate } from \"@solid2-aria/core/selection/list-keyboard-delegate\";\nimport type { HTMLAttributes } from \"@solid2-aria/core/types\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { requireValue } from \"@solid2-aria/core/utils/require-value\";\nimport { createVisuallyHidden } from \"@solid2-aria/core/visually-hidden/visually-hidden\";\nimport type { DraggableCollectionState } from \"@solid2-aria/stately/dnd/create-draggable-collection-state\";\nimport type { DroppableCollectionState } from \"@solid2-aria/stately/dnd/create-droppable-collection-state\";\nimport type { MultipleSelectionManager } from \"@solid2-aria/stately/selection/types\";\nimport type {\n  Collection as ICollection,\n  Node,\n  Key,\n  DragPreviewRenderer,\n  Orientation,\n  KeyboardDelegate,\n  DroppableCollectionProps,\n  DropTargetDelegate,\n} from \"@solid2-aria/types-shared\";\nimport { dynamic } from \"@solidjs/web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  untrack,\n  createSignal,\n  createMemo,\n  useContext,\n  Show,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport type { DragAndDropHooks } from \"./create-drag-and-drop\";\nimport { DragAndDropContext } from \"./drag-and-drop\";\nimport type {\n  DragAndDropContextValue,\n  DropIndicatorProps,\n} from \"./drag-and-drop\";\nimport { assignRef, dom, createRenderProps } from \"./utils\";\n\nexport interface CollectionDragAndDrop<T> {\n  readonly collectionProps: HTMLAttributes | undefined;\n  dragAndDropHooks: DragAndDropHooks<T> | undefined;\n  dragState: DraggableCollectionState | undefined;\n  dropState: DroppableCollectionState | undefined;\n  readonly preview: JSX.Element;\n}\n\nexport function createCollectionDragAndDrop<T>(options: {\n  hooks?: DragAndDropHooks<T>;\n  collection: ICollection<Node<T>>;\n  selectionManager: MultipleSelectionManager;\n  ref: Accessor<HTMLElement | null>;\n  keyboardDelegate?: KeyboardDelegate;\n  dropTargetCollection?: Iterable<Node<T>>;\n  onDropActivate?: DroppableCollectionProps[\"onDropActivate\"];\n  onKeyDown?: DroppableCollectionOptions[\"onKeyDown\"];\n  dropTargetDelegate?: DropTargetDelegate;\n  layout?: \"stack\" | \"grid\";\n  orientation?: Orientation;\n  direction?: \"ltr\" | \"rtl\";\n}): CollectionDragAndDrop<T> {\n  const hooks = untrack(() => options.hooks);\n\n  const [previewRef, setPreviewRef] = createSignal<DragPreviewRenderer | null>(\n    null,\n    { ownedWrite: true }\n  );\n\n  const dragState = hooks?.createDraggableCollectionState?.({\n    get collection() {\n      return options.collection;\n    },\n    preview: hooks.renderDragPreview ? previewRef : undefined,\n    get selectionManager() {\n      return options.selectionManager;\n    },\n  });\n\n  if (dragState) {\n    hooks?.createDraggableCollection?.({}, dragState, options.ref);\n  }\n\n  const dropState = hooks?.createDroppableCollectionState?.({\n    get collection() {\n      return options.collection;\n    },\n    get selectionManager() {\n      return options.selectionManager;\n    },\n  });\n\n  const liveCollection: Iterable<Node<T>> = {\n    [Symbol.iterator]() {\n      return (options.dropTargetCollection ?? options.collection)[\n        Symbol.iterator\n      ]();\n    },\n  };\n\n  const fallbackKeyboard = createMemo(\n    () =>\n      new ListKeyboardDelegate(\n        options.collection,\n        options.selectionManager.disabledKeys,\n        options.ref\n      )\n  );\n\n  const result = dropState\n    ? hooks?.createDroppableCollection?.(\n        {\n          dropTargetDelegate:\n            options.dropTargetDelegate ??\n            hooks.dropTargetDelegate ??\n            new hooks.ListDropTargetDelegate(liveCollection, options.ref, {\n              direction: options.direction,\n              layout: options.layout,\n              orientation: options.orientation,\n            }),\n          get keyboardDelegate() {\n            return options.keyboardDelegate ?? fallbackKeyboard();\n          },\n          onDropActivate: options.onDropActivate,\n          onKeyDown: options.onKeyDown,\n        },\n        dropState,\n        options.ref\n      )\n    : undefined;\n\n  const Preview = hooks?.DragPreview;\n  const renderDragPreview = hooks?.renderDragPreview;\n\n  return {\n    get collectionProps() {\n      return result?.collectionProps;\n    },\n    dragAndDropHooks: hooks,\n    dragState,\n    dropState,\n    get preview() {\n      return (\n        <>\n          {Preview && renderDragPreview && (\n            <Preview\n              ref={(element: DragPreviewRenderer | null) => {\n                setPreviewRef(() => element);\n              }}\n            >\n              {renderDragPreview}\n            </Preview>\n          )}\n        </>\n      );\n    },\n  };\n}\n\nexport function CollectionDropIndicator(\n  props: DropIndicatorProps & { table?: boolean; columnCount?: number }\n) {\n  const context = useContext(DragAndDropContext);\n\n  const [buttonRef, setButtonRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const aria = untrack(() =>\n    requireValue(\n      requireValue(\n        context.dragAndDropHooks,\n        \"Expected context.dragAndDropHooks\"\n      ).createDropIndicator,\n      \"Expected context.dragAndDropHooks!.createDropIndicator\"\n    )(\n      props,\n      requireValue(context.dropState, \"Expected context.dropState\"),\n      buttonRef\n    )\n  );\n\n  const hidden = createVisuallyHidden();\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      defaultClass: \"solid2-aria-DropIndicator\",\n      get values() {\n        return { isDropTarget: aria.isDropTarget };\n      },\n    })\n  );\n\n  const Tag = dynamic(() => (props.table === true ? dom.tr : dom.div));\n  const Cell = dynamic(() => (props.table === true ? dom.td : dom.div));\n\n  return (\n    <Show when={!aria.isHidden}>\n      <Tag\n        {...render}\n        role=\"row\"\n        ref={(element: HTMLElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        }}\n        data-drop-target={aria.isDropTarget || undefined}\n      >\n        <Cell role=\"gridcell\" colspan={props.columnCount}>\n          <div\n            {...mergeProps(\n              merge(() => hidden.visuallyHiddenProps ?? {}),\n              merge(() => aria.dropIndicatorProps ?? {})\n            )}\n            role=\"button\"\n            ref={(element: HTMLDivElement) => {\n              setButtonRef(element);\n            }}\n          />\n          {render.children}\n        </Cell>\n      </Tag>\n    </Show>\n  );\n}\n\nexport function createCollectionItemDragAndDrop(\n  context: DragAndDropContextValue,\n  key: Key,\n  dropRef: Accessor<HTMLElement | null>,\n  activateButtonRef?: Accessor<HTMLElement | null>\n) {\n  const drag = context.dragState\n    ? context.dragAndDropHooks?.createDraggableItem?.(\n        { hasDragButton: true, key },\n        context.dragState\n      )\n    : undefined;\n\n  const drop = context.dropState\n    ? context.dragAndDropHooks?.createDropIndicator?.(\n        {\n          activateButtonRef,\n          target: { dropPosition: \"on\", key, type: \"item\" },\n        },\n        context.dropState,\n        dropRef\n      )\n    : undefined;\n\n  return { drag, drop };\n}\n"],"mappings":"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"}

package/dist/browser/collection.d.ts

@@ -0,0 +1,153 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Collection.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Ref, StyleProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { Accessor, Component } from "solid-js";
+import { Collection } from "@solid2-aria/core/collections/collection-builder";
+import { Collection as Collection$2, CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, Node, SectionProps as SectionProps$1, SelectionBehavior, SelectionMode } from "@solid2-aria/types-shared";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export declare const SectionContext: import("solid-js").Context<SectionContextValue | null>;
+export interface CollectionProps<T> extends Omit<CollectionBase<T>, "children"> {
+  /** The contents of the collection. */
+  children?: JSX.Element | ((item: T) => JSX.Element);
+  /** Values that should invalidate the item cache when using dynamic collections. */
+  dependencies?: readonly any[];
+}
+export interface ItemRenderProps {
+  /**
+   * Whether the item is currently hovered with a mouse.
+   *
+   * @selector [data-hovered]
+   */
+  isHovered: boolean;
+  /**
+   * Whether the item is currently in a pressed state.
+   *
+   * @selector [data-pressed]
+   */
+  isPressed: boolean;
+  /**
+   * Whether the item is currently selected.
+   *
+   * @selector [data-selected]
+   */
+  isSelected: boolean;
+  /**
+   * Whether the item is currently focused.
+   *
+   * @selector [data-focused]
+   */
+  isFocused: boolean;
+  /**
+   * Whether the item is currently keyboard focused.
+   *
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean;
+  /**
+   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item
+   * may not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+  /**
+   * The type of selection that is allowed in the collection.
+   *
+   * @selector [data-selection-mode="single | multiple"]
+   */
+  selectionMode: SelectionMode;
+  /** The selection behavior for the collection. */
+  selectionBehavior: SelectionBehavior;
+  /**
+   * Whether the item allows dragging.
+   *
+   * Note: This property is only available in collection components that support drag and drop.
+   * @selector [data-allows-dragging]
+   */
+  allowsDragging?: boolean;
+  /**
+   * Whether the item is currently being dragged.
+   *
+   * Note: This property is only available in collection components that support drag and drop.
+   * @selector [data-dragging]
+   */
+  isDragging?: boolean;
+  /**
+   * Whether the item is currently an active drop target.
+   *
+   * Note: This property is only available in collection components that support drag and drop.
+   * @selector [data-drop-target]
+   */
+  isDropTarget?: boolean;
+}
+export interface SectionProps<T> extends Omit<SectionProps$1<T>, "children" | "title">, StyleProps, GlobalDOMAttributes<HTMLElement> {
+  /** The unique id of the section. */
+  id?: Key;
+  /**
+   * The object value that this section represents. When using dynamic collections, this is set
+   * automatically.
+   */
+  value?: T;
+  /** Static child items or a function to render children. */
+  children?: JSX.Element | ((item: T) => JSX.Element);
+  /** Values that should invalidate the item cache when using dynamic collections. */
+  dependencies?: readonly any[];
+}
+export interface CollectionBranchProps {
+  /** The collection of items to render. */
+  collection: Collection$2<Node<unknown>>;
+  /** The parent node of the items to render. */
+  parent: Node<unknown>;
+  /** A function that renders a drop indicator between items. */
+  renderDropIndicator?: (target: ItemDropTarget) => JSX.Element;
+}
+export interface CollectionRootProps extends JSX.HTMLAttributes<HTMLElement> {
+  /** The collection of items to render. */
+  collection: Collection$2<Node<unknown>>;
+  /** A set of keys for items that should always be persisted in the DOM. */
+  persistedKeys?: Set<Key> | null;
+  /** A ref to the scroll container for the collection. */
+  scrollRef?: Accessor<HTMLElement | null>;
+  /** A function that renders a drop indicator between items. */
+  renderDropIndicator?: (target: ItemDropTarget) => JSX.Element;
+}
+export interface CollectionRenderer {
+  /** Whether this is a virtualized collection. */
+  isVirtualized?: boolean;
+  /** A delegate object that provides layout information for items in the collection. */
+  layoutDelegate?: LayoutDelegate;
+  /** A delegate object that provides drop targets for pointer coordinates within the collection. */
+  dropTargetDelegate?: DropTargetDelegate;
+  /** A component that renders the root collection items. */
+  CollectionRoot: Component<CollectionRootProps>;
+  /** A component that renders the child collection items. */
+  CollectionBranch: Component<CollectionBranchProps>;
+}
+export interface SectionContextValue {
+  name: string;
+  render: (props: SectionProps<any>, ref: Ref<HTMLElement>, node: Node<unknown>, defaultClass?: string) => JSX.Element;
+}
+export declare const DefaultCollectionRenderer: CollectionRenderer;
+export declare const CollectionRendererContext: import("solid-js").Context<CollectionRenderer>;
+export declare function renderAfterDropIndicators(collection: Collection$2<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget) => JSX.Element): JSX.Element;
+export declare function createPersistedKeys(focusedKey: Key | null): Set<Key> | null;
+export declare function Section<T>(props: SectionProps<T> & {
+  ref?: Ref<HTMLElement>;
+}): JSX.Element;
+export { Collection };
+//# sourceMappingURL=collection.d.ts.map

package/dist/browser/collection.js

@@ -0,0 +1,106 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Collection.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef } from "./utils.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { createContext, untrack, useContext } from "solid-js";
+import { Collection, createBranchComponent } from "@solid2-aria/core/collections/collection-builder";
+import { createCachedChildren } from "@solid2-aria/core/collections/create-cached-children";
+// src/collection.tsx
+const SectionContext = createContext(null);
+const SectionCollection = createBranchComponent("section", (props, ref, section) => {
+	const context = useContext(SectionContext);
+	if (!context) throw new Error("Section must be rendered in a collection.");
+	return context.render(props, ref, section, "solid2-aria-Section");
+});
+function CollectionNodes(props) {
+	const content = createCachedChildren({
+		children(node) {
+			if (node.type === "content") return null;
+			const rendered = node.render?.(node) ?? node.rendered;
+			return [
+				memo(() => {
+					return memo(() => {
+						return !!(props.renderDropIndicator && node.type === "item");
+					})() ? props.renderDropIndicator({
+						dropPosition: "before",
+						key: node.key,
+						type: "item"
+					}) : null;
+				}),
+				rendered,
+				memo(() => {
+					return memo(() => {
+						return !!(props.renderDropIndicator && node.type === "item");
+					})() ? renderAfterDropIndicators(props.collection, node, props.renderDropIndicator) : null;
+				})
+			];
+		},
+		get dependencies() {
+			return [
+				props.collection,
+				props.parent,
+				props.renderDropIndicator
+			];
+		},
+		get items() {
+			return props.parent ? props.collection.getChildren?.(props.parent.key) : props.collection;
+		}
+	});
+	return memo(content);
+}
+const DefaultCollectionRenderer = {
+	CollectionBranch: (props) => createComponent(CollectionNodes, props),
+	CollectionRoot: (props) => createComponent(CollectionNodes, props)
+};
+const CollectionRendererContext = createContext(DefaultCollectionRenderer);
+function shouldRenderAfter(node, next) {
+	return next === null || node.parentKey !== next.parentKey && next.level < node.level;
+}
+function renderAfterDropIndicators(collection, node, renderDropIndicator) {
+	let keyAfter = collection.getKeyAfter(node.key);
+	let next = keyAfter === null || keyAfter === void 0 ? null : collection.getItem(keyAfter);
+	while (next && next.type !== "item") {
+		keyAfter = collection.getKeyAfter(next.key);
+		next = keyAfter === null || keyAfter === void 0 ? null : collection.getItem(keyAfter);
+	}
+	let sibling = node.nextKey === null || node.nextKey === void 0 ? null : collection.getItem(node.nextKey);
+	while (sibling && sibling.type !== "item") sibling = sibling.nextKey === null || sibling.nextKey === void 0 ? null : collection.getItem(sibling.nextKey);
+	const result = [];
+	if (!sibling) {
+		let current = node;
+		while (current?.type === "item" && shouldRenderAfter(current, next)) {
+			result.push(renderDropIndicator({
+				dropPosition: "after",
+				key: current.key,
+				type: "item"
+			}));
+			current = current.parentKey === null || current.parentKey === void 0 ? null : collection.getItem(current.parentKey);
+		}
+	}
+	return result;
+}
+function createPersistedKeys(focusedKey) {
+	return focusedKey === null || focusedKey === void 0 ? null : /* @__PURE__ */ new Set([focusedKey]);
+}
+function Section(props) {
+	return createComponent(SectionCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+export { Collection, CollectionRendererContext, DefaultCollectionRenderer, Section, SectionContext, createPersistedKeys, renderAfterDropIndicators };
+
+//# sourceMappingURL=collection.js.map

package/dist/browser/collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.js","names":["{props.renderDropIndicator && node.type === \"item\"\n            ? props.renderDropIndicator({\n                dropPosition: \"before\",\n                key: node.key,\n                type: \"item\",\n              })\n            : null}","{props.renderDropIndicator && node.type === \"item\"\n            ? renderAfterDropIndicators(\n                props.collection,\n                node,\n                props.renderDropIndicator\n              )\n            : null}","{content()}","<CollectionNodes {...props} />","<SectionCollection\n      {...props}\n      ref={(element: HTMLElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />","ref={(element: HTMLElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","_$memo","_$createComponent","_$mergeProps"],"sources":["../../src/collection.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/Collection.tsx.\n * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createBranchComponent } from \"@solid2-aria/core/collections/collection-builder\";\nimport { createCachedChildren } from \"@solid2-aria/core/collections/create-cached-children\";\nimport type {\n  CollectionBase,\n  DropTargetDelegate,\n  ItemDropTarget,\n  Key,\n  LayoutDelegate,\n  Collection as ICollection,\n  Node,\n  SelectionBehavior,\n  SelectionMode,\n  SectionProps as SharedSectionProps,\n} from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport { untrack, createContext, useContext } from \"solid-js\";\nimport type { Accessor, Component } from \"solid-js\";\n\nimport { assignRef } from \"./utils\";\nimport type { Ref, StyleProps } from \"./utils\";\n\nexport const SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface CollectionProps<T> extends Omit<\n  CollectionBase<T>,\n  \"children\"\n> {\n  /** The contents of the collection. */\n  children?: JSX.Element | ((item: T) => JSX.Element);\n  /** Values that should invalidate the item cache when using dynamic collections. */\n  // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n  dependencies?: readonly any[];\n}\n\nexport interface ItemRenderProps {\n  /**\n   * Whether the item is currently hovered with a mouse.\n   *\n   * @selector [data-hovered]\n   */\n  isHovered: boolean;\n  /**\n   * Whether the item is currently in a pressed state.\n   *\n   * @selector [data-pressed]\n   */\n  isPressed: boolean;\n  /**\n   * Whether the item is currently selected.\n   *\n   * @selector [data-selected]\n   */\n  isSelected: boolean;\n  /**\n   * Whether the item is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the item is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item\n   * may not be focused. Dependent on `disabledKeys` and `disabledBehavior`.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n  /**\n   * The type of selection that is allowed in the collection.\n   *\n   * @selector [data-selection-mode=\"single | multiple\"]\n   */\n  selectionMode: SelectionMode;\n  /** The selection behavior for the collection. */\n  selectionBehavior: SelectionBehavior;\n  /**\n   * Whether the item allows dragging.\n   *\n   * Note: This property is only available in collection components that support drag and drop.\n   * @selector [data-allows-dragging]\n   */\n  allowsDragging?: boolean;\n  /**\n   * Whether the item is currently being dragged.\n   *\n   * Note: This property is only available in collection components that support drag and drop.\n   * @selector [data-dragging]\n   */\n  isDragging?: boolean;\n  /**\n   * Whether the item is currently an active drop target.\n   *\n   * Note: This property is only available in collection components that support drag and drop.\n   * @selector [data-drop-target]\n   */\n  isDropTarget?: boolean;\n}\n\nexport interface SectionProps<T>\n  extends\n    Omit<SharedSectionProps<T>, \"children\" | \"title\">,\n    StyleProps,\n    GlobalDOMAttributes<HTMLElement> {\n  /** The unique id of the section. */\n  id?: Key;\n  /**\n   * The object value that this section represents. When using dynamic collections, this is set\n   * automatically.\n   */\n  value?: T;\n  /** Static child items or a function to render children. */\n  children?: JSX.Element | ((item: T) => JSX.Element);\n  /** Values that should invalidate the item cache when using dynamic collections. */\n  // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n  dependencies?: readonly any[];\n}\n\nexport interface CollectionBranchProps {\n  /** The collection of items to render. */\n  collection: ICollection<Node<unknown>>;\n  /** The parent node of the items to render. */\n  parent: Node<unknown>;\n  /** A function that renders a drop indicator between items. */\n  renderDropIndicator?: (target: ItemDropTarget) => JSX.Element;\n}\n\nexport interface CollectionRootProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** The collection of items to render. */\n  collection: ICollection<Node<unknown>>;\n  /** A set of keys for items that should always be persisted in the DOM. */\n  persistedKeys?: Set<Key> | null;\n  /** A ref to the scroll container for the collection. */\n  scrollRef?: Accessor<HTMLElement | null>;\n  /** A function that renders a drop indicator between items. */\n  renderDropIndicator?: (target: ItemDropTarget) => JSX.Element;\n}\n\nexport interface CollectionRenderer {\n  /** Whether this is a virtualized collection. */\n  isVirtualized?: boolean;\n  /** A delegate object that provides layout information for items in the collection. */\n  layoutDelegate?: LayoutDelegate;\n  /** A delegate object that provides drop targets for pointer coordinates within the collection. */\n  dropTargetDelegate?: DropTargetDelegate;\n  /** A component that renders the root collection items. */\n  CollectionRoot: Component<CollectionRootProps>;\n  /** A component that renders the child collection items. */\n  CollectionBranch: Component<CollectionBranchProps>;\n}\n\nexport interface SectionContextValue {\n  name: string;\n  render: (\n    // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n    props: SectionProps<any>,\n    ref: Ref<HTMLElement>,\n    node: Node<unknown>,\n    defaultClass?: string\n  ) => JSX.Element;\n}\n\nconst SectionCollection = createBranchComponent(\n  \"section\",\n  // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n  (props: SectionProps<any>, ref: Ref<HTMLElement>, section: Node<any>) => {\n    const context = useContext(SectionContext);\n\n    if (!context) {\n      throw new Error(\"Section must be rendered in a collection.\");\n    }\n\n    return context.render(props, ref, section, \"solid2-aria-Section\");\n  }\n);\n\nfunction CollectionNodes(props: {\n  collection: ICollection<Node<unknown>>;\n  parent?: Node<unknown>;\n  renderDropIndicator?: CollectionBranchProps[\"renderDropIndicator\"];\n}): JSX.Element {\n  const content = createCachedChildren({\n    children(node: Node<unknown>) {\n      if (node.type === \"content\") {\n        // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n        return null;\n      }\n\n      const rendered = node.render?.(node) ?? node.rendered;\n\n      return (\n        <>\n          {props.renderDropIndicator && node.type === \"item\"\n            ? props.renderDropIndicator({\n                dropPosition: \"before\",\n                key: node.key,\n                type: \"item\",\n              })\n            : null}\n          {rendered}\n          {props.renderDropIndicator && node.type === \"item\"\n            ? renderAfterDropIndicators(\n                props.collection,\n                node,\n                props.renderDropIndicator\n              )\n            : null}\n        </>\n      );\n    },\n    get dependencies() {\n      return [props.collection, props.parent, props.renderDropIndicator];\n    },\n    get items() {\n      return props.parent\n        ? props.collection.getChildren?.(props.parent.key)\n        : props.collection;\n    },\n  });\n\n  return <>{content()}</>;\n}\n\nexport const DefaultCollectionRenderer: CollectionRenderer = {\n  CollectionBranch: (props) => <CollectionNodes {...props} />,\n  CollectionRoot: (props) => <CollectionNodes {...props} />,\n};\n\nexport const CollectionRendererContext = createContext<CollectionRenderer>(\n  DefaultCollectionRenderer\n);\n\nfunction shouldRenderAfter(\n  node: Node<unknown>,\n  next: Node<unknown> | null\n): boolean {\n  return (\n    next === null ||\n    (node.parentKey !== next.parentKey && next.level < node.level)\n  );\n}\n\nexport function renderAfterDropIndicators(\n  collection: ICollection<Node<unknown>>,\n  node: Node<unknown>,\n  renderDropIndicator: (target: ItemDropTarget) => JSX.Element\n): JSX.Element {\n  let keyAfter = collection.getKeyAfter(node.key);\n\n  let next =\n    keyAfter === null || keyAfter === undefined\n      ? null\n      : collection.getItem(keyAfter);\n\n  while (next && next.type !== \"item\") {\n    keyAfter = collection.getKeyAfter(next.key);\n    next =\n      keyAfter === null || keyAfter === undefined\n        ? null\n        : collection.getItem(keyAfter);\n  }\n\n  let sibling =\n    node.nextKey === null || node.nextKey === undefined\n      ? null\n      : collection.getItem(node.nextKey);\n\n  while (sibling && sibling.type !== \"item\") {\n    sibling =\n      sibling.nextKey === null || sibling.nextKey === undefined\n        ? null\n        : collection.getItem(sibling.nextKey);\n  }\n\n  const result: JSX.Element[] = [];\n\n  if (!sibling) {\n    let current: Node<unknown> | null = node;\n\n    while (current?.type === \"item\" && shouldRenderAfter(current, next)) {\n      result.push(\n        renderDropIndicator({\n          dropPosition: \"after\",\n          key: current.key,\n          type: \"item\",\n        })\n      );\n      current =\n        current.parentKey === null || current.parentKey === undefined\n          ? null\n          : collection.getItem(current.parentKey);\n    }\n  }\n\n  return result;\n}\n\nexport function createPersistedKeys(focusedKey: Key | null): Set<Key> | null {\n  return focusedKey === null || focusedKey === undefined\n    ? null\n    : new Set([focusedKey]);\n}\n\nexport { Collection } from \"@solid2-aria/core/collections/collection-builder\";\n\nexport function Section<T>(\n  props: SectionProps<T> & { ref?: Ref<HTMLElement> }\n): JSX.Element {\n  return (\n    <SectionCollection\n      {...props}\n      ref={(element: HTMLElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/browser/color-area.d.ts

@@ -0,0 +1,21 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorArea.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ContextValue, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaColorAreaProps } from "@solid2-aria/core/color/create-color-area";
+import { ColorAreaState } from "@solid2-aria/stately/color/create-color-area-state";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export interface ColorAreaRenderProps {
+  isDisabled: boolean;
+  state: ColorAreaState;
+}
+export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ColorAreaContext: import("solid-js").Context<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>;
+export declare const ColorAreaStateContext: import("solid-js").Context<ColorAreaState | null>;
+export declare function ColorArea(input: ColorAreaProps): JSX.Element;
+//# sourceMappingURL=color-area.d.ts.map

package/dist/browser/color-area.js

@@ -0,0 +1,94 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ColorArea.tsx.
+ * Modified for Solid Aria: composed Solid Aria and Stately primitives with Solid 2 contexts, reactive getters, and DOM refs; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createContextProps, createRenderProps, dom } from "./utils.js";
+import { InternalColorThumbContext } from "./color-thumb.js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createColorArea } from "@solid2-aria/core/color/create-color-area";
+import { createColorAreaState } from "@solid2-aria/stately/color/create-color-area-state";
+// src/color-area.tsx
+const ColorAreaContext = createContext(null);
+const ColorAreaStateContext = createContext(null);
+function ColorArea(input) {
+	const [inputXRef, setInputXRef] = createSignal(null, { ownedWrite: true });
+	const [inputYRef, setInputYRef] = createSignal(null, { ownedWrite: true });
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), ColorAreaContext);
+	const state = createColorAreaState(props);
+	const aria = createColorArea(mergeProps$1(props, {
+		containerRef: ref,
+		inputXRef,
+		inputYRef
+	}), state);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColorArea",
+		get defaultStyle() {
+			const { style } = aria.colorAreaProps;
+			return typeof style === "object" ? style : void 0;
+		},
+		values: {
+			get isDisabled() {
+				return props.isDisabled ?? false;
+			},
+			state
+		}
+	}));
+	const thumb = {
+		inputXRef,
+		inputYRef,
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		setInputXRef: (element) => {
+			setInputXRef(element);
+		},
+		setInputYRef: (element) => {
+			setInputYRef(element);
+		},
+		state,
+		get thumbProps() {
+			return aria.thumbProps;
+		},
+		get xInputProps() {
+			return aria.xInputProps;
+		},
+		get yInputProps() {
+			return aria.yInputProps;
+		}
+	};
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.colorAreaProps), render);
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return memo(() => {
+				return !!(typeof props.slot === "string" && props.slot.length > 0);
+			})() ? props.slot : void 0;
+		},
+		get "data-disabled"() {
+			return props.isDisabled === true ? true : void 0;
+		},
+		get children() {
+			return createComponent(ColorAreaStateContext, {
+				value: state,
+				get children() {
+					return createComponent(InternalColorThumbContext, {
+						value: thumb,
+						get children() {
+							return render.children;
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+export { ColorArea, ColorAreaContext, ColorAreaStateContext };
+
+//# sourceMappingURL=color-area.js.map