import { cn } from "#lib/utils.ts";
import { separator as styles } from "./classes.ts";

export interface Input extends Marko.Input<"div"> {}

<const/{ class: className, content, ...rest }=input/>

// aria-hidden: a decorative divider is not valid content for the role="list"
// item-group it usually sits in (axe: aria-required-children), and screen
// readers gain nothing from announcing it.
<div
  data-slot="item-separator"
  data-orientation="horizontal"
  role="separator"
  aria-hidden="true"
  ...rest
  class=cn(styles.root, styles.orientation, className)
>
  <${content}/>
</div>