npm - testio-tailwind - Versions diffs - 2.0.0 → 2.1.0 - Mend

testio-tailwind 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="en"><head>
+<html lang="en">
+  <head>
     <!--
   Maintained with the excellent knowledge from https://htmlhead.dev
   These comments will be removed in production
@@ -45,9 +46,9 @@
 <!-- Links to information about the author(s) of the document -->
 <link rel="author" href="humans.txt">
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#000000">
@@ -58,7 +59,7 @@
 <meta property="og:type" content="website">
 <meta property="og:title" content="Test IO - TailWind">
-<meta property="og:description" content="Tailwind based design system for Test IO">
+<meta property="og:description" content="Tailwind based design system for Test IO" />
 <meta property="og:site_name" content="Test IO TailWind">
 <meta property="og:locale" content="en_US">
 <meta property="article:author" content="test IO">
@@ -83,7 +84,7 @@
       }
     </script>
-  <script type="module" integrity="sha512-7Y25+FX/kRUbZEHtQBOSLffzofBxz8ABQErLAVpGkfzactkpJU5wtTmhIfIZeTw7VHg1JeTIC5kHkzPq7LqR1w==" src="/.11ty/reload-client.js"></script></head>
+  </head>
   <body class="app-body">
     <header class="header manager">
@@ -92,52 +93,72 @@
       </div>
       <div class="navlinks">
-          <a href="/ci/" class="navlink
+          <a href="/ci/"
+              class="navlink
               ">
             CI
           </a>
-          <a href="/colors/" class="navlink
+          <a href="/colors/"
+              class="navlink
               ">
             Colors
           </a>
-          <a href="/buttons/" class="navlink
+          <a href="/buttons/"
+              class="navlink
               ">
             Buttons
           </a>
-          <a href="/components/" class="navlink
+          <a href="/components/"
+              class="navlink
               ">
             Components
           </a>
-          <a href="/forms/" class="navlink
+          <a href="/forms/"
+              class="navlink
               ">
             Forms
           </a>
-          <a href="/charts/" class="navlink
+          <a href="/charts/"
+              class="navlink
               ">
             Charts
           </a>
-          <a href="/icons/" class="navlink
+          <a href="/icons/"
+              class="navlink
               ">
             Icons
           </a>
-          <a href="/layout/" class="navlink
+          <a href="/layout/"
+              class="navlink
               ">
             Layout
           </a>
-          <a href="/navigation/" class="navlink
+          <a href="/navigation/"
+              class="navlink
               ">
             Navigation
           </a>
-          <a href="/typography/" class="navlink
+          <a href="/typography/"
+              class="navlink
               ">
             Typography
           </a>
@@ -152,55 +173,68 @@
           <summary class="navlink">Examples</summary>
           <div class="dropdown-menu">
-              <a href="/pages/examples/layout-actionbar/" class="dropdown-link">
+              <a href="/pages/examples/layout-actionbar/"
+                  class="dropdown-link">
                 Layout with actionbar
               </a>
-              <a href="/pages/examples/layout-basic/" class="dropdown-link">
+              <a href="/pages/examples/layout-basic/"
+                  class="dropdown-link">
                 Layout basic
               </a>
-              <a href="/pages/examples/layout-chat/" class="dropdown-link">
+              <a href="/pages/examples/layout-chat/"
+                  class="dropdown-link">
                 Layout chat page
               </a>
-              <a href="/pages/examples/layout-customer/" class="dropdown-link">
+              <a href="/pages/examples/layout-customer/"
+                  class="dropdown-link">
                 Layout Customer UI
               </a>
-              <a href="/pages/examples/layout-form-sidebar-actionbar-metasidebar/" class="dropdown-link">
+              <a href="/pages/examples/layout-form-sidebar-actionbar-metasidebar/"
+                  class="dropdown-link">
                 Form layout with sidebar, metasidebar and actionbar
               </a>
-              <a href="/pages/examples/layout-manager/" class="dropdown-link">
+              <a href="/pages/examples/layout-manager/"
+                  class="dropdown-link">
                 Layout Team Leader UI
               </a>
-              <a href="/pages/examples/layout-metasidebar/" class="dropdown-link">
+              <a href="/pages/examples/layout-metasidebar/"
+                  class="dropdown-link">
                 Layout with metasidebar
               </a>
-              <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="dropdown-link">
+              <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/"
+                  class="dropdown-link">
                 Layout with sidebar, metasidebar and actionbar
               </a>
-              <a href="/pages/examples/layout-sidebar-actionbar/" class="dropdown-link">
+              <a href="/pages/examples/layout-sidebar-actionbar/"
+                  class="dropdown-link">
                 Layout with sidebar and actionbar
               </a>
-              <a href="/pages/examples/layout-sidebar/" class="dropdown-link">
+              <a href="/pages/examples/layout-sidebar/"
+                  class="dropdown-link">
                 Layout with sidebar
               </a>
-              <a href="/pages/examples/layout-tester/" class="dropdown-link">
+              <a href="/pages/examples/layout-tester/"
+                  class="dropdown-link">
                 Layout Tester UI
               </a>
-              <a href="/pages/examples/splitview-testcases/" class="dropdown-link">
+              <a href="/pages/examples/splitview-testcases/"
+                  class="dropdown-link">
                 Splitview Test Case Executions
               </a>
-              <a href="/pages/examples/splitview/" class="dropdown-link">
+              <a href="/pages/examples/splitview/"
+                  class="dropdown-link">
                 Splitview Layout
               </a>
@@ -217,52 +251,72 @@
             <div class="mobile-menu sidebar">
-                <a href="/ci/" class="navlink
+                <a href="/ci/"
+                    class="navlink
                     ">
                   CI
                 </a>
-                <a href="/colors/" class="navlink
+                <a href="/colors/"
+                    class="navlink
                     ">
                   Colors
                 </a>
-                <a href="/buttons/" class="navlink
+                <a href="/buttons/"
+                    class="navlink
                     ">
                   Buttons
                 </a>
-                <a href="/components/" class="navlink
+                <a href="/components/"
+                    class="navlink
                     ">
                   Components
                 </a>
-                <a href="/forms/" class="navlink
+                <a href="/forms/"
+                    class="navlink
                     ">
                   Forms
                 </a>
-                <a href="/charts/" class="navlink
+                <a href="/charts/"
+                    class="navlink
                     ">
                   Charts
                 </a>
-                <a href="/icons/" class="navlink
+                <a href="/icons/"
+                    class="navlink
                     ">
                   Icons
                 </a>
-                <a href="/layout/" class="navlink
+                <a href="/layout/"
+                    class="navlink
                     ">
                   Layout
                 </a>
-                <a href="/navigation/" class="navlink
+                <a href="/navigation/"
+                    class="navlink
                     ">
                   Navigation
                 </a>
-                <a href="/typography/" class="navlink
+                <a href="/typography/"
+                    class="navlink
                     ">
                   Typography
                 </a>
@@ -271,55 +325,68 @@
               <details>
                 <summary class="navlink-container"><div class="navlink">Examples</div></summary>
-                  <a href="/pages/examples/layout-actionbar/" class="navlink">
+                  <a href="/pages/examples/layout-actionbar/"
+                      class="navlink">
                     Layout with actionbar
                   </a>
-                  <a href="/pages/examples/layout-basic/" class="navlink">
+                  <a href="/pages/examples/layout-basic/"
+                      class="navlink">
                     Layout basic
                   </a>
-                  <a href="/pages/examples/layout-chat/" class="navlink">
+                  <a href="/pages/examples/layout-chat/"
+                      class="navlink">
                     Layout chat page
                   </a>
-                  <a href="/pages/examples/layout-customer/" class="navlink">
+                  <a href="/pages/examples/layout-customer/"
+                      class="navlink">
                     Layout Customer UI
                   </a>
-                  <a href="/pages/examples/layout-form-sidebar-actionbar-metasidebar/" class="navlink">
+                  <a href="/pages/examples/layout-form-sidebar-actionbar-metasidebar/"
+                      class="navlink">
                     Form layout with sidebar, metasidebar and actionbar
                   </a>
-                  <a href="/pages/examples/layout-manager/" class="navlink">
+                  <a href="/pages/examples/layout-manager/"
+                      class="navlink">
                     Layout Team Leader UI
                   </a>
-                  <a href="/pages/examples/layout-metasidebar/" class="navlink">
+                  <a href="/pages/examples/layout-metasidebar/"
+                      class="navlink">
                     Layout with metasidebar
                   </a>
-                  <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/" class="navlink">
+                  <a href="/pages/examples/layout-sidebar-actionbar-metasidebar/"
+                      class="navlink">
                     Layout with sidebar, metasidebar and actionbar
                   </a>
-                  <a href="/pages/examples/layout-sidebar-actionbar/" class="navlink">
+                  <a href="/pages/examples/layout-sidebar-actionbar/"
+                      class="navlink">
                     Layout with sidebar and actionbar
                   </a>
-                  <a href="/pages/examples/layout-sidebar/" class="navlink">
+                  <a href="/pages/examples/layout-sidebar/"
+                      class="navlink">
                     Layout with sidebar
                   </a>
-                  <a href="/pages/examples/layout-tester/" class="navlink">
+                  <a href="/pages/examples/layout-tester/"
+                      class="navlink">
                     Layout Tester UI
                   </a>
-                  <a href="/pages/examples/splitview-testcases/" class="navlink">
+                  <a href="/pages/examples/splitview-testcases/"
+                      class="navlink">
                     Splitview Test Case Executions
                   </a>
-                  <a href="/pages/examples/splitview/" class="navlink">
+                  <a href="/pages/examples/splitview/"
+                      class="navlink">
                     Splitview Layout
                   </a>
@@ -331,26 +398,8 @@
     </header>
-    <main class="main-content main-content-padding flex flex-col justify-start items-center"><div class="w-spacing-8xl flex flex-col justify-center items-center"><img class="w-spacing-3xl h-spacing-3xl mb-8 mt-5" src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg"><p class="max-w-paragraph mb-8">This design system provides Test IO themed components based on TailWindCSS. It helps designers and developers build products and services more easily. Component classes, and HTML snippets offer a starting point for development.</p><a class="mb-8" href="https://badge.fury.io/js/testio-tailwind"><img src="https://badge.fury.io/js/testio-tailwind.svg" alt="npm version" height="40"></a></div><div class="w-spacing-8xl"><div class="section-header"><h3 class="section-title">Technology</h3></div><div class="trix-content"><ul class="max-w-paragraph mb-8"><li>TailWindCSS V3</li><li>PostCSS</li></ul></div><div class="section-header"><h3 class="section-title">Integration</h3></div><div class="trix-content max-w-paragraph"><ol><li>Import <code>app.css</code>to get all relevant modules and files.</li><li>Use the following PostCss configuration in your <code>postcss.config.js </code>file:<pre class="mt-xs"><code class="language-js">const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss')({
-      content: [
-        './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
-      ],
-      theme: tailwindConfig.theme,
-      plugins: tailwindConfig.plugins,
-    }),
-    require('autoprefixer')
-  ]
-}</code></pre></li><li>Change the path to the tailwind.config.js file from the package.<pre class="mt-xs"><code class="language-js">const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');</code></pre></li><li>Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.<pre class="mt-xs"><code class="language-js"> content: [
-   './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
- ],</code></pre></li></ol></div><div class="section-header"><h3 class="section-title">Simple start</h3></div><p class="max-w-paragraph mb-heading">To get started without any customization just download the current compiled CSS below and implement your components with the provided code.</p><a class="btn btn-block btn-primary max-w-paragraph mb-8" href="/static/app.compiled.css" target="_blank"><div class="icon icon-cloud-download mr-icon-spacing"></div>Download compiled CSS</a></div></main>
+    <main class="main-content main-content-padding flex flex-col justify-start items-center"><div class="w-spacing-8xl flex flex-col justify-center items-center"><img class="w-spacing-3xl h-spacing-3xl mb-8 mt-5" src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg"/><p class="max-w-paragraph mb-8">This design system provides Test IO themed components based on TailWindCSS. It helps designers and developers build products and services more easily. Component classes, and HTML snippets offer a starting point for development.</p><a class="mb-8" href="https://badge.fury.io/js/testio-tailwind"><img src="https://badge.fury.io/js/testio-tailwind.svg" alt="npm version" height="40"/></a></div><div class="w-spacing-8xl"><div class="section-header"><h3 class="section-title">Technology</h3></div><div class="trix-content"><ul class="max-w-paragraph mb-8"><li>TailWindCSS V4 for compiling CSS</li><li>Eleventy V2 for building this website</li></ul></div><div class="section-header"><h3 class="section-title">Integration</h3></div><div class="trix-content max-w-paragraph"><ol><li>Import <code>app.css</code>to get all relevant modules and files.</li><li> Run TailWindCSS V4 CLI to compile everything.<br/>Example TailWind configuration:<br/><code>npx @tailwindcss/cli -i input/app.css -o output/app.compiled.css</code></li></ol></div></div></main>
+  </body>
   <script src="/static/app.bundled.js"></script>
-</body></html>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/_includes/head.njk CHANGED Viewed

@@ -1,72 +1,85 @@
-<!--
-  Maintained with the excellent knowledge from https://htmlhead.dev
-  These comments will be removed in production
-  ========================
-  The following 2 meta tags *must* come first in the <head>
-  to consistently ensure proper document rendering.
-  Any other head element should come *after* these tags.
--->
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<!-- Set the base URL for all relative URLs within the document -->
-<base href="{{ page.url }}">
-<!--
-  Short description of the document (limit to 150 characters)
-  This content *may* be used as a part of search engine results.
--->
-<meta name="description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}">
-<!-- Control the behavior of search engine crawling and indexing -->
-<meta name="robots" content="index,follow"><!-- All Search Engines -->
-<meta name="googlebot" content="index,follow"><!-- Google Specific -->
-<!-- Tells Google not to show the sitelinks search box -->
-<meta name="google" content="nositelinkssearchbox">
-<!-- Tells Google not to provide a translation for this document -->
-<meta name="google" content="notranslate">
-<!-- Identify the software used to build the document, Eleventy ftw! -->
-<meta name="generator" content="eleventy">
-<!-- Disable automatic detection and formatting of possible phone numbers -->
-<meta name="format-detection" content="telephone=no">
-<!-- Helps prevent duplicate content issues -->
-<link rel="canonical" href="{{ site.url }}{{ page.url }}">
-<title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
-<!-- Links to information about the author(s) of the document -->
-<link rel="author" href="humans.txt">
-<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-<meta name="msapplication-TileColor" content="#000000">
-<meta name="theme-color" content="#ffffff">
-<!-- Facebook Open Graph meta -->
-<meta property="og:url" content="{{ site.url}}{{ page.url }}">
-<meta property="og:type" content="website">
-<meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ site.title }}{% endif %}">
-{% if site.meta_data.default_social_image or featured_image %}
-  <meta property="og:image" content="{% if env == 'production' %}{{ site.url }}{% endif %}{% if featured_image  %}{{ featured_image }}{% else %}{{ site.meta_data.default_social_image }}{% endif %}" />
-{% endif %}
-<meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}" />
-<meta property="og:site_name" content="{{ site.title }}">
-<meta property="og:locale" content="en_US">
-<meta property="article:author" content="{{ site.author }}">
-<!-- Twitter Open Graph meta -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="{{ site.meta_data.twitter }}">
-<meta name="twitter:creator" content="{{ site.meta_data.twitter }}">
-<!-- disallow Twitter from using your site's info for personalization purposes -->
-<meta name="twitter:dnt" content="on">
+<head>
+  <!--
+    Maintained with the excellent knowledge from https://htmlhead.dev
+    These comments will be removed in production
+    ========================
+    The following 2 meta tags *must* come first in the <head>
+    to consistently ensure proper document rendering.
+    Any other head element should come *after* these tags.
+  -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Set the base URL for all relative URLs within the document -->
+  <base href="{{ page.url }}">
+  <!--
+    Short description of the document (limit to 150 characters)
+    This content *may* be used as a part of search engine results.
+  -->
+  <meta name="description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}">
+  <!-- Control the behavior of search engine crawling and indexing -->
+  <meta name="robots" content="index,follow"><!-- All Search Engines -->
+  <meta name="googlebot" content="index,follow"><!-- Google Specific -->
+  <!-- Tells Google not to show the sitelinks search box -->
+  <meta name="google" content="nositelinkssearchbox">
+  <!-- Tells Google not to provide a translation for this document -->
+  <meta name="google" content="notranslate">
+  <!-- Identify the software used to build the document, Eleventy ftw! -->
+  <meta name="generator" content="eleventy">
+  <!-- Disable automatic detection and formatting of possible phone numbers -->
+  <meta name="format-detection" content="telephone=no">
+  <!-- Helps prevent duplicate content issues -->
+  <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+  <title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
+  <!-- Links to information about the author(s) of the document -->
+  <link rel="author" href="humans.txt">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#000000">
+  <meta name="theme-color" content="#ffffff">
+  <!-- Facebook Open Graph meta -->
+  <meta property="og:url" content="{{ site.url}}{{ page.url }}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ site.title }}{% endif %}">
+  {% if site.meta_data.default_social_image or featured_image %}
+    <meta property="og:image" content="{% if env == 'production' %}{{ site.url }}{% endif %}{% if featured_image  %}{{ featured_image }}{% else %}{{ site.meta_data.default_social_image }}{% endif %}" />
+  {% endif %}
+  <meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta property="og:site_name" content="{{ site.title }}">
+  <meta property="og:locale" content="en_US">
+  <meta property="article:author" content="{{ site.author }}">
+  <!-- Twitter Open Graph meta -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="{{ site.meta_data.twitter }}">
+  <meta name="twitter:creator" content="{{ site.meta_data.twitter }}">
+  <!-- disallow Twitter from using your site's info for personalization purposes -->
+  <meta name="twitter:dnt" content="on">
+  <link rel="stylesheet" href="/static/app.compiled.css" id="testio-tailwind" title="Test IO TailWind">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.js"></script>
+  <script>
+    window.onload = () => {
+      const previews = document.getElementsByClassName("html-preview");
+      for (i = 0; i < previews.length; i++) {
+        previews[i].innerText = html_beautify(previews[i].textContent)
+      }
+    }
+  </script>
+</head>

package/src/_includes/header.njk ADDED Viewed

@@ -0,0 +1,65 @@
+<header class="header manager">
+  <div class="navlinks logo-wrapper">
+    <a class="navlink header-logo" href="/"></a>
+  </div>
+  <div class="navlinks left">
+    {% for item in navigation.items %}
+      <a href="{{ item.url }}"
+          {% if page.url == item.url %} aria-current="page" {% endif %}
+          class="navlink
+          {% if page.url == item.url %} active {% endif %}">
+        {{ item.text }}
+      </a>
+    {% endfor %}
+    <details class="header-dropdown dropright">
+      <summary class="navlink">Spaces</summary>
+      <div class="dropdown-menu">
+        <a href="/issuing" class="dropdown-link">Issuing</a>
+        <a href="/testinator" class="dropdown-link">Testinator</a>
+      </div>
+    </details>
+    <details class="header-dropdown dropright">
+      <summary class="navlink">Examples</summary>
+      <div class="dropdown-menu">
+        {% for examples in collections.examples %}
+          <a href="{{ examples.url }}"
+              class="dropdown-link">
+            {{ examples.data.title }}
+          </a>
+        {% endfor %}
+      </div>
+    </details>
+  </div>
+  <!-- Mobile menu button-->
+  <details class="mobile-links">
+    <summary class="mobile-menu-btn"><div class="navlink"><span class="sr-only">Open main menu</span><!-- Icon when menu is closed.--><span class="icon icon-menu" aria-hidden="true"></span></div></summary>
+    <div class="mobile-menu sidebar">
+      {% for item in navigation.items %}
+        <a href="{{ item.url }}"
+            {% if page.url == item.url %} aria-current="page" {% endif %}
+            class="navlink
+            {% if page.url == item.url %} active {% endif %}">
+          {{ item.text }}
+        </a>
+      {% endfor %}
+    <details class="navlink-container">
+      <summary class="navlink">Spaces</summary>
+      <a href="/issuing" class="navlink">Issuing</a>
+      <a href="/testinator" class="navlink">Testinator</a>
+    </details>
+      <details class="navlink-container">
+        <summary class="navlink">Examples</summary>
+        {% for examples in collections.examples %}
+          <a href="{{ examples.url }}"
+              class="navlink">
+            {{ examples.data.title }}
+          </a>
+        {% endfor %}
+      </details>
+    </div>
+  </details>
+</header>