Initial Drupal 11 with DDEV setup

web/core/themes/claro/js/vertical-tabs.js

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Overrides vertical tabs theming to enable Claro designs.
+ */
+
+(($, Drupal) => {
+  /**
+   * Theme function for a vertical tab.
+   *
+   * @param {object} settings
+   *   An object with the following keys:
+   * @param {string} settings.title
+   *   The name of the tab.
+   *
+   * @return {object}
+   *   This function has to return an object with at least these keys:
+   *   - item: The root tab jQuery element
+   *   - link: The anchor tag that acts as the clickable area of the tab
+   *       (jQuery version)
+   *   - summary: The jQuery element that contains the tab summary
+   */
+  Drupal.theme.verticalTab = (settings) => {
+    const tab = {};
+    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
+    tab.title[0].textContent = settings.title;
+    tab.item = $(
+      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
+    ).append(
+      (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
+        $('<span class="vertical-tabs__menu-link-content"></span>')
+          .append(tab.title)
+          .append(
+            (tab.summary = $(
+              '<span class="vertical-tabs__menu-link-summary"></span>',
+            )),
+          ),
+      )),
+    );
+    return tab;
+  };
+})(jQuery, Drupal);