@ark-ui/solid 3.0.0-1 → 3.0.0-3

package/dist/cjs/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
+var solidJs = require('solid-js');
 var web = require('solid-js/web');
 var solid = require('@zag-js/solid');
-var solidJs = require('solid-js');
 var collapsible$1 = require('@zag-js/collapsible');
 var accordion$1 = require('@zag-js/accordion');
 var avatar$1 = require('@zag-js/avatar');
@@ -37,6 +37,7 @@ var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
 var tooltip$1 = require('@zag-js/tooltip');
 var treeView$1 = require('@zag-js/tree-view');
+var domQuery = require('@zag-js/dom-query');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -96,9 +97,10 @@ function createContext(options = {}) {
     strict = true,
     hookName = 'useContext',
     providerName = 'Provider',
-    errorMessage
+    errorMessage,
+    defaultValue
   } = options;
-  const Context = solidJs.createContext(undefined);
+  const Context = solidJs.createContext(defaultValue);
   function useContext() {
     const context = solidJs.useContext(Context);
     if (!context && strict) {
@@ -119,6 +121,14 @@ const [AccordionProvider, useAccordionContext] = createContext({
 
 const AccordionContext = props => props.children(useAccordionContext());
 
+const createSplitProps = () => (props, keys) => solidJs.splitProps(props, keys);
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  hookName: 'useRenderStrategyContext',
+  providerName: '<RenderStrategyProvider />'
+});
+const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
 const withAsProp = Component => {
   const ArkComponent = props => {
     const [localProps, otherProps] = solidJs.splitProps(props, ['asChild']);
@@ -138,7 +148,7 @@ const withAsProp = Component => {
       return web.memo(() => otherProps.children(fn));
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     return web.createComponent(web.Dynamic, web.mergeProps({
       component: Component
     }, otherProps));
@@ -172,7 +182,7 @@ const CollapsibleContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !api().isUnmounted;
+      return !api().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -182,66 +192,109 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
-const createSplitProps = () => (props, keys) => solidJs.splitProps(props, keys);
+const isFunction = value => typeof value === 'function';
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
 const [EnvironmentProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
   providerName: '<EnvironmentProvider />',
-  strict: false
+  strict: false,
+  defaultValue: () => ({
+    getRootNode: () => document,
+    getDocument: () => document,
+    getWindow: () => window
+  })
 });
 
-var _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$6 = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
-  // eslint-disable-next-line prefer-const
-  let spanRef = undefined;
-
-  // @ts-expect-error TODO fix
-  const currentEnv = solidJs.createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  const [spanRef, setSpanRef] = solidJs.createSignal();
+  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const environment = solidJs.createMemo(() => ({
+    getRootNode,
+    getDocument: () => domQuery.getDocument(getRootNode()),
+    getWindow: () => domQuery.getWindow(getRootNode())
+  }));
   return web.createComponent(EnvironmentProvider, {
-    get value() {
-      return currentEnv();
-    },
+    value: environment,
     get children() {
-      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        var _el$ = _tmpl$$c();
-        var _ref$ = spanRef;
-        typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
+      return [web.memo(() => props.children), web.createComponent(solidJs.Show, {
+        get when() {
+          return !props.value;
+        },
+        get children() {
+          var _el$ = _tmpl$$6();
+          web.use(setSpanRef, _el$);
+          return _el$;
+        }
+      })];
     }
   });
 };
 
-const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
-  hookName: 'useRenderStrategyContext',
-  providerName: '<RenderStrategyProvider />'
+const [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false,
+  defaultValue: () => ({
+    dir: 'ltr',
+    locale: 'en-US'
+  })
 });
-const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
+const LocaleProvider = props => {
+  const [localeProps, restProps] = solidJs.splitProps(props, ['locale', 'defaultLocale']);
+  const [locale, setLocale] = solidJs.createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+  const environment = useEnvironmentContext();
+  solidJs.createEffect(() => {
+    const cleanup = i18nUtils.trackLocale({
+      locale: localeProps.locale,
+      getRootNode: environment().getRootNode,
+      onLocaleChange(locale) {
+        setLocale(locale.locale);
+      }
+    });
+    solidJs.onCleanup(cleanup);
+  });
+  const context = solidJs.createMemo(() => ({
+    locale: locale(),
+    dir: i18nUtils.isRTL(locale()) ? 'rtl' : 'ltr'
+  }));
+  return web.createComponent(LocaleContextProvider, {
+    value: context,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
 
 const useCollapsible = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, collapsibleProps);
   const [state, send] = solid.useMachine(collapsible__namespace.machine(context), {
     context
   });
   const [wasVisible, setWasVisible] = solidJs.createSignal(false);
   solidJs.createEffect(() => {
-    const isPresent = api().isVisible;
+    const isPresent = api().visible;
     if (isPresent) setWasVisible(true);
   });
   const api = solidJs.createMemo(() => collapsible__namespace.connect(state, send, solid.normalizeProps));
   return solidJs.createMemo(() => ({
     ...api(),
-    isUnmounted: !api().isVisible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()
+    unmounted: !api().visible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().visible && wasVisible()
   }));
 };
 
 const CollapsibleRoot = props => {
-  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
+  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
   const api = useCollapsible(useCollapsibleProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(CollapsibleProvider, {
@@ -270,6 +323,7 @@ const [AccordionItemProvider, useAccordionItemContext] = createContext({
   hookName: 'useAccordionItemContext',
   providerName: '<AccordionItemProvider />'
 });
+
 const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
   hookName: 'useAccordionItemPropsContext',
   providerName: '<AccordionItemPropsProvider />'
@@ -277,11 +331,11 @@ const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext
 
 const AccordionItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const renderStrategyProps = useRenderStrategyContext();
-  const mergedProps = solid.mergeProps(() => context().getItemProps(itemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(itemProps));
-  const itemContentProps = context().getItemContentProps(itemProps);
+  const mergedProps = solid.mergeProps(() => accordion().getItemProps(itemProps), localProps);
+  const itemState = solidJs.createMemo(() => accordion().getItemState(itemProps));
+  const itemContentProps = accordion().getItemContentProps(itemProps);
   return web.createComponent(AccordionItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -290,7 +344,7 @@ const AccordionItem = props => {
         get children() {
           return web.createComponent(CollapsibleRoot, web.mergeProps({
             get open() {
-              return itemState().isOpen;
+              return itemState().expanded;
             },
             get ids() {
               return {
@@ -305,38 +359,42 @@ const AccordionItem = props => {
 };
 
 const AccordionItemContent = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const itemContentProps = solidJs.createMemo(() => {
-    const ownProps = context().getItemContentProps(itemProps);
-    delete ownProps.hidden;
+    const ownProps = accordion().getItemContentProps(itemProps);
+    ownProps.hidden = undefined;
     return ownProps;
   });
   const mergedProps = solid.mergeProps(itemContentProps, props);
   return web.createComponent(CollapsibleContent, mergedProps);
 };
 
+const AccordionItemContext = props => props.children(useAccordionItemContext());
+
 const AccordionItemIndicator = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
-  const mergedProps = solid.mergeProps(() => context().getItemIndicatorProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => accordion().getItemIndicatorProps(itemProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const AccordionItemTrigger = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const collapsible = useCollapsibleContext();
-  const mergedProps = solid.mergeProps(() => context().getItemTriggerProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => accordion().getItemTriggerProps(itemProps), props);
   const [ariaControls, buttonProps] = solidJs.splitProps(mergedProps, ['aria-controls']);
-  return web.createComponent(ark.button, web.mergeProps(buttonProps, () => !collapsible().isUnmounted && ariaControls));
+  return web.createComponent(ark.button, web.mergeProps(buttonProps, () => !collapsible().unmounted && ariaControls));
 };
 
 const useAccordion = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solidJs.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
     context
@@ -346,7 +404,7 @@ const useAccordion = props => {
 
 const AccordionRoot = props => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'disabled', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion(useAccordionProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(AccordionProvider, {
@@ -362,8 +420,6 @@ const AccordionRoot = props => {
   });
 };
 
-const AccordionItemContext = props => props.children(useAccordionItemContext());
-
 var accordion = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AccordionContext,
@@ -395,10 +451,12 @@ const AvatarImage = props => {
 };
 
 const useAvatar = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
     context
@@ -407,7 +465,7 @@ const useAvatar = props => {
 };
 
 const AvatarRoot = props => {
-  const [useAvatarProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const [useAvatarProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange']);
   const context = useAvatar(useAvatarProps);
   const mergedProps = solid.mergeProps(() => context().rootProps, localProps);
   return web.createComponent(AvatarProvider, {
@@ -477,10 +535,12 @@ const CarouselPrevTrigger = props => {
 };
 
 const useCarousel = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
     context
@@ -489,7 +549,7 @@ const useCarousel = props => {
 };
 
 const CarouselRoot = props => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
   const api = useCarousel(useCarouselProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(CarouselProvider, {
@@ -527,21 +587,27 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
 
 const CheckboxContext = props => props.children(useCheckboxContext());
 
-var _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
-  const api = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$b();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const CheckboxHiddenInput = props => {
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const CheckboxIndicator = props => {
-  const api = useCheckboxContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
-  return web.createComponent(ark.div, mergedProps);
+  const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
+  const checkbox = useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => checkbox().indicatorProps, localProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get hidden() {
+      return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
+    }
+  }));
 };
 
 const CheckboxLabel = props => {
@@ -551,10 +617,12 @@ const CheckboxLabel = props => {
 };
 
 const useCheckbox = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
     context
@@ -563,11 +631,11 @@ const useCheckbox = props => {
 };
 
 const CheckboxRoot = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
-  const api = useCheckbox(useCheckboxProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, labelprops);
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  const checkbox = useCheckbox(useCheckboxProps);
+  const mergedProps = solid.mergeProps(() => checkbox().rootProps, labelprops);
   return web.createComponent(CheckboxProvider, {
-    value: api,
+    value: checkbox,
     get children() {
       return web.createComponent(ark.label, mergedProps);
     }
@@ -578,6 +646,7 @@ var checkbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: CheckboxContext,
   Control: CheckboxControl,
+  HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
   Root: CheckboxRoot
@@ -600,7 +669,7 @@ const ClipboardIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
   const api = useClipboardContext();
   const mergedProps = solid.mergeProps(api().getIndicatorProps({
-    copied: api().isCopied
+    copied: api().copied
   }), localProps);
   // @ts-expect-error TODO fix
   const getChildren = solidJs.children(() => localProps.children);
@@ -608,7 +677,7 @@ const ClipboardIndicator = props => {
     get children() {
       return web.createComponent(solidJs.Show, {
         get when() {
-          return api().isCopied;
+          return api().copied;
         },
         get fallback() {
           return getChildren();
@@ -634,10 +703,10 @@ const ClipboardLabel = props => {
 };
 
 const useClipboard = props => {
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(clipboard__namespace.machine(context), {
     context
@@ -646,7 +715,7 @@ const useClipboard = props => {
 };
 
 const ClipboardRoot = props => {
-  const [useClipboardProps, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'ids', 'value', 'timeout', 'onCopyStatusChange']);
+  const [useClipboardProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange', 'timeout', 'value']);
   const api = useClipboard(useClipboardProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ClipboardProvider, {
@@ -674,7 +743,7 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Trigger: ClipboardTrigger
 });
 
-const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
 });
@@ -688,7 +757,7 @@ const ColorPickerArea = props => {
   const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().getAreaProps(channelProps), divprops);
-  return web.createComponent(ColorPickerAreaProvider, {
+  return web.createComponent(ColorPickerAreaPropsProvider, {
     value: channelProps,
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -697,16 +766,16 @@ const ColorPickerArea = props => {
 };
 
 const ColorPickerAreaBackground = props => {
-  const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaBackgroundProps(areaProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerAreaThumb = props => {
-  const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getAreaThumbProps(colorAreaProps), props);
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaThumbProps(areaProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -717,7 +786,7 @@ const ColorPickerChannelInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
-const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
   hookName: 'useColorPickerChannelSliderContext',
   providerName: '<ColorPickerChannelSliderProvider />'
 });
@@ -726,7 +795,7 @@ const ColorPickerChannelSlider = props => {
   const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
-  return web.createComponent(ColorPickerChannelSliderProvider, {
+  return web.createComponent(ColorPickerChannelPropsProvider, {
     value: channelProps,
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -735,16 +804,16 @@ const ColorPickerChannelSlider = props => {
 };
 
 const ColorPickerChannelSliderThumb = props => {
-  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderContext), props);
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(channelProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
-  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(sliderContext), props);
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(channelProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -758,15 +827,15 @@ const usePresence = props => {
   });
   const api = solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
   solidJs.createEffect(() => {
-    const isPresent = api().isPresent;
-    if (isPresent) setWasEverPresent(true);
+    const present = api().present;
+    if (present) setWasEverPresent(true);
   });
   return solidJs.createMemo(() => ({
-    isUnmounted: !api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent(),
-    isPresent: api().isPresent,
+    unmounted: !api().present && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().present && wasEverPresent(),
+    present: api().present,
     presenceProps: {
       ref: api().setNode,
-      hidden: !api().isPresent,
+      hidden: !api().present,
       'data-state': context.present ? 'open' : 'closed'
     }
   }));
@@ -778,7 +847,7 @@ const Presence = props => {
   const mergedProps = solid.mergeProps(() => api().presenceProps, localProps);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !api().isUnmounted;
+      return !api().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, web.mergeProps(mergedProps, {
@@ -800,7 +869,7 @@ const ColorPickerContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -848,6 +917,12 @@ const ColorPickerFormatTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerHiddenInput = props => {
+  const colorPicker = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
@@ -860,7 +935,7 @@ const ColorPickerPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -870,10 +945,13 @@ const ColorPickerPositioner = props => {
 
 const useColorPicker = props => {
   const [local, rest] = solidJs.splitProps(props, ['value']);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     value: local.value ? colorPicker__namespace.parse(local.value) : undefined
   }), rest);
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
@@ -882,33 +960,28 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ColorPickerProvider, {
     value: api,
     get children() {
-      return [web.createComponent(PresenceProvider, {
+      return web.createComponent(PresenceProvider, {
         value: apiPresence,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
-      }), (() => {
-        var _el$ = _tmpl$$a();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      });
     }
   });
 };
 
-const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
 });
@@ -917,7 +990,7 @@ const ColorPickerSwatch = props => {
   const [swatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().getSwatchProps(swatchProps), localProps);
-  return web.createComponent(ColorPickerSwatchProvider, {
+  return web.createComponent(ColorPickerSwatchPropsProvider, {
     value: swatchProps,
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -933,7 +1006,7 @@ const ColorPickerSwatchGroup = props => {
 
 const ColorPickerSwatchIndicator = props => {
   const api = useColorPickerContext();
-  const swatchProps = useColorPickerSwatchContext();
+  const swatchProps = useColorPickerSwatchPropsContext();
   const mergedProps = solid.mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
@@ -1002,6 +1075,7 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
   FormatSelect: ColorPickerFormatSelect,
   FormatTrigger: ColorPickerFormatTrigger,
+  HiddenInput: ColorPickerHiddenInput,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Root: ColorPickerRoot,
@@ -1015,7 +1089,7 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   View: ColorPickerView
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const [ComboboxProvider, useComboboxContext] = createContext({
   hookName: 'useComboboxContext',
   providerName: '<ComboboxProvider />'
@@ -1033,7 +1107,7 @@ const ComboboxContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1059,13 +1133,14 @@ const [ComboboxItemProvider, useComboboxItemContext] = createContext({
   hookName: 'useComboboxItemContext',
   providerName: '<ComboboxItemProvider />'
 });
+
 const [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
   hookName: 'useComboboxItemPropsContext',
   providerName: '<ComboboxItemPropsProvider />'
 });
 
 const ComboboxItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const [itemProps, localProps] = createSplitProps()(props, ['item', 'persistFocus']);
   const api = useComboboxContext();
   const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
   const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
@@ -1084,19 +1159,32 @@ const ComboboxItem = props => {
 
 const ComboboxItemContext = props => props.children(useComboboxItemContext());
 
+const [ComboboxItemGroupPropsProvider, useComboboxItemGroupPropsContext] = createContext({
+  hookName: 'useComboboxItemGroupPropsContext',
+  providerName: '<ComboboxItemGroupPropsProvider />'
+});
+
 const ComboboxItemGroup = props => {
-  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
   const combobox = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().getItemGroupProps(groupProps), localProps);
-  return web.createComponent(ark.div, mergedProps);
+  const itemGroupProps = solid.mergeProps({
+    id: solidJs.createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = solid.mergeProps(() => combobox().getItemGroupProps(itemGroupProps), localProps);
+  return web.createComponent(ComboboxItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ComboboxItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['for']);
-  const api = useComboboxContext();
-  const mergedProps = solid.mergeProps(() => api().getItemGroupLabelProps({
-    htmlFor: labelProps.for
-  }), localProps);
+  const combobox = useComboboxContext();
+  const itemGroupProps = useComboboxItemGroupPropsContext();
+  const mergedProps = solid.mergeProps(() => combobox().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -1126,7 +1214,7 @@ const ComboboxPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1137,10 +1225,13 @@ const ComboboxPositioner = props => {
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => combobox__namespace.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     collection: collection()
   }, rest);
   const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
@@ -1151,10 +1242,10 @@ const useCombobox = props => {
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'disabled', 'dismissable', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'popup', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ComboboxProvider, {
@@ -1212,7 +1303,7 @@ const DatePickerContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1241,14 +1332,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$5();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1275,7 +1366,7 @@ const DatePickerPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1308,11 +1399,14 @@ const DatePickerRangeText = props => {
 };
 
 const useDatePicker = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const [localProps, restProps] = solidJs.splitProps(props, ['value', 'focusedValue', 'min', 'max']);
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     focusedValue: localProps.focusedValue ? datePicker__namespace.parse(localProps.focusedValue) : undefined,
     value: localProps.value ? datePicker__namespace.parse(localProps.value) : undefined,
     max: localProps.max ? datePicker__namespace.parse(localProps.max) : undefined,
@@ -1326,10 +1420,10 @@ const useDatePicker = props => {
 
 const DatePickerRoot = props => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
   const api = useDatePicker(useDatePickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(DatePickerProvider, {
@@ -1472,7 +1566,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1482,7 +1576,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$4();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1536,12 +1630,12 @@ const DialogBackdrop = props => {
   const api = useDialogContext();
   const renderStrategyProps = useRenderStrategyContext();
   const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = solid.mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1561,7 +1655,7 @@ const DialogContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1583,7 +1677,7 @@ const DialogPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1592,10 +1686,13 @@ const DialogPositioner = props => {
 };
 
 const useDialog = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
     context
@@ -1606,10 +1703,10 @@ const useDialog = props => {
 const DialogRoot = props => {
   const [presenceProps, dialogProps] = splitPresenceProps(props);
   const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscape', 'closeOnInteractOutside', 'finalFocusEl', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog(useDialogProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return web.createComponent(DialogProvider, {
     value: api,
@@ -1639,7 +1736,7 @@ const DialogTrigger = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
 };
@@ -1707,10 +1804,12 @@ const EditablePreview = props => {
 };
 
 const useEditable = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(editable__namespace.machine(context), {
     context
@@ -1719,7 +1818,7 @@ const useEditable = props => {
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(EditableProvider, {
@@ -1757,27 +1856,22 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
 
 const FileUploadContext = props => props.children(useFileUploadContext());
 
-var _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().dropzoneProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$7();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().dropzoneProps, props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
-const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
-  hookName: 'useFileUploadItemContext',
-  providerName: '<FileUploadItemProvider />'
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
+  hookName: 'useFileUploadItemPropsContext',
+  providerName: '<FileUploadItemPropsProvider />'
 });
 
 const FileUploadItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['file']);
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
-  return web.createComponent(FileUploadItemProvider, {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemProps(itemProps), localProps);
+  return web.createComponent(FileUploadItemPropsProvider, {
     value: itemProps,
     get children() {
       return web.createComponent(ark.li, mergedProps);
@@ -1786,71 +1880,73 @@ const FileUploadItem = props => {
 };
 
 const FileUploadItemDeleteTrigger = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = solid.mergeProps(() => api().getItemDeleteTriggerProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemDeleteTriggerProps(itemProps), props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const FileUploadItemGroup = props => {
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().itemGroupProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().itemGroupProps, props);
   return web.createComponent(ark.ul, mergedProps);
 };
 
 const FileUploadItemName = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = solid.mergeProps(() => api().getItemNameProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemNameProps(itemProps), props);
   return web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get children() {
-      return props.children || item.file.name;
+      return props.children || itemProps.file.name;
     }
   }));
 };
 
 const FileUploadItemPreview = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = solid.mergeProps(() => api().getItemPreviewProps(item), props);
-  if (!item.file.type.match(props.type ?? '.*')) return null;
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemPreviewProps(itemProps), props);
+  if (!itemProps.file.type.match(props.type ?? '.*')) return null;
   return web.createComponent(ark.div, mergedProps);
 };
 
 const FileUploadItemPreviewImage = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
   const [url, setUrl] = solidJs.createSignal('');
-  api().createFileUrl(item.file, url => setUrl(url));
-  const mergedProps = solid.mergeProps(api().getItemPreviewImageProps({
-    ...item,
+  fileUpload().createFileUrl(itemProps.file, url => setUrl(url));
+  const mergedProps = solid.mergeProps(fileUpload().getItemPreviewImageProps({
+    ...itemProps,
     url: url()
   }), props);
   return web.createComponent(ark.img, mergedProps);
 };
 
 const FileUploadItemSizeText = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = solid.mergeProps(() => api().getItemSizeTextProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().getItemSizeTextProps(itemProps), props);
   return web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get children() {
-      return props.children || api().getFileSize(item.file);
+      return props.children || fileUpload().getFileSize(itemProps.file);
     }
   }));
 };
 
 const FileUploadLabel = props => {
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().labelProps, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const useFileUpload = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
     context
@@ -1859,11 +1955,11 @@ const useFileUpload = props => {
 };
 
 const FileUploadRoot = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'dir', 'directory', 'disabled', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
-  const api = useFileUpload(fileUploadProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const fileUpload = useFileUpload(fileUploadProps);
+  const mergedProps = solid.mergeProps(() => fileUpload().rootProps, localProps);
   return web.createComponent(FileUploadProvider, {
-    value: api,
+    value: fileUpload,
     get children() {
       return web.createComponent(ark.div, mergedProps);
     }
@@ -1871,15 +1967,22 @@ const FileUploadRoot = props => {
 };
 
 const FileUploadTrigger = props => {
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().triggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
+const FileUploadHiddenInput = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var fileUpload = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: FileUploadContext,
   Dropzone: FileUploadDropzone,
+  HiddenInput: FileUploadHiddenInput,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
   ItemGroup: FileUploadItemGroup,
@@ -1892,42 +1995,6 @@ var fileUpload = /*#__PURE__*/Object.freeze({
   Trigger: FileUploadTrigger
 });
 
-const [LocaleContextProvider, useLocaleContext] = createContext({
-  hookName: 'useEnvironmentContext',
-  providerName: '<EnvironmentProvider />',
-  strict: false,
-  defaultValue: () => ({
-    dir: 'ltr',
-    locale: 'en-US'
-  })
-});
-
-const LocaleProvider = props => {
-  const [localeProps, restProps] = solidJs.splitProps(props, ['locale', 'defaultLocale']);
-  const [locale, setLocale] = solidJs.createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
-  const getRootNode = useEnvironmentContext();
-  solidJs.createEffect(() => {
-    const cleanup = i18nUtils.trackLocale({
-      locale: localeProps.locale,
-      getRootNode,
-      onLocaleChange(locale) {
-        setLocale(locale.locale);
-      }
-    });
-    solidJs.onCleanup(cleanup);
-  });
-  const context = solidJs.createMemo(() => ({
-    locale: locale(),
-    dir: i18nUtils.isRTL(locale()) ? 'rtl' : 'ltr'
-  }));
-  return web.createComponent(LocaleContextProvider, {
-    value: context,
-    get children() {
-      return restProps.children;
-    }
-  });
-};
-
 const FormatByte = props => {
   const [valueProps, intlProps] = solidJs.splitProps(props, ['value']);
   const ctx = useLocaleContext();
@@ -1971,7 +2038,7 @@ const HoverCardContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1987,7 +2054,7 @@ const HoverCardPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -1996,10 +2063,13 @@ const HoverCardPositioner = props => {
 };
 
 const useHoverCard = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
     context
@@ -2009,10 +2079,10 @@ const useHoverCard = props => {
 
 const HoverCardRoot = props => {
   const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useHoverCard(useHoverCardProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return web.createComponent(HoverCardProvider, {
     value: api,
@@ -2062,13 +2132,44 @@ const MenuArrowTip = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const [MenuItemProvider, useMenuItemContext] = createContext({
+  hookName: 'useMenuItemContext',
+  providerName: '<MenuItemProvider />'
+});
+
+const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
+  hookName: 'useMenuOptionItemPropsContext',
+  providerName: '<MenuOptionItemPropsProvider />'
+});
+
+const MenuCheckboxItem = props => {
+  const [partialOptionItemProps, localProps] = createSplitProps()(props, ['checked', 'closeOnSelect', 'disabled', 'onCheckedChange', 'value', 'valueText']);
+  const optionItemProps = solid.mergeProps(partialOptionItemProps, {
+    type: 'checkbox'
+  });
+  const context = useMenuContext();
+  const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  return web.createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return web.createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const MenuContent = props => {
   const context = useMenuContext();
   const presenceContext = usePresenceContext();
   const mergedProps = solid.mergeProps(() => context().contentProps, () => presenceContext().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceContext().isUnmounted;
+      return !presenceContext().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2090,11 +2191,6 @@ const MenuIndicator = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const [MenuItemProvider, useMenuItemContext] = createContext({
-  hookName: 'useMenuItemContext',
-  providerName: '<MenuItemProvider />'
-});
-
 const MenuItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
   const context = useMenuContext();
@@ -2139,15 +2235,6 @@ const MenuItemGroupLabel = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-createContext({
-  hookName: 'useMenuOptionItemContext',
-  providerName: '<MenuOptionItemProvider />'
-});
-const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
-  hookName: 'useMenuOptionItemPropsContext',
-  providerName: '<MenuOptionItemPropsProvider />'
-});
-
 const MenuItemIndicator = props => {
   const context = useMenuContext();
   const optionItemProps = useMenuOptionItemPropsContext();
@@ -2168,7 +2255,7 @@ const MenuPositioner = props => {
   const mergedProps = solid.mergeProps(() => context().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presence().isUnmounted;
+      return !presence().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2176,11 +2263,55 @@ const MenuPositioner = props => {
   });
 };
 
+const MenuRadioItem = props => {
+  const [partialItemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
+  const context = useMenuContext();
+  const itemGroup = useMenuItemGroupContext();
+  const optionItemProps = solid.mergeProps(partialItemProps, () => ({
+    type: 'radio',
+    checked: itemGroup.value === partialItemProps.value,
+    onCheckedChange: () => itemGroup.onValueChange?.({
+      value: partialItemProps.value
+    })
+  }));
+  const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  return web.createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return web.createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return web.createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const MenuRadioItemGroup = props => {
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
+  const context = useMenuContext();
+  const itemGroupProps = solid.mergeProps({
+    id: solidJs.createUniqueId()
+  }, optionalItemGroupProps);
+  const mergedProps = solid.mergeProps(() => context().getItemGroupProps(itemGroupProps), localProps);
+  return web.createComponent(MenuItemGroupProvider, {
+    value: itemGroupProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const useMenu = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
     context
@@ -2206,12 +2337,12 @@ const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
 
 const MenuRoot = props => {
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedValue', 'id', 'ids', 'loop', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning']);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'highlightedValue', 'id', 'ids', 'loopFocus', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning', 'typeahead']);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const menu = useMenu(useMenuProps);
   const presenceApi = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: menu.api().isOpen
+    present: menu.api().open
   })));
   solidJs.createEffect(() => {
     if (!parentMachine) return;
@@ -2256,7 +2387,7 @@ const MenuTrigger = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
 };
@@ -2267,68 +2398,6 @@ const MenuTriggerItem = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const MenuCheckboxItem = props => {
-  const [partialOptionItemProps, localProps] = createSplitProps()(props, ['checked', 'closeOnSelect', 'disabled', 'onCheckedChange', 'value', 'valueText']);
-  const optionItemProps = solid.mergeProps(partialOptionItemProps, {
-    type: 'checkbox'
-  });
-  const context = useMenuContext();
-  const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
-  return web.createComponent(MenuOptionItemPropsProvider, {
-    value: optionItemProps,
-    get children() {
-      return web.createComponent(MenuItemProvider, {
-        value: itemState,
-        get children() {
-          return web.createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
-const MenuRadioItem = props => {
-  const [partialItemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
-  const context = useMenuContext();
-  const itemGroup = useMenuItemGroupContext();
-  const optionItemProps = solid.mergeProps(partialItemProps, () => ({
-    type: 'radio',
-    checked: itemGroup.value === partialItemProps.value,
-    onCheckedChange: () => itemGroup.onValueChange?.({
-      value: partialItemProps.value
-    })
-  }));
-  const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
-  return web.createComponent(MenuOptionItemPropsProvider, {
-    value: optionItemProps,
-    get children() {
-      return web.createComponent(MenuItemProvider, {
-        value: itemState,
-        get children() {
-          return web.createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
-const MenuRadioItemGroup = props => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
-  const context = useMenuContext();
-  const itemGroupProps = solid.mergeProps({
-    id: solidJs.createUniqueId()
-  }, optionalItemGroupProps);
-  const mergedProps = solid.mergeProps(() => context().getItemGroupProps(itemGroupProps), localProps);
-  return web.createComponent(MenuItemGroupProvider, {
-    value: itemGroupProps,
-    get children() {
-      return web.createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
 var menu = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
@@ -2391,10 +2460,12 @@ const NumberInputLabel = props => {
 };
 
 const useNumberInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
     context
@@ -2403,7 +2474,7 @@ const useNumberInput = props => {
 };
 
 const NumberInputRoot = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(NumberInputProvider, {
@@ -2466,10 +2537,12 @@ const PaginationPrevTrigger = props => {
 };
 
 const usePagination = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
     context
@@ -2478,7 +2551,7 @@ const usePagination = props => {
 };
 
 const PaginationRoot = props => {
-  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(usePaginationProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(PaginationProvider, {
@@ -2526,10 +2599,12 @@ const PinInputLabel = props => {
 };
 
 const usePinInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
     context
@@ -2537,27 +2612,29 @@ const usePinInput = props => {
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
 const PinInputRoot = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(usePinInputProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const pinInput = usePinInput(usePinInputProps);
+  const mergedProps = solid.mergeProps(() => pinInput().rootProps, localProps);
   return web.createComponent(PinInputProvider, {
-    value: api,
+    value: pinInput,
     get children() {
-      return [web.createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$$6();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return web.createComponent(ark.div, mergedProps);
     }
   });
 };
 
+const PinInputHiddenInput = props => {
+  const pinInput = usePinInputContext();
+  const mergedProps = solid.mergeProps(() => pinInput().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var pinInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: PinInputContext,
   Control: PinInputControl,
+  HiddenInput: PinInputHiddenInput,
   Input: PinInputInput,
   Label: PinInputLabel,
   Root: PinInputRoot
@@ -2598,7 +2675,7 @@ const PopoverContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2626,7 +2703,7 @@ const PopoverPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -2635,10 +2712,13 @@ const PopoverPositioner = props => {
 };
 
 const usePopover = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
     context
@@ -2648,10 +2728,10 @@ const usePopover = props => {
 
 const PopoverRoot = props => {
   const [presenceProps, popoverProps] = splitPresenceProps(props);
-  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover(usePopoverProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return web.createComponent(PopoverProvider, {
     value: api,
@@ -2676,7 +2756,7 @@ const PopoverTrigger = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
   const mergedProps = solid.mergeProps(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return web.createComponent(ark.button, mergedProps);
 };
@@ -2735,10 +2815,12 @@ const ProgressRange = props => {
 };
 
 const useProgress = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(progress__namespace.machine(context), {
     context
@@ -2747,7 +2829,7 @@ const useProgress = props => {
 };
 
 const ProgressRoot = props => {
-  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const [progressProps, localProps] = createSplitProps()(props, ['id', 'ids', 'max', 'min', 'orientation', 'translations', 'value']);
   const api = useProgress(progressProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ProgressProvider, {
@@ -2800,9 +2882,11 @@ const [RadioGroupProvider, useRadioGroupContext] = createContext({
   providerName: '<RadioGroupProvider />'
 });
 
+const RadioGroupContext = props => props.children(useRadioGroupContext());
+
 const RadioGroupIndicator = props => {
-  const api = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => radioGroup().indicatorProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2810,6 +2894,7 @@ const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
   hookName: 'useRadioGroupItemContext',
   providerName: '<RadioGroupItemProvider />'
 });
+
 const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext({
   hookName: 'useRadioGroupItemPropsContext',
   providerName: '<RadioGroupItemPropsProvider />'
@@ -2817,14 +2902,14 @@ const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createConte
 
 const RadioGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
-  const api = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
-  const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
-  return web.createComponent(RadioGroupItemProvider, {
-    value: itemState,
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => radioGroup().getItemProps(itemProps), localProps);
+  const itemState = solidJs.createMemo(() => radioGroup().getItemState(itemProps));
+  return web.createComponent(RadioGroupItemPropsProvider, {
+    value: itemProps,
     get children() {
-      return web.createComponent(RadioGroupItemPropsProvider, {
-        value: itemProps,
+      return web.createComponent(RadioGroupItemProvider, {
+        value: itemState,
         get children() {
           return web.createComponent(ark.label, mergedProps);
         }
@@ -2833,36 +2918,40 @@ const RadioGroupItem = props => {
   });
 };
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
+const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
+
+var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
 const RadioGroupItemControl = props => {
-  const api = useRadioGroupContext();
+  const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => radioGroup().getItemControlProps(itemProps), props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$5();
-    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    var _el$ = _tmpl$$3();
+    web.spread(_el$, web.mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
 
 const RadioGroupItemText = props => {
-  const api = useRadioGroupContext();
+  const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => radioGroup().getItemTextProps(itemProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const RadioGroupLabel = props => {
-  const api = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => radioGroup().labelProps, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const useRadioGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
@@ -2871,11 +2960,11 @@ const useRadioGroup = props => {
 };
 
 const RadioGroupRoot = props => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const radioGroup = useRadioGroup(useRadioGroupProps);
+  const mergedProps = solid.mergeProps(() => radioGroup().rootProps, localProps);
   return web.createComponent(RadioGroupProvider, {
-    value: api,
+    value: radioGroup,
     get children() {
       return web.createComponent(ark.div, mergedProps);
     }
@@ -2884,8 +2973,10 @@ const RadioGroupRoot = props => {
 
 var radioGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  Context: RadioGroupContext,
   Indicator: RadioGroupIndicator,
   Item: RadioGroupItem,
+  ItemContext: RadioGroupItemContext,
   ItemControl: RadioGroupItemControl,
   ItemText: RadioGroupItemText,
   Label: RadioGroupLabel,
@@ -2899,15 +2990,10 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
 
 const RatingGroupContext = props => props.children(useRatingGroupContext());
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
-  const api = useRatingGroupContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$4();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => ratingGroup().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -2937,10 +3023,12 @@ const RatingGroupLabel = props => {
 };
 
 const useRatingGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(rating__namespace.machine(context), {
     context
@@ -2949,7 +3037,7 @@ const useRatingGroup = props => {
 };
 
 const RatingGroupRoot = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup(useRatingProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(RatingGroupProvider, {
@@ -2960,10 +3048,17 @@ const RatingGroupRoot = props => {
   });
 };
 
+const RatingGroupHiddenInput = props => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => ratingGroup().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 var ratingGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: RatingGroupContext,
   Control: RatingGroupControl,
+  HiddenInput: RatingGroupHiddenInput,
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
@@ -2978,8 +3073,8 @@ const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
 const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
-  const api = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => segmentGroup().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2987,6 +3082,7 @@ const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
   hookName: 'useSegmentGroupItemContext',
   providerName: '<SegmentGroupItemProvider />'
 });
+
 const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext({
   hookName: 'useSegmentGroupItemPropsContext',
   providerName: '<SegmentGroupItemPropsProvider />'
@@ -2994,9 +3090,9 @@ const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createC
 
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
-  const api = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
-  const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
+  const itemState = solidJs.createMemo(() => segmentGroup().getItemState(itemProps));
   return web.createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -3012,36 +3108,38 @@ const SegmentGroupItem = props => {
 
 const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<input>`);
 const SegmentGroupItemControl = props => {
-  const api = useSegmentGroupContext();
+  const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$3();
-    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    var _el$ = _tmpl$$2();
+    web.spread(_el$, web.mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
 
 const SegmentGroupItemText = props => {
-  const api = useSegmentGroupContext();
+  const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
-  const api = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, anatomy.segmentGroupAnatomy.build().label.attrs, props);
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => segmentGroup().labelProps, anatomy.segmentGroupAnatomy.build().label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const useSegmentGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
     context
@@ -3050,11 +3148,11 @@ const useSegmentGroup = props => {
 };
 
 const SegmentGroupRoot = props => {
-  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const segmentGroup = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
-    value: api,
+    value: segmentGroup,
     get children() {
       return web.createComponent(ark.div, mergedProps);
     }
@@ -3073,25 +3171,25 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   Root: SegmentGroupRoot
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const [SelectProvider, useSelectContext] = createContext({
   hookName: 'useSelectContext',
   providerName: '<SelectProvider />'
 });
 
 const SelectClearTrigger = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().clearTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const SelectContent = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = solid.mergeProps(() => select().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -3099,42 +3197,47 @@ const SelectContent = props => {
   });
 };
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<select>`),
-  _tmpl$3 = /*#__PURE__*/web.template(`<option>`);
+const SelectContext = props => props.children(useSelectContext());
+
 const SelectControl = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  const isValueEmpty = solidJs.createMemo(() => api().value.length === 0);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$2();
-    web.spread(_el$, web.mergeProps(() => api().hiddenSelectProps), false, true);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return isValueEmpty();
-      },
-      get children() {
-        return _tmpl$$2();
-      }
-    }), null);
-    web.insert(_el$, web.createComponent(solidJs.Index, {
-      get each() {
-        return api().collection.toArray();
-      },
-      children: option => (() => {
-        var _el$3 = _tmpl$3();
-        web.insert(_el$3, () => option().label);
-        web.effect(() => _el$3.value = option().value);
-        return _el$3;
-      })()
-    }), null);
-    return _el$;
-  })()];
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+var _tmpl$$1 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+const SelectHiddenSelect = props => {
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
+  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return [web.createComponent(solidJs.Show, {
+        get when() {
+          return isValueEmpty();
+        },
+        get children() {
+          return _tmpl$$1();
+        }
+      }), web.createComponent(solidJs.Index, {
+        get each() {
+          return select().collection.toArray();
+        },
+        children: option => (() => {
+          var _el$2 = _tmpl$2();
+          web.insert(_el$2, () => option().label);
+          web.effect(() => _el$2.value = option().value);
+          return _el$2;
+        })()
+      })];
+    }
+  }));
 };
 
 const SelectIndicator = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().indicatorProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3142,6 +3245,7 @@ const [SelectItemProvider, useSelectItemContext] = createContext({
   hookName: 'useSelectItemContext',
   providerName: '<SelectItemProvider />'
 });
+
 const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
   hookName: 'useSelectItemPropsContext',
   providerName: '<SelectItemPropsProvider />'
@@ -3149,9 +3253,9 @@ const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
 
 const SelectItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['item']);
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
-  const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().getItemProps(itemProps), localProps);
+  const itemState = solidJs.createMemo(() => select().getItemState(itemProps));
   return web.createComponent(SelectItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -3165,49 +3269,64 @@ const SelectItem = props => {
   });
 };
 
+const SelectItemContext = props => props.children(useSelectItemContext());
+
+const [SelectItemGroupPropsProvider, useSelectItemGroupPropsContext] = createContext({
+  hookName: 'useSelectItemGroupPropsContext',
+  providerName: '<SelectItemGroupPropsProvider />'
+});
+
 const SelectItemGroup = props => {
-  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(itemGroupProps), localProps);
-  return web.createComponent(ark.div, mergedProps);
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const select = useSelectContext();
+  const itemGroupProps = solid.mergeProps({
+    id: solidJs.createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = solid.mergeProps(() => select().getItemGroupProps(itemGroupProps), localProps);
+  return web.createComponent(SelectItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const SelectItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['for']);
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().getItemGroupLabelProps({
-    htmlFor: labelProps.for
-  }), localProps);
+  const select = useSelectContext();
+  const itemGroupProps = useSelectItemGroupPropsContext();
+  const mergedProps = solid.mergeProps(() => select().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const SelectItemIndicator = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const itemProps = useSelectItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => select().getItemIndicatorProps(itemProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const SelectItemText = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const itemProps = useSelectItemPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = solid.mergeProps(() => select().getItemTextProps(itemProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SelectLabel = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().labelProps, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const SelectPositioner = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  const mergedProps = solid.mergeProps(() => select().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -3218,11 +3337,14 @@ const SelectPositioner = props => {
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => select__namespace.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    collection: collection()
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context), {
     context
@@ -3232,14 +3354,14 @@ const useSelect = props => {
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectOnBlur', 'value']);
-  const api = useSelect(useSelectProps);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const select = useSelect(useSelectProps);
   const presenceApi = usePresence(solid.mergeProps(() => ({
-    present: api().isOpen
+    present: select().open
   }), presenceProps));
-  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const mergedProps = solid.mergeProps(() => select().rootProps, localProps);
   return web.createComponent(SelectProvider, {
-    value: api,
+    value: select,
     get children() {
       return web.createComponent(PresenceProvider, {
         value: presenceApi,
@@ -3252,31 +3374,28 @@ const SelectRoot = props => {
 };
 
 const SelectTrigger = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().triggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const SelectValueText = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
-      return api().valueAsString || props.placeholder;
+      return select().valueAsString || props.placeholder;
     }
   }));
 };
 
-const SelectContext = props => props.children(useSelectContext());
-
-const SelectItemContext = props => props.children(useSelectItemContext());
-
 var select = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Context: SelectContext,
   Control: SelectControl,
+  HiddenSelect: SelectHiddenSelect,
   Indicator: SelectIndicator,
   Item: SelectItem,
   ItemContext: SelectItemContext,
@@ -3330,10 +3449,12 @@ const SliderRange = props => {
 };
 
 const useSlider = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(slider__namespace.machine(context), {
     context
@@ -3342,7 +3463,7 @@ const useSlider = props => {
 };
 
 const SliderRoot = props => {
-  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'disabled', 'form', 'getAriaValueText', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useSlider(useSliderProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(SliderProvider, {
@@ -3369,7 +3490,7 @@ const SliderTrack = props => {
 const SliderValueText = props => {
   const api = useSliderContext();
   const mergedProps = solid.mergeProps(() => api().valueTextProps, props);
-  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+  return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return props.children || api().value.join(',');
     }
@@ -3412,10 +3533,12 @@ const SplitterResizeTrigger = props => {
 };
 
 const useSplitter = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(splitter__namespace.machine(context), {
     context
@@ -3424,7 +3547,7 @@ const useSplitter = props => {
 };
 
 const SplitterRoot = props => {
-  const [useSplitterProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
+  const [useSplitterProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
   const api = useSplitter(useSplitterProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(SplitterProvider, {
@@ -3450,15 +3573,16 @@ const [SwitchProvider, useSwitchContext] = createContext({
 
 const SwitchContext = props => props.children(useSwitchContext());
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(ark.span, mergedProps), (() => {
-    var _el$ = _tmpl$$1();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const SwitchHiddenInput = props => {
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const SwitchLabel = props => {
@@ -3468,10 +3592,12 @@ const SwitchLabel = props => {
 };
 
 const useSwitch = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), {
     context
@@ -3480,7 +3606,7 @@ const useSwitch = props => {
 };
 
 const SwitchRoot = props => {
-  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
+  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
   const api = useSwitch(switchProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(SwitchProvider, {
@@ -3501,6 +3627,7 @@ var _switch = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: SwitchContext,
   Control: SwitchControl,
+  HiddenInput: SwitchHiddenInput,
   Label: SwitchLabel,
   Root: SwitchRoot,
   Thumb: SwitchThumb
@@ -3524,7 +3651,7 @@ const TabContent = props => {
     get children() {
       return web.createComponent(solidJs.Show, {
         get when() {
-          return !presenceApi().isUnmounted;
+          return !presenceApi().unmounted;
         },
         get children() {
           return web.createComponent(ark.div, mergedProps);
@@ -3556,10 +3683,12 @@ const TabTrigger = props => {
 const TabsContext = props => props.children(useTabsContext());
 
 const useTabs = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(tabs__namespace.machine(context), {
     context
@@ -3569,7 +3698,7 @@ const useTabs = props => {
 
 const TabsRoot = props => {
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
-  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'id', 'ids', 'loopFocus', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(useTabsProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(TabsProvider, {
@@ -3624,6 +3753,7 @@ const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
   hookName: 'useTagsInputItemContext',
   providerName: '<TagsInputItemProvider />'
 });
+
 const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
   hookName: 'useTagsInputItemPropsContext',
   providerName: '<TagsInputItemPropsProvider />'
@@ -3663,6 +3793,12 @@ const TagsInputItemInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
+const TagsInputHiddenInput = props => {
+  const tagsInput = useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => tagsInput().hiddenInputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const TagsInputItemPreview = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemPropsContext();
@@ -3684,10 +3820,12 @@ const TagsInputLabel = props => {
 };
 
 const useTagsInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
     context
@@ -3695,19 +3833,14 @@ const useTagsInput = props => {
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const TagsInputRoot = props => {
-  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(TagsInputProvider, {
     value: api,
     get children() {
-      return [web.createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$();
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return web.createComponent(ark.div, mergedProps);
     }
   });
 };
@@ -3717,6 +3850,7 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   ClearTrigger: TagsInputClearTrigger,
   Context: TagsInputContext,
   Control: TagsInputControl,
+  HiddenInput: TagsInputHiddenInput,
   Input: TagsInputInput,
   Item: TagsInputItem,
   ItemContext: TagsInputItemContext,
@@ -3728,8 +3862,16 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   Root: TagsInputRoot
 });
 
-const ToastGroup = props => {
-  return web.createComponent(ark.ol, props);
+const createToaster = props => {
+  const machine = toast__namespace.group.machine({
+    id: '1',
+    ...props
+  });
+  const api = toast__namespace.group.connect(machine, machine.send, solid.normalizeProps);
+  return {
+    ...api,
+    machine
+  };
 };
 
 const [ToastProvider, useToastContext] = createContext({
@@ -3737,90 +3879,88 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
-const createToaster = props => {
-  const service = toast__namespace.group.machine({
-    id: '1',
-    ...props
-  }).start();
-  const [state, send] = solid.useActor(service);
-  const api = solidJs.createMemo(() => toast__namespace.group.connect(state, send, solid.normalizeProps));
-  const subscribe = fn => {
-    // @ts-expect-error FIX LATER IT EXISTS
-    return service.subscribe(state => fn(state.context.toasts));
-  };
-  const Toaster = toasterProps => {
-    const getRootNode = useEnvironmentContext();
-    solidJs.createEffect(() => {
-      service.setContext({
-        getRootNode
-      });
-      solidJs.onCleanup(() => service.stop());
-    });
-    const mergedProps = solid.mergeProps(() => api().getGroupProps({
-      placement: props.placement
-    }), toasterProps);
-    return web.createComponent(ToastGroup, web.mergeProps(mergedProps, {
-      get children() {
-        return web.createComponent(solidJs.Index, {
-          get each() {
-            return api().toastsByPlacement[props.placement];
-          },
-          children: toast => web.createComponent(ToastProviderFactory, {
-            get service() {
-              return toast();
-            }
-          })
-        });
-      }
-    }));
-  };
-  return [Toaster, solidJs.createMemo(() => Object.assign(api(), {
-    subscribe
-  }))];
-};
-const ToastProviderFactory = props => {
-  const [state, send] = solid.useActor(props.service);
-  const api = solidJs.createMemo(() => toast__namespace.connect(state, send, solid.normalizeProps));
-  return web.createComponent(ToastProvider, {
-    value: api,
-    get children() {
-      return state.context.render?.(api);
-    }
-  });
+const ToastActionTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().actionTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
 };
 
 const ToastCloseTrigger = props => {
-  const api = useToastContext();
-  const mergedProps = solid.mergeProps(() => api().closeTriggerProps, props);
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().closeTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const ToastContext = props => props.children(useToastContext());
 
 const ToastDescription = props => {
-  const api = useToastContext();
-  const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().descriptionProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+var _tmpl$ = /*#__PURE__*/web.template(`<div><div></div><div>`);
 const ToastRoot = props => {
-  const api = useToastContext();
-  const mergedProps = solid.mergeProps(() => api().rootProps, props);
-  return web.createComponent(ark.li, mergedProps);
+  const toast = useToastContext();
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    web.spread(_el$, web.mergeProps(() => toast().rootProps), false, true);
+    web.spread(_el$2, web.mergeProps(() => toast().ghostBeforeProps), false, false);
+    web.insert(_el$, () => props.children, _el$3);
+    web.spread(_el$3, web.mergeProps(() => toast().ghostAfterProps), false, false);
+    return _el$;
+  })();
 };
 
 const ToastTitle = props => {
-  const api = useToastContext();
-  const mergedProps = solid.mergeProps(() => api().titleProps, props);
+  const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().titleProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
+const Toaster = props => {
+  const [toasterProps, localProps] = solidJs.splitProps(props, ['toaster', 'children']);
+  const [state, send] = solid.useMachine(toasterProps.toaster.machine);
+  const placement = state.context.placement;
+  const api = solidJs.createMemo(() => toast__namespace.group.connect(state, send, solid.normalizeProps));
+  const toasts = solidJs.createMemo(() => api().getToastsByPlacement(placement));
+  const mergedProps = solid.mergeProps(api().getGroupProps({
+    placement
+  }), localProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return toasts();
+        },
+        children: toast => web.createComponent(ToastActor, {
+          value: toast,
+          children: ctx => toasterProps.children(ctx)
+        })
+      });
+    }
+  }));
+};
+const ToastActor = props => {
+  const [state, send] = solid.useActor(props.value);
+  const api = solidJs.createMemo(() => toast__namespace.connect(state, send, solid.normalizeProps));
+  const ctx = solidJs.createMemo(() => state.context);
+  return web.createComponent(ToastProvider, {
+    value: api,
+    get children() {
+      return props.children(ctx);
+    }
+  });
+};
+
 var toast = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  ActionTrigger: ToastActionTrigger,
   CloseTrigger: ToastCloseTrigger,
   Context: ToastContext,
   Description: ToastDescription,
-  Group: ToastGroup,
   Root: ToastRoot,
   Title: ToastTitle
 });
@@ -3840,10 +3980,12 @@ const ToggleGroupItem = props => {
 };
 
 const useToggleGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context), {
     context
@@ -3852,7 +3994,7 @@ const useToggleGroup = props => {
 };
 
 const ToggleGroupRoot = props => {
-  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
+  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'loopFocus', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
   const api = useToggleGroup(useToggleGroupProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(ToggleGroupProvider, {
@@ -3893,7 +4035,7 @@ const TooltipContent = props => {
   const mergedProps = solid.mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -3909,7 +4051,7 @@ const TooltipPositioner = props => {
   const mergedProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return web.createComponent(ark.div, mergedProps);
@@ -3918,10 +4060,13 @@ const TooltipPositioner = props => {
 };
 
 const useTooltip = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
     context
@@ -3931,10 +4076,10 @@ const useTooltip = props => {
 
 const TooltipRoot = props => {
   const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return web.createComponent(TooltipProvider, {
     value: api,
@@ -3982,7 +4127,7 @@ const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
 });
 
 const TreeViewBranch = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'id']);
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTreeViewContext();
   const depth = useTreeViewDepthContext();
   const branchProps = solid.mergeProps(itemProps, {
@@ -4044,32 +4189,45 @@ const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
   providerName: '<TreeViewItemProvider />'
 });
 
+const [TreeViewItemPropsProvider, useTreeViewItemPropsContext] = createContext({
+  hookName: 'useTreeViewItemPropsContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
 const TreeViewItem = props => {
-  const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
+  const [_itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTreeViewContext();
   const depth = useTreeViewDepthContext();
   const itemProps = solid.mergeProps(_itemProps, {
     depth
   });
+  const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
   const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
-  return web.createComponent(TreeViewItemProvider, {
+  return web.createComponent(TreeViewItemPropsProvider, {
     value: itemProps,
     get children() {
-      return web.createComponent(ark.li, mergedProps);
+      return web.createComponent(TreeViewItemProvider, {
+        value: itemState,
+        get children() {
+          return web.createComponent(ark.li, mergedProps);
+        }
+      });
     }
   });
 };
 
+const TreeViewItemContext = props => props.children(useTreeViewItemContext());
+
 const TreeViewItemIndicator = props => {
   const api = useTreeViewContext();
-  const itemProps = useTreeViewItemContext();
+  const itemProps = useTreeViewItemPropsContext();
   const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewItemText = props => {
   const api = useTreeViewContext();
-  const itemProps = useTreeViewItemContext();
+  const itemProps = useTreeViewItemPropsContext();
   const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
@@ -4081,10 +4239,12 @@ const TreeViewLabel = props => {
 };
 
 const useTreeView = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = solid.useMachine(treeView__namespace.machine(context), {
     context
@@ -4093,7 +4253,7 @@ const useTreeView = props => {
 };
 
 const TreeViewRoot = props => {
-  const [useTreeViewProps, localProps] = createSplitProps()(props, ['dir', 'expandedIds', 'focusedId', 'getRootNode', 'id', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedIds', 'selectionMode']);
+  const [useTreeViewProps, localProps] = createSplitProps()(props, ['expandedValue', 'focusedValue', 'id', 'ids', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedValue', 'selectionMode', 'typeahead']);
   const api = useTreeView(useTreeViewProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(TreeViewProvider, {
@@ -4125,6 +4285,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchTrigger: TreeViewBranchTrigger,
   Context: TreeViewContext,
   Item: TreeViewItem,
+  ItemContext: TreeViewItemContext,
   ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
@@ -4136,6 +4297,7 @@ exports.Accordion = accordion;
 exports.AccordionContext = AccordionContext;
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;
+exports.AccordionItemContext = AccordionItemContext;
 exports.AccordionItemIndicator = AccordionItemIndicator;
 exports.AccordionItemTrigger = AccordionItemTrigger;
 exports.AccordionRoot = AccordionRoot;
@@ -4158,6 +4320,7 @@ exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = checkbox;
 exports.CheckboxContext = CheckboxContext;
 exports.CheckboxControl = CheckboxControl;
+exports.CheckboxHiddenInput = CheckboxHiddenInput;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
 exports.CheckboxRoot = CheckboxRoot;
@@ -4188,6 +4351,7 @@ exports.ColorPickerControl = ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;
 exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
 exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;
+exports.ColorPickerHiddenInput = ColorPickerHiddenInput;
 exports.ColorPickerLabel = ColorPickerLabel;
 exports.ColorPickerPositioner = ColorPickerPositioner;
 exports.ColorPickerRoot = ColorPickerRoot;
@@ -4266,6 +4430,7 @@ exports.Environment = Environment;
 exports.FileUpload = fileUpload;
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;
+exports.FileUploadHiddenInput = FileUploadHiddenInput;
 exports.FileUploadItem = FileUploadItem;
 exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = FileUploadItemGroup;
@@ -4291,6 +4456,7 @@ exports.LocaleProvider = LocaleProvider;
 exports.Menu = menu;
 exports.MenuArrow = MenuArrow;
 exports.MenuArrowTip = MenuArrowTip;
+exports.MenuCheckboxItem = MenuCheckboxItem;
 exports.MenuContent = MenuContent;
 exports.MenuContext = MenuContext;
 exports.MenuContextTrigger = MenuContextTrigger;
@@ -4302,6 +4468,8 @@ exports.MenuItemGroupLabel = MenuItemGroupLabel;
 exports.MenuItemIndicator = MenuItemIndicator;
 exports.MenuItemText = MenuItemText;
 exports.MenuPositioner = MenuPositioner;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuRadioItemGroup = MenuRadioItemGroup;
 exports.MenuRoot = MenuRoot;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
@@ -4325,6 +4493,7 @@ exports.PaginationRoot = PaginationRoot;
 exports.PinInput = pinInput;
 exports.PinInputContext = PinInputContext;
 exports.PinInputControl = PinInputControl;
+exports.PinInputHiddenInput = PinInputHiddenInput;
 exports.PinInputInput = PinInputInput;
 exports.PinInputLabel = PinInputLabel;
 exports.PinInputRoot = PinInputRoot;
@@ -4355,8 +4524,10 @@ exports.ProgressTrack = ProgressTrack;
 exports.ProgressValueText = ProgressValueText;
 exports.ProgressView = ProgressView;
 exports.RadioGroup = radioGroup;
+exports.RadioGroupContext = RadioGroupContext;
 exports.RadioGroupIndicator = RadioGroupIndicator;
 exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroupItemContext = RadioGroupItemContext;
 exports.RadioGroupItemControl = RadioGroupItemControl;
 exports.RadioGroupItemText = RadioGroupItemText;
 exports.RadioGroupLabel = RadioGroupLabel;
@@ -4364,6 +4535,7 @@ exports.RadioGroupRoot = RadioGroupRoot;
 exports.RatingGroup = ratingGroup;
 exports.RatingGroupContext = RatingGroupContext;
 exports.RatingGroupControl = RatingGroupControl;
+exports.RatingGroupHiddenInput = RatingGroupHiddenInput;
 exports.RatingGroupItem = RatingGroupItem;
 exports.RatingGroupItemContext = RatingGroupItemContext;
 exports.RatingGroupLabel = RatingGroupLabel;
@@ -4380,9 +4552,12 @@ exports.SegmentGroupRoot = SegmentGroupRoot;
 exports.Select = select;
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
+exports.SelectContext = SelectContext;
 exports.SelectControl = SelectControl;
+exports.SelectHiddenSelect = SelectHiddenSelect;
 exports.SelectIndicator = SelectIndicator;
 exports.SelectItem = SelectItem;
+exports.SelectItemContext = SelectItemContext;
 exports.SelectItemGroup = SelectItemGroup;
 exports.SelectItemGroupLabel = SelectItemGroupLabel;
 exports.SelectItemIndicator = SelectItemIndicator;
@@ -4411,6 +4586,7 @@ exports.SplitterRoot = SplitterRoot;
 exports.Switch = _switch;
 exports.SwitchContext = SwitchContext;
 exports.SwitchControl = SwitchControl;
+exports.SwitchHiddenInput = SwitchHiddenInput;
 exports.SwitchLabel = SwitchLabel;
 exports.SwitchRoot = SwitchRoot;
 exports.SwitchThumb = SwitchThumb;
@@ -4425,6 +4601,7 @@ exports.TagsInput = tagsInput;
 exports.TagsInputClearTrigger = TagsInputClearTrigger;
 exports.TagsInputContext = TagsInputContext;
 exports.TagsInputControl = TagsInputControl;
+exports.TagsInputHiddenInput = TagsInputHiddenInput;
 exports.TagsInputInput = TagsInputInput;
 exports.TagsInputItem = TagsInputItem;
 exports.TagsInputItemContext = TagsInputItemContext;
@@ -4435,12 +4612,13 @@ exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
 exports.TagsInputRoot = TagsInputRoot;
 exports.Toast = toast;
+exports.ToastActionTrigger = ToastActionTrigger;
 exports.ToastCloseTrigger = ToastCloseTrigger;
 exports.ToastContext = ToastContext;
 exports.ToastDescription = ToastDescription;
-exports.ToastGroup = ToastGroup;
 exports.ToastRoot = ToastRoot;
 exports.ToastTitle = ToastTitle;
+exports.Toaster = Toaster;
 exports.ToggleGroup = toggleGroup;
 exports.ToggleGroupContext = ToggleGroupContext;
 exports.ToggleGroupItem = ToggleGroupItem;
@@ -4462,6 +4640,7 @@ exports.TreeViewBranchText = TreeViewBranchText;
 exports.TreeViewBranchTrigger = TreeViewBranchTrigger;
 exports.TreeViewContext = TreeViewContext;
 exports.TreeViewItem = TreeViewItem;
+exports.TreeViewItemContext = TreeViewItemContext;
 exports.TreeViewItemIndicator = TreeViewItemIndicator;
 exports.TreeViewItemText = TreeViewItemText;
 exports.TreeViewLabel = TreeViewLabel;
@@ -4514,4 +4693,5 @@ exports.useToastContext = useToastContext;
 exports.useToggleGroupContext = useToggleGroupContext;
 exports.useTooltipContext = useTooltipContext;
 exports.useTreeViewContext = useTreeViewContext;
+exports.useTreeViewItemContext = useTreeViewItemContext;
 //# sourceMappingURL=index.js.map