@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/toggle-button.js

@@ -0,0 +1,119 @@
+/*
+ * 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/ToggleButton.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props and an untracked setup-time choice of group interaction behavior.
+ * 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 { SelectionIndicatorContext } from "./selection-indicator.js";
+import { ToggleGroupStateContext } from "./toggle-button-group.js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, merge, omit, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { createToggleState } from "@solid2-aria/stately/toggle/create-toggle-state";
+import { isPresent } from "@solid2-aria/core/utils/is-present";
+import { createToggleButton } from "@solid2-aria/core/button/create-toggle-button";
+import { createToggleButtonGroupItem } from "@solid2-aria/core/button/create-toggle-button-group";
+// src/toggle-button.tsx
+const ToggleButtonContext = createContext(null);
+function ToggleButton(input) {
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), ToggleButtonContext);
+	const group = useContext(ToggleGroupStateContext);
+	const state = createToggleState(group ? {
+		get isSelected() {
+			return isPresent(props.id) && group.selectedKeys.has(props.id);
+		},
+		onChange(selected) {
+			if (isPresent(props.id)) group.setSelected(props.id, selected);
+		}
+	} : props);
+	const aria = group && untrack(() => isPresent(props.id)) ? createToggleButtonGroupItem(mergeProps$1(props, { get id() {
+		return requireValue(props.id, "Expected props.id");
+	} }), group, ref) : createToggleButton(mergeProps$1(props, { get id() {
+		return isPresent(props.id) ? String(props.id) : void 0;
+	} }), state, ref);
+	const focus = createFocusRing(props);
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const values = {
+		get isDisabled() {
+			return aria.isDisabled;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return state.isSelected;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ToggleButton",
+		values
+	}));
+	return createComponent(dom.button, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), merge(() => aria.buttonProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-selected"() {
+			return values.isSelected || void 0;
+		},
+		get "data-disabled"() {
+			return values.isDisabled || void 0;
+		},
+		get "data-pressed"() {
+			return values.isPressed || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get children() {
+			return createComponent(SelectionIndicatorContext, {
+				value: { get isSelected() {
+					return state.isSelected;
+				} },
+				get children() {
+					return render.children;
+				}
+			});
+		}
+	}));
+}
+export { ToggleButton, ToggleButtonContext };
+
+//# sourceMappingURL=toggle-button.js.map

package/dist/browser/toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","names":["<dom.button\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n        merge(() => aria.buttonProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLButtonElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-selected={values.isSelected || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-pressed={values.isPressed || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <SelectionIndicatorContext\n        value={{\n          get isSelected() {\n            return state.isSelected;\n          },\n        }}\n      >\n        {render.children}\n      </SelectionIndicatorContext>\n    </dom.button>","dom.button","ref={(element: HTMLButtonElement) => {\n        setRef(element);\n      }}","<SelectionIndicatorContext\n        value={{\n          get isSelected() {\n            return state.isSelected;\n          },\n        }}\n      >\n        {render.children}\n      </SelectionIndicatorContext>","value={{\n          get isSelected() {\n            return state.isSelected;\n          },\n        }}","mergeProps","_$createComponent","_$mergeProps"],"sources":["../../src/toggle-button.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/ToggleButton.tsx.\n * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; uses Solid class props and an untracked setup-time choice of group interaction behavior.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport { createToggleButton } from \"@solid2-aria/core/button/create-toggle-button\";\nimport type { AriaToggleButtonProps } from \"@solid2-aria/core/button/create-toggle-button\";\nimport { createToggleButtonGroupItem } from \"@solid2-aria/core/button/create-toggle-button-group\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { isPresent } from \"@solid2-aria/core/utils/is-present\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { requireValue } from \"@solid2-aria/core/utils/require-value\";\nimport { createToggleState } from \"@solid2-aria/stately/toggle/create-toggle-state\";\nimport type { ToggleState } from \"@solid2-aria/stately/toggle/create-toggle-state\";\nimport type { HoverEvents, Key } from \"@solid2-aria/types-shared\";\nimport type { JSX } from \"@solidjs/web\";\nimport { merge, untrack, createContext, useContext, omit } from \"solid-js\";\n\nimport type { ButtonRenderProps } from \"./button\";\nimport { SelectionIndicatorContext } from \"./selection-indicator\";\nimport { ToggleGroupStateContext } from \"./toggle-button-group\";\nimport { dom, createContextProps, createRenderProps } from \"./utils\";\nimport type { Ref, ContextValue, SlotProps, RenderProps } from \"./utils\";\n\nexport interface ToggleButtonRenderProps extends Omit<\n  ButtonRenderProps,\n  \"isPending\"\n> {\n  isSelected: boolean;\n  state: ToggleState;\n}\n\nexport interface ToggleButtonProps\n  extends\n    Omit<AriaToggleButtonProps, \"children\" | \"elementType\" | \"id\">,\n    SlotProps,\n    HoverEvents,\n    RenderProps<ToggleButtonRenderProps, \"button\"> {\n  id?: Key;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport const ToggleButtonContext =\n  createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>(null);\n\nexport function ToggleButton(input: ToggleButtonProps): JSX.Element {\n  const [props, ref, setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    ToggleButtonContext\n  );\n\n  const group = useContext(ToggleGroupStateContext);\n\n  const state = createToggleState(\n    group\n      ? {\n          get isSelected() {\n            return isPresent(props.id) && group.selectedKeys.has(props.id);\n          },\n          onChange(selected) {\n            if (isPresent(props.id)) {\n              group.setSelected(props.id, selected);\n            }\n          },\n        }\n      : props\n  );\n\n  const aria =\n    group && untrack(() => isPresent(props.id))\n      ? createToggleButtonGroupItem(\n          mergeProps(props, {\n            get id() {\n              return requireValue(props.id, \"Expected props.id\");\n            },\n          }),\n          group,\n          ref\n        )\n      : createToggleButton(\n          mergeProps(props, {\n            get id() {\n              return isPresent(props.id) ? String(props.id) : undefined;\n            },\n          }),\n          state,\n          ref\n        );\n\n  const focus = createFocusRing(props);\n\n  const hover = createHover(\n    mergeProps(props, {\n      get isDisabled() {\n        return aria.isDisabled;\n      },\n    })\n  );\n\n  const values: ToggleButtonRenderProps = {\n    get isDisabled() {\n      return aria.isDisabled;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isHovered() {\n      return hover.isHovered;\n    },\n    get isPressed() {\n      return aria.isPressed;\n    },\n    get isSelected() {\n      return state.isSelected;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-ToggleButton\", values })\n  );\n\n  return (\n    <dom.button\n      {...mergeProps(\n        omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n        merge(() => aria.buttonProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLButtonElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-selected={values.isSelected || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-pressed={values.isPressed || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <SelectionIndicatorContext\n        value={{\n          get isSelected() {\n            return state.isSelected;\n          },\n        }}\n      >\n        {render.children}\n      </SelectionIndicatorContext>\n    </dom.button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAa,sBACX,cAAkE,IAAI;AAExE,SAAgB,aAAa,OAAuC;CAClE,MAAM,CAAC,OAAO,KAAK,UAAU,mBAC3B,OACA,cAAc,MAAM,GAAG,GACvB,mBACF;CAEA,MAAM,QAAQ,WAAW,uBAAuB;CAEhD,MAAM,QAAQ,kBACZ,QACI;EACE,IAAI,aAAa;GACf,OAAO,UAAU,MAAM,EAAE,KAAK,MAAM,aAAa,IAAI,MAAM,EAAE;EAC/D;EACA,SAAS,UAAU;GACjB,IAAI,UAAU,MAAM,EAAE,GACpB,MAAM,YAAY,MAAM,IAAI,QAAQ;EAExC;CACF,IACA,KACN;CAEA,MAAM,OACJ,SAAS,cAAc,UAAU,MAAM,EAAE,CAAC,IACtC,4BACEK,aAAW,OAAO,EAChB,IAAI,KAAK;EACP,OAAO,aAAa,MAAM,IAAI,mBAAmB;CACnD,EACF,CAAC,GACD,OACA,GACF,IACA,mBACEA,aAAW,OAAO,EAChB,IAAI,KAAK;EACP,OAAO,UAAU,MAAM,EAAE,IAAI,OAAO,MAAM,EAAE,IAAI,KAAA;CAClD,EACF,CAAC,GACD,OACA,GACF;CAEN,MAAM,QAAQ,gBAAgB,KAAK;CAEnC,MAAM,QAAQ,YACZA,aAAW,OAAO,EAChB,IAAI,aAAa;EACf,OAAO,KAAK;CACd,EACF,CAAC,CACH;CAEA,MAAM,SAAkC;EACtC,IAAI,aAAa;GACf,OAAO,KAAK;EACd;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,KAAK;EACd;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA;CACF;CAEA,MAAM,SAAS,kBACbA,aAAW,OAAO;EAAE,cAAc;EAA4B;CAAO,CAAC,CACxE;CAEA,OACEL,gBAAAA,IAACC,QAADD,iBACE;EAAI,OAAAK,aACF,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,MAAM,SAAS,GAC7D,YAAY,KAAK,eAAe,CAAC,CAAC,GAClC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GAPH;EAQEH,MAAM,YAA+B;GACnC,OAAO,OAAO;EAChB;EACA,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;EAC7B,IAAA,kBAAA;GAAe,OAAA,OAAO,cAAc,KAAA;EAAS;EAC7C,IAAA,kBAAA;GAAe,OAAA,OAAO,cAAc,KAAA;EAAS;EAC7C,IAAA,iBAAA;GAAc,OAAA,OAAO,aAAa,KAAA;EAAS;EAC3C,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,iBAAA;GAAc,OAAA,MAAM,aAAa,KAAA;EAAS;EAC1C,IAAA,uBAAA;GAAoB,OAAA,MAAM,kBAAkB,KAAA;EAAS;EAjBvD,IAAA,WAAA;GAmBEC,OAAAA,gBAAAA,2BAAAA;IACEC,OAAO,EACL,IAAI,aAAa;KACf,OAAO,MAAM;IACf,EACF;IALF,IAAA,WAAA;KAOG,OAAA,OAAO;IACiB;;EACjB;;AAEhB"}

package/dist/browser/token-field.d.ts

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2026 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/TokenField.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 { ClassOrFunction, ContextValue, Ref, RenderProps, SlotProps, StyleRenderProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { HoverProps } from "@solid2-aria/core/interactions/create-hover";
+import { AriaTokenFieldProps } from "@solid2-aria/core/tokenfield/create-token-field";
+import { TokenFieldValue, TokenSegment } from "@solid2-aria/stately/tokenfield/token-field-value";
+import { GlobalDOMAttributes } from "@solid2-aria/types-shared-web";
+export declare const TokenFieldContext: import("solid-js").Context<ContextValue<TokenFieldProps<TokenFieldValue<unknown>>, HTMLDivElement>>;
+export interface TokenFieldRenderProps {
+  /**
+   * Whether the token field is disabled.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+  /**
+   * Whether the token field is read only.
+   *
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean;
+}
+export type TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = AriaTokenFieldProps<T> & RenderProps<TokenFieldRenderProps> & SlotProps & GlobalDOMAttributes<HTMLDivElement> & {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-TokenField'
+   */
+  class?: ClassOrFunction<TokenFieldRenderProps>;
+};
+export interface TokenInputRenderProps {
+  /**
+   * Whether the token input is currently hovered with a mouse.
+   *
+   * @selector [data-hovered]
+   */
+  isHovered: boolean;
+  /**
+   * Whether the token input is focused, either via a mouse or keyboard.
+   *
+   * @selector [data-focused]
+   */
+  isFocused: boolean;
+  /**
+   * Whether the token input is keyboard focused.
+   *
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean;
+  /**
+   * Whether the token input is disabled.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+  /**
+   * Whether the token input is read only.
+   *
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean;
+}
+export interface TokenInputProps<T extends TokenFieldValue = TokenFieldValue> extends HoverProps, StyleRenderProps<TokenInputRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * A function that renders a token for each segment in the token field.
+   */
+  children: (segment: TokenSegment<T extends TokenFieldValue<infer V> ? V : never>) => JSX.Element;
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-TokenInput'
+   */
+  class?: ClassOrFunction<TokenInputRenderProps>;
+}
+export interface TokenRenderProps {
+  /**
+   * Whether the token is selected.
+   *
+   * @selector [data-selected]
+   */
+  isSelected: boolean;
+  /**
+   * Whether the token is disabled.
+   *
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean;
+}
+export interface TokenProps extends RenderProps<TokenRenderProps, "span">, GlobalDOMAttributes<HTMLSpanElement> {
+  /**
+   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the
+   * element. A function may be provided to compute the class based on component state.
+   *
+   * @default 'react-aria-Token'
+   */
+  class?: ClassOrFunction<TokenRenderProps>;
+}
+export declare function TokenField<T extends TokenFieldValue = TokenFieldValue>(input: TokenFieldProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function TokenInput<T extends TokenFieldValue = TokenFieldValue>(props: TokenInputProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export declare function Token(props: TokenProps & {
+  ref?: Ref<HTMLSpanElement>;
+}): JSX.Element;
+//# sourceMappingURL=token-field.d.ts.map

package/dist/browser/token-field.js

@@ -0,0 +1,277 @@
+/*
+ * Copyright 2026 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/TokenField.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, createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { FieldInputContext } from "./autocomplete.js";
+import { LabelContext } from "./label.js";
+import { TextContext } from "./text.js";
+import { createComponent, getNextElement, getNextMarker, insert, memo, mergeProps, scope, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { For, createContext, createMemo, createSignal, merge, omit, onSettled, untrack, useContext } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { readProperty } from "@solid2-aria/core/utils/read-property";
+import { createToken } from "@solid2-aria/core/tokenfield/create-token";
+import { createTokenField } from "@solid2-aria/core/tokenfield/create-token-field";
+import { createTokenFieldState } from "@solid2-aria/stately/tokenfield/create-token-field-state";
+// src/token-field.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span data-react-aria-token>​<!$><!/>​`);
+var _tmpl$2 = /* @__PURE__ */ template(`<br>`);
+const TokenFieldContext = createContext(null);
+const TokenInputContext = createContext(null);
+function TokenField(input) {
+	if (createIsHidden()) return null;
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TokenFieldContext);
+	const field = createSlottedContext(FieldInputContext, props.slot);
+	const [inputRef, setInputRef] = createSignal(null, { ownedWrite: true });
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const stateProps = new Proxy(props, { get(target, key) {
+		if (key === "onChange") return (value) => {
+			props.onChange?.(value);
+			field?.onChange?.(value.toString());
+		};
+		return readProperty(target, key);
+	} });
+	const baseState = createTokenFieldState(stateProps);
+	const ariaProps = new Proxy(props, { get(target, key) {
+		if (key === "label") return label();
+		if (key === "role") return props.role ?? "textbox";
+		return readProperty(target, key);
+	} });
+	const aria = createTokenField(ariaProps, baseState, inputRef);
+	const values = {
+		get isDisabled() {
+			return props.isDisabled === true;
+		},
+		get isReadOnly() {
+			return props.isReadOnly === true;
+		}
+	};
+	const render = createRenderProps(merge(props, {
+		defaultClass: "solid2-aria-TokenField",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return filterDOMProps(props, { global: true });
+	}, render, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-disabled"() {
+			return values.isDisabled || void 0;
+		},
+		get "data-readonly"() {
+			return values.isReadOnly || void 0;
+		},
+		get children() {
+			return createComponent(LabelContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.labelProps ?? {}), {
+						get elementType() {
+							return "span";
+						},
+						registerSlot: registerLabel
+					});
+				},
+				get children() {
+					return createComponent(TextContext, {
+						value: { slots: { get description() {
+							return aria.descriptionProps;
+						} } },
+						get children() {
+							return createComponent(TokenInputContext, {
+								value: {
+									aria,
+									inputRef,
+									get isDisabled() {
+										return values.isDisabled;
+									},
+									get isReadOnly() {
+										return values.isReadOnly;
+									},
+									setInputRef: (element) => {
+										setInputRef(element);
+									},
+									state: baseState
+								},
+								get children() {
+									return render.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+function TokenInput(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("TokenInput must be rendered in a TokenField.");
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return context.isDisabled;
+	} }));
+	const focus = createFocusRing({ isTextInput: true });
+	const field = createSlottedContext(FieldInputContext, untrack(() => props.slot));
+	const values = {
+		get isDisabled() {
+			return context.isDisabled;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isReadOnly() {
+			return context.isReadOnly;
+		}
+	};
+	const render = createRenderProps(mergeProps$1(omit(props, "children"), {
+		defaultClass: "solid2-aria-TokenInput",
+		values
+	}));
+	let previousSegments = untrack(() => context.state.value.segments);
+	const segments = createMemo(() => {
+		if (!context.state.isComposing) previousSegments = context.state.value.segments;
+		return previousSegments;
+	});
+	onSettled(() => insertSelectionStyle(context.inputRef()));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), merge(() => context.aria.tokenFieldProps ?? {}), field ? omit(field, "ref", "value", "onChange") : void 0);
+	}, {
+		ref: (el) => {
+			context.setInputRef(el);
+			assignRef(untrack(() => props.ref), el);
+			assignRef(untrack(() => field?.ref), el);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-disabled"() {
+			return values.isDisabled || void 0;
+		},
+		get "data-readonly"() {
+			return values.isReadOnly || void 0;
+		},
+		get children() {
+			return [createComponent(For, {
+				get each() {
+					return segments();
+				},
+				children: (segment) => segment.type === "text" ? segment.text : (() => {
+					var _el$ = getNextElement(_tmpl$);
+					var _el$3 = _el$.firstChild.nextSibling;
+					var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+					_el$4.nextSibling;
+					insert(_el$, scope(() => {
+						return props.children(segment);
+					}), _el$4, _el$5);
+					return _el$;
+				})()
+			}), memo(() => {
+				return memo(() => {
+					return segments().at(-1)?.text.endsWith("\n") === true;
+				})() ? getNextElement(_tmpl$2) : null;
+			})];
+		}
+	}));
+}
+function Token(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("Token must be rendered in a TokenInput.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createToken({}, context.state, ref);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-Token",
+		values: {
+			get isDisabled() {
+				return context.isDisabled;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			}
+		}
+	}));
+	return createComponent(dom.span, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => aria.tokenProps ?? {}));
+	}, {
+		ref: [(element) => {
+			setRef(element);
+		}, (element) => {
+			assignRef(untrack(() => props.ref), element);
+		}],
+		contenteditable: "false",
+		get "data-selected"() {
+			return aria.isSelected || void 0;
+		},
+		get "data-disabled"() {
+			return context.isDisabled || void 0;
+		},
+		get style() {
+			return mergeProps$1(typeof render.style === "object" ? render.style : {}, typeof aria.tokenProps.style === "object" ? aria.tokenProps.style : {});
+		},
+		get children() {
+			return render.children;
+		}
+	}));
+}
+const tokenSelectionStyles = /* @__PURE__ */ new WeakMap();
+function insertSelectionStyle(element) {
+	if (!element || typeof CSSStyleSheet !== "function") return;
+	const root = element.getRootNode();
+	if (!(root instanceof Document) && !(root instanceof ShadowRoot) || !isTruthy(root.adoptedStyleSheets)) return;
+	let entry = tokenSelectionStyles.get(root);
+	if (!entry) {
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync("[data-react-aria-token]::selection,[data-react-aria-token]>*::selection{background:#ffffff01}");
+		entry = {
+			sheet,
+			users: 0
+		};
+		tokenSelectionStyles.set(root, entry);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+	entry.users += 1;
+	return () => {
+		entry.users -= 1;
+		if (entry.users === 0) {
+			root.adoptedStyleSheets = root.adoptedStyleSheets.filter((sheet) => sheet !== entry.sheet);
+			tokenSelectionStyles.delete(root);
+		}
+	};
+}
+export { Token, TokenField, TokenFieldContext, TokenInput };
+
+//# sourceMappingURL=token-field.js.map

package/dist/browser/token-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-field.js","names":["<dom.div\n      {...filterDOMProps(props, { global: true })}\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-readonly={values.isReadOnly || undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TextContext\n          value={{\n            slots: {\n              get description() {\n                return aria.descriptionProps;\n              },\n            },\n          }}\n        >\n          <TokenInputContext\n            value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}\n          >\n            {render.children}\n          </TokenInputContext>\n        </TextContext>\n      </LabelContext>\n    </dom.div>","dom.div","ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}","<LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TextContext\n          value={{\n            slots: {\n              get description() {\n                return aria.descriptionProps;\n              },\n            },\n          }}\n        >\n          <TokenInputContext\n            value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}\n          >\n            {render.children}\n          </TokenInputContext>\n        </TextContext>\n      </LabelContext>","<TextContext\n          value={{\n            slots: {\n              get description() {\n                return aria.descriptionProps;\n              },\n            },\n          }}\n        >\n          <TokenInputContext\n            value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}\n          >\n            {render.children}\n          </TokenInputContext>\n        </TextContext>","value={{\n            slots: {\n              get description() {\n                return aria.descriptionProps;\n              },\n            },\n          }}","<TokenInputContext\n            value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}\n          >\n            {render.children}\n          </TokenInputContext>","value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}","<dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        render,\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        merge(() => context.aria.tokenFieldProps ?? {}),\n        field\n          ? // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            omit(field, \"ref\", \"value\", \"onChange\")\n          : // oxlint-enable solid/reactivity\n            undefined\n      )}\n      ref={(el: HTMLDivElement) => {\n        context.setInputRef(el);\n\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n        assignRef(\n          untrack(() => field?.ref),\n          el\n        );\n      }}\n      slot={props.slot ?? undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-readonly={values.isReadOnly || undefined}\n    >\n      <For each={segments()}>\n        {(segment) =>\n          segment.type === \"text\" ? (\n            segment.text\n          ) : (\n            <span data-react-aria-token>\n              {\"\\u200B\"}\n              {props.children(\n                // SAFETY: The token segments come from this TokenFieldValue<T> owner's value.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- The shared context erases the concrete token value type.\n                segment as TokenSegment<\n                  T extends TokenFieldValue<infer V> ? V : never\n                >\n              )}\n              {\"\\u200B\"}\n            </span>\n          )\n        }\n      </For>\n      {segments().at(-1)?.text.endsWith(\"\\n\") === true ? <br /> : null}\n    </dom.div>","ref={(el: HTMLDivElement) => {\n        context.setInputRef(el);\n\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n        assignRef(\n          untrack(() => field?.ref),\n          el\n        );\n      }}","<For each={segments()}>\n        {(segment) =>\n          segment.type === \"text\" ? (\n            segment.text\n          ) : (\n            <span data-react-aria-token>\n              {\"\\u200B\"}\n              {props.children(\n                // SAFETY: The token segments come from this TokenFieldValue<T> owner's value.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- The shared context erases the concrete token value type.\n                segment as TokenSegment<\n                  T extends TokenFieldValue<infer V> ? V : never\n                >\n              )}\n              {\"\\u200B\"}\n            </span>\n          )\n        }\n      </For>","{props.children(\n                // SAFETY: The token segments come from this TokenFieldValue<T> owner's value.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- The shared context erases the concrete token value type.\n                segment as TokenSegment<\n                  T extends TokenFieldValue<infer V> ? V : never\n                >\n              )}","<span data-react-aria-token>\n              {\"\\u200B\"}\n              {props.children(\n                // SAFETY: The token segments come from this TokenFieldValue<T> owner's value.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- The shared context erases the concrete token value type.\n                segment as TokenSegment<\n                  T extends TokenFieldValue<infer V> ? V : never\n                >\n              )}\n              {\"\\u200B\"}\n            </span>","{segments().at(-1)?.text.endsWith(\"\\n\") === true ? <br /> : null}","<br />","<dom.span\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        render,\n        merge(() => aria.tokenProps ?? {})\n      )}\n      ref={[\n        (element: HTMLSpanElement) => {\n          setRef(element);\n        },\n        (element: HTMLSpanElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}\n      contenteditable=\"false\"\n      data-selected={aria.isSelected || undefined}\n      data-disabled={context.isDisabled || undefined}\n      style={mergeProps(\n        typeof render.style === \"object\" ? render.style : {},\n        typeof aria.tokenProps.style === \"object\" ? aria.tokenProps.style : {}\n      )}\n    >\n      {render.children}\n    </dom.span>","dom.span","ref={[\n        (element: HTMLSpanElement) => {\n          setRef(element);\n        },\n        (element: HTMLSpanElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}","contenteditable=\"false\"","_$createComponent","_$mergeProps","mergeProps","_$getNextElement","_$getNextMarker","_$scope","_$memo"],"sources":["../../src/token-field.tsx"],"sourcesContent":["/*\n * Copyright 2026 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/TokenField.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 { createIsHidden } from \"@solid2-aria/core/collections/hidden\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport type { HoverProps } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createToken } from \"@solid2-aria/core/tokenfield/create-token\";\nimport { createTokenField } from \"@solid2-aria/core/tokenfield/create-token-field\";\nimport type {\n  AriaTokenFieldProps,\n  TokenFieldAria,\n} from \"@solid2-aria/core/tokenfield/create-token-field\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { readProperty } from \"@solid2-aria/core/utils/read-property\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport { createTokenFieldState } from \"@solid2-aria/stately/tokenfield/create-token-field-state\";\nimport type { TokenFieldState } from \"@solid2-aria/stately/tokenfield/create-token-field-state\";\nimport type {\n  TokenFieldValue,\n  TokenSegment,\n} from \"@solid2-aria/stately/tokenfield/token-field-value\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  untrack,\n  createSignal,\n  createContext,\n  createMemo,\n  useContext,\n  omit,\n  merge,\n  onSettled,\n  For,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport { FieldInputContext } from \"./autocomplete\";\nimport { LabelContext } from \"./label\";\nimport { TextContext } from \"./text\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n  createSlottedContext,\n  assignRef,\n} from \"./utils\";\nimport type {\n  Ref,\n  ClassOrFunction,\n  RenderProps,\n  SlotProps,\n  StyleRenderProps,\n  ContextValue,\n} from \"./utils\";\n\nexport const TokenFieldContext =\n  createContext<ContextValue<TokenFieldProps, HTMLDivElement>>(null);\n\nconst TokenInputContext = createContext<TokenInputContextValue | null>(null);\n\nexport interface TokenFieldRenderProps {\n  /**\n   * Whether the token field is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n  /**\n   * Whether the token field is read only.\n   *\n   * @selector [data-readonly]\n   */\n  isReadOnly: boolean;\n}\n\nexport type TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> =\n  AriaTokenFieldProps<T> &\n    RenderProps<TokenFieldRenderProps> &\n    SlotProps &\n    GlobalDOMAttributes<HTMLDivElement> & {\n      /**\n       * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n       * element. A function may be provided to compute the class based on component state.\n       *\n       * @default 'react-aria-TokenField'\n       */\n      class?: ClassOrFunction<TokenFieldRenderProps>;\n    };\n\nexport interface TokenInputRenderProps {\n  /**\n   * Whether the token input is currently hovered with a mouse.\n   *\n   * @selector [data-hovered]\n   */\n  isHovered: boolean;\n  /**\n   * Whether the token input is focused, either via a mouse or keyboard.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the token input is keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the token input is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n  /**\n   * Whether the token input is read only.\n   *\n   * @selector [data-readonly]\n   */\n  isReadOnly: boolean;\n}\n\nexport interface TokenInputProps<T extends TokenFieldValue = TokenFieldValue>\n  extends\n    HoverProps,\n    StyleRenderProps<TokenInputRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * A function that renders a token for each segment in the token field.\n   */\n  children: (\n    segment: TokenSegment<T extends TokenFieldValue<infer V> ? V : never>\n  ) => JSX.Element;\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-TokenInput'\n   */\n  class?: ClassOrFunction<TokenInputRenderProps>;\n}\n\nexport interface TokenRenderProps {\n  /**\n   * Whether the token is selected.\n   *\n   * @selector [data-selected]\n   */\n  isSelected: boolean;\n  /**\n   * Whether the token is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n}\n\nexport interface TokenProps\n  extends\n    RenderProps<TokenRenderProps, \"span\">,\n    GlobalDOMAttributes<HTMLSpanElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-Token'\n   */\n  class?: ClassOrFunction<TokenRenderProps>;\n}\n\ninterface TokenInputContextValue {\n  state: TokenFieldState;\n  aria: TokenFieldAria;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  inputRef: Accessor<HTMLDivElement | null>;\n  setInputRef: (element: HTMLDivElement) => void;\n}\n\nexport function TokenField<T extends TokenFieldValue = TokenFieldValue>(\n  input: TokenFieldProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  if (createIsHidden()) {\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 [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TokenFieldContext\n  );\n\n  const field = createSlottedContext(FieldInputContext, props.slot);\n\n  const [inputRef, setInputRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const [registerLabel, label] = createSlot(\n    () => !isTruthy(props[\"aria-label\"]) && !isTruthy(props[\"aria-labelledby\"])\n  );\n\n  const stateProps = new Proxy(props, {\n    get(target, key) {\n      if (key === \"onChange\") {\n        return (value: T) => {\n          props.onChange?.(value);\n          field?.onChange?.(value.toString());\n        };\n      }\n\n      return readProperty(target, key);\n    },\n  });\n\n  const state = createTokenFieldState<T>(stateProps);\n  // Context and the accessibility adapter erase T, while all updates use the value object's subtype-preserving methods.\n  // SAFETY: TokenFieldValue edits preserve the concrete value subtype, and this context belongs to the same owner.\n  // oxlint-disable-next-line typescript/no-unsafe-type-assertion, anti-slop/no-chained-type-assertions -- The accessibility adapter uses the base TokenFieldValue contract.\n  const baseState = state as unknown as TokenFieldState;\n\n  const ariaProps = new Proxy(props, {\n    get(target, key) {\n      if (key === \"label\") {\n        return label();\n      }\n\n      if (key === \"role\") {\n        return props.role ?? \"textbox\";\n      }\n\n      return readProperty(target, key);\n    },\n  });\n\n  const aria = createTokenField<T>(ariaProps, baseState, inputRef);\n\n  const values: TokenFieldRenderProps = {\n    get isDisabled() {\n      return props.isDisabled === true;\n    },\n    get isReadOnly() {\n      return props.isReadOnly === true;\n    },\n  };\n\n  const render = createRenderProps<TokenFieldRenderProps>(\n    merge(props, { defaultClass: \"solid2-aria-TokenField\", values })\n  );\n\n  return (\n    <dom.div\n      {...filterDOMProps(props, { global: true })}\n      {...render}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      slot={props.slot ?? undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-readonly={values.isReadOnly || undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TextContext\n          value={{\n            slots: {\n              get description() {\n                return aria.descriptionProps;\n              },\n            },\n          }}\n        >\n          <TokenInputContext\n            value={{\n              aria,\n              inputRef,\n              get isDisabled() {\n                return values.isDisabled;\n              },\n              get isReadOnly() {\n                return values.isReadOnly;\n              },\n              setInputRef: (element: HTMLDivElement) => {\n                setInputRef(element);\n              },\n              state: baseState,\n            }}\n          >\n            {render.children}\n          </TokenInputContext>\n        </TextContext>\n      </LabelContext>\n    </dom.div>\n  );\n}\n\nexport function TokenInput<T extends TokenFieldValue = TokenFieldValue>(\n  props: TokenInputProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const context = useContext(TokenInputContext);\n\n  if (!context) {\n    throw new Error(\"TokenInput must be rendered in a TokenField.\");\n  }\n\n  const hover = createHover(\n    mergeProps(props, {\n      get isDisabled() {\n        return context.isDisabled;\n      },\n    })\n  );\n\n  const focus = createFocusRing({ isTextInput: true });\n\n  const field = createSlottedContext(\n    FieldInputContext,\n    untrack(() => props.slot)\n  );\n\n  const values: TokenInputRenderProps = {\n    get isDisabled() {\n      return context.isDisabled;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isHovered() {\n      return hover.isHovered;\n    },\n    get isReadOnly() {\n      return context.isReadOnly;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(omit(props, \"children\"), {\n      defaultClass: \"solid2-aria-TokenInput\",\n      values,\n    })\n  );\n\n  let previousSegments = untrack(() => context.state.value.segments);\n\n  const segments = createMemo(() => {\n    if (!context.state.isComposing) {\n      previousSegments = context.state.value.segments;\n    }\n\n    return previousSegments;\n  });\n\n  onSettled(() => insertSelectionStyle(context.inputRef()));\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        render,\n        merge(() => focus.focusProps ?? {}),\n        merge(() => hover.hoverProps ?? {}),\n        merge(() => context.aria.tokenFieldProps ?? {}),\n        field\n          ? // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n            omit(field, \"ref\", \"value\", \"onChange\")\n          : // oxlint-enable solid/reactivity\n            undefined\n      )}\n      ref={(el: HTMLDivElement) => {\n        context.setInputRef(el);\n\n        assignRef(\n          untrack(() => props.ref),\n          el\n        );\n        assignRef(\n          untrack(() => field?.ref),\n          el\n        );\n      }}\n      slot={props.slot ?? undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-hovered={hover.isHovered || undefined}\n      data-disabled={values.isDisabled || undefined}\n      data-readonly={values.isReadOnly || undefined}\n    >\n      <For each={segments()}>\n        {(segment) =>\n          segment.type === \"text\" ? (\n            segment.text\n          ) : (\n            <span data-react-aria-token>\n              {\"\\u200B\"}\n              {props.children(\n                // SAFETY: The token segments come from this TokenFieldValue<T> owner's value.\n                // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- The shared context erases the concrete token value type.\n                segment as TokenSegment<\n                  T extends TokenFieldValue<infer V> ? V : never\n                >\n              )}\n              {\"\\u200B\"}\n            </span>\n          )\n        }\n      </For>\n      {segments().at(-1)?.text.endsWith(\"\\n\") === true ? <br /> : null}\n    </dom.div>\n  );\n}\n\nexport function Token(\n  props: TokenProps & { ref?: Ref<HTMLSpanElement> }\n): JSX.Element {\n  const context = useContext(TokenInputContext);\n\n  if (!context) {\n    throw new Error(\"Token must be rendered in a TokenInput.\");\n  }\n\n  const [ref, setRef] = createSignal<HTMLSpanElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const aria = createToken({}, context.state, ref);\n\n  const values: TokenRenderProps = {\n    get isDisabled() {\n      return context.isDisabled;\n    },\n    get isSelected() {\n      return aria.isSelected;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, { defaultClass: \"solid2-aria-Token\", values })\n  );\n\n  return (\n    <dom.span\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        render,\n        merge(() => aria.tokenProps ?? {})\n      )}\n      ref={[\n        (element: HTMLSpanElement) => {\n          setRef(element);\n        },\n        (element: HTMLSpanElement) => {\n          assignRef(\n            untrack(() => props.ref),\n            element\n          );\n        },\n      ]}\n      contenteditable=\"false\"\n      data-selected={aria.isSelected || undefined}\n      data-disabled={context.isDisabled || undefined}\n      style={mergeProps(\n        typeof render.style === \"object\" ? render.style : {},\n        typeof aria.tokenProps.style === \"object\" ? aria.tokenProps.style : {}\n      )}\n    >\n      {render.children}\n    </dom.span>\n  );\n}\n\nconst tokenSelectionStyles = new WeakMap<\n  Document | ShadowRoot,\n  { sheet: CSSStyleSheet; users: number }\n>();\n\nfunction insertSelectionStyle(\n  element: HTMLDivElement | null\n): (() => void) | undefined {\n  if (!element || typeof CSSStyleSheet !== \"function\") {\n    return undefined;\n  }\n\n  const root = element.getRootNode();\n\n  if (\n    (!(root instanceof Document) && !(root instanceof ShadowRoot)) ||\n    !isTruthy(root.adoptedStyleSheets)\n  ) {\n    return undefined;\n  }\n\n  let entry = tokenSelectionStyles.get(root);\n\n  if (!entry) {\n    const sheet = new CSSStyleSheet();\n    sheet.replaceSync(\n      \"[data-react-aria-token]::selection,[data-react-aria-token]>*::selection{background:#ffffff01}\"\n    );\n    entry = { sheet, users: 0 };\n    tokenSelectionStyles.set(root, entry);\n    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];\n  }\n\n  entry.users += 1;\n\n  return () => {\n    entry.users -= 1;\n\n    if (entry.users === 0) {\n      root.adoptedStyleSheets = root.adoptedStyleSheets.filter(\n        (sheet) => sheet !== entry.sheet\n      );\n      tokenSelectionStyles.delete(root);\n    }\n  };\n}\n"],"mappings":"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"}

package/dist/browser/toolbar.d.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 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/Toolbar.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, 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 { ContextValue, Ref, RenderProps, SlotProps } from "./utils.js";
+import { JSX } from "@solidjs/web";
+import { AriaToolbarProps } from "@solid2-aria/core/toolbar/create-toolbar";
+export interface ToolbarRenderProps {
+  orientation: "horizontal" | "vertical";
+}
+export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps> {
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const ToolbarContext: import("solid-js").Context<ContextValue<ToolbarProps, HTMLDivElement>>;
+export declare function Toolbar(input: ToolbarProps): JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map