import{breadcrumb_styles_default as t}from"./chunk.IGYXUK7A.js";import{LocalizeController as e}from"./chunk.2A3352EO.js";import{SlIcon as r}from"./chunk.M4HIRIJ5.js";import{ShoelaceElement as a}from"./chunk.Z7XDKKOD.js";import{__decorateClass as o}from"./chunk.6M63UXML.js";import{html as s}from"../../../../lit/index.js";import{property as l,query as i}from"../../../../lit/decorators.js";var n=class extends a{constructor(){super(...arguments),this.localize=new e(this),this.separatorDir=this.localize.dir(),this.label=""}getSeparator(){const t=this.separatorSlot.assignedElements({flatten:!0})[0].cloneNode(!0);return[t,...t.querySelectorAll("[id]")].forEach((t=>t.removeAttribute("id"))),t.setAttribute("data-default",""),t.slot="separator",t}handleSlotChange(){const t=[...this.defaultSlot.assignedElements({flatten:!0})].filter((t=>"sl-breadcrumb-item"===t.tagName.toLowerCase()));t.forEach(((e,r)=>{const a=e.querySelector('[slot="separator"]');null===a?e.append(this.getSeparator()):a.hasAttribute("data-default")&&a.replaceWith(this.getSeparator()),r===t.length-1?e.setAttribute("aria-current","page"):e.removeAttribute("aria-current")}))}render(){return this.separatorDir!==this.localize.dir()&&(this.separatorDir=this.localize.dir(),this.updateComplete.then((()=>this.handleSlotChange()))),s`
      <nav part="base" class="breadcrumb" aria-label=${this.label}>
        <slot @slotchange=${this.handleSlotChange}></slot>
      </nav>

      <span hidden aria-hidden="true">
        <slot name="separator">
          <sl-icon name=${"rtl"===this.localize.dir()?"chevron-left":"chevron-right"} library="system"></sl-icon>
        </slot>
      </span>
    `}};n.styles=t,n.dependencies={"sl-icon":r},o([i("slot")],n.prototype,"defaultSlot",2),o([i('slot[name="separator"]')],n.prototype,"separatorSlot",2),o([l()],n.prototype,"label",2);export{n as SlBreadcrumb};