@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/auth-submit-button/AuthSubmitButton.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./AuthSubmitButton.css";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Flavor, Size, State, Variant, Width, UIBaseProps } from "../vocabulary";
 export type AuthSubmitButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "type"> & UIBaseProps & {
     children: JSX.Element;

package/dist/components/auth-submit-button/AuthSubmitButton.generated.js

@@ -1,5 +1,5 @@
-import { createComponent, mergeProps } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./AuthSubmitButton.css";
 import button_0 from "../button/index.js";
 import { authSubmitButton } from "./AuthSubmitButton.recipe.js";

package/dist/components/auth-submit-button/AuthSubmitButton.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const authSubmitButton: import("solid-layouts").Recipe<{
+export declare const authSubmitButton: import("solid-layouts/solid-2").Recipe<{
     readonly component: "auth-submit-button";
     readonly element: "button";
     readonly slots: {

package/dist/components/avatar/Avatar.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Avatar.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, Flavor } from "../vocabulary";
 export type AvatarSize = "sm" | "md" | "lg";
 export type AvatarVariant = "default" | "soft";

package/dist/components/avatar/Avatar.generated.js

@@ -1,8 +1,8 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Avatar.css";
-import { Show, createContext, createSignal, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createSignal, omit, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Avatar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<img>");
 const AvatarContext = createContext();
@@ -12,19 +12,11 @@ const useAvatarContext = ()=>{
     return ctx;
 };
 const __solidLayoutAvatarRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "size",
-        "flavor",
-        "variant",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "size", "flavor", "variant", "dataTheme", "style");
     const [imageLoaded, setImageLoaded] = createSignal(false);
-    const size = ()=>local.size ?? "md";
-    const flavor = ()=>local.flavor ?? "neutral";
-    const variant = ()=>local.variant ?? "default";
+    const size = ()=>p.size ?? "md";
+    const flavor = ()=>p.flavor ?? "neutral";
+    const variant = ()=>p.variant ?? "default";
     const ctx = {
         size,
         flavor,
@@ -32,22 +24,22 @@ const __solidLayoutAvatarRoot = (_stable, p)=>{
         imageLoaded,
         setImageLoaded
     };
-    return createComponent(AvatarContext.Provider, {
+    return createComponent(AvatarContext, {
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.variant[variant()], local.class)
+                    class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.variant[variant()], p.class)
                 }), {
                 "data-slot": "avatar-root",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -58,45 +50,35 @@ const AvatarRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutAvatarImage = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "src",
-        "alt",
-        "onLoad",
-        "onError"
-    ]);
+    const others = omit(p, "class", "dataTheme", "style", "src", "alt", "onLoad", "onError");
     const ctx = useAvatarContext();
     const handleLoad = (e)=>{
         ctx.setImageLoaded(true);
-        if ("function" == typeof local.onLoad) local.onLoad(e);
+        if ("function" == typeof p.onLoad) p.onLoad(e);
     };
     const handleError = (e)=>{
         ctx.setImageLoaded(false);
-        if ("function" == typeof local.onError) local.onError(e);
+        if ("function" == typeof p.onError) p.onError(e);
     };
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, {
-            get src () {
-                return local.src;
-            },
-            get alt () {
-                return local.alt;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.image, local.class)
-            }), {
-            "data-slot": "avatar-image",
-            get style () {
-                return local.style;
-            },
-            onLoad: handleLoad,
-            onError: handleError
-        }), false, false);
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$2();
+    spread(_el$2, mergeProps(others, {
+        get src () {
+            return p.src;
+        },
+        get alt () {
+            return p.alt;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.image, p.class)
+        }), {
+        "data-slot": "avatar-image",
+        get style () {
+            return p.style;
+        },
+        onLoad: handleLoad,
+        onError: handleError
+    }), false);
+    return _el$2;
 };
 const AvatarImage = defineComponent({
     recipe: componentRecipe,
@@ -104,39 +86,33 @@ const AvatarImage = defineComponent({
     embedded: true
 });
 const __solidLayoutAvatarFallback = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "delayMs"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "delayMs");
     const ctx = useAvatarContext();
-    const [showFallback, setShowFallback] = createSignal(!local.delayMs);
-    onMount(()=>{
-        if (local.delayMs) {
-            const timer = setTimeout(()=>setShowFallback(true), local.delayMs);
+    const [showFallback, setShowFallback] = createSignal(!p.delayMs);
+    onSettled(()=>{
+        if (p.delayMs) {
+            const timer = setTimeout(()=>setShowFallback(true), p.delayMs);
             return ()=>clearTimeout(timer);
         }
     });
     return createComponent(Show, {
         get when () {
-            return memo(()=>!!showFallback())() && !ctx.imageLoaded();
+            return memo(()=>!!showFallback())() ? !ctx.imageLoaded() : showFallback();
         },
         get children () {
             var _el$3 = _tmpl$();
             spread(_el$3, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.fallback, CLASSES.flavor[ctx.flavor()] ?? `avatar__fallback--flavor-${ctx.flavor()}`, local.class)
+                    class: twMerge(CLASSES.slot.fallback, CLASSES.flavor[ctx.flavor()] ?? `avatar__fallback--flavor-${ctx.flavor()}`, p.class)
                 }), {
                 "data-slot": "avatar-fallback",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$3, ()=>local.children);
+            }), true);
+            insert(_el$3, ()=>p.children);
             return _el$3;
         }
     });

package/dist/components/avatar/Avatar.recipe.d.ts

@@ -28,7 +28,7 @@ export declare const CLASSES: {
         readonly overlap: "-space-x-6";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "avatar";
     readonly slots: {
         readonly "avatar-fallback": {};

package/dist/components/avatar/AvatarGroup.generated.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 type ElementType = keyof JSX.IntrinsicElements;
 type AvatarGroupBaseProps = {

package/dist/components/avatar/AvatarGroup.generated.js

@@ -1,7 +1,7 @@
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Avatar.recipe.js";
 const VoidElementList = [
     "area",
@@ -21,14 +21,10 @@ const VoidElementList = [
     "wbr"
 ];
 const __solidLayoutAvatarGroup = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "as",
-        "class",
-        "children"
-    ]);
-    const Tag = local.as || "div";
-    const classes = ()=>twMerge(CLASSES.group.base, CLASSES.group.overlap, local.class);
-    const ariaLabel = `Group of ${local.children.length} avatar photos`;
+    const others = omit(p, "as", "class", "children");
+    const Tag = p.as || "div";
+    const classes = ()=>twMerge(CLASSES.group.base, CLASSES.group.overlap, p.class);
+    const ariaLabel = `Group of ${p.children.length} avatar photos`;
     if (VoidElementList.includes(Tag)) return createComponent(Dynamic, mergeProps({
         component: Tag
     }, others, {
@@ -44,7 +40,7 @@ const __solidLayoutAvatarGroup = (_stable, p)=>{
             class: classes()
         }), {
         get children () {
-            return local.children;
+            return p.children;
         }
     }));
 };

package/dist/components/badge/Badge.generated.d.ts

@@ -1,5 +1,5 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import "./Badge.css";
 import { type Flavor, type State, type Variant } from "../vocabulary";
 interface BadgeAnchorProps extends JSX.HTMLAttributes<HTMLSpanElement> {

package/dist/components/badge/Badge.generated.js

@@ -1,27 +1,22 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import { clsx } from "clsx";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import "./Badge.css";
 import { CLASSES, componentRecipe } from "./Badge.recipe.js";
 import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutBadgeAnchor = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class"
-    ]);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.anchor, local.class)
-            }), {
-            "data-slot": "badge-anchor"
-        }), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
+    const others = omit(p, "children", "class");
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.anchor, p.class)
+        }), {
+        "data-slot": "badge-anchor"
+    }), true);
+    insert(_el$, ()=>p.children);
+    return _el$;
 };
 const BadgeAnchor = defineComponent({
     recipe: componentRecipe,
@@ -29,41 +24,31 @@ const BadgeAnchor = defineComponent({
     embedded: true
 });
 const __solidLayoutBadgeRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "flavor",
-        "variant",
-        "state",
-        "size",
-        "placement"
-    ]);
+    const others = omit(p, "children", "class", "flavor", "variant", "state", "size", "placement");
     const classes = ()=>{
-        const size = local.size ?? "md";
-        const flavor = local.flavor ?? "neutral";
+        const size = p.size ?? "md";
+        const flavor = p.flavor ?? "neutral";
         const flavorClass = CLASSES.flavor[flavor] ?? `badge--flavor-${flavor}`;
-        const variant = local.variant ?? "solid";
-        const state = resolveState(local.state);
-        const placement = local.placement ?? "top-right";
-        return twMerge(clsx(CLASSES.base, CLASSES.size[size], flavorClass, CLASSES.variant[variant], CLASSES.state[state], CLASSES.placement[placement], local.class));
+        const variant = p.variant ?? "solid";
+        const state = resolveState(p.state);
+        const placement = p.placement ?? "top-right";
+        return twMerge(clsx(CLASSES.base, CLASSES.size[size], flavorClass, CLASSES.variant[variant], CLASSES.state[state], CLASSES.placement[placement], p.class));
     };
     const badgeChildren = ()=>{
-        const c = local.children;
+        const c = p.children;
         if ("string" == typeof c || "number" == typeof c) return createComponent(BadgeLabel, {
             children: c
         });
         return c;
     };
-    return (()=>{
-        var _el$2 = _tmpl$();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            "data-slot": "badge"
-        }), false, true);
-        insert(_el$2, badgeChildren);
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$();
+    spread(_el$2, mergeProps(others, ()=>({
+            class: classes()
+        }), {
+        "data-slot": "badge"
+    }), true);
+    insert(_el$2, badgeChildren);
+    return _el$2;
 };
 const BadgeRoot = defineComponent({
     recipe: componentRecipe,
@@ -71,20 +56,15 @@ const BadgeRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutBadgeLabel = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class"
-    ]);
-    return (()=>{
-        var _el$3 = _tmpl$();
-        spread(_el$3, mergeProps(()=>({
-                class: twMerge(CLASSES.slot.label, local.class)
-            }), {
-            "data-slot": "badge-label"
-        }, others), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    const others = omit(p, "children", "class");
+    var _el$3 = _tmpl$();
+    spread(_el$3, mergeProps(()=>({
+            class: twMerge(CLASSES.slot.label, p.class)
+        }), {
+        "data-slot": "badge-label"
+    }, others), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const BadgeLabel = defineComponent({
     recipe: componentRecipe,

package/dist/components/badge/Badge.recipe.d.ts

@@ -39,7 +39,7 @@ export declare const CLASSES: {
         readonly "bottom-left": "badge--bottom-left";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "badge";
     readonly slots: {
         readonly badge: {};

package/dist/components/breadcrumb/Breadcrumb.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Breadcrumb.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type BreadcrumbRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & UIBaseProps & {
     children: JSX.Element;

package/dist/components/breadcrumb/Breadcrumb.generated.js

@@ -1,10 +1,10 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Breadcrumb.css";
-import { Show, createContext, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Breadcrumb.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=breadcrumb-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template("<nav>"), _tmpl$3 = /*#__PURE__*/ template("<a>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<li>");
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=breadcrumb-separator fill=none height=12 viewBox="0 0 24 24"width=12><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template("<nav>"), _tmpl$3 = /*#__PURE__*/ template("<a>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<li><!><!>");
 const BreadcrumbContext = createContext();
 const useBreadcrumbContext = ()=>{
     const ctx = useContext(BreadcrumbContext);
@@ -13,34 +13,28 @@ const useBreadcrumbContext = ()=>{
 };
 const ChevronRight = ()=>_tmpl$();
 const __solidLayoutBreadcrumbRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "separator",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "separator", "dataTheme", "style");
     const ctx = {
-        separator: ()=>local.separator
+        separator: ()=>p.separator
     };
-    return createComponent(BreadcrumbContext.Provider, {
+    return createComponent(BreadcrumbContext, {
         value: ctx,
         get children () {
             var _el$2 = _tmpl$2();
             spread(_el$2, mergeProps(others, {
                 "aria-label": "Breadcrumb"
             }, ()=>({
-                    class: twMerge(CLASSES.Root.base, local.class)
+                    class: twMerge(CLASSES.Root.base, p.class)
                 }), {
                 "data-slot": "breadcrumb",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$2, ()=>local.children);
+            }), true);
+            insert(_el$2, ()=>p.children);
             return _el$2;
         }
     });
@@ -52,82 +46,72 @@ const BreadcrumbRoot = defineComponent({
 });
 const [ITEM_CLASS, LINK_CLASS, SEPARATOR_CLASS] = CLASSES.Item.base;
 const __solidLayoutBreadcrumbItem = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "href",
-        "isCurrent",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "href", "isCurrent", "dataTheme", "style");
     const ctx = useBreadcrumbContext();
-    return (()=>{
-        var _el$3 = _tmpl$5();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(ITEM_CLASS, local.class)
-            }), {
-            "data-slot": "breadcrumb-item",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$3, createComponent(Show, {
-            get when () {
-                return memo(()=>!!local.href)() && !local.isCurrent;
-            },
-            get fallback () {
-                return (()=>{
-                    var _el$6 = _tmpl$4();
-                    spread(_el$6, mergeProps({
-                        class: LINK_CLASS
-                    }, {
-                        "data-slot": "breadcrumb-link",
-                        get ["data-current"] () {
-                            return local.isCurrent ? "true" : void 0;
-                        },
-                        get ["aria-current"] () {
-                            return local.isCurrent ? "page" : void 0;
-                        }
-                    }), false, true);
-                    insert(_el$6, ()=>local.children);
-                    return _el$6;
-                })();
-            },
-            get children () {
-                var _el$4 = _tmpl$3();
-                spread(_el$4, mergeProps({
-                    get href () {
-                        return local.href;
-                    }
-                }, {
-                    class: LINK_CLASS
-                }, {
-                    "data-slot": "breadcrumb-link"
-                }), false, true);
-                insert(_el$4, ()=>local.children);
-                return _el$4;
-            }
-        }), null);
-        insert(_el$3, createComponent(Show, {
-            get when () {
-                return !local.isCurrent;
-            },
-            get children () {
-                var _el$5 = _tmpl$4();
-                spread(_el$5, mergeProps({
-                    class: SEPARATOR_CLASS
-                }, {
-                    "data-slot": "breadcrumb-separator"
-                }), false, true);
-                insert(_el$5, ()=>ctx.separator() ?? createComponent(ChevronRight, {}));
-                return _el$5;
-            }
-        }), null);
-        return _el$3;
-    })();
+    var _el$3 = _tmpl$5(), _el$6 = _el$3.firstChild, _el$7 = _el$6.nextSibling;
+    spread(_el$3, mergeProps(others, ()=>({
+            class: twMerge(ITEM_CLASS, p.class)
+        }), {
+        "data-slot": "breadcrumb-item",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$3, createComponent(Show, {
+        get when () {
+            return memo(()=>!!p.href)() ? !p.isCurrent : p.href;
+        },
+        get fallback () {
+            var _el$8 = _tmpl$4();
+            spread(_el$8, mergeProps({
+                class: LINK_CLASS
+            }, {
+                "data-slot": "breadcrumb-link",
+                get ["data-current"] () {
+                    return p.isCurrent ? "true" : void 0;
+                },
+                get ["aria-current"] () {
+                    return p.isCurrent ? "page" : void 0;
+                }
+            }), true);
+            insert(_el$8, ()=>p.children);
+            return _el$8;
+        },
+        get children () {
+            var _el$4 = _tmpl$3();
+            claimElement(_el$4);
+            spread(_el$4, mergeProps({
+                get href () {
+                    return p.href;
+                }
+            }, {
+                class: LINK_CLASS
+            }, {
+                "data-slot": "breadcrumb-link"
+            }), true);
+            insert(_el$4, ()=>p.children);
+            return _el$4;
+        }
+    }), _el$6);
+    insert(_el$3, createComponent(Show, {
+        get when () {
+            return !p.isCurrent;
+        },
+        get children () {
+            var _el$5 = _tmpl$4();
+            spread(_el$5, mergeProps({
+                class: SEPARATOR_CLASS
+            }, {
+                "data-slot": "breadcrumb-separator"
+            }), true);
+            insert(_el$5, ()=>ctx.separator() ?? createComponent(ChevronRight, {}));
+            return _el$5;
+        }
+    }), _el$7);
+    return _el$3;
 };
 const BreadcrumbItem = defineComponent({
     recipe: componentRecipe,