@moduix/solid 1.0.0 → 1.1.0

package/dist/components/signature-pad/SignaturePad.js

@@ -19,11 +19,11 @@ function SignaturePadRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "signature-pad-root",
         get ["class"] () {
             return clsx(SignaturePad_module.root, local.class);
         }
     }, others, {
+        "data-slot": "signature-pad-root",
         get children () {
             return createComponent(SignaturePadReadOnlyContext.Provider, {
                 value: ()=>others.readOnly ?? field?.().readOnly ?? false,
@@ -50,11 +50,11 @@ function SignaturePadRootProvider(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "signature-pad-root-provider",
                 get ["class"] () {
                     return clsx(SignaturePad_module.root, local.class);
                 }
             }, others, {
+                "data-slot": "signature-pad-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -67,44 +67,48 @@ function SignaturePadLabel(props) {
         'class'
     ]);
     return createComponent(SignaturePad.Label, mergeProps({
-        "data-slot": "signature-pad-label",
         get ["class"] () {
             return clsx(SignaturePad_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-label"
+    }));
 }
 function SignaturePadControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Control, mergeProps({
-        "data-slot": "signature-pad-control",
         get ["class"] () {
             return clsx(SignaturePad_module.control, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-control"
+    }));
 }
 function SignaturePadSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Segment, mergeProps({
-        "data-slot": "signature-pad-segment",
         get ["class"] () {
             return clsx(SignaturePad_module.segment, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-segment"
+    }));
 }
 function SignaturePadGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(SignaturePad.Guide, mergeProps({
-        "data-slot": "signature-pad-guide",
         get ["class"] () {
             return clsx(SignaturePad_module.guide, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "signature-pad-guide"
+    }));
 }
 function SignaturePadClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -129,9 +133,9 @@ function SignaturePadClearTrigger(props) {
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
         },
-        "data-slot": "signature-pad-clear-trigger",
         class: triggerClass
     }, others, {
+        "data-slot": "signature-pad-clear-trigger",
         get disabled () {
             return isDisabled();
         },
@@ -155,9 +159,9 @@ function SignaturePadClearTrigger(props) {
                 }
             }));
         },
-        "data-slot": "signature-pad-clear-trigger",
         class: triggerClass
     }, others, {
+        "data-slot": "signature-pad-clear-trigger",
         get disabled () {
             return isDisabled();
         }

package/dist/components/signature-pad/SignaturePad.jsx

@@ -14,7 +14,7 @@ function SignaturePadRoot(props) {
         'class'
     ]);
     const field = useFieldContext();
-    return <SignaturePad.Root asChild={local.asChild} data-slot="signature-pad-root" class={clsx(SignaturePad_module.root, local.class)} {...others}>
+    return <SignaturePad.Root asChild={local.asChild} class={clsx(SignaturePad_module.root, local.class)} {...others} data-slot="signature-pad-root">
       <SignaturePadReadOnlyContext.Provider value={()=>others.readOnly ?? field?.().readOnly ?? false}>
         {local.children}
       </SignaturePadReadOnlyContext.Provider>
@@ -30,7 +30,7 @@ function SignaturePadRootProvider(props) {
         const signaturePad = others.value;
         return signaturePad[signaturePadReadOnly]?.() ?? false;
     }}>
-      <SignaturePad.RootProvider asChild={local.asChild} data-slot="signature-pad-root-provider" class={clsx(SignaturePad_module.root, local.class)} {...others}>
+      <SignaturePad.RootProvider asChild={local.asChild} class={clsx(SignaturePad_module.root, local.class)} {...others} data-slot="signature-pad-root-provider">
         {local.children}
       </SignaturePad.RootProvider>
     </SignaturePadReadOnlyContext.Provider>;
@@ -39,25 +39,25 @@ function SignaturePadLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Label data-slot="signature-pad-label" class={clsx(SignaturePad_module.label, local.class)} {...others}/>;
+    return <SignaturePad.Label class={clsx(SignaturePad_module.label, local.class)} {...others} data-slot="signature-pad-label"/>;
 }
 function SignaturePadControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Control data-slot="signature-pad-control" class={clsx(SignaturePad_module.control, local.class)} {...others}/>;
+    return <SignaturePad.Control class={clsx(SignaturePad_module.control, local.class)} {...others} data-slot="signature-pad-control"/>;
 }
 function SignaturePadSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Segment data-slot="signature-pad-segment" class={clsx(SignaturePad_module.segment, local.class)} {...others}/>;
+    return <SignaturePad.Segment class={clsx(SignaturePad_module.segment, local.class)} {...others} data-slot="signature-pad-segment"/>;
 }
 function SignaturePadGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <SignaturePad.Guide data-slot="signature-pad-guide" class={clsx(SignaturePad_module.guide, local.class)} {...others}/>;
+    return <SignaturePad.Guide class={clsx(SignaturePad_module.guide, local.class)} {...others} data-slot="signature-pad-guide"/>;
 }
 function SignaturePadClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -72,7 +72,7 @@ function SignaturePadClearTrigger(props) {
     const readOnly = useContext(SignaturePadReadOnlyContext);
     const isDisabled = ()=>readOnly() || local.disabled ? true : void 0;
     const triggerClass = clsx(SignaturePad_module.clearTrigger, local.class);
-    if (local.asChild) return <SignaturePad.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}>
+    if (local.asChild) return <SignaturePad.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={triggerClass} {...others} data-slot="signature-pad-clear-trigger" disabled={isDisabled()}>
         {local.children}
       </SignaturePad.ClearTrigger>;
     return <SignaturePad.ClearTrigger asChild={(triggerProps)=>{
@@ -81,7 +81,7 @@ function SignaturePadClearTrigger(props) {
         return <CloseButton.Root {...resolvedProps} aria-label={ariaLabel} aria-labelledby={local['aria-labelledby'] ?? resolvedProps['aria-labelledby']}>
             {resolvedChildren() ?? <RotateCcwIcon aria-hidden="true"/>}
           </CloseButton.Root>;
-    }} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}/>;
+    }} class={triggerClass} {...others} data-slot="signature-pad-clear-trigger" disabled={isDisabled()}/>;
 }
 function SignaturePadCanvas(props) {
     return <SignaturePadControl {...props}>

package/dist/components/slider/Slider.js

@@ -22,7 +22,6 @@ function SliderRoot(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "slider-root",
         get ["data-readonly"] () {
             return local.readOnly ? '' : void 0;
         },
@@ -33,6 +32,7 @@ function SliderRoot(props) {
             return local.readOnly;
         }
     }, others, {
+        "data-slot": "slider-root",
         get children () {
             return local.children;
         }
@@ -51,66 +51,72 @@ function SliderRootProvider(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "slider-root-provider",
         get ["class"] () {
             return clsx(Slider_module.root, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-root-provider"
+    }));
 }
 function SliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Label, mergeProps({
-        "data-slot": "slider-label",
         get ["class"] () {
             return clsx(Slider_module.label, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-label"
+    }));
 }
 function SliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.ValueText, mergeProps({
-        "data-slot": "slider-value-text",
         get ["class"] () {
             return clsx(Slider_module.valueText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-value-text"
+    }));
 }
 function SliderControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Control, mergeProps({
-        "data-slot": "slider-control",
         get ["class"] () {
             return clsx(Slider_module.control, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-control"
+    }));
 }
 function SliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Track, mergeProps({
-        "data-slot": "slider-track",
         get ["class"] () {
             return clsx(Slider_module.track, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-track"
+    }));
 }
 function SliderRange(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Range, mergeProps({
-        "data-slot": "slider-range",
         get ["class"] () {
             return clsx(Slider_module.range, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-range"
+    }));
 }
 function SliderThumb(props) {
     const [local, others] = splitProps(props, [
@@ -122,11 +128,11 @@ function SliderThumb(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "slider-thumb",
         get ["class"] () {
             return clsx(Slider_module.thumb, local.class);
         }
     }, others, {
+        "data-slot": "slider-thumb",
         get children () {
             return local.children;
         }
@@ -154,33 +160,36 @@ function SliderMarkerGroup(props) {
         'class'
     ]);
     return createComponent(Slider.MarkerGroup, mergeProps({
-        "data-slot": "slider-marker-group",
         get ["class"] () {
             return clsx(Slider_module.markerGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-marker-group"
+    }));
 }
 function SliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.Marker, mergeProps({
-        "data-slot": "slider-marker",
         get ["class"] () {
             return clsx(Slider_module.marker, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-marker"
+    }));
 }
 function SliderDraggingIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Slider.DraggingIndicator, mergeProps({
-        "data-slot": "slider-dragging-indicator",
         get ["class"] () {
             return clsx(Slider_module.draggingIndicator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "slider-dragging-indicator"
+    }));
 }
 const Slider_Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,

package/dist/components/slider/Slider.jsx

@@ -11,7 +11,7 @@ function SliderRoot(props) {
         'readOnly',
         'value'
     ]);
-    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} value={local.value} data-slot="slider-root" data-readonly={local.readOnly ? '' : void 0} class={clsx(Slider_module.root, local.class)} readOnly={local.readOnly} {...others}>
+    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} value={local.value} data-readonly={local.readOnly ? '' : void 0} class={clsx(Slider_module.root, local.class)} readOnly={local.readOnly} {...others} data-slot="slider-root">
       {local.children}
     </Slider.Root>;
 }
@@ -21,37 +21,37 @@ function SliderRootProvider(props) {
         'class',
         'value'
     ]);
-    return <Slider.RootProvider asChild={local.asChild} value={local.value} data-slot="slider-root-provider" class={clsx(Slider_module.root, local.class)} {...others}/>;
+    return <Slider.RootProvider asChild={local.asChild} value={local.value} class={clsx(Slider_module.root, local.class)} {...others} data-slot="slider-root-provider"/>;
 }
 function SliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Label data-slot="slider-label" class={clsx(Slider_module.label, local.class)} {...others}/>;
+    return <Slider.Label class={clsx(Slider_module.label, local.class)} {...others} data-slot="slider-label"/>;
 }
 function SliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.ValueText data-slot="slider-value-text" class={clsx(Slider_module.valueText, local.class)} {...others}/>;
+    return <Slider.ValueText class={clsx(Slider_module.valueText, local.class)} {...others} data-slot="slider-value-text"/>;
 }
 function SliderControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Control data-slot="slider-control" class={clsx(Slider_module.control, local.class)} {...others}/>;
+    return <Slider.Control class={clsx(Slider_module.control, local.class)} {...others} data-slot="slider-control"/>;
 }
 function SliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Track data-slot="slider-track" class={clsx(Slider_module.track, local.class)} {...others}/>;
+    return <Slider.Track class={clsx(Slider_module.track, local.class)} {...others} data-slot="slider-track"/>;
 }
 function SliderRange(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Range data-slot="slider-range" class={clsx(Slider_module.range, local.class)} {...others}/>;
+    return <Slider.Range class={clsx(Slider_module.range, local.class)} {...others} data-slot="slider-range"/>;
 }
 function SliderThumb(props) {
     const [local, others] = splitProps(props, [
@@ -59,7 +59,7 @@ function SliderThumb(props) {
         'children',
         'class'
     ]);
-    return <Slider.Thumb asChild={local.asChild} data-slot="slider-thumb" class={clsx(Slider_module.thumb, local.class)} {...others}>
+    return <Slider.Thumb asChild={local.asChild} class={clsx(Slider_module.thumb, local.class)} {...others} data-slot="slider-thumb">
       {local.children}
     </Slider.Thumb>;
 }
@@ -75,19 +75,19 @@ function SliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.MarkerGroup data-slot="slider-marker-group" class={clsx(Slider_module.markerGroup, local.class)} {...others}/>;
+    return <Slider.MarkerGroup class={clsx(Slider_module.markerGroup, local.class)} {...others} data-slot="slider-marker-group"/>;
 }
 function SliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.Marker data-slot="slider-marker" class={clsx(Slider_module.marker, local.class)} {...others}/>;
+    return <Slider.Marker class={clsx(Slider_module.marker, local.class)} {...others} data-slot="slider-marker"/>;
 }
 function SliderDraggingIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Slider.DraggingIndicator data-slot="slider-dragging-indicator" class={clsx(Slider_module.draggingIndicator, local.class)} {...others}/>;
+    return <Slider.DraggingIndicator class={clsx(Slider_module.draggingIndicator, local.class)} {...others} data-slot="slider-dragging-indicator"/>;
 }
 const Slider_Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,

package/dist/components/split-button/SplitButton.d.ts

@@ -1,3 +1,4 @@
+import { Menu as MenuPrimitive } from '@ark-ui/solid/menu';
 import type { ComponentProps, JSX } from 'solid-js';
 import { Button } from '../button/index.js';
 import { Menu } from '../menu/index.js';
@@ -17,14 +18,14 @@ type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChild' | 'children' | 'class'> & {
+type SplitButtonTriggerProps = Omit<ComponentProps<typeof MenuPrimitive.Trigger>, 'asChild' | 'children' | 'class'> & {
     children?: JSX.Element;
     class?: string;
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-type SplitButtonContentProps = ComponentProps<typeof Menu.Content>;
-type SplitButtonPositionerProps = ComponentProps<typeof Menu.Positioner>;
+type SplitButtonContentProps = ComponentProps<typeof MenuPrimitive.Content>;
+type SplitButtonPositionerProps = ComponentProps<typeof MenuPrimitive.Positioner>;
 declare function SplitButtonRoot(props: SplitButtonRootProps): JSX.Element;
 declare function SplitButtonAction(props: SplitButtonActionProps): JSX.Element;
 declare function SplitButtonTrigger(props: SplitButtonTriggerProps): JSX.Element;

package/dist/components/split-button/SplitButton.js

@@ -1,9 +1,13 @@
 import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template, use } from "solid-js/web";
+import { useFocusVisible } from "@ark-ui/solid";
+import { Menu } from "@ark-ui/solid/menu";
 import { clsx } from "clsx";
 import { children, createContext, splitProps, useContext } from "solid-js";
 import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal } from "../../internal/overlayPortal.js";
 import { Button } from "../button/index.js";
-import { Menu } from "../menu/index.js";
+import { Menu as index_js_Menu } from "../menu/index.js";
+import Menu_module from "../menu/Menu.module.js";
 import SplitButton_module from "./SplitButton.module.js";
 var _tmpl$ = /*#__PURE__*/ template("<div role=group data-scope=split-button data-part=root data-slot=split-button-root>");
 const SplitButtonContext = createContext(null);
@@ -30,7 +34,7 @@ function SplitButtonRoot(props) {
             variant: ()=>local.variant ?? 'default'
         },
         get children () {
-            return createComponent(Menu.Root, mergeProps({
+            return createComponent(index_js_Menu.Root, mergeProps({
                 get onSelect () {
                     return local.onSelect;
                 },
@@ -93,6 +97,7 @@ function SplitButtonTrigger(props) {
         'aria-label'
     ]);
     const context = useSplitButtonContext('SplitButton.Trigger');
+    const focusVisible = useFocusVisible();
     const resolvedChildren = children(()=>local.children);
     const isIconOnly = ()=>null == resolvedChildren();
     const ariaLabel = ()=>isIconOnly() ? local['aria-label'] ?? 'More actions' : local['aria-label'];
@@ -121,6 +126,9 @@ function SplitButtonTrigger(props) {
         },
         get ["class"] () {
             return clsx(SplitButton_module.trigger, local.class);
+        },
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
         }
     }));
 }
@@ -128,12 +136,16 @@ function SplitButtonPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return createComponent(Menu.Positioner, mergeProps(others, {
-        "data-slot": "split-button-positioner",
-        get ["class"] () {
-            return local.class;
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Menu.Positioner, mergeProps(others, {
+                "data-slot": "split-button-positioner",
+                get ["class"] () {
+                    return clsx(Menu_module.positioner, local.class);
+                }
+            }));
         }
-    }));
+    });
 }
 function SplitButtonContent(props) {
     const [local, others] = splitProps(props, [
@@ -147,10 +159,10 @@ function SplitButtonContent(props) {
         },
         "data-slot": "split-button-content",
         get ["class"] () {
-            return local.class;
+            return clsx(Menu_module.content, local.class);
         },
         get children () {
-            return memo(()=>!!local.asChild)() ? local.children : createComponent(Menu.Viewport, {
+            return memo(()=>!!local.asChild)() ? local.children : createComponent(index_js_Menu.Viewport, {
                 get children () {
                     return local.children;
                 }

package/dist/components/split-button/SplitButton.jsx

@@ -1,8 +1,12 @@
+import { useFocusVisible } from "@ark-ui/solid";
+import { Menu } from "@ark-ui/solid/menu";
 import { clsx } from "clsx";
 import { children, createContext, splitProps, useContext } from "solid-js";
 import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal } from "../../internal/overlayPortal.jsx";
 import { Button } from "../button/index.jsx";
-import { Menu } from "../menu/index.jsx";
+import { Menu as index_jsx_Menu } from "../menu/index.jsx";
+import Menu_module from "../menu/Menu.module.jsx";
 import SplitButton_module from "./SplitButton.module.jsx";
 const SplitButtonContext = createContext(null);
 function useSplitButtonContext(componentName) {
@@ -26,7 +30,7 @@ function SplitButtonRoot(props) {
         size: ()=>local.size ?? 'md',
         variant: ()=>local.variant ?? 'default'
     }}>
-      <Menu.Root onSelect={local.onSelect} positioning={{
+      <index_jsx_Menu.Root onSelect={local.onSelect} positioning={{
         placement: 'bottom-end',
         gutter: 4,
         ...local.positioning
@@ -34,7 +38,7 @@ function SplitButtonRoot(props) {
         <div role="group" aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-scope="split-button" data-part="root" data-slot="split-button-root" class={clsx(SplitButton_module.root, local.class)} ref={local.ref}>
           {local.children}
         </div>
-      </Menu.Root>
+      </index_jsx_Menu.Root>
     </SplitButtonContext.Provider>;
 }
 function SplitButtonAction(props) {
@@ -55,18 +59,21 @@ function SplitButtonTrigger(props) {
         'aria-label'
     ]);
     const context = useSplitButtonContext('SplitButton.Trigger');
+    const focusVisible = useFocusVisible();
     const resolvedChildren = children(()=>local.children);
     const isIconOnly = ()=>null == resolvedChildren();
     const ariaLabel = ()=>isIconOnly() ? local['aria-label'] ?? 'More actions' : local['aria-label'];
     return <Menu.Trigger {...others} asChild={(triggerProps)=><Button {...triggerProps()} data-slot="split-button-trigger" size={local.size ?? context.size()} variant={local.variant ?? context.variant()} class={clsx(SplitButton_module.trigger, local.class)} aria-label={ariaLabel()}>
           {resolvedChildren() ?? <ChevronDownIcon/>}
-        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={clsx(SplitButton_module.trigger, local.class)}/>;
+        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={clsx(SplitButton_module.trigger, local.class)} data-focus-visible={focusVisible() ? '' : void 0}/>;
 }
 function SplitButtonPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Menu.Positioner {...others} data-slot="split-button-positioner" class={local.class}/>;
+    return <OverlayPortal>
+      <Menu.Positioner {...others} data-slot="split-button-positioner" class={clsx(Menu_module.positioner, local.class)}/>
+    </OverlayPortal>;
 }
 function SplitButtonContent(props) {
     const [local, others] = splitProps(props, [
@@ -74,8 +81,8 @@ function SplitButtonContent(props) {
         'children',
         'class'
     ]);
-    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={local.class}>
-      {local.asChild ? local.children : <Menu.Viewport>{local.children}</Menu.Viewport>}
+    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={clsx(Menu_module.content, local.class)}>
+      {local.asChild ? local.children : <index_jsx_Menu.Viewport>{local.children}</index_jsx_Menu.Viewport>}
     </Menu.Content>;
 }
 const SplitButton = Object.assign(SplitButtonRoot, {

package/dist/components/splitter/Splitter.js

@@ -24,14 +24,15 @@ function SplitterRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-root",
         get ["class"] () {
             return clsx(Splitter_module.root, local.class);
         },
         get style () {
             return getRootStyle(local.style);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-root"
+    }));
 }
 function SplitterRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -43,36 +44,39 @@ function SplitterRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-root-provider",
         get ["class"] () {
             return clsx(Splitter_module.root, local.class);
         },
         get style () {
             return getRootStyle(local.style);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-root-provider"
+    }));
 }
 function SplitterPanel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Splitter.Panel, mergeProps({
-        "data-slot": "splitter-panel",
         get ["class"] () {
             return clsx(Splitter_module.panel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-panel"
+    }));
 }
 function SplitterResizeTriggerIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Splitter.ResizeTriggerIndicator, mergeProps({
-        "data-slot": "splitter-resize-trigger-indicator",
         get ["class"] () {
             return clsx(Splitter_module.resizeTriggerIndicator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "splitter-resize-trigger-indicator"
+    }));
 }
 function SplitterResizeTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -84,11 +88,11 @@ function SplitterResizeTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "splitter-resize-trigger",
         get ["class"] () {
             return clsx(Splitter_module.resizeTrigger, local.class);
         }
     }, others, {
+        "data-slot": "splitter-resize-trigger",
         get children () {
             return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(SplitterResizeTriggerIndicator, {}) : local.children;
         }