@moduix/solid 1.1.1 → 2.0.0

package/dist/components/accordion/Accordion.js

@@ -87,12 +87,12 @@ function AccordionItemBody(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "accordion",
-        "data-part": "item-body",
         get ["class"] () {
             return clsx(Accordion_module.itemBody, local.class);
         }
     }, others, {
+        "data-scope": "accordion",
+        "data-part": "item-body",
         "data-slot": "accordion-item-body"
     }));
 }

package/dist/components/accordion/Accordion.jsx

@@ -48,7 +48,7 @@ function AccordionItemBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="accordion" data-part="item-body" class={clsx(Accordion_module.itemBody, local.class)} {...others} data-slot="accordion-item-body"/>;
+    return <ark.div class={clsx(Accordion_module.itemBody, 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

@@ -13,15 +13,15 @@ function AlertRoot(props) {
         get role () {
             return local.role;
         },
+        get ["class"] () {
+            return clsx(Alert_module.root, local.class);
+        }
+    }, others, {
         "data-scope": "alert",
         "data-part": "root",
         get ["data-status"] () {
             return local.status ?? 'info';
         },
-        get ["class"] () {
-            return clsx(Alert_module.root, local.class);
-        }
-    }, others, {
         "data-slot": "alert-root"
     }));
 }
@@ -30,13 +30,13 @@ function AlertIndicator(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-scope": "alert",
-        "data-part": "indicator",
         "aria-hidden": "true",
         get ["class"] () {
             return clsx(Alert_module.indicator, local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "indicator",
         "data-slot": "alert-indicator"
     }));
 }
@@ -45,12 +45,12 @@ function AlertContent(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "content",
         get ["class"] () {
             return clsx(Alert_module.content, local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "content",
         "data-slot": "alert-content"
     }));
 }
@@ -59,12 +59,12 @@ function AlertTitle(props) {
         'class'
     ]);
     return createComponent(ark.p, mergeProps({
-        "data-scope": "alert",
-        "data-part": "title",
         get ["class"] () {
             return clsx(Alert_module.title, local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "title",
         "data-slot": "alert-title"
     }));
 }
@@ -73,12 +73,12 @@ function AlertDescription(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "description",
         get ["class"] () {
             return clsx(Alert_module.description, local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "description",
         "data-slot": "alert-description"
     }));
 }
@@ -87,12 +87,12 @@ function AlertActions(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-scope": "alert",
-        "data-part": "actions",
         get ["class"] () {
             return clsx(Alert_module.actions, local.class);
         }
     }, others, {
+        "data-scope": "alert",
+        "data-part": "actions",
         "data-slot": "alert-actions"
     }));
 }

package/dist/components/alert/Alert.jsx

@@ -8,37 +8,37 @@ function AlertRoot(props) {
         'role',
         'status'
     ]);
-    return <ark.div role={local.role} data-scope="alert" data-part="root" data-status={local.status ?? 'info'} class={clsx(Alert_module.root, local.class)} {...others} data-slot="alert-root"/>;
+    return <ark.div role={local.role} class={clsx(Alert_module.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={clsx(Alert_module.indicator, local.class)} {...others} data-slot="alert-indicator"/>;
+    return <ark.span aria-hidden="true" class={clsx(Alert_module.indicator, 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={clsx(Alert_module.content, local.class)} {...others} data-slot="alert-content"/>;
+    return <ark.div class={clsx(Alert_module.content, 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={clsx(Alert_module.title, local.class)} {...others} data-slot="alert-title"/>;
+    return <ark.p class={clsx(Alert_module.title, 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={clsx(Alert_module.description, local.class)} {...others} data-slot="alert-description"/>;
+    return <ark.div class={clsx(Alert_module.description, 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={clsx(Alert_module.actions, local.class)} {...others} data-slot="alert-actions"/>;
+    return <ark.div class={clsx(Alert_module.actions, 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

@@ -61,13 +61,24 @@ function AngleSliderRootProvider(props) {
 }
 function AngleSliderControl(props) {
     const [local, others] = splitProps(props, [
-        'class'
+        'class',
+        'onPointerDown'
     ]);
     return createComponent(AngleSlider.Control, mergeProps({
         get ["class"] () {
             return clsx(AngleSlider_module.control, 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"
     }));
 }
@@ -132,6 +143,7 @@ function AngleSliderDial(props) {
         get children () {
             return [
                 memo(()=>local.children),
+                createComponent(AngleSliderValueText, {}),
                 createComponent(AngleSliderThumb, {})
             ];
         }

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

@@ -31,9 +31,19 @@ function AngleSliderRootProvider(props) {
 }
 function AngleSliderControl(props) {
     const [local, others] = splitProps(props, [
-        'class'
+        'class',
+        'onPointerDown'
     ]);
-    return <AngleSlider.Control class={clsx(AngleSlider_module.control, local.class)} {...others} data-slot="angle-slider-control"/>;
+    return <AngleSlider.Control class={clsx(AngleSlider_module.control, 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"/>;
 }
 function AngleSliderThumb(props) {
     const [local, others] = splitProps(props, [
@@ -67,6 +77,7 @@ function AngleSliderDial(props) {
     ]);
     return <AngleSliderControl {...others}>
       {local.children}
+      <AngleSliderValueText/>
       <AngleSliderThumb/>
     </AngleSliderControl>;
 }

package/dist/components/angle-slider/AngleSlider_module.css

@@ -22,72 +22,70 @@
   }
 
   .control-TKuxcQ {
-    --_angle-slider-control-border-color: var(--moduix-angle-slider-control-border-color, var(--moduix-color-border));
-    --_angle-slider-track-border-color: var(--moduix-angle-slider-track-border-color, var(--moduix-color-border));
+    --_angle-slider-fill-color: var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary));
+    --_angle-slider-track-color: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
+    --_angle-slider-thumb-border-color: var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
     box-sizing: border-box;
     width: var(--moduix-angle-slider-size, 8rem);
     aspect-ratio: 1;
-    border-radius: var(--moduix-angle-slider-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
-    min-width: 0;
-    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
-        var(--_angle-slider-track-border-color),
-      var(--moduix-angle-slider-shadow, none);
+    border-radius: var(--moduix-radius-full);
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    transition: background-color
-      var(--moduix-angle-slider-transition, var(--moduix-transition-default));
     outline: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+    min-width: 0;
     position: relative;
   }
 
-  @media (hover: hover) {
-    .control-TKuxcQ:not([data-disabled], [data-readonly]):hover {
-      background-color: var(--moduix-angle-slider-track-bg-hover, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
-    }
-  }
-
-  .control-TKuxcQ:not([data-disabled], [data-readonly]):active {
-    background-color: var(--moduix-angle-slider-track-bg-active, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
-  }
-
-  .control-TKuxcQ:after {
-    z-index: 1;
-    inset: var(--moduix-angle-slider-ring-thickness, .875rem);
+  .control-TKuxcQ:before {
     border-radius: inherit;
-    background: var(--moduix-angle-slider-control-bg, var(--moduix-color-background));
-    box-shadow: inset 0 0 0
-        var(--moduix-angle-slider-control-border-width, var(--moduix-border-width-sm))
-        var(--_angle-slider-control-border-color);
+    background: conic-gradient(from 0deg,
+        var(--_angle-slider-fill-color) var(--angle, 0deg),
+        var(--_angle-slider-track-color) var(--angle, 0deg));
+    -webkit-mask: radial-gradient(closest-side,
+        transparent calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem) - 1px),
+        #000 calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem)));
+    mask: radial-gradient(closest-side,
+        transparent calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem) - 1px),
+        #000 calc(100% - var(--moduix-angle-slider-ring-thickness, .5rem)));
     content: "";
     position: absolute;
+    inset: 0;
   }
 
-  .control-TKuxcQ:before {
+  .control-TKuxcQ:after {
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     z-index: 1;
-    width: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
-    height: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
-    border-radius: inherit;
-    background: var(--moduix-angle-slider-center-dot-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    width: var(--moduix-angle-slider-ring-thickness, .5rem);
+    height: var(--moduix-angle-slider-ring-thickness, .5rem);
+    border-radius: var(--moduix-radius-full);
+    background: var(--_angle-slider-fill-color);
     content: "";
     position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @media (hover: hover) {
+    .control-TKuxcQ:not([data-disabled], [data-readonly]):hover:before {
+      --_angle-slider-track-color: var(--moduix-angle-slider-track-bg-hover, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
+    }
+  }
+
+  .control-TKuxcQ:not([data-disabled], [data-readonly]):active:before {
+    --_angle-slider-track-color: var(--moduix-angle-slider-track-bg-active, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
   }
 
-  .control-TKuxcQ:has(.thumb-BSrcel:focus-visible) {
-    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
-          var(--_angle-slider-track-border-color),
-        0 0 0 var(--moduix-angle-slider-focus-ring-width, .1875rem)
+  .control-TKuxcQ:active:not([data-disabled], [data-readonly]) .thumb-BSrcel:before {
+    border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
           var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring)),
-        var(--moduix-angle-slider-shadow, none);
+        var(--moduix-angle-slider-thumb-shadow-dragging, var(--moduix-shadow-md));
   }
 
   .control-TKuxcQ[data-invalid] {
-    --_angle-slider-control-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-    --_angle-slider-track-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    --_angle-slider-fill-color: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    --_angle-slider-thumb-border-color: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
   }
 
   .control-TKuxcQ:is([data-disabled], [data-readonly]) {
@@ -95,72 +93,40 @@
   }
 
   .thumb-BSrcel {
-    top: 0;
-    bottom: 0;
-    left: calc(50% - var(--moduix-angle-slider-thumb-line-width, .1875rem) / 2);
     z-index: 2;
-    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
     outline: 0;
+    width: 0;
     position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
   }
 
   .thumb-BSrcel:before {
-    top: var(--moduix-angle-slider-ring-thickness, .875rem);
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     box-sizing: border-box;
     width: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
     height: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
     border: var(--moduix-angle-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
-        var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
+        var(--_angle-slider-thumb-border-color);
     border-radius: var(--moduix-angle-slider-thumb-radius, var(--moduix-radius-full));
-    background: var(--moduix-angle-slider-thumb-bg, var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)));
+    background: var(--moduix-angle-slider-thumb-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-angle-slider-thumb-shadow, var(--moduix-shadow-sm));
     transition: border-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
-        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
         background-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
-        transform var(--moduix-angle-slider-transition, var(--moduix-transition-default));
+        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default));
     content: "";
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .thumb-BSrcel:after {
-    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) +
-          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
-    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
-    height: calc(50% - var(--moduix-angle-slider-ring-thickness, .875rem) -
-          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) - var(--moduix-spacing-1-5));
-    border-radius: var(--moduix-radius-full);
-    background: linear-gradient(to bottom,
-        var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)),
-        transparent);
-    content: "";
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   .thumb-BSrcel:focus-visible:before {
     border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
-    box-shadow: 0 0 0 var(--moduix-border-width-sm)
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
         var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
   }
 
-  .thumb-BSrcel:active:not([data-disabled], [data-readonly]):before {
-    transform: translateX(-50%) scale(1.08);
-  }
-
-  .thumb-BSrcel[data-invalid]:before {
-    border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-    background: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
-  }
-
-  .thumb-BSrcel[data-invalid]:after {
-    background: linear-gradient(to bottom,
-        var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive))),
-        transparent);
-  }
-
   .thumb-BSrcel[data-disabled] {
     pointer-events: none;
   }
@@ -178,9 +144,9 @@
   }
 
   .marker-kWcrOw:before {
-    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) + .125rem);
+    top: calc(var(--moduix-angle-slider-ring-thickness, .5rem) / 2);
     width: var(--moduix-angle-slider-marker-width, .125rem);
-    height: var(--moduix-angle-slider-marker-height, .625rem);
+    height: var(--moduix-angle-slider-marker-height, .5rem);
     border-radius: var(--moduix-radius-full);
     background: var(--moduix-angle-slider-marker-color, var(--moduix-color-muted-foreground));
     content: "";
@@ -199,14 +165,23 @@
 
   .valueText-QUG00u {
     color: var(--moduix-angle-slider-value-text-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
-    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-sm));
+    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-lg));
     font-weight: var(--moduix-angle-slider-value-text-font-weight, var(--moduix-weight-medium));
-    line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-lg));
     text-align: center;
   }
 
+  .control-TKuxcQ .valueText-QUG00u {
+    z-index: 1;
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset: 0;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .control-TKuxcQ, .thumb-BSrcel:before {
+    .thumb-BSrcel:before {
       transition: none;
     }
   }

package/dist/components/avatar/Avatar.js

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

package/dist/components/avatar/Avatar.jsx

@@ -14,7 +14,7 @@ function AvatarRootProvider(props) {
         'class',
         'size'
     ]);
-    return <Avatar.RootProvider data-size={local.size} class={clsx(Avatar_module.root, local.class)} {...others} data-slot="avatar-root-provider"/>;
+    return <Avatar.RootProvider class={clsx(Avatar_module.root, 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

@@ -71,42 +71,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

@@ -39,21 +39,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_module.css

@@ -93,7 +93,7 @@
   }
 
   :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy):not(:disabled, [data-disabled]):hover {
-    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    border-color: var(--moduix-carousel-control-border-color-hover, var(--moduix-color-ring));
     background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
     box-shadow: var(--moduix-carousel-control-shadow-hover, var(--moduix-shadow-md));
     color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
@@ -111,7 +111,7 @@
   }
 
   :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy)[data-pressed] {
-    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    border-color: var(--moduix-carousel-control-border-color-hover, var(--moduix-color-ring));
     background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
     color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
   }