---
// Legend list container (.legend-list).

interface Props {
  /** legend-list-vertical (stacked items) */
  vertical?: boolean
  /** legend-list-divided (a line between the items, for large legends) */
  divided?: boolean
  class?: string
  /** remaining attributes (id, data-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { vertical, divided, class: className, ...rest } = Astro.props
---

<div class:list={['legend-list', vertical && 'legend-list-vertical', divided && 'legend-list-divided', className]} {...rest}>
  <slot />
</div>