maverick-wave 4.27.0 → 5.0.0

package/src/partials/divider-container.html

@@ -9,25 +9,25 @@
     <h3 class="mw-card-title mw-mb-4">Horizontal</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <h4 class="mw-text-medium mw-mb-2">Default</h4>
         <p class="mw-text-muted">Content above</p>
         <hr class="mw-divider" />
         <p class="mw-text-muted">Content below</p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Thick</h5>
+        <h4 class="mw-text-medium mw-mb-2">Thick</h4>
         <hr class="mw-divider mw-divider-thick" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Dashed</h5>
+        <h4 class="mw-text-medium mw-mb-2">Dashed</h4>
         <hr class="mw-divider mw-divider-dashed" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Primary color</h5>
+        <h4 class="mw-text-medium mw-mb-2">Primary color</h4>
         <hr class="mw-divider mw-divider-primary" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Secondary color</h5>
+        <h4 class="mw-text-medium mw-mb-2">Secondary color</h4>
         <hr class="mw-divider mw-divider-secondary" />
       </div>
     </div>
@@ -37,7 +37,7 @@
     <h3 class="mw-card-title mw-mb-4">With Text & Vertical</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">With label</h5>
+        <h4 class="mw-text-medium mw-mb-2">With label</h4>
         <div class="mw-divider-text">
           <span>or</span>
         </div>
@@ -54,7 +54,7 @@
       </div>
 
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h5>
+        <h4 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h4>
         <div
           style="display: flex; align-items: center; gap: 1rem; height: 70px"
         >

package/src/partials/dropdown-container.html

@@ -14,7 +14,7 @@
     <h3 class="mw-card-title mw-mb-4">Actions menu</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <h4 class="mw-text-medium mw-mb-2">Default</h4>
         <details class="mw-dropdown">
           <summary class="mw-btn mw-btn-primary">
             Actions <i class="fas fa-chevron-down mw-dropdown-caret"></i>
@@ -39,7 +39,7 @@
       </div>
 
       <div>
-        <h5 class="mw-text-medium mw-mb-2">As a picker</h5>
+        <h4 class="mw-text-medium mw-mb-2">As a picker</h4>
         <details class="mw-dropdown">
           <summary class="mw-btn mw-btn-outline">
             Sort by: Newest

package/src/partials/empty-state-container.html

@@ -9,7 +9,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">Basic & Color Variants</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <h4 class="mw-text-medium mw-mb-2">Default</h4>
       <div class="mw-empty-state">
         <div class="mw-empty-state-icon"><i class="fas fa-inbox"></i></div>
         <p class="mw-empty-state-title">Nothing here yet</p>
@@ -21,7 +21,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Warning</h5>
+      <h4 class="mw-text-medium mw-mb-2">Warning</h4>
       <div class="mw-empty-state mw-empty-state-warning mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-exclamation-triangle"></i>
@@ -38,7 +38,7 @@
   <div>
     <h3 class="mw-card-title mw-mb-4">More Variants</h3>
     <div class="mw-card mw-card-simple">
-      <h5 class="mw-text-medium mw-mb-2">Success</h5>
+      <h4 class="mw-text-medium mw-mb-2">Success</h4>
       <div class="mw-empty-state mw-empty-state-success mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-check-circle"></i>
@@ -51,7 +51,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Primary (small)</h5>
+      <h4 class="mw-text-medium mw-mb-2">Primary (small)</h4>
       <div class="mw-empty-state mw-empty-state-primary mw-empty-state-sm">
         <div class="mw-empty-state-icon"><i class="fas fa-search"></i></div>
         <p class="mw-empty-state-title">No items match</p>
@@ -63,7 +63,7 @@
     </div>
 
     <div class="mw-card mw-card-simple mw-mt-4">
-      <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+      <h4 class="mw-text-medium mw-mb-2">Danger</h4>
       <div class="mw-empty-state mw-empty-state-danger mw-empty-state-sm">
         <div class="mw-empty-state-icon">
           <i class="fas fa-times-circle"></i>

package/src/partials/footer-container.html

@@ -2,10 +2,9 @@
   <div class="mw-footer-column">
     <h3>The framework</h3>
     <p>
-      A lightweight, modern CSS framework for building responsive websites with
-      elegance and speed. While AI tools helped kickstart the development of
-      some components and provided initial structure, approximately 80% of the
-      codebase required manual refinement and customization.
+      A CSS framework for responsive sites - grid, components, forms, dark mode.
+      AI tools drafted parts of it; most of what is in here was reworked by hand
+      afterwards.
     </p>
   </div>
 
@@ -51,8 +50,7 @@
 
   <div class="mw-footer-column">
     <h3>Contact Me</h3>
-    <p>Have questions or feedback? I'd love to hear from you!</p>
-    <p>Please use the social links below</p>
+    <p>Questions or feedback? Every link below reaches me.</p>
   </div>
 </div>
 
@@ -60,8 +58,8 @@
   <a
     href="https://github.com/m1well"
     target="_blank"
-    type="button"
     data-tooltip="GitHub"
+    aria-label="GitHub"
   >
     <i class="fab fa-github"></i>
   </a>
@@ -69,6 +67,7 @@
     href="https://www.linkedin.com/in/michael-wellner"
     target="_blank"
     data-tooltip="LinkedIn"
+    aria-label="LinkedIn"
   >
     <i class="fab fa-linkedin"></i>
   </a>
@@ -76,27 +75,31 @@
     href="https://www.xing.com/profile/Michael_Wellner5/"
     target="_blank"
     data-tooltip="Xing"
+    aria-label="Xing"
   >
     <i class="fab fa-xing"></i>
   </a>
-  <a href="https://dev.to/m1well" target="_blank" data-tooltip="dev.to">
+  <a
+    href="https://dev.to/m1well"
+    target="_blank"
+    data-tooltip="dev.to"
+    aria-label="dev.to"
+  >
     <i class="fab fa-dev"></i>
   </a>
-  <a href="mailto:info@m1well.com" target="_blank" data-tooltip="Mail">
+  <a
+    href="mailto:info@m1well.com"
+    target="_blank"
+    data-tooltip="Mail"
+    aria-label="Mail"
+  >
     <i class="fa fa-envelope"></i>
   </a>
 </div>
 
 <p class="mw-disclaimer">
-  MaverickWave is a lightweight, modern CSS framework for building responsive
-  websites with elegance and speed. It embodies the spirit of innovation and
-  fluidity, just like a maverick wave that charts its own course across the
-  ocean. The framework was named to reflect its bold approach to web design -
-  breaking free from conventional constraints while maintaining a natural flow
-  that adapts seamlessly to any environment. Like the powerful yet graceful
-  movement of waves, MaverickWave combines strength and flexibility, empowering
-  developers to create distinctive digital experiences that stand out in the
-  vast sea of the web.
+  Named after the one wave that breaks off the reef instead of with the set. MIT
+  licensed.
 </p>
 
 <p class="mw-copyright">

package/src/partials/form-elements-container.html

@@ -123,7 +123,7 @@
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default vertical -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-checkbox-group">
           <label class="mw-checkbox">
             <input type="checkbox" name="cb1" />
@@ -140,7 +140,7 @@
 
       <!-- Inline small -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-checkbox-group mw-checkbox-group-inline">
           <label class="mw-checkbox mw-checkbox-sm">
             <input type="checkbox" name="cb2" />
@@ -157,8 +157,8 @@
 
       <!-- Large & colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
-        <div class="mw-checkbox-group mw-checkbox-group">
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
+        <div class="mw-checkbox-group">
           <label class="mw-checkbox mw-checkbox-lg mw-checkbox-success">
             <input type="checkbox" name="cb3" />
             <div class="mw-checkbox-box"></div>
@@ -174,7 +174,7 @@
 
       <!-- Error -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Error</h5>
+        <h4 class="mw-mb-2">Error</h4>
         <div class="mw-checkbox-group mw-form-element-error">
           <label class="mw-checkbox">
             <input type="checkbox" name="cb1" />
@@ -197,7 +197,7 @@
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default (vertical) -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-radio-group">
           <label class="mw-radio">
             <input type="radio" name="opt1" />
@@ -219,7 +219,7 @@
 
       <!-- Small Inline -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-radio-group mw-radio-group-inline">
           <label class="mw-radio mw-radio-sm">
             <input type="radio" name="opt2" />
@@ -236,8 +236,8 @@
 
       <!-- Large & Colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
-        <div class="mw-radio-group mw-radio-group">
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
+        <div class="mw-radio-group">
           <label class="mw-radio mw-radio-lg mw-radio-success">
             <input type="radio" name="opt3" />
             <div class="mw-radio-button"></div>
@@ -253,7 +253,7 @@
 
       <!-- Error -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Error</h5>
+        <h4 class="mw-mb-2">Error</h4>
         <div class="mw-radio-group mw-form-element-error">
           <label class="mw-radio">
             <input type="radio" name="opt1" />
@@ -541,7 +541,7 @@ Imported from the previous application.</textarea
     <div class="mw-grid-4-lg mw-mt-4">
       <!-- Default -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Default</h5>
+        <h4 class="mw-mb-2">Default</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle">
             <input type="checkbox" />
@@ -558,7 +558,7 @@ Imported from the previous application.</textarea
 
       <!-- Small & Inline -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Small & Inline</h5>
+        <h4 class="mw-mb-2">Small & Inline</h4>
         <div class="mw-toggle-group mw-toggle-group-inline">
           <label class="mw-toggle mw-toggle-sm">
             <input type="checkbox" checked />
@@ -580,7 +580,7 @@ Imported from the previous application.</textarea
 
       <!-- Large & Colored -->
       <div class="mw-mb-6">
-        <h5 class="mw-mb-2">Large &amp; Colored</h5>
+        <h4 class="mw-mb-2">Large &amp; Colored</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle mw-toggle-lg mw-toggle-success">
             <input type="checkbox" checked />
@@ -597,7 +597,7 @@ Imported from the previous application.</textarea
 
       <!-- Disabled -->
       <div>
-        <h5 class="mw-mb-2">Disabled</h5>
+        <h4 class="mw-mb-2">Disabled</h4>
         <div class="mw-toggle-group">
           <label class="mw-toggle mw-toggle-disabled">
             <input type="checkbox" disabled />

package/src/partials/gallery-container.html

@@ -15,28 +15,36 @@
     <!-- Track -->
     <div class="mw-gallery-track">
       <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
-        <img src="images/gallery-mountain.svg" alt="Beautiful Mountain" />
+        <img
+          src="images/gallery-mountain.svg"
+          alt="Beautiful Mountain"
+          loading="lazy"
+        />
       </div>
       <div class="mw-gallery-slide" data-desc="Peaceful Lake">
-        <img src="images/gallery-lake.svg" alt="Peaceful Lake" />
+        <img src="images/gallery-lake.svg" alt="Peaceful Lake" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="City Vibes">
-        <img src="images/gallery-city.svg" alt="City Vibes" />
+        <img src="images/gallery-city.svg" alt="City Vibes" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Golden Forest">
-        <img src="images/gallery-forest.svg" alt="Golden Forest" />
+        <img
+          src="images/gallery-forest.svg"
+          alt="Golden Forest"
+          loading="lazy"
+        />
       </div>
       <div class="mw-gallery-slide" data-desc="Desert View">
-        <img src="images/gallery-desert.svg" alt="Desert View" />
+        <img src="images/gallery-desert.svg" alt="Desert View" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Ocean Breeze">
-        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" />
+        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Old Town">
-        <img src="images/gallery-oldtown.svg" alt="Old Town" />
+        <img src="images/gallery-oldtown.svg" alt="Old Town" loading="lazy" />
       </div>
       <div class="mw-gallery-slide" data-desc="Snowy Hills">
-        <img src="images/gallery-snow.svg" alt="Snowy Hills" />
+        <img src="images/gallery-snow.svg" alt="Snowy Hills" loading="lazy" />
       </div>
     </div>
 

package/src/partials/get-started-container.html

@@ -323,7 +323,7 @@ import './assets/maverick-wave.min.css';</code></pre>
   <code>@font-face</code> and then override the CSS font variable.
 </p>
 <div class="mw-card mw-card-simple">
-  <h5 class="mw-mb-2">1. Load the Font</h5>
+  <h4 class="mw-mb-2">1. Load the Font</h4>
   <pre class="mw-code-block"><code>/* your-custom-styles.css */
 @font-face {
   font-family: 'Your Custom Font';
@@ -344,7 +344,7 @@ import './assets/maverick-wave.min.css';</code></pre>
 }
 </code></pre>
 
-  <h5 class="mw-mt-4 mw-mb-2">2. Apply the Font</h5>
+  <h4 class="mw-mt-4 mw-mb-2">2. Apply the Font</h4>
   <p>
     <strong>CSS Variable Method:</strong>
   </p>
@@ -358,13 +358,9 @@ import './assets/maverick-wave.min.css';</code></pre>
 </div>
 
 <div class="mw-d-flex mw-flex-wrap mw-gap-4 mw-justify-center mw-mt-6">
-  <button
-    type="button"
-    onclick="location.href = '#documentation'"
-    class="mw-btn mw-btn-primary"
-  >
+  <a href="#documentation" class="mw-btn mw-btn-primary">
     Explore Documentation
-  </button>
+  </a>
   <button
     type="button"
     onclick="

package/src/partials/header-container.html

@@ -1,11 +1,11 @@
 <div class="mw-logo">
-  <button type="button" onclick="location.href = '#home'">
+  <a href="#home">
     <img src="header-logo.svg" alt="MaverickWave Logo" />
-  </button>
+  </a>
 </div>
 
 <div class="mw-header-actions">
-  <nav class="mw-navbar mw-navbar-medium">
+  <nav class="mw-navbar mw-navbar-medium" id="mw-main-nav">
     <ul class="mw-navbar-list">
       <li class="mw-navbar-item">
         <a href="#get-started" class="mw-navbar-link">Get Started</a>
@@ -42,12 +42,23 @@
   </button>
 
   <!-- Login Button -->
-  <button class="mw-login-btn" id="login-button">
+  <button
+    type="button"
+    class="mw-login-btn"
+    id="login-button"
+    aria-label="Log in"
+  >
     <i class="fas fa-lock"></i>
   </button>
 
   <!-- Burger Menu Button -->
-  <div class="mw-menu-btn">
-    <div class="mw-menu-btn-burger"></div>
-  </div>
+  <button
+    type="button"
+    class="mw-menu-btn"
+    aria-label="Menu"
+    aria-expanded="false"
+    aria-controls="mw-main-nav"
+  >
+    <span class="mw-menu-btn-burger"></span>
+  </button>
 </div>

package/src/partials/header-utilities-container.html

@@ -1,9 +1,9 @@
 <h3 class="mw-section-subtitle">Header Utilities</h3>
 <p class="mw-text-muted mw-text-measure mw-mb-6">
-  The two controls that live in the bar itself rather than on the page: the
-  theme switch and the login button. Both are real buttons, so they are
-  reachable by keyboard - the switch in particular is the first thing someone
-  with a light-sensitivity need goes looking for.
+  The controls that live in the bar itself rather than on the page: the theme
+  switch, the language switcher and the login button. All of them are real
+  buttons, so they are reachable by keyboard - the theme switch in particular is
+  the first thing someone with a light-sensitivity need goes looking for.
 </p>
 
 <div class="mw-mt-6">
@@ -48,7 +48,194 @@
   </div>
 </div>
 
-<div class="mw-mt-6">
+<div class="mw-mt-7">
+  <h3 class="mw-mb-2">Language Switcher (on a fake header here)</h3>
+  <p class="mw-text-muted mw-text-measure">
+    A <code>.mw-dropdown</code> with a quieter trigger: no fill and no border
+    until you touch it, so the bar keeps two calm controls instead of a row of
+    buttons. The two-letter code is what states the current language - a flag is
+    a country, and no country stands for English. The flag is only what the eye
+    finds first. Picking one fires <code>mw-language-change</code> on the
+    switcher; loading the translations is the application's job.
+  </p>
+  <!-- Fake header -->
+  <div class="mw-mb-4" style="position: relative">
+    <div
+      class="mw-d-flex mw-justify-between mw-items-center mw-p-3"
+      style="
+        background: var(--mw-header-background);
+        border-bottom: 1px solid var(--mw-header-border);
+      "
+    >
+      <div class="mw-d-flex mw-items-center">
+        <div
+          style="
+            font-weight: bold;
+            font-size: 1.2rem;
+            color: var(--mw-header-text-color);
+          "
+        >
+          Your Logo
+        </div>
+      </div>
+      <div class="mw-d-flex mw-items-center mw-gap-5">
+        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
+        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
+        <details
+          class="mw-dropdown mw-dropdown-end mw-lang-switch mw-lang-switch-inverted"
+        >
+          <summary aria-label="Language: Deutsch">
+            <span class="mw-flag mw-flag-de"></span>
+            <span class="mw-lang-switch-code">de</span>
+            <i class="fas fa-chevron-down mw-dropdown-caret"></i>
+          </summary>
+          <div class="mw-dropdown-menu">
+            <button
+              type="button"
+              class="mw-dropdown-item mw-active"
+              aria-current="true"
+              data-mw-lang="de"
+            >
+              <span class="mw-flag mw-flag-de"></span>
+              <span class="mw-lang-switch-name" lang="de">Deutsch</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+            <button type="button" class="mw-dropdown-item" data-mw-lang="en">
+              <span class="mw-flag mw-flag-gb"></span>
+              <span class="mw-lang-switch-name" lang="en">English</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+            <button type="button" class="mw-dropdown-item" data-mw-lang="fr">
+              <span class="mw-flag mw-flag-fr"></span>
+              <span class="mw-lang-switch-name" lang="fr">Fran&ccedil;ais</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+            <button type="button" class="mw-dropdown-item" data-mw-lang="it">
+              <span class="mw-flag mw-flag-it"></span>
+              <span class="mw-lang-switch-name" lang="it">Italiano</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+            <button type="button" class="mw-dropdown-item" data-mw-lang="es">
+              <span class="mw-flag mw-flag-es"></span>
+              <span class="mw-lang-switch-name" lang="es">Espa&ntilde;ol</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+            <button type="button" class="mw-dropdown-item" data-mw-lang="pl">
+              <span class="mw-flag mw-flag-pl"></span>
+              <span class="mw-lang-switch-name" lang="pl">Polski</span>
+              <i class="fas fa-check mw-lang-switch-check"></i>
+            </button>
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+
+  <p class="mw-text-muted mw-text-measure">
+    The flags are drawn in CSS gradients, so they cost no request and no icon
+    font. Emoji were not an option: Windows ships no flag glyphs, and Chrome and
+    Edge render the German one as the two letters "DE" in a box. Anything not in
+    the set below takes an <code>&lt;img&gt;</code> or an inline
+    <code>&lt;svg&gt;</code> inside <code>.mw-flag</code>, which hands it the
+    same box, corner and hairline.
+  </p>
+  <div class="mw-d-flex mw-flex-wrap mw-gap-5 mw-mt-5">
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-de"></span>
+      <span class="mw-text-muted mw-text-sm">de</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-at"></span>
+      <span class="mw-text-muted mw-text-sm">at</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-ch"></span>
+      <span class="mw-text-muted mw-text-sm">ch</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-gb"></span>
+      <span class="mw-text-muted mw-text-sm">gb</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-us"></span>
+      <span class="mw-text-muted mw-text-sm">us</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-ie"></span>
+      <span class="mw-text-muted mw-text-sm">ie</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-fr"></span>
+      <span class="mw-text-muted mw-text-sm">fr</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-it"></span>
+      <span class="mw-text-muted mw-text-sm">it</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-es"></span>
+      <span class="mw-text-muted mw-text-sm">es</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-pt"></span>
+      <span class="mw-text-muted mw-text-sm">pt</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-nl"></span>
+      <span class="mw-text-muted mw-text-sm">nl</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-be"></span>
+      <span class="mw-text-muted mw-text-sm">be</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-pl"></span>
+      <span class="mw-text-muted mw-text-sm">pl</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-hu"></span>
+      <span class="mw-text-muted mw-text-sm">hu</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-ro"></span>
+      <span class="mw-text-muted mw-text-sm">ro</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-bg"></span>
+      <span class="mw-text-muted mw-text-sm">bg</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-ua"></span>
+      <span class="mw-text-muted mw-text-sm">ua</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-se"></span>
+      <span class="mw-text-muted mw-text-sm">se</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-dk"></span>
+      <span class="mw-text-muted mw-text-sm">dk</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-no"></span>
+      <span class="mw-text-muted mw-text-sm">no</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-fi"></span>
+      <span class="mw-text-muted mw-text-sm">fi</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-tr"></span>
+      <span class="mw-text-muted mw-text-sm">tr</span>
+    </span>
+    <span class="mw-d-flex mw-items-center mw-gap-2">
+      <span class="mw-flag mw-flag-jp"></span>
+      <span class="mw-text-muted mw-text-sm">jp</span>
+    </span>
+  </div>
+</div>
+
+<div class="mw-mt-7">
   <h3 class="mw-mb-2">Localhost Indicator (on a fake header here)</h3>
   <p class="mw-text-muted">
     This is what the localhost indicator looks like when it has been activated