Initial Drupal 11 with DDEV setup

web/core/themes/claro/js/details.js

@@ -0,0 +1,49 @@
+/**
+ * @file
+ * Claro's polyfill enhancements for HTML5 details.
+ */
+
+(($, Drupal) => {
+  /**
+   * Workaround for Firefox.
+   *
+   * Firefox applies the focus state only for keyboard navigation.
+   * We have to manually trigger focus to make the behavior consistent across
+   * browsers.
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.claroDetails = {
+    attach(context) {
+      // The second argument of once() needs to be an instance of Element, but
+      // document is an instance of Document, replace it with the html Element.
+      $(once('claroDetails', context === document ? 'html' : context)).on(
+        'click',
+        (event) => {
+          if (event.target.nodeName === 'SUMMARY') {
+            $(event.target).trigger('focus');
+          }
+        },
+      );
+    },
+  };
+
+  /**
+   * Theme override providing a wrapper for summarized details content.
+   *
+   * @return {string}
+   *   The markup for the element that will contain the summarized content.
+   */
+  Drupal.theme.detailsSummarizedContentWrapper = () =>
+    `<span class="claro-details__summary-summary"></span>`;
+
+  /**
+   * Theme override of summarized details content text.
+   *
+   * @param {string|null} [text]
+   *   (optional) The summarized content displayed in the summary.
+   * @return {string}
+   *   The formatted summarized content text.
+   */
+  Drupal.theme.detailsSummarizedContentText = (text) => text || '';
+})(jQuery, Drupal);