Have we discussed or landed on consensus around Link component from @wordpress/route using Link from @wordpress/ui ?

(Something to address separately)

In other libraries I typically see the separator as non-selectable text, either by SVG image or using user-select: none (example: MUI). This is also how it behaves in the current implementation before these changes (via ::after content behavior). It feels like it might be appropriate to disable user selection if it's largely decorative?

I don't have a strong feeling about this, but it makes sense to maintain the current behavior.

I figure this is okay as the separator is a decorative element and the list structure conveys meaning to assistive tech. I appreciate it's a bit of a gray area though. Thoughts welcome.

Does this affect hover styles and general click area of the item, though?

No because the separator is attached to the li not the a.

With the recent changes, actually, I realized that the separator doesn't currently get the same typography styles as the individual items (the ::after currently inherits from li/ul, not from Text, so its font-family/font-size may not match the adjacent links)/

Maybe we could consider replacing the li::after pseudo-element separator with an explicit <Text> element? This would solve the typography inheritance concern .

Something like:

{ precedingItems.map( ( item, index ) => (
    <li key={ index }>
        <Text
            variant="body-lg"
            render={
                <Link
                    tone="neutral"
                    render={ <RouterLink to={ item.to } /> }
                />
            }
        >
            { item.label }
        </Text>
        <Text variant="body-lg" aria-hidden="true" className="admin-ui-breadcrumbs__separator">
            /
        </Text>
    </li>
) ) }

Since Text defaults to <span>, there's no need for a render prop — aria-hidden is passed directly. And because only precedingItems (all items except the last) are in this loop, the separator is never rendered after the current/last item.

This would let us remove the li:not(:last-child)::after CSS rule entirely and replace it with a simpler class:

.admin-ui-breadcrumbs__separator {
    color: var(--wpds-color-stroke-surface-neutral);
    margin: 0 var(--wpds-dimension-gap-sm);
}

Nice, yes this makes sense!

If this needs to be handled separately I understand :)

Correct 😄 We can unleash these after #76783.

Blocked by #77044

Just flagging that Text is now allowed, and I guess Link may soon allowed too?

My expectation is that we're okay to make this allowed, but that we'd likely want to accompany this (separately, perhaps) with a more thorough reflection of its status like we did in #77044 (e.g. updating componentStatus of @wordpress/components ExternalLink to point to @wordpress/ui if appropriate).

I'm happy to wait on merging this until Link is allowed in a separate PR if y'all prefer.