# Breadcrumb — accessible headless navigation breadcrumb
#
# Renders a navigation trail with separator between items.
# The last item is automatically marked as the current page.
# Ships zero CSS.
#
# Usage:
#   Breadcrumb
#     a $item: true, href: "/", "Home"
#     a $item: true, href: "/products", "Products"
#     span $item: true, "Widget Pro"
#
#   Breadcrumb separator: ">"
#     a $item: true, href: "/", "Home"
#     span $item: true, "Settings"

export Breadcrumb = component
  @separator:: string := "/"
  @label:: string := "Breadcrumb"

  _ready := false

  mounted: -> _ready = true

  _items ~=
    return [] unless _ready
    return [] unless @_content
    Array.from(@_content.querySelectorAll('[data-item]') or [])

  ~>
    return unless _ready
    items = _items
    return unless items.length
    @_content?.style.setProperty '--breadcrumb-separator', JSON.stringify(@separator)
    items.forEach (el, idx) =>
      isLast = idx is items.length - 1
      if isLast
        el.setAttribute 'aria-current', 'page'
        el.toggleAttribute 'data-current', true
      else
        el.removeAttribute 'aria-current'
        el.removeAttribute 'data-current'

  render
    nav aria-label: @label
      ol ref: "_content"
        slot
