@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/breadcrumbs.jsx

@@ -1,21 +1,34 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Breadcrumbs.tsx
 import { t as mergeStyles } from "./runtime.jsx";
-import { useProviderProps } from "../provider/index.jsx";
+import { a as useProviderProps } from "./provider.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
 import { t as s2IntlStrings } from "./intl.jsx";
 import { t as ActionButton } from "./ActionButton.jsx";
 import { r as createIcon } from "./spectrum-icon.jsx";
-import { s as Text } from "./text.jsx";
+import { s as Text$1 } from "./text.jsx";
 import { l as MenuTrigger$1, o as MenuItem$1, r as Menu$1 } from "./menu.jsx";
 import { t as Chevron } from "./Chevron.jsx";
-import { For, Show, createContext, createEffect, createMemo, createRoot, createSignal, mergeProps, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
-import { createStringFormatter, useLocale } from "@proyecto-viviana/solidaria";
+import { For, Show, createContext, createMemo, createRoot, createSignal, createTrackedEffect, createUniqueId, onCleanup, onSettled, untrack, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { BreadcrumbItem, BreadcrumbItemContext, Breadcrumbs } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
 //#region src/icon/s2wf-icons/FolderBreadcrumbIcon.tsx
 function FolderBreadcrumbIconSvg(props) {
-	const { class: className, ...rest } = props;
-	return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" {...rest} class={className}>
-      <path d="m16.75,5h-5.96387c-.21777,0-.42383-.09375-.56641-.25879l-1.7041-1.96387c-.42676-.49414-1.0459-.77734-1.7002-.77734h-3.56543c-1.24023,0-2.25,1.00977-2.25,2.25v10.5c0,1.24023,1.00977,2.25,2.25,2.25h13.5c1.24023,0,2.25-1.00977,2.25-2.25v-7.5c0-1.24023-1.00977-2.25-2.25-2.25ZM3.25,3.5h3.56543c.21777,0,.42383.09375.56641.25879l1.07703,1.24121H2.5v-.75c0-.41309.33691-.75.75-.75Zm14.25,11.25c0,.41309-.33691.75-.75.75H3.25c-.41309,0-.75-.33691-.75-.75V6.5h14.25c.41309,0,.75.33691.75.75v7.5Z" fill="var(--iconPrimary, #222)" />
-      <path d="m10,13.65039c-.19238,0-.38379-.07324-.53027-.21973l-3-3c-.29297-.29297-.29297-.76758,0-1.06055s.76758-.29297,1.06055,0l2.46973,2.46973,2.46973-2.46973c.29297-.29297.76758-.29297,1.06055,0s.29297.76758,0,1.06055l-3,3c-.14648.14648-.33789.21973-.53027.21973Z" fill="var(--iconPrimary, #222)" />
+	const [local, rest] = splitProps(props, ["class"]);
+	return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" {...rest} class={local.class}>
+      <path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))" d="M16.75 5h-5.964c-.218 0-.424-.094-.566-.259L8.516 2.777C8.089 2.283 7.47 2 6.816 2H3.25C2.01 2 1 3.01 1 4.25v10.5C1 15.99 2.01 17 3.25 17h13.5c1.24 0 2.25-1.01 2.25-2.25v-7.5C19 6.01 17.99 5 16.75 5M3.25 3.5h3.565c.218 0 .424.094.567.259L8.459 5H2.5v-.75c0-.413.337-.75.75-.75M17.5 14.75c0 .413-.337.75-.75.75H3.25c-.413 0-.75-.337-.75-.75V6.5h14.25c.413 0 .75.337.75.75z" />
+      <path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))" d="M10 13.65c-.192 0-.384-.073-.53-.22l-3-3c-.293-.292-.293-.767 0-1.06s.767-.293 1.06 0L10 11.84l2.47-2.47c.293-.293.767-.293 1.06 0s.293.768 0 1.06l-3 3c-.146.147-.338.22-.53.22" />
     </svg>;
 }
 const FolderBreadcrumbIcon = createIcon(FolderBreadcrumbIconSvg);
@@ -41,214 +54,170 @@ const wrapperStyles = function anonymous(props, overrides) {
 		if (p[1] === "I") marginInlineStart = true;
 		rules += p[0];
 	}
-	if (!position) rules += " _Pc151";
-	rules += " sd151";
-	rules += " _Cg151";
-	rules += " _Gc151";
-	rules += " _wa151";
-	if (!flexGrow) rules += " _ub151";
-	if (!flexShrink) rules += " _va151";
-	if (!flexBasis) rules += " _sb151";
-	if (props.size === "XL") rules += " Fz151";
-	else if (props.size === "L") rules += " Fv151";
-	else if (props.size === "S") rules += " Fp151";
-	else if (props.size === "XS") rules += " Fn151";
-	else rules += " Fx151";
-	if (props.size === "L") rules += " Urun3rd151";
-	else if (props.size === "M") rules += " UssxDec151";
-	if (props.size === "L") rules += " qrun3rd151";
-	else if (props.size === "M") rules += " qssxDec151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (!marginTop) rules += " Jy151";
-	if (!marginBottom) rules += " Gy151";
+	if (!position) rules += " _Pc17";
+	rules += " sd17";
+	rules += " _Cg17";
+	rules += " _Gc17";
+	rules += " _wa17";
+	if (!flexGrow) rules += " _ub17";
+	if (!flexShrink) rules += " _va17";
+	if (!flexBasis) rules += " _sb17";
+	if (props.size === "XL") rules += " Fz17";
+	else if (props.size === "L") rules += " Fv17";
+	else if (props.size === "S") rules += " Fp17";
+	else if (props.size === "XS") rules += " Fn17";
+	else rules += " Fx17";
+	if (props.size === "L") rules += " Urun3rd17";
+	else if (props.size === "M") rules += " UssxDec17";
+	if (props.size === "L") rules += " qrun3rd17";
+	else if (props.size === "M") rules += " qssxDec17";
+	rules += " Td17";
+	rules += " Qd17";
+	rules += " Sd17";
+	rules += " Rd17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (!marginTop) rules += " Jy17";
+	if (!marginBottom) rules += " Gy17";
 	if (props.size === "L") {
-		if (!marginInlineStart) rules += " Irun3rd151";
+		if (!marginInlineStart) rules += " Irun3rd17";
 	} else if (props.size === "M") {
-		if (!marginInlineStart) rules += " IssxDec151";
+		if (!marginInlineStart) rules += " IssxDec17";
 	}
 	return rules;
 };
 const breadcrumbStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	if (props.isMenu) rules += " sd151";
-	else rules += " sb151";
-	if (props.isMenu) rules += " eb151";
-	if (props.isMenu) rules += " _Cg151";
-	if (props.isMenu) if (props.size === "XL") rules += " Fz151";
-	else if (props.size === "L") rules += " Fv151";
-	else if (props.size === "S") rules += " Fp151";
-	else if (props.size === "XS") rules += " Fn151";
-	else rules += " Fx151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " _Pc151";
-	rules += " _va151";
-	rules += " _je151";
-	rules += " of151";
-	rules += " nf151";
-	rules += " kf151";
-	rules += " jf151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
-	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
-	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
-	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
-	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	if (props.isMenu) rules += " sd17";
+	else rules += " sb17";
+	if (props.isMenu) rules += " eb17";
+	if (props.isMenu) rules += " _Cg17";
+	if (props.isMenu) {
+		if (props.size === "XL") rules += " Fz17";
+		else if (props.size === "L") rules += " Fv17";
+		else if (props.size === "S") rules += " Fp17";
+		else if (props.size === "XS") rules += " Fn17";
+		else rules += " Fx17";
 	}
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _Pc17";
+	rules += " _va17";
+	rules += " _je17";
+	rules += " of17";
+	rules += " nf17";
+	rules += " kf17";
+	rules += " jf17";
+	rules += " uxe7h417";
+	rules += " vcstVsc17";
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isCurrent) if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	else if (props.isDisabled) if (props.isPressed) rules += " pQKeKoe151";
-	else if (props.isFocusVisible) rules += " pQKeKoe151";
-	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
-	else if (props.isPressed) rules += " pQKeKoe151";
-	else if (props.isFocusVisible) rules += " pQKeKoe151";
-	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
-	if (props.isCurrent) rules += " plc151";
-	else if (props.isDisabled) rules += " plc151";
-	else rules += " plf151";
-	if (props.isMenu) rules += " I34mdr151";
-	if (props.isDisabled) rules += " _Xa151";
+	if (props.isCurrent) rules += " pmiKvLd17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " pyJJ1Ud17";
+	if (props.isCurrent) rules += " plc17";
+	else if (props.isDisabled) rules += " plc17";
+	else rules += " plf17";
+	if (props.isMenu) rules += " I34mdr17";
+	if (props.isDisabled) rules += " _Xa17";
 	else if (props.isFocusVisible) {
-		rules += " _Xb151";
-		rules += " __Va151";
+		rules += " _Xb17";
+		rules += " __Va17";
 	} else if (props.isHovered) {
-		rules += " _Xb151";
-		rules += " __Va151";
-	} else rules += " _Xa151";
-	if (props.isCurrent) rules += " ri151";
-	else if (props.isDisabled) rules += " ri151";
-	else rules += " ry151";
-	rules += " __ca151";
+		rules += " _Xb17";
+		rules += " __Va17";
+	} else rules += " _Xa17";
+	if (props.isCurrent) rules += " ri17";
+	else if (props.isDisabled) rules += " ri17";
+	else rules += " ry17";
+	rules += " __ca17";
 	return rules;
 };
 const currentStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
-	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
-	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
-	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
-	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
-	}
-	rules += " xd151";
-	rules += " _xa151";
-	rules += " xX0cczbc151";
-	rules += " _xX0cczba151";
+	rules += " uxe7h417";
+	rules += " vcstVsc17";
+	rules += " xd17";
+	rules += " _xa17";
+	rules += " xX0cczbc17";
+	rules += " _xX0cczba17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	rules += " pHKLAu151";
-	rules += " plb151";
+	rules += " pmiKvLd17";
+	rules += " plb17";
 	return rules;
 };
+const separatorStyles = " uxe7h417 vcstVsc17 _FWDMfn17 _dc17 _va17 phuSu117 plc17 _4c17";
 const chevronStyles = function anonymous(props) {
 	let rules = " ";
 	if (props.direction === "rtl") {
-		rules += " -Z4Pn4c-a151";
-		rules += " __Ha151";
+		rules += " -Z4Pn4c-a17";
+		rules += " __Ha17";
 	}
 	if (props.direction === "rtl") {
-		rules += " -_04Pn4c-a151";
-		rules += " __Ha151";
+		rules += " -_04Pn4c-a17";
+		rules += " __Ha17";
 	}
-	if (props.isMenu) rules += " Iy151";
+	if (props.isMenu) rules += " Iy17";
 	else {
-		rules += " It151";
-		rules += " Isu151";
+		rules += " It17";
+		rules += " Isu17";
 	}
-	rules += " pHKLAu151";
-	rules += " plf151";
-	rules += " -_8sjo0b-t5ZbAob151";
+	rules += " pmiKvLd17";
+	rules += " plf17";
+	rules += " -_8sjo0b-t5ZbAob17";
 	return rules;
 };
 //#endregion
@@ -283,22 +252,30 @@ function canMeasureOverflow() {
 	return !userAgent.includes("jsdom") && !userAgent.includes("happy-dom");
 }
 function fallbackVisibleTailCount(itemCount) {
-	return itemCount > MAX_VISIBLE_ITEMS ? MAX_VISIBLE_ITEMS - 2 : itemCount;
+	return itemCount > MAX_VISIBLE_ITEMS ? 2 : itemCount;
 }
 /**
 * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
 */
 function Breadcrumbs$1(props) {
-	if (typeof window === "undefined") return renderBreadcrumbs(props, () => {});
 	return createRoot((disposeRoot) => renderBreadcrumbs(props, disposeRoot));
 }
 function renderBreadcrumbs(props, disposeRoot) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(BreadcrumbsContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps({
+	const mergedProps = mergeProps$1({
 		size: "M",
 		showSeparator: true
-	}, providerProps, contextProps ?? {}, props), [
+	}, flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"styles",
 		"UNSAFE_className",
@@ -329,9 +306,9 @@ function renderBreadcrumbs(props, disposeRoot) {
 	const observedMutationTargets = /* @__PURE__ */ new WeakSet();
 	let retryOverflowUpdateTimeout;
 	const initialOverflowUpdateTimeouts = [];
-	const measurementId = `rsp-breadcrumbs-${Math.random().toString(36).slice(2)}`;
-	const [canMeasure, setCanMeasure] = createSignal(canMeasureOverflow());
-	const [visibleTailCount, setVisibleTailCount] = createSignal(MAX_VISIBLE_ITEMS - 2);
+	const measurementId = `rsp-breadcrumbs-${createUniqueId()}`;
+	const [canMeasure, setCanMeasure] = createSignal(false);
+	const [visibleTailCount, setVisibleTailCount] = createSignal(2);
 	let cleanupOverflowObservers = () => {};
 	let hasDisposedRoot = false;
 	let hasCleanedOverflowObservers = false;
@@ -393,7 +370,7 @@ function renderBreadcrumbs(props, disposeRoot) {
 		}
 		let availableWidth = containerWidth - (widths.shift() ?? 0) - folderGap - folder.offsetWidth - containerGap;
 		let nextVisibleTailCount = 0;
-		const maxTailCount = MAX_VISIBLE_ITEMS - 2;
+		const maxTailCount = 2;
 		for (const width of widths.reverse()) {
 			availableWidth -= width;
 			if (availableWidth <= 0) break;
@@ -466,14 +443,14 @@ function renderBreadcrumbs(props, disposeRoot) {
 		measurementMenuButton = element;
 		queueOverflowUpdate();
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		allItems().length;
 		canMeasure();
 		size();
 		isDisabled();
 		queueOverflowUpdate();
 	});
-	onMount(() => {
+	onSettled(() => {
 		const nextCanMeasure = canMeasureOverflow();
 		setCanMeasure(nextCanMeasure);
 		const safeUpdate = () => {
@@ -532,7 +509,7 @@ function renderBreadcrumbs(props, disposeRoot) {
 		const tailCount = Math.min(visibleTailCount(), items.length);
 		return Math.max(1, items.length - tailCount) > 1;
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		shouldCollapse();
 		queueOverflowUpdate();
 	});
@@ -567,7 +544,7 @@ function renderBreadcrumbs(props, disposeRoot) {
 		const renderItem = local.children;
 		return renderItem?.(item);
 	};
-	return <InternalBreadcrumbsContext.Provider value={{
+	return <InternalBreadcrumbsContext value={{
 		size,
 		isDisabled,
 		showSeparator
@@ -595,14 +572,14 @@ function renderBreadcrumbs(props, disposeRoot) {
 			display: "inline-flex",
 			"align-items": "center"
 		}}>
-                  <BreadcrumbItemContext.Provider value={{
+                  <BreadcrumbItemContext value={{
 			get itemKey() {
 				return itemKey();
 			},
 			isLast
 		}}>
                     {renderDynamicItem(item)}
-                  </BreadcrumbItemContext.Provider>
+                  </BreadcrumbItemContext>
                 </div>;
 	}}
           </For>
@@ -611,7 +588,7 @@ function renderBreadcrumbs(props, disposeRoot) {
           </ActionButton>
         </div>
       </Show>
-    </InternalBreadcrumbsContext.Provider>;
+    </InternalBreadcrumbsContext>;
 }
 function BreadcrumbMenu(props) {
 	const locale = useLocale();
@@ -629,7 +606,7 @@ function BreadcrumbMenu(props) {
         </ActionButton>
         <Menu$1 items={props.items} onAction={(key) => props.onAction?.(key)} size={context.size()} aria-label={label()}>
           {(item) => <MenuItem$1 id={props.getKey(item, props.items.indexOf(item))}>
-              <Text slot="label">{props.getLabel(item)}</Text>
+              <Text$1 slot="label">{props.getLabel(item)}</Text$1>
             </MenuItem$1>}
         </Menu$1>
       </MenuTrigger$1>
@@ -644,8 +621,17 @@ function BreadcrumbMenu(props) {
 */
 function Breadcrumb(props) {
 	const context = useContext(InternalBreadcrumbsContext) ?? defaultInternalBreadcrumbsContext;
-	const locale = useLocale();
-	const [local, headlessProps] = splitProps(mergeProps(useProviderProps(props), props), [
+	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
+	const mergedProps = mergeProps$1(flags, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style",
@@ -656,7 +642,8 @@ function Breadcrumb(props) {
 	const assignRefs = mergeContextRefs(props.ref);
 	const mergedStyles = () => mergeContextStyles(void 0, local.styles);
 	const size = () => context.size();
-	const [isCurrent, setIsCurrent] = createSignal(false);
+	const itemContext = useContext(BreadcrumbItemContext);
+	const [isCurrent, setIsCurrent] = createSignal(headlessProps.isCurrent ?? itemContext?.isLast() ?? false, { ownedWrite: true });
 	const syncRenderProps = (renderProps) => {
 		untrack(() => {
 			if (isCurrent() !== renderProps.isCurrent) setIsCurrent(renderProps.isCurrent);
@@ -685,12 +672,15 @@ function Breadcrumb(props) {
 	});
 	const renderChildren = (renderProps) => {
 		syncRenderProps(renderProps);
-		return typeof local.children === "function" ? local.children(renderProps) : local.children;
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(renderProps) : rawChildren;
 	};
 	return <span style={{ display: "contents" }}>
       <BreadcrumbItem {...headlessProps} elementType={isCurrent() ? "div" : headlessProps.elementType} ref={(node) => assignRefs(node)} isDisabled={headlessProps.isDisabled || context.isDisabled()} class={getClassName} style={getStyle} children={renderChildren} />
       <Show when={context.showSeparator() && !isCurrent()}>
-        <Chevron size="M" class={chevronStyles({ direction: locale().direction })} />
+        <span aria-hidden="true" data-rsp-slot="separator" class={separatorStyles}>
+          {"/"}
+        </span>
       </Show>
     </span>;
 }