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

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');
@@ -96,9 +96,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 +120,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 +147,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 +181,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,18 +191,15 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
-const createSplitProps = () => (props, keys) => solidJs.splitProps(props, keys);
-
 const [EnvironmentProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
   providerName: '<EnvironmentProvider />',
   strict: false
 });
 
-var _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$d = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
-  // eslint-disable-next-line prefer-const
-  let spanRef = undefined;
+  const spanRef = undefined;
 
   // @ts-expect-error TODO fix
   const currentEnv = solidJs.createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
@@ -203,45 +209,77 @@ const Environment = props => {
     },
     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$;
+        var _el$ = _tmpl$$d();
+        web.use(spanRef, _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 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 useCollapsible = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    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 +308,7 @@ const [AccordionItemProvider, useAccordionItemContext] = createContext({
   hookName: 'useAccordionItemContext',
   providerName: '<AccordionItemProvider />'
 });
+
 const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
   hookName: 'useAccordionItemPropsContext',
   providerName: '<AccordionItemPropsProvider />'
@@ -277,11 +316,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 +329,7 @@ const AccordionItem = props => {
         get children() {
           return web.createComponent(CollapsibleRoot, web.mergeProps({
             get open() {
-              return itemState().isOpen;
+              return itemState().expanded;
             },
             get ids() {
               return {
@@ -305,37 +344,41 @@ 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 locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solidJs.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(accordion__namespace.machine(context), {
@@ -346,7 +389,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 +405,6 @@ const AccordionRoot = props => {
   });
 };
 
-const AccordionItemContext = props => props.children(useAccordionItemContext());
-
 var accordion = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AccordionContext,
@@ -395,9 +436,11 @@ const AvatarImage = props => {
 };
 
 const useAvatar = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(avatar__namespace.machine(context), {
@@ -407,7 +450,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,9 +520,11 @@ const CarouselPrevTrigger = props => {
 };
 
 const useCarousel = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(carousel__namespace.machine(context), {
@@ -489,7 +534,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,12 +572,12 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
 
 const CheckboxContext = props => props.children(useCheckboxContext());
 
-var _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$c = /*#__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();
+    var _el$ = _tmpl$$c();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -551,9 +596,11 @@ const CheckboxLabel = props => {
 };
 
 const useCheckbox = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context), {
@@ -563,7 +610,7 @@ const useCheckbox = props => {
 };
 
 const CheckboxRoot = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
   const api = useCheckbox(useCheckboxProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, labelprops);
   return web.createComponent(CheckboxProvider, {
@@ -600,7 +647,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 +655,7 @@ const ClipboardIndicator = props => {
     get children() {
       return web.createComponent(solidJs.Show, {
         get when() {
-          return api().isCopied;
+          return api().copied;
         },
         get fallback() {
           return getChildren();
@@ -646,7 +693,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 +721,7 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Trigger: ClipboardTrigger
 });
 
-const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
 });
@@ -688,7 +735,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 +744,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 +764,7 @@ const ColorPickerChannelInput = props => {
   return web.createComponent(ark.input, mergedProps);
 };
 
-const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
   hookName: 'useColorPickerChannelSliderContext',
   providerName: '<ColorPickerChannelSliderProvider />'
 });
@@ -726,7 +773,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 +782,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 +805,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 +825,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 +847,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);
@@ -860,7 +907,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 +917,13 @@ const ColorPickerPositioner = props => {
 
 const useColorPicker = props => {
   const [local, rest] = solidJs.splitProps(props, ['value']);
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     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,13 +932,13 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$b = /*#__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, {
@@ -900,7 +950,7 @@ const ColorPickerRoot = props => {
           return web.createComponent(ark.div, mergedProps);
         }
       }), (() => {
-        var _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$b();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -908,7 +958,7 @@ const ColorPickerRoot = props => {
   });
 };
 
-const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
 });
@@ -917,7 +967,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 +983,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);
 };
@@ -1015,7 +1065,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 +1083,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 +1109,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 +1135,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 +1190,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 +1201,13 @@ const ComboboxPositioner = props => {
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => combobox__namespace.collection(collectionOptions);
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode,
+    'open.controlled': props.open !== undefined,
     collection: collection()
   }, rest);
   const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
@@ -1151,10 +1218,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 +1279,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 +1308,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$a = /*#__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$$a();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1275,7 +1342,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 +1375,14 @@ const DatePickerRangeText = props => {
 };
 
 const useDatePicker = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const [localProps, restProps] = solidJs.splitProps(props, ['value', 'focusedValue', 'min', 'max']);
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     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 +1396,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 +1542,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1482,7 +1552,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$9();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1536,12 +1606,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 +1631,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 +1653,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 +1662,13 @@ const DialogPositioner = props => {
 };
 
 const useDialog = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
     context
@@ -1606,10 +1679,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 +1712,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,9 +1780,11 @@ const EditablePreview = props => {
 };
 
 const useEditable = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(editable__namespace.machine(context), {
@@ -1719,7 +1794,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 +1832,27 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
 
 const FileUploadContext = props => props.children(useFileUploadContext());
 
-var _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$8 = /*#__PURE__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
-  const api = useFileUploadContext();
-  const mergedProps = solid.mergeProps(() => api().dropzoneProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => fileUpload().dropzoneProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$7();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    var _el$ = _tmpl$$8();
+    web.spread(_el$, web.mergeProps(() => fileUpload().hiddenInputProps), false, false);
     return _el$;
   })()];
 };
 
-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,70 +1861,72 @@ 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 locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
@@ -1859,11 +1936,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,8 +1948,8 @@ 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);
 };
 
@@ -1892,42 +1969,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 +2012,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 +2028,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 +2037,13 @@ const HoverCardPositioner = props => {
 };
 
 const useHoverCard = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
     context
@@ -2009,10 +2053,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 +2106,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 +2165,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 +2209,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 +2229,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 +2237,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 locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
     context
@@ -2206,12 +2311,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 +2361,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 +2372,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,9 +2434,11 @@ const NumberInputLabel = props => {
 };
 
 const useNumberInput = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(numberInput__namespace.machine(context), {
@@ -2403,7 +2448,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,9 +2511,11 @@ const PaginationPrevTrigger = props => {
 };
 
 const usePagination = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(pagination__namespace.machine(context), {
@@ -2478,7 +2525,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,9 +2573,11 @@ const PinInputLabel = props => {
 };
 
 const usePinInput = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(pinInput__namespace.machine(context), {
@@ -2537,16 +2586,16 @@ const usePinInput = props => {
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$7 = /*#__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 [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', '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);
   return web.createComponent(PinInputProvider, {
     value: api,
     get children() {
       return [web.createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$$6();
+        var _el$ = _tmpl$$7();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2598,7 +2647,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 +2675,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 +2684,13 @@ const PopoverPositioner = props => {
 };
 
 const usePopover = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
     context
@@ -2648,10 +2700,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 +2728,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,9 +2787,11 @@ const ProgressRange = props => {
 };
 
 const useProgress = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(progress__namespace.machine(context), {
@@ -2747,7 +2801,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 +2854,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 +2866,7 @@ const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
   hookName: 'useRadioGroupItemContext',
   providerName: '<RadioGroupItemProvider />'
 });
+
 const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext({
   hookName: 'useRadioGroupItemPropsContext',
   providerName: '<RadioGroupItemPropsProvider />'
@@ -2817,14 +2874,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,35 +2890,39 @@ const RadioGroupItem = props => {
   });
 };
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
+const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
+
+var _tmpl$$6 = /*#__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$$6();
+    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 locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
@@ -2871,11 +2932,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 +2945,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,12 +2962,12 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
 
 const RatingGroupContext = props => props.children(useRatingGroupContext());
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$5 = /*#__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();
+    var _el$ = _tmpl$$5();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2937,9 +3000,11 @@ const RatingGroupLabel = props => {
 };
 
 const useRatingGroup = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(rating__namespace.machine(context), {
@@ -2949,7 +3014,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, {
@@ -2978,8 +3043,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 +3052,7 @@ const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
   hookName: 'useSegmentGroupItemContext',
   providerName: '<SegmentGroupItemProvider />'
 });
+
 const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext({
   hookName: 'useSegmentGroupItemPropsContext',
   providerName: '<SegmentGroupItemPropsProvider />'
@@ -2994,9 +3060,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,35 +3078,37 @@ const SegmentGroupItem = props => {
 
 const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$4 = /*#__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$$4();
+    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 locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(radio__namespace.machine(context), {
@@ -3050,11 +3118,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 +3141,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,27 +3167,29 @@ const SelectContent = props => {
   });
 };
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+const SelectContext = props => props.children(useSelectContext());
+
+var _tmpl$$3 = /*#__PURE__*/web.template(`<option value="">`),
   _tmpl$2 = /*#__PURE__*/web.template(`<select>`),
   _tmpl$3 = /*#__PURE__*/web.template(`<option>`);
 const SelectControl = props => {
-  const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  const isValueEmpty = solidJs.createMemo(() => api().value.length === 0);
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().controlProps, props);
+  const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
   return [web.createComponent(ark.div, mergedProps), (() => {
     var _el$ = _tmpl$2();
-    web.spread(_el$, web.mergeProps(() => api().hiddenSelectProps), false, true);
+    web.spread(_el$, web.mergeProps(() => select().hiddenSelectProps), false, true);
     web.insert(_el$, web.createComponent(solidJs.Show, {
       get when() {
         return isValueEmpty();
       },
       get children() {
-        return _tmpl$$2();
+        return _tmpl$$3();
       }
     }), null);
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
-        return api().collection.toArray();
+        return select().collection.toArray();
       },
       children: option => (() => {
         var _el$3 = _tmpl$3();
@@ -3133,8 +3203,8 @@ const SelectControl = props => {
 };
 
 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 +3212,7 @@ const [SelectItemProvider, useSelectItemContext] = createContext({
   hookName: 'useSelectItemContext',
   providerName: '<SelectItemProvider />'
 });
+
 const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
   hookName: 'useSelectItemPropsContext',
   providerName: '<SelectItemPropsProvider />'
@@ -3149,9 +3220,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 +3236,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 +3304,14 @@ const SelectPositioner = props => {
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => select__namespace.collection(collectionOptions);
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode,
-    collection: collection()
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context), {
     context
@@ -3232,14 +3321,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,25 +3341,21 @@ 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,
@@ -3330,9 +3415,11 @@ const SliderRange = props => {
 };
 
 const useSlider = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(slider__namespace.machine(context), {
@@ -3342,7 +3429,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 +3456,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,9 +3499,11 @@ const SplitterResizeTrigger = props => {
 };
 
 const useSplitter = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(splitter__namespace.machine(context), {
@@ -3424,7 +3513,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,12 +3539,12 @@ const [SwitchProvider, useSwitchContext] = createContext({
 
 const SwitchContext = props => props.children(useSwitchContext());
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$2 = /*#__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();
+    var _el$ = _tmpl$$2();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -3468,9 +3557,11 @@ const SwitchLabel = props => {
 };
 
 const useSwitch = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), {
@@ -3480,7 +3571,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, {
@@ -3524,7 +3615,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,9 +3647,11 @@ const TabTrigger = props => {
 const TabsContext = props => props.children(useTabsContext());
 
 const useTabs = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(tabs__namespace.machine(context), {
@@ -3569,7 +3662,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 +3717,7 @@ const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
   hookName: 'useTagsInputItemContext',
   providerName: '<TagsInputItemProvider />'
 });
+
 const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
   hookName: 'useTagsInputItemPropsContext',
   providerName: '<TagsInputItemPropsProvider />'
@@ -3684,9 +3778,11 @@ const TagsInputLabel = props => {
 };
 
 const useTagsInput = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(tagsInput__namespace.machine(context), {
@@ -3695,16 +3791,16 @@ const useTagsInput = props => {
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-var _tmpl$ = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$1 = /*#__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$();
+        var _el$ = _tmpl$$1();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3728,8 +3824,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 +3841,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,9 +3942,11 @@ const ToggleGroupItem = props => {
 };
 
 const useToggleGroup = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(toggleGroup__namespace.machine(context), {
@@ -3852,7 +3956,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 +3997,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 +4013,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 +4022,13 @@ const TooltipPositioner = props => {
 };
 
 const useTooltip = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
     context
@@ -3931,10 +4038,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 +4089,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 +4151,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,9 +4201,11 @@ const TreeViewLabel = props => {
 };
 
 const useTreeView = props => {
+  const locale = useLocaleContext();
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
+    dir: locale().dir,
     getRootNode
   }, props);
   const [state, send] = solid.useMachine(treeView__namespace.machine(context), {
@@ -4093,7 +4215,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 +4247,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchTrigger: TreeViewBranchTrigger,
   Context: TreeViewContext,
   Item: TreeViewItem,
+  ItemContext: TreeViewItemContext,
   ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
@@ -4136,6 +4259,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;
@@ -4291,6 +4415,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 +4427,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;
@@ -4355,8 +4482,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;
@@ -4380,9 +4509,11 @@ exports.SegmentGroupRoot = SegmentGroupRoot;
 exports.Select = select;
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;
+exports.SelectContext = SelectContext;
 exports.SelectControl = SelectControl;
 exports.SelectIndicator = SelectIndicator;
 exports.SelectItem = SelectItem;
+exports.SelectItemContext = SelectItemContext;
 exports.SelectItemGroup = SelectItemGroup;
 exports.SelectItemGroupLabel = SelectItemGroupLabel;
 exports.SelectItemIndicator = SelectItemIndicator;
@@ -4435,12 +4566,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 +4594,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 +4647,5 @@ exports.useToastContext = useToastContext;
 exports.useToggleGroupContext = useToggleGroupContext;
 exports.useTooltipContext = useTooltipContext;
 exports.useTreeViewContext = useTreeViewContext;
+exports.useTreeViewItemContext = useTreeViewItemContext;
 //# sourceMappingURL=index.js.map