@moduix/solid-tailwind 1.1.0 → 2.0.0

package/dist/components/accordion/Accordion.js

@@ -86,12 +86,12 @@ function AccordionItemBody(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "accordion",
-        "data-part": "item-body",
         get ["class"] () {
             return cn('grid min-w-0 gap-3 p-3', local.class);
         }
     }, others, {
+        "data-scope": "accordion",
+        "data-part": "item-body",
         "data-slot": "accordion-item-body"
     }));
 }

package/dist/components/accordion/Accordion.jsx

@@ -47,7 +47,7 @@ function AccordionItemBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="accordion" data-part="item-body" class={cn('grid min-w-0 gap-3 p-3', local.class)} {...others} data-slot="accordion-item-body"/>;
+    return <ark.div class={cn('grid min-w-0 gap-3 p-3', local.class)} {...others} data-scope="accordion" data-part="item-body" data-slot="accordion-item-body"/>;
 }
 const Accordion_Accordion = Object.assign(AccordionRoot, {
     Root: AccordionRoot,

package/dist/components/alert/Alert.js

@@ -26,17 +26,17 @@ function AlertRoot(props) {
         get role () {
             return local.role;
         },
-        "data-scope": "alert",
-        "data-part": "root",
-        get ["data-status"] () {
-            return local.status ?? 'info';
-        },
         get ["class"] () {
             return cn(alertVariants({
                 status: local.status
             }), local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "root",
+        get ["data-status"] () {
+            return local.status ?? 'info';
+        },
         "data-slot": "alert-root"
     }));
 }
@@ -45,13 +45,13 @@ function AlertIndicator(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "alert",
-        "data-part": "indicator",
         "aria-hidden": "true",
         get ["class"] () {
             return cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "indicator",
         "data-slot": "alert-indicator"
     }));
 }
@@ -60,12 +60,12 @@ function AlertContent(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "content",
         get ["class"] () {
             return cn('grid min-w-0 flex-1 gap-1', local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "content",
         "data-slot": "alert-content"
     }));
 }
@@ -74,12 +74,12 @@ function AlertTitle(props) {
         'class'
     ]);
     return createComponent(ark.p, mergeProps({
-        "data-scope": "alert",
-        "data-part": "title",
         get ["class"] () {
             return cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "title",
         "data-slot": "alert-title"
     }));
 }
@@ -88,12 +88,12 @@ function AlertDescription(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "description",
         get ["class"] () {
             return cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "description",
         "data-slot": "alert-description"
     }));
 }
@@ -102,12 +102,12 @@ function AlertActions(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "actions",
         get ["class"] () {
             return cn('mt-2 flex flex-wrap gap-2', local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "actions",
         "data-slot": "alert-actions"
     }));
 }

package/dist/components/alert/Alert.jsx

@@ -21,39 +21,39 @@ function AlertRoot(props) {
         'role',
         'status'
     ]);
-    return <ark.div role={local.role} data-scope="alert" data-part="root" data-status={local.status ?? 'info'} class={cn(alertVariants({
+    return <ark.div role={local.role} class={cn(alertVariants({
         status: local.status
-    }), local.class)} {...others} data-slot="alert-root"/>;
+    }), local.class)} {...others} data-scope="alert" data-part="root" data-status={local.status ?? 'info'} data-slot="alert-root"/>;
 }
 function AlertIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="alert" data-part="indicator" aria-hidden="true" class={cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="alert-indicator"/>;
+    return <ark.span aria-hidden="true" class={cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-scope="alert" data-part="indicator" data-slot="alert-indicator"/>;
 }
 function AlertContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="content" class={cn('grid min-w-0 flex-1 gap-1', local.class)} {...others} data-slot="alert-content"/>;
+    return <ark.div class={cn('grid min-w-0 flex-1 gap-1', local.class)} {...others} data-scope="alert" data-part="content" data-slot="alert-content"/>;
 }
 function AlertTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.p data-scope="alert" data-part="title" class={cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class)} {...others} data-slot="alert-title"/>;
+    return <ark.p class={cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class)} {...others} data-scope="alert" data-part="title" data-slot="alert-title"/>;
 }
 function AlertDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="description" class={cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class)} {...others} data-slot="alert-description"/>;
+    return <ark.div class={cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class)} {...others} data-scope="alert" data-part="description" data-slot="alert-description"/>;
 }
 function AlertActions(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="actions" class={cn('mt-2 flex flex-wrap gap-2', local.class)} {...others} data-slot="alert-actions"/>;
+    return <ark.div class={cn('mt-2 flex flex-wrap gap-2', local.class)} {...others} data-scope="alert" data-part="actions" data-slot="alert-actions"/>;
 }
 const Alert = Object.assign(AlertRoot, {
     Root: AlertRoot,

package/dist/components/angle-slider/AngleSlider.js

@@ -65,13 +65,19 @@ function AngleSliderControl(props) {
     ]);
     return createComponent(AngleSlider.Control, mergeProps({
         get ["class"] () {
-            return cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class);
-        },
-        onPointerDown: (event)=>{
-            local.onPointerDown?.(event);
-            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
+            return cn("relative box-border aspect-square w-32 min-w-0 cursor-pointer rounded-full outline-0 select-none [--angle-slider-fill:var(--color-primary)] before:absolute before:inset-0 before:rounded-full before:bg-[conic-gradient(from_0deg,var(--angle-slider-fill)_var(--angle,0deg),var(--color-muted)_var(--angle,0deg))] before:[mask-image:radial-gradient(closest-side,transparent_calc(100%-0.5rem-1px),#000_calc(100%-0.5rem))] before:content-[''] after:absolute after:top-1 after:left-1/2 after:z-1 after:size-2 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-[var(--angle-slider-fill)] after:content-[''] data-disabled:cursor-default data-invalid:[--angle-slider-fill:var(--color-destructive)] data-readonly:cursor-default", local.class);
         }
     }, others, {
+        onPointerDown: (event)=>{
+            local.onPointerDown?.(event);
+            if (event.defaultPrevented || 0 !== event.button) return;
+            if (event.currentTarget.matches('[data-disabled], [data-readonly]')) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.focus({
+                preventScroll: true,
+                focusVisible: false
+            });
+        },
         "data-slot": "angle-slider-control"
     }));
 }
@@ -81,7 +87,7 @@ function AngleSliderThumb(props) {
     ]);
     return createComponent(AngleSlider.Thumb, mergeProps({
         get ["class"] () {
-            return cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class);
+            return cn("absolute inset-y-0 left-1/2 z-2 w-0 outline-0 before:absolute before:top-1 before:left-0 before:box-border before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-border before:bg-background before:shadow-sm before:transition-[border-color,background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive motion-reduce:before:transition-none [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:border-ring [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:shadow-md [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-1 [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-ring", local.class);
         }
     }, others, {
         "data-slot": "angle-slider-thumb"
@@ -105,7 +111,7 @@ function AngleSliderMarker(props) {
     ]);
     return createComponent(AngleSlider.Marker, mergeProps({
         get ["class"] () {
-            return cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class);
+            return cn("absolute inset-0 before:absolute before:top-1 before:left-1/2 before:h-2 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class);
         }
     }, others, {
         "data-slot": "angle-slider-marker"
@@ -136,6 +142,7 @@ function AngleSliderDial(props) {
         get children () {
             return [
                 memo(()=>local.children),
+                createComponent(AngleSliderValueText, {}),
                 createComponent(AngleSliderThumb, {})
             ];
         }
@@ -147,7 +154,7 @@ function AngleSliderValueText(props) {
     ]);
     return createComponent(AngleSlider.ValueText, mergeProps({
         get ["class"] () {
-            return cn('text-center text-sm font-medium text-foreground', local.class);
+            return cn('absolute inset-0 z-1 grid place-items-center text-center text-lg font-medium text-foreground tabular-nums', local.class);
         }
     }, others, {
         "data-slot": "angle-slider-value-text"

package/dist/components/angle-slider/AngleSlider.jsx

@@ -33,16 +33,22 @@ function AngleSliderControl(props) {
         'class',
         'onPointerDown'
     ]);
-    return <AngleSlider.Control class={cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class)} onPointerDown={(event)=>{
+    return <AngleSlider.Control class={cn("relative box-border aspect-square w-32 min-w-0 cursor-pointer rounded-full outline-0 select-none [--angle-slider-fill:var(--color-primary)] before:absolute before:inset-0 before:rounded-full before:bg-[conic-gradient(from_0deg,var(--angle-slider-fill)_var(--angle,0deg),var(--color-muted)_var(--angle,0deg))] before:[mask-image:radial-gradient(closest-side,transparent_calc(100%-0.5rem-1px),#000_calc(100%-0.5rem))] before:content-[''] after:absolute after:top-1 after:left-1/2 after:z-1 after:size-2 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-[var(--angle-slider-fill)] after:content-[''] data-disabled:cursor-default data-invalid:[--angle-slider-fill:var(--color-destructive)] data-readonly:cursor-default", local.class)} {...others} onPointerDown={(event)=>{
         local.onPointerDown?.(event);
-        event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
-    }} {...others} data-slot="angle-slider-control"/>;
+        if (event.defaultPrevented || 0 !== event.button) return;
+        if (event.currentTarget.matches('[data-disabled], [data-readonly]')) return;
+        event.preventDefault();
+        event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.focus({
+            preventScroll: true,
+            focusVisible: false
+        });
+    }} data-slot="angle-slider-control"/>;
 }
 function AngleSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.Thumb class={cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class)} {...others} data-slot="angle-slider-thumb"/>;
+    return <AngleSlider.Thumb class={cn("absolute inset-y-0 left-1/2 z-2 w-0 outline-0 before:absolute before:top-1 before:left-0 before:box-border before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-border before:bg-background before:shadow-sm before:transition-[border-color,background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive motion-reduce:before:transition-none [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:border-ring [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:shadow-md [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-1 [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-ring", local.class)} {...others} data-slot="angle-slider-thumb"/>;
 }
 function AngleSliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
@@ -54,7 +60,7 @@ function AngleSliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.Marker class={cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class)} {...others} data-slot="angle-slider-marker"/>;
+    return <AngleSlider.Marker class={cn("absolute inset-0 before:absolute before:top-1 before:left-1/2 before:h-2 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class)} {...others} data-slot="angle-slider-marker"/>;
 }
 function AngleSliderMarks(props) {
     const [local, others] = splitProps(props, [
@@ -70,6 +76,7 @@ function AngleSliderDial(props) {
     ]);
     return <AngleSliderControl {...others}>
       {local.children}
+      <AngleSliderValueText/>
       <AngleSliderThumb/>
     </AngleSliderControl>;
 }
@@ -77,7 +84,7 @@ function AngleSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.ValueText class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others} data-slot="angle-slider-value-text"/>;
+    return <AngleSlider.ValueText class={cn('absolute inset-0 z-1 grid place-items-center text-center text-lg font-medium text-foreground tabular-nums', local.class)} {...others} data-slot="angle-slider-value-text"/>;
 }
 const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
     Root: AngleSliderRoot,

package/dist/components/avatar/Avatar.js

@@ -41,15 +41,15 @@ function AvatarRootProvider(props) {
         'size'
     ]);
     return createComponent(Avatar.RootProvider, mergeProps({
-        get ["data-size"] () {
-            return local.size;
-        },
         get ["class"] () {
             return cn(avatarVariants({
                 size: local.size
             }), local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size;
+        },
         "data-slot": "avatar-root-provider"
     }));
 }

package/dist/components/avatar/Avatar.jsx

@@ -30,9 +30,9 @@ function AvatarRootProvider(props) {
         'class',
         'size'
     ]);
-    return <Avatar.RootProvider data-size={local.size} class={cn(avatarVariants({
+    return <Avatar.RootProvider class={cn(avatarVariants({
         size: local.size
-    }), local.class)} {...others} data-slot="avatar-root-provider"/>;
+    }), local.class)} {...others} data-size={local.size} data-slot="avatar-root-provider"/>;
 }
 function AvatarImage(props) {
     const [local, others] = splitProps(props, [

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,12 +1,12 @@
 import type { HTMLArkProps } from '@ark-ui/solid/factory';
 import type { JSX } from 'solid-js';
-type BreadcrumbsPathItem = {
-    href?: string;
-    key?: string | number;
+type BreadcrumbsPathLink = {
+    href: string;
     label: JSX.Element;
 };
 type BreadcrumbsPathProps = Omit<HTMLArkProps<'ol'>, 'asChild' | 'children'> & {
-    items: readonly BreadcrumbsPathItem[];
+    links: readonly BreadcrumbsPathLink[];
+    page: JSX.Element;
     separator?: JSX.Element;
 };
 declare function BreadcrumbsRoot(props: HTMLArkProps<'nav'>): JSX.Element;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -70,42 +70,47 @@ function BreadcrumbsPage(props) {
 }
 function BreadcrumbsPath(props) {
     const [local, others] = splitProps(props, [
-        'items',
+        'links',
+        'page',
         'separator'
     ]);
     return createComponent(BreadcrumbsList, mergeProps(others, {
         get children () {
-            return createComponent(For, {
-                get each () {
-                    return local.items;
-                },
-                children: (item, index)=>{
-                    const isLastItem = ()=>index() === local.items.length - 1;
-                    return [
-                        createComponent(BreadcrumbsItem, {
-                            get children () {
-                                return memo(()=>!!isLastItem())() ? createComponent(BreadcrumbsPage, {
-                                    get children () {
-                                        return item.label;
-                                    }
-                                }) : createComponent(BreadcrumbsLink, {
-                                    get href () {
-                                        return item.href;
-                                    },
-                                    get children () {
-                                        return item.label;
-                                    }
-                                });
-                            }
-                        }),
-                        memo(()=>memo(()=>!isLastItem())() ? createComponent(BreadcrumbsSeparator, {
+            return [
+                createComponent(For, {
+                    get each () {
+                        return local.links;
+                    },
+                    children: (link)=>[
+                            createComponent(BreadcrumbsItem, {
+                                get children () {
+                                    return createComponent(BreadcrumbsLink, {
+                                        get href () {
+                                            return link.href;
+                                        },
+                                        get children () {
+                                            return link.label;
+                                        }
+                                    });
+                                }
+                            }),
+                            createComponent(BreadcrumbsSeparator, {
                                 get children () {
                                     return local.separator;
                                 }
-                            }) : null)
-                    ];
-                }
-            });
+                            })
+                        ]
+                }),
+                createComponent(BreadcrumbsItem, {
+                    get children () {
+                        return createComponent(BreadcrumbsPage, {
+                            get children () {
+                                return local.page;
+                            }
+                        });
+                    }
+                })
+            ];
         }
     }));
 }

package/dist/components/breadcrumbs/Breadcrumbs.jsx

@@ -38,21 +38,22 @@ function BreadcrumbsPage(props) {
 }
 function BreadcrumbsPath(props) {
     const [local, others] = splitProps(props, [
-        'items',
+        'links',
+        'page',
         'separator'
     ]);
     return <BreadcrumbsList {...others}>
-      <For each={local.items}>
-        {(item, index)=>{
-        const isLastItem = ()=>index() === local.items.length - 1;
-        return <>
-              <BreadcrumbsItem>
-                {isLastItem() ? <BreadcrumbsPage>{item.label}</BreadcrumbsPage> : <BreadcrumbsLink href={item.href}>{item.label}</BreadcrumbsLink>}
-              </BreadcrumbsItem>
-              {!isLastItem() ? <BreadcrumbsSeparator>{local.separator}</BreadcrumbsSeparator> : null}
-            </>;
-    }}
+      <For each={local.links}>
+        {(link)=><>
+            <BreadcrumbsItem>
+              <BreadcrumbsLink href={link.href}>{link.label}</BreadcrumbsLink>
+            </BreadcrumbsItem>
+            <BreadcrumbsSeparator>{local.separator}</BreadcrumbsSeparator>
+          </>}
       </For>
+      <BreadcrumbsItem>
+        <BreadcrumbsPage>{local.page}</BreadcrumbsPage>
+      </BreadcrumbsItem>
     </BreadcrumbsList>;
 }
 function BreadcrumbsSeparator(props) {

package/dist/components/carousel/Carousel.js

@@ -76,7 +76,7 @@ function CarouselPrevTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
     }, others, {
         "data-slot": "carousel-prev-trigger",
@@ -103,7 +103,7 @@ function CarouselNextTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
     }, others, {
         "data-slot": "carousel-next-trigger",
@@ -177,7 +177,7 @@ function CarouselAutoplayTrigger(props) {
     ]);
     return createComponent(Carousel.AutoplayTrigger, mergeProps({
         get ["class"] () {
-            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
     }, others, {
         "data-slot": "carousel-autoplay-trigger"

package/dist/components/carousel/Carousel.jsx

@@ -39,7 +39,7 @@ function CarouselPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.PrevTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-prev-trigger">
+    return <Carousel.PrevTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-prev-trigger">
       {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
           <ChevronLeftIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
         </span>}
@@ -52,7 +52,7 @@ function CarouselNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Carousel.NextTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-next-trigger">
+    return <Carousel.NextTrigger asChild={local.asChild} class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-next-trigger">
       {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
           <ChevronRightIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
         </span>}
@@ -87,7 +87,7 @@ function CarouselAutoplayTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Carousel.AutoplayTrigger class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-autoplay-trigger"/>;
+    return <Carousel.AutoplayTrigger class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others} data-slot="carousel-autoplay-trigger"/>;
 }
 function CarouselAutoplayIndicator(props) {
     const [local, others] = splitProps(props, [

package/dist/components/command-palette/CommandPalette.js

@@ -2,7 +2,7 @@ import { createComponent, mergeProps } from "solid-js/web";
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.js";

package/dist/components/command-palette/CommandPalette.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.jsx";

package/dist/components/drawer/Drawer.js

@@ -148,9 +148,6 @@ function DrawerContent(props) {
     ]);
     const rootVariant = useContext(DrawerVariantContext);
     return createComponent(Drawer.Content, mergeProps({
-        get ["data-variant"] () {
-            return local.variant ?? rootVariant;
-        },
         get ["class"] () {
             return cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class);
         },
@@ -158,6 +155,9 @@ function DrawerContent(props) {
             return local.draggable ?? true;
         }
     }, others, {
+        get ["data-variant"] () {
+            return local.variant ?? rootVariant;
+        },
         "data-slot": "drawer-content"
     }));
 }

package/dist/components/drawer/Drawer.jsx

@@ -73,7 +73,7 @@ function DrawerContent(props) {
         'variant'
     ]);
     const rootVariant = useContext(DrawerVariantContext);
-    return <Drawer.Content data-variant={local.variant ?? rootVariant} class={cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class)} draggable={local.draggable ?? true} {...others} data-slot="drawer-content"/>;
+    return <Drawer.Content class={cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class)} draggable={local.draggable ?? true} {...others} data-variant={local.variant ?? rootVariant} data-slot="drawer-content"/>;
 }
 function DrawerGrabber(props) {
     const [local, others] = splitProps(props, [

package/dist/components/highlight/Highlight.js

@@ -14,7 +14,7 @@ function HighlightRoot(props) {
         "data-part": "root",
         "data-slot": "highlight-root",
         get ["class"] () {
-            return cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] [box-decoration-break:clone] px-1 py-px font-medium text-foreground no-underline shadow-none [-webkit-box-decoration-break:clone]', local.class);
+            return cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] box-decoration-clone px-1 py-px font-medium text-foreground no-underline shadow-none', local.class);
         }
     }));
 }