maverick-wave 5.30.0 → 5.32.0

package/src/partials/grid-container.html

@@ -1,191 +0,0 @@
-<h3 class="mw-section-subtitle">Grid System</h3>
-
-<p class="mw-text-muted">
-  MaverickWave CSS framework provides a simple grid system that adapts to
-  different screen sizes, making responsive layouts simple to implement. It also
-  has an advanced grid system with custom column spans. Perfect for complex
-  layouts that need different column widths. Automatically stacks to single
-  column on mobile devices.
-</p>
-
-<h3 class="mw-mb-4">Grid with 1 Column</h3>
-<div class="mw-grid-1 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 2 Columns</h3>
-<div class="mw-grid-2 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 3 Columns</h3>
-<div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 4 Columns</h3>
-<div class="mw-grid-4 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 5 Columns</h3>
-<div class="mw-grid-5 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 4</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 5</div>
-</div>
-
-<h3 class="mw-mb-3">Flexible Grid with Column Spans</h3>
-<p class="mw-mb-2 mw-text-sm mw-text-muted">
-  12-column grid with custom spans: 2 columns + 4 columns + 1 column
-</p>
-<div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-2 mw-card mw-card-simple mw-corner-plain">
-    Span 2 Columns
-  </div>
-  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
-    Span 4 Columns
-  </div>
-  <div class="mw-col-span-1 mw-card mw-card-simple mw-corner-plain">1 col</div>
-</div>
-
-<h3 class="mw-mb-3">Mixed Column Spans</h3>
-<p class="mw-mb-2 mw-text-sm mw-text-muted">
-  Various column combinations: 3 + 6 + 3 columns
-</p>
-<div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
-    Span 3 Columns
-  </div>
-  <div class="mw-col-span-6 mw-card mw-card-simple mw-corner-plain">
-    Span 6 Columns (Main Content)
-  </div>
-  <div class="mw-col-span-3 mw-card mw-card-simple mw-corner-plain">
-    Span 3 Columns
-  </div>
-</div>
-
-<h3 class="mw-mb-3">Asymmetric Layout</h3>
-<p class="mw-mb-2 mw-text-sm mw-text-muted">
-  Sidebar + content layout: 4 + 8 columns
-</p>
-<div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
-    Sidebar (4 cols)
-  </div>
-  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
-    Main Content Area (8 cols)
-  </div>
-</div>
-
-<h3 class="mw-mb-3">Auto Grid (Responsive Card Layout)</h3>
-<p class="mw-mb-2 mw-text-sm mw-text-muted">
-  Perfect for unknown number of items. Cards maintain minimum 300px width and
-  automatically wrap to new rows. Great for product listings, galleries, or any
-  dynamic content.
-</p>
-<div class="mw-grid-auto-sm mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Product Card</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Service Card</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Team Member</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Portfolio Item</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Blog Post</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Feature</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 3 Columns - Default Spacing</h3>
-<div class="mw-grid-3 mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
-</div>
-
-<h3 class="mw-mb-4">Grid with 3 Columns - Large Spacing</h3>
-<div class="mw-grid-3-lg mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Column 3</div>
-</div>
-
-<h3 class="mw-mb-4">Flexible Grid - Default Spacing</h3>
-<div class="mw-grid-flex mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
-    4 Columns
-  </div>
-  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
-    8 Columns
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Flexible Grid - Large Spacing</h3>
-<div class="mw-grid-flex-lg mw-mb-6">
-  <div class="mw-col-span-4 mw-card mw-card-simple mw-corner-plain">
-    4 Columns
-  </div>
-  <div class="mw-col-span-8 mw-card mw-card-simple mw-corner-plain">
-    8 Columns
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Auto Grid - Large Spacing</h3>
-<div class="mw-grid-auto-lg mw-mb-6">
-  <div class="mw-card mw-card-simple mw-corner-plain">Auto 1</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Auto 2</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Auto 3</div>
-  <div class="mw-card mw-card-simple mw-corner-plain">Auto 4</div>
-</div>
-
-<h3 class="mw-mb-4">Grid Stack - Natural Width (Left Aligned)</h3>
-<div class="mw-grid-stack mw-mb-6">
-  <button class="mw-btn mw-btn-primary">Small Button</button>
-  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
-  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
-    Fixed Width Card
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Grid Stack - Centered</h3>
-<div class="mw-grid-stack-center mw-mb-6">
-  <button class="mw-btn mw-btn-primary">Small Button</button>
-  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
-  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
-    Fixed Width Card
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Grid Stack - Right Aligned</h3>
-<div class="mw-grid-stack-end mw-mb-6">
-  <button class="mw-btn mw-btn-primary">Small Button</button>
-  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
-  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 200px">
-    Fixed Width Card
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Grid Stack - Full Width (Same as Grid-1)</h3>
-<div class="mw-grid-stack-stretch mw-mb-6">
-  <button class="mw-btn mw-btn-primary">Small Button</button>
-  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
-  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
-  <div class="mw-card mw-card-simple mw-corner-plain">Full Width Card</div>
-</div>
-
-<h3 class="mw-mb-4">Grid Stack - Large Spacing & Centered</h3>
-<div class="mw-grid-stack-center-lg mw-mb-6">
-  <button class="mw-btn mw-btn-primary">Button 1</button>
-  <button class="mw-btn mw-btn-secondary">Button 2</button>
-  <div class="mw-card mw-card-simple mw-corner-plain" style="width: 300px">
-    Centered Card
-  </div>
-</div>

package/src/partials/header-container.html

@@ -1,69 +0,0 @@
-<div class="mw-logo">
-  <a href="#home">
-    <img src="header-logo.svg" alt="MaverickWave Logo" />
-  </a>
-</div>
-
-<div class="mw-header-actions">
-  <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>
-      </li>
-      <li class="mw-navbar-item">
-        <a href="#foundations" class="mw-navbar-link">Foundations</a>
-      </li>
-      <li class="mw-navbar-item">
-        <a href="#layout" class="mw-navbar-link">Layout</a>
-      </li>
-      <li class="mw-navbar-item">
-        <a href="#components" class="mw-navbar-link">Components</a>
-      </li>
-      <li class="mw-navbar-item">
-        <a href="#forms" class="mw-navbar-link">Forms</a>
-      </li>
-      <li class="mw-navbar-item">
-        <a href="#data-display" class="mw-navbar-link">Data & Display</a>
-      </li>
-    </ul>
-  </nav>
-
-  <!-- Theme Toggle -->
-  <button
-    type="button"
-    class="mw-theme-toggle mw-header-keep mw-ml-5"
-    aria-label="Toggle light and dark theme"
-  >
-    <div class="mw-theme-toggle-slider">
-      <div class="mw-theme-toggle-icon">
-        <i class="fas fa-moon"></i>
-      </div>
-    </div>
-  </button>
-
-  <!-- Palette Switcher, showcase only - the panel lives in palette-container -->
-  <!-- mw-header-keep like its neighbours: without it the button rides away with
-       the bar and leaves its 50px of space standing between the controls that
-       did stay -->
-  <button
-    type="button"
-    class="palette-toggle mw-header-keep"
-    id="palette-toggle"
-    aria-expanded="false"
-    aria-controls="palette-panel"
-    aria-label="Try another palette"
-  >
-    <i class="fas fa-palette"></i>
-  </button>
-
-  <!-- Burger Menu Button -->
-  <button
-    type="button"
-    class="mw-menu-btn mw-header-keep"
-    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,331 +0,0 @@
-<h3 class="mw-section-subtitle">Header Utilities</h3>
-<p class="mw-text-muted mw-text-measure">
-  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>
-  <h3 class="mw-mb-2">Color Switcher (on a fake header here)</h3>
-  <p class="mw-text-muted">
-    This one is not clickable - the real switcher sits in the header at the top
-    of the page.
-  </p>
-  <!-- Fake header -->
-  <div class="mw-mb-4" style="position: relative; overflow: hidden">
-    <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-6">
-        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
-        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
-        <a style="color: var(--mw-header-navbar-list-color)"> Contact </a>
-        <div class="mw-theme-toggle">
-          <div class="mw-theme-toggle-slider">
-            <div class="mw-theme-toggle-icon">
-              <i class="fas fa-moon"></i>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<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
-    (so that you can recognise in the header that you are currently working
-    locally)
-  </p>
-  <!-- Fake header -->
-  <div class="mw-mb-4" style="position: relative; overflow: hidden">
-    <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-localhost-indicator-pulse"></div>
-      <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-6">
-        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
-        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
-        <a style="color: var(--mw-header-navbar-list-color)"> Contact </a>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="mw-mt-6">
-  <h3 class="mw-mb-2">Profile Button (on a fake header here)</h3>
-  <p class="mw-text-muted">
-    Shows who is signed in: an avatar with initials plus the name. Below
-    <code>md</code> the name steps aside and only the round avatar remains, so
-    it keeps the same height as the login and burger buttons. Works outside a
-    header too - in a panel header or a toolbar.
-  </p>
-  <!-- Fake header -->
-  <div class="mw-mb-4" style="position: relative; overflow: hidden">
-    <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-4">
-        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
-        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
-        <button class="mw-profile-btn" type="button">
-          <span class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</span>
-          <span class="mw-profile-btn-name">Michael</span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <p class="mw-text-muted mw-text-sm">
-    Without initials it also takes an icon:
-  </p>
-  <div class="mw-mb-4" style="position: relative; overflow: hidden">
-    <div
-      class="mw-d-flex mw-justify-end mw-items-center mw-p-3"
-      style="
-        background: var(--mw-header-background);
-        border-bottom: 1px solid var(--mw-header-border);
-      "
-    >
-      <button class="mw-profile-btn" type="button">
-        <i class="fas fa-user-circle"></i>
-        <span class="mw-profile-btn-name">Michael</span>
-      </button>
-    </div>
-  </div>
-</div>

package/src/partials/highlights-container.html

@@ -1,71 +0,0 @@
-<div class="mw-section-head">
-  <h2 class="mw-section-head-title">Why MaverickWave</h2>
-  <p class="mw-section-head-intro">
-    Four decisions the framework has already made for you, so a page looks
-    finished on the first build - on a phone as much as on a desk.
-  </p>
-</div>
-
-<!-- mw-reveal-stagger: every card rises as it scrolls in, the second and
-     third of each row a beat later. One class on the grid, nothing per card -->
-<div class="mw-grid-4 mw-reveal-stagger">
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-moon"></i>
-      </div>
-      <h5 class="mw-card-stack-title">Dark mode, built in</h5>
-    </div>
-    <div class="mw-card-stack-body">
-      <p class="mw-card-stack-text">
-        One class on <code>body</code> flips every component. Switchable, or
-        fixed to one theme at build time.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-mobile-screen"></i>
-      </div>
-      <h5 class="mw-card-stack-title">Mobile first</h5>
-    </div>
-    <div class="mw-card-stack-body">
-      <p class="mw-card-stack-text">
-        Touch targets grow on a coarse pointer, modals turn into bottom sheets,
-        and nothing scrolls sideways.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-palette"></i>
-      </div>
-      <h5 class="mw-card-stack-title">One color, whole palette</h5>
-    </div>
-    <div class="mw-card-stack-body">
-      <p class="mw-card-stack-text">
-        Set <code>--mw-primary-color</code> and the hover tones, tints and
-        borders follow via <code>color-mix()</code>.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-bolt"></i>
-      </div>
-      <h5 class="mw-card-stack-title">No build step</h5>
-    </div>
-    <div class="mw-card-stack-body">
-      <p class="mw-card-stack-text">
-        Two files from the CDN and you are done. The SCSS sources are there when
-        you want <code>@use</code> level control.
-      </p>
-    </div>
-  </div>
-</div>