import { html, nothing } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { renderButton } from "../button.js";
const renderBreadcrumbShowMore = ({ props })=>{
    if (!props.isCollapsed) return nothing;
    return html`${keyed('show-more', html`
      <li>
        ${renderButton({
        props: {
            ref: (el)=>props.refCallback(el),
            part: 'show-more',
            style: 'outline-primary',
            text: props.value,
            ariaLabel: props.ariaLabel,
            class: 'rounded-xl p-2',
            onClick: props.onShowMore
        }
    })(nothing)}
      </li>
    `)}`;
};
export { renderBreadcrumbShowMore };
