Move hard coded vertical tabs classes to a theme function and use js-prefixed classes for functionality

Problem/Motivation

Drupal.behaviors.verticalTabs and Drupal.verticalTab[.prototype] add some additional classes and wrapper elements to the vertical tabs component. Currently it isn't possible to override the classes or the wrapper elements without duplicating all of the logic inside the function in a theme.

1. The Drupal.behavior.verticalTabs and Drupal.verticalTab object hard-code markup of the tab list and (the outermost) wrapper of the vertical tabs component.
2. The Drupal.verticalTab object is built on the same (unprefixed) CSS classes that should be used only for theming the component.

Proposed resolution

Replace hard-coded markup with Drupal.theme functions and adds 'js-' prefixed CSS classes for the JavaScript functionality:

1. New theme functions:
   • Provide a theme function for tabList:
     

     Drupal.theme.verticalTabsMenuListWrapper = () =>
               '<ul class="vertical-tabs__menu"></ul>';

   • Provide a theme function for the outermost wrapper element:
     

     Drupal.theme.verticalTabsWrapper = () =>
               '<div class="vertical-tabs clearfix"></div>';

2. Use js-prefixed CSS classes for functionality:
   • Add .js-vertical-tabs-pane to the vertical tabs' details elements and use that CSS class for functionality.
   • Add .js-vertical-tabs-menu-item to the themed output of the vertical tabs menu item (Drupal.theme.verticalTab()) and use that CSS class for functionality.
   • Add .js-vertical-tab-hidden (with vertical-tab-hidden) to the hidden vertical tabs details element and use that CSS class for identifying hidden tabs.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

@todo