maverick-wave 3.3.0 → 3.3.2

package/src/partials/documentation-container.html

@@ -132,6 +132,9 @@
       <a href="#data-display">Data & Display</a>
     </li>
     <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#page-header">Page Header</a>
+      </li>
       <li>
         <a href="#meta-info">Meta Info</a>
       </li>

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

@@ -72,25 +72,29 @@
     </div>
   </div>
 
-  <!-- RIGHT: Angular validation simulation + readonly -->
+  <!-- RIGHT: error, single-control error, readonly, disabled -->
   <div>
     <h3 class="mw-card-title mw-mb-4">Validation & Readonly States</h3>
     <div class="mw-card mw-card-simple">
       <p class="mw-text-muted mw-text-sm mw-mb-4">
-        Angular adds <code>.ng-invalid.ng-touched</code> and
-        <code>.ng-valid.ng-touched.ng-dirty</code>
-        automatically. The styles below are applied by the framework.
+        The error look is not automatic: bind
+        <code>mw-field-has-error</code> to the control state (in Angular
+        <code>[class.mw-field-has-error]="c.invalid &amp;&amp; c.touched"</code
+        >). A control without a field wrapper &mdash; also a
+        <code>mw-checkbox-group</code>, <code>mw-radio-group</code> or
+        <code>mw-slider-container</code> &mdash; takes
+        <code>mw-form-element-error</code> instead.
       </p>
 
-      <!-- Simulated ng-invalid ng-touched -->
-      <div class="mw-field mw-mb-4">
+      <!-- Field wrapper in error state -->
+      <div class="mw-field mw-field-has-error mw-mb-4">
         <label class="mw-field-label mw-required" for="ff-username"
           >Username (invalid &amp; touched)</label
         >
         <input
           id="ff-username"
           type="text"
-          class="mw-input ng-invalid ng-touched"
+          class="mw-input"
           value=""
           placeholder="Required"
         />
@@ -99,18 +103,18 @@
         </span>
       </div>
 
-      <!-- Simulated ng-valid ng-touched ng-dirty -->
+      <!-- Single control without a wrapper -->
       <div class="mw-field mw-mb-4">
         <label class="mw-field-label mw-required" for="ff-password"
-          >Password (valid &amp; dirty)</label
+          >Password (single control error)</label
         >
         <input
           id="ff-password"
           type="password"
-          class="mw-input ng-valid ng-touched ng-dirty"
-          value="secret123"
+          class="mw-input mw-form-element-error"
+          value="123"
         />
-        <span class="mw-field-hint">Looks good!</span>
+        <span class="mw-field-hint">At least 8 characters.</span>
       </div>
 
       <!-- Readonly -->

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

@@ -97,8 +97,10 @@
         </p>
         <p>
           MaverickWave uses <code>@use</code> / <code>@forward</code> (modern
-          Sass module syntax). Override Sass variables <em>before</em> importing
-          the framework.
+          Sass module syntax). Pass your overrides through
+          <code>@use ... with (...)</code> &mdash; a plain assignment before the
+          <code>@use</code> has no effect, because the root colors are declared
+          with <code>!default</code>.
         </p>
 
         <h5 class="mw-mt-4">Theme Mode</h5>
@@ -120,26 +122,58 @@
         <h5 class="mw-mt-4">Example — your main SCSS file</h5>
         <pre class="mw-code-block"><code>// styles.scss
 
-// 1. Theme mode (optional, default is 'switchable')
-$mw-theme-mode: 'switchable';
+@use 'path/to/maverick-wave/src/scss/main' with (
+  // Theme mode (optional, default is 'switchable')
+  $mw-theme-mode: 'switchable',
 
-// 2. Override base color variables
-$primary-color: #e94560;
-$secondary-color: #f39c12;
+  // Root colors — everything else is derived from them at runtime
+  $primary-color: #e94560,
+  $secondary-color: #f39c12,
+  $dark-background: #1f1f2e,
+  $light-background: #f8f9fa,
+  $dark-text-color: #ffffff,
+  $light-text-color: #1c1c1c
+);
 
-// 3. Override background / text colors
-$dark-background: #1f1f2e;
-$light-background: #f8f9fa;
-$dark-text-color: #ffffff;
-$light-text-color: #1c1c1c;
-
-// 4. Import the framework (adjust path as needed)
-@use 'path/to/maverick-wave/src/scss/main';
-
-// 5. Your additional styles
+// Your additional styles
 body {
   // custom overrides
 }</code></pre>
+
+        <h5 class="mw-mt-4">Importing Only What You Need</h5>
+        <p>
+          Every layer forwards one module per file and no
+          <code>@extend</code> crosses a file boundary, so components can be
+          imported individually. Applications usually have no use for the
+          marketing components (<code>blog-post</code>, <code>gallery</code>,
+          <code>content-slider</code>, <code>techstack-bucket</code>,
+          <code>tiles</code>, <code>coming-soon</code>, <code>ratings</code>,
+          <code>home</code>).
+        </p>
+        <pre
+          class="mw-code-block"
+        ><code>// styles.scss — the configuration has to come first
+@use 'maverick-wave/src/scss/abstracts/variables' with (
+  $primary-color: #0f766e
+);
+
+@use 'maverick-wave/src/scss/base'; // required — carries the :root tokens
+@use 'maverick-wave/src/scss/layout/grid';
+@use 'maverick-wave/src/scss/layout/page-header';
+@use 'maverick-wave/src/scss/components/buttons';
+@use 'maverick-wave/src/scss/components/cards';
+@use 'maverick-wave/src/scss/components/modals';
+@use 'maverick-wave/src/scss/components/tables';
+@use 'maverick-wave/src/scss/components/tags';
+@use 'maverick-wave/src/scss/form-elements';
+@use 'maverick-wave/src/scss/utilities';</code></pre>
+        <p class="mw-text-warning">
+          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
+          Without <code>base</code> every component renders without colors — it
+          carries the <code>:root</code> custom properties. A subset like the
+          one above compiles to roughly 98 kB raw / 15 kB gzipped, against 147
+          kB / 22.5 kB for the full build.
+        </p>
       </div>
     </div>
 
@@ -156,10 +190,18 @@ body {
 "styles": [
   "src/assets/maverick-wave.min.css",
   "src/styles.scss"
-],
-"scripts": [
-  "src/assets/maverick-wave.min.js"
 ]</code></pre>
+        <p class="mw-text-warning">
+          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
+          <strong>No <code>"scripts"</code> entry for the JS file.</strong>
+          <code>maverick-wave.min.js</code> wires everything up once on
+          <code>DOMContentLoaded</code> and writes straight into the DOM &mdash;
+          in a SPA everything rendered afterwards stays uninitialized, and the
+          class toggles happen behind change detection. Rebuild the behaviors in
+          components; the state classes (<code>active</code>, <code>open</code>,
+          <code>mw-modal-open</code>, <code>mw-selected</code>) are the whole
+          contract.
+        </p>
         <p>
           Alternatively, use the CDN link directly in
           <code>src/index.html</code>:
@@ -167,23 +209,35 @@ body {
         <pre class="mw-code-block"><code>&lt;link rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/maverick-wave@{{VERSION}}/maverick-wave.min.css"&gt;</code></pre>
         <p>
-          For SCSS integration, copy the <code>src/scss/</code> source into your
-          project and import it from <code>src/styles.scss</code>:
+          For SCSS integration, use the npm package (or a local copy of
+          <code>src/scss/</code>) from <code>src/styles.scss</code>:
         </p>
         <pre class="mw-code-block"><code>// src/styles.scss
-$primary-color: #3f51b5;
-$mw-theme-mode: 'switchable';
-
-@use 'maverick-wave/src/scss/main';</code></pre>
+@use 'maverick-wave/src/scss/main' with (
+  $primary-color: #3f51b5,
+  $mw-theme-mode: 'switchable'
+);</code></pre>
         <h5 class="mw-mt-4">Theme switching</h5>
-        <pre class="mw-code-block"><code>// app.component.ts
-toggleTheme() {
-  document.body.classList.toggle('mw-theme-light');
+        <p>
+          Light mode is one class on <code>&lt;body&gt;</code>. Keep it in a
+          service so the choice survives navigation:
+        </p>
+        <pre class="mw-code-block"><code>// theme.service.ts
+readonly light = signal(localStorage.getItem('mw-theme') === 'light');
+
+constructor() {
+  effect(() =&gt; {
+    const light = this.light();
+    document.body.classList.toggle('mw-theme-light', light);
+    localStorage.setItem('mw-theme', light ? 'light' : 'dark');
+  });
 }</code></pre>
         <h5 class="mw-mt-4">Reactive Forms</h5>
         <p>
-          MaverickWave automatically styles Angular form state classes. Use the
-          <code>mw-field</code> wrapper pattern:
+          The <code>mw-field</code> wrapper groups label, control, hint and
+          error. Bind the error state yourself &mdash; the framework does not
+          style Angular's <code>ng-invalid</code> / <code>ng-touched</code>
+          classes:
         </p>
         <pre
           class="mw-code-block"
@@ -206,10 +260,14 @@ toggleTheme() {
           use the CDN link in <code>index.html</code>:
         </p>
         <pre class="mw-code-block"><code>// main.jsx / index.js
-import './assets/maverick-wave.min.css';
-
-// If you need the JS functionality (accordion, tabs, etc.)
-import './assets/maverick-wave.min.js';</code></pre>
+import './assets/maverick-wave.min.css';</code></pre>
+        <p class="mw-text-warning">
+          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
+          Do not import <code>maverick-wave.min.js</code> in a SPA &mdash; it
+          binds once on <code>DOMContentLoaded</code> and never sees anything
+          rendered later. Accordion, tabs, modal and theme toggle are class
+          toggles; bind them with <code>className</code> from state.
+        </p>
         <p>Example usage in a React component:</p>
         <pre class="mw-code-block"><code>function App() {
   return (

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

@@ -11,8 +11,8 @@
     <div
       class="mw-d-flex mw-justify-between mw-items-center mw-p-3"
       style="
-        background: rgb(12, 17, 30);
-        border-bottom: 1px solid var(--mw-primary-color-hover);
+        background: var(--mw-header-background);
+        border-bottom: 1px solid var(--mw-header-border);
       "
     >
       <div class="mw-d-flex mw-items-center">
@@ -20,7 +20,7 @@
           style="
             font-weight: bold;
             font-size: 1.2rem;
-            color: var(--mw-header-burgerbutton-color);
+            color: var(--mw-header-text-color);
           "
         >
           Your Logo
@@ -54,8 +54,8 @@
     <div
       class="mw-d-flex mw-justify-between mw-items-center mw-p-3"
       style="
-        background: rgb(12, 17, 30);
-        border-bottom: 1px solid var(--mw-primary-color-hover);
+        background: var(--mw-header-background);
+        border-bottom: 1px solid var(--mw-header-border);
       "
     >
       <div class="mw-localhost-indicator-pulse"></div>
@@ -64,7 +64,7 @@
           style="
             font-weight: bold;
             font-size: 1.2rem;
-            color: var(--mw-header-burgerbutton-color);
+            color: var(--mw-header-text-color);
           "
         >
           Your Logo
@@ -78,3 +78,61 @@
     </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 &mdash; 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/input-group-container.html

@@ -44,9 +44,11 @@
           ></span>
           <input
             id="ig-price"
-            type="number"
-            class="mw-input"
-            placeholder="0.00"
+            type="text"
+            inputmode="decimal"
+            class="mw-input mw-input-numeric"
+            placeholder="0,00"
+            value="1.204,50"
           />
           <span class="mw-input-group-suffix">EUR</span>
         </div>

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

@@ -0,0 +1,78 @@
+<h3 class="mw-section-subtitle">Page Header</h3>
+
+<p class="mw-text-muted mw-mb-6">
+  The start of a content page: title and subtitle on the left, actions on the
+  right, wrapping when it gets tight. The counterpart to
+  <code>mw-section-title</code>, which is centered and decorated and belongs on
+  a landing page.
+</p>
+
+<div class="mw-grid-1">
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-4">With Actions</h4>
+    <header class="mw-page-header">
+      <div>
+        <h2>Blog Posts</h2>
+        <p>14 entries &middot; 3 drafts</p>
+      </div>
+      <div class="mw-page-header-actions">
+        <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
+          <i class="fas fa-filter"></i>
+          Filter
+        </button>
+        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+          <i class="fas fa-plus"></i>
+          New Post
+        </button>
+      </div>
+    </header>
+    <p class="mw-text-muted">Page content follows here.</p>
+  </div>
+
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-4">Combined with Meta Info</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-3">
+      The counters fit naturally underneath the title instead of a subtitle
+      line.
+    </p>
+    <header class="mw-page-header">
+      <div>
+        <h2>Blog Posts</h2>
+        <div class="mw-meta-header">
+          <div class="mw-meta-item">
+            <i class="fas fa-list"></i>
+            <span>Amount: 14</span>
+          </div>
+          <div class="mw-meta-item">
+            <i class="fas fa-pen"></i>
+            <span>Drafts: 3</span>
+          </div>
+          <div class="mw-meta-item">
+            <i class="fas fa-eye"></i>
+            <span>Published: 11</span>
+          </div>
+        </div>
+      </div>
+      <div class="mw-page-header-actions">
+        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+          <i class="fas fa-plus"></i>
+          New Post
+        </button>
+      </div>
+    </header>
+  </div>
+
+  <div class="mw-card mw-card-simple">
+    <h4 class="mw-mb-4">Without a Separator</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-3">
+      <code>mw-page-header-plain</code> drops the bottom rule for pages that
+      bring their own.
+    </p>
+    <header class="mw-page-header mw-page-header-plain">
+      <div>
+        <h2>Settings</h2>
+        <p>Manage your account</p>
+      </div>
+    </header>
+  </div>
+</div>

package/src/partials/tables-container.html

@@ -15,6 +15,8 @@
           <th>Name</th>
           <th>Position</th>
           <th>Location</th>
+          <th>Status</th>
+          <th class="mw-text-numeric">Budget</th>
         </tr>
       </thead>
       <tbody>
@@ -23,21 +25,35 @@
           <td>John Doe</td>
           <td>Developer</td>
           <td>New York</td>
+          <td><span class="mw-tag mw-tag-success">Active</span></td>
+          <td class="mw-text-numeric">1,204.50</td>
         </tr>
         <tr>
           <td>2</td>
           <td>Jane Smith</td>
           <td>Designer</td>
           <td>London</td>
+          <td><span class="mw-tag mw-tag-warning">Pending</span></td>
+          <td class="mw-text-numeric">87.00</td>
         </tr>
         <tr>
           <td>3</td>
           <td>Bob Johnson</td>
           <td>Manager</td>
           <td>Berlin</td>
+          <td><span class="mw-tag mw-tag-muted">Draft</span></td>
+          <td class="mw-text-numeric">15,930.25</td>
         </tr>
       </tbody>
     </table>
+    <p class="mw-text-muted mw-mt-3">
+      The <strong>Budget</strong> column uses
+      <strong>mw-text-numeric</strong> &ndash; right-aligned with tabular,
+      lining digits. The alignment comes from the right edge, so it works the
+      same for <code>1,204.50</code> and <code>1.204,50</code>; only the number
+      of decimal places has to be consistent per column. For the input side
+      there is <strong>mw-input-numeric</strong>.
+    </p>
   </div>
 
   <div class="mw-card mw-card-simple mw-mb-6">
@@ -78,6 +94,120 @@
     </table>
   </div>
 
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-2">Subtle Header &amp; Sticky Header</h4>
+    <p class="mw-text-muted">
+      <code>mw-table-subtle</code> keeps the header quiet - a full primary bar
+      across every column shouts louder than the data it labels.
+      <code>mw-table-sticky-head</code> keeps it visible while the body scrolls;
+      it needs a scroll container with a height limit, which
+      <code>mw-table-responsive-scroll</code> provides. Scroll inside the table
+      to see it. Its height comes from
+      <code>--mw-table-scroll-height</code> (400px, 260px below <code>sm</code>)
+      &mdash; override it per table with
+      <code>style="--mw-table-scroll-height: 250px"</code>.
+    </p>
+
+    <div class="mw-table-responsive-scroll">
+      <table class="mw-table mw-table-subtle mw-table-sticky-head">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Position</th>
+            <th class="mw-text-numeric">Budget</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>John Doe</td>
+            <td>Developer</td>
+            <td class="mw-text-numeric">12,400</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jane Smith</td>
+            <td>Designer</td>
+            <td class="mw-text-numeric">9,800</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Bob Johnson</td>
+            <td>Manager</td>
+            <td class="mw-text-numeric">21,050</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>Alice Brown</td>
+            <td>Developer</td>
+            <td class="mw-text-numeric">11,300</td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>Charlie Davis</td>
+            <td>Analyst</td>
+            <td class="mw-text-numeric">7,600</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>Emma Wilson</td>
+            <td>Designer</td>
+            <td class="mw-text-numeric">10,150</td>
+          </tr>
+          <tr>
+            <td>7</td>
+            <td>Frank Miller</td>
+            <td>Developer</td>
+            <td class="mw-text-numeric">13,900</td>
+          </tr>
+          <tr>
+            <td>8</td>
+            <td>Grace Lee</td>
+            <td>Manager</td>
+            <td class="mw-text-numeric">19,700</td>
+          </tr>
+          <tr>
+            <td>9</td>
+            <td>Henry Clark</td>
+            <td>Analyst</td>
+            <td class="mw-text-numeric">8,250</td>
+          </tr>
+          <tr>
+            <td>10</td>
+            <td>Ivy Turner</td>
+            <td>Developer</td>
+            <td class="mw-text-numeric">14,600</td>
+          </tr>
+          <tr>
+            <td>11</td>
+            <td>Jack Morris</td>
+            <td>Designer</td>
+            <td class="mw-text-numeric">9,400</td>
+          </tr>
+          <tr>
+            <td>12</td>
+            <td>Karen Hall</td>
+            <td>Manager</td>
+            <td class="mw-text-numeric">22,800</td>
+          </tr>
+          <tr>
+            <td>13</td>
+            <td>Liam Scott</td>
+            <td>Developer</td>
+            <td class="mw-text-numeric">12,950</td>
+          </tr>
+          <tr>
+            <td>14</td>
+            <td>Mia Adams</td>
+            <td>Analyst</td>
+            <td class="mw-text-numeric">7,900</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
   <div class="mw-card mw-card-simple">
     <h4 class="mw-mb-2">Responsive Table</h4>
     <p class="mw-text-muted">

package/src/partials/tabs-container.html

@@ -127,9 +127,10 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
           <li><code>'dark'</code>: Compiles only dark theme styles.</li>
           <li><code>'light'</code>: Compiles only light theme styles.</li>
         </ul>
-        <pre class="mw-code-block"><code>// Your main.scss
-$mw-theme-mode: 'switchable'; // Or 'dark', 'light'    
-@import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <pre class="mw-code-block"><code>// Your styles.scss
+@use 'path/to/maverick-wave/src/scss/main' with (
+  $mw-theme-mode: 'switchable' // Or 'dark', 'light'
+);</code></pre>
         <p class="mw-text-warning mw-mt-2">
           <i class="fas fa-exclamation-triangle mw-mr-1"></i>
           Note: The main header/navigation currently retains its default dark
@@ -165,26 +166,29 @@ $mw-theme-mode: 'switchable'; // Or 'dark', 'light'
 
         <h5 class="mw-mt-4 mw-mb-2">Method 2: SCSS Variable Overrides</h5>
         <p>
-          Requires a Sass build process. Define overrides in your main SCSS file
-          <em>before</em> importing MaverickWave:
+          Requires a Sass build process. Pass the overrides through
+          <code>@use ... with (...)</code>:
         </p>
-        <pre class="mw-code-block"><code>// your-main.scss
-$primary-color: #e94560;
-$font-family: 'Your Custom Font', sans-serif;
-// ... other overrides ...
-    
-@import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <pre class="mw-code-block"><code>// your-styles.scss
+@use 'path/to/maverick-wave/src/scss/main' with (
+  $primary-color: #e94560,
+  $secondary-color: #f39c12
+  // ... other root colors ...
+);</code></pre>
         <p>
-          This method allows framework-internal calculations (like derived alert
-          backgrounds) to use your custom base colors.
+          Both methods end up at the same place: the derived tones (hover
+          colors, translucent backgrounds, borders) are calculated at runtime
+          with <code>color-mix()</code>, so a single root color is enough.
         </p>
 
         <h5 class="mw-mt-4 mw-mb-2">Adding Custom Fonts</h5>
         <p>
           Remember to load custom fonts using <code>@font-face</code> rules in
-          your CSS/SCSS before applying them via the
-          <code>--mw-font-family-base</code> or
-          <code>$font-family</code> variable.
+          your CSS/SCSS before assigning them to
+          <code>--mw-font-family-base</code> (and
+          <code>--mw-font-family-heading</code> /
+          <code>--mw-font-family-mono</code>). The framework bundles no font and
+          falls back to a system stack.
         </p>
         <p class="mw-mt-4">
           <button