Add support for sl-dropdown in the default slot of sl-breadcrumb-item

[schilchSICKAG]

This PR adds the ability to add <sl-dropdown> in the default slot of a <sl-breadcrumb-item> as requested and discussed in #2011, this feature.

The following changes where made to make this work:

The render call does not rely on the href attribute alone to render. Instead, a new state renderType is created that may hold one of the following values: 'button' | 'link' | 'drop-down'. As before, it defaults to button, making all original examples work.

A slotChange listener is bound to all default slots that checks for availability of a slotted <sl-dropdown>. If one is found, the render type is set to drop-down. In all other cases, the logic from the original rendering applies.

I also have added tests and updated the documentation. However, I am unsure how to document this. Should we leave the initial example as is or create a new one (which I did in this PR)?

Looking forward to your suggestions.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Jul 2, 2024 6:46am

[KonnorRogers]

This looks good to me! (And makes me want hrefs for menu items even more!)

@claviska I dont see any issue here.

Perhaps a different problem for a different day, but we may want to expose some way to style these breadcrumbs differently based on the renderType.

Before you could check the href attribute, now its a little murkier because the labels dont have parts that correspond, and the renderType doesn't get reflected.

[schilchSICKAG]

Hi @KonnorRogers,

thank you for your input. I just committed your suggestions, seems fine for me.

Perhaps a different problem for a different day, but we may want to expose some way to style these breadcrumbs differently based on the renderType.

You are right, we should think about this. Currently, you could use a slotted selector, but thats not nice at all. Conditionally setting the part is also kind of ugly as you will not be able to target all elements with a single selector anymore. We could also reflect the renderType, so it gets easier to target via CSS. Got some other ideas?

[claviska]

Perhaps a different problem for a different day, but we may want to expose some way to style these breadcrumbs differently based on the renderType.

Would this be for user's custom styles? If so, can the :has selector help here?

[schilchSICKAG]

It would be a possibility for sure.

[claviska]

Thank you for the solid PR!