component Stepper {
  outputs {
    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    previous(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    next(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    complete(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    label: string = "Stepper"
    items: unknown[] = []
    active: string = ""
    orientation: string = "horizontal"
    class: string = ""
  }
  view {
    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--stepper wire-next--{orientation} {class}" aria-label="{label}">
      {#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
      <slot />
    </nav>
  }
}