maverick-wave 3.10.0 → 4.0.0

package/src/partials/modals-container.html

@@ -67,7 +67,7 @@
     </div>
     <div class="mw-modal-body">
       <p class="mw-text-muted">
-        Max-width <strong>550px</strong>. The default size — fits most use
+        Max-width <strong>520px</strong>. The default size — fits most use
         cases.
       </p>
     </div>
@@ -100,7 +100,7 @@
     </div>
     <div class="mw-modal-body">
       <p class="mw-text-muted">
-        Max-width <strong>680px</strong>. More room for richer content or forms.
+        Max-width <strong>720px</strong>. More room for richer content or forms.
       </p>
     </div>
     <div class="mw-modal-footer">
@@ -126,7 +126,7 @@
     </div>
     <div class="mw-modal-body">
       <p class="mw-text-muted">
-        Max-width <strong>900px</strong>. Use for detail views, data tables, or
+        Max-width <strong>960px</strong>. Use for detail views, data tables, or
         complex layouts.
       </p>
     </div>
@@ -237,9 +237,9 @@
       <p class="mw-text-center">
         <strong>Are you sure you want to delete this item?</strong>
       </p>
-      <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
     </div>
     <div class="mw-modal-footer">
+      <p class="mw-actions-note">This action cannot be undone.</p>
       <button
         onclick="closeModal('modal-confirm')"
         class="mw-btn mw-btn-outline"
@@ -248,7 +248,7 @@
       </button>
       <button
         onclick="closeModal('modal-confirm')"
-        class="mw-btn mw-btn-secondary"
+        class="mw-btn mw-btn-danger"
       >
         Delete
       </button>

package/src/partials/pagination-container.html

@@ -1,27 +1,64 @@
 <h3 class="mw-section-subtitle">Simple Pagination</h3>
 <p class="mw-text-muted">
-  This is without functionality here - but you can easily use it with vanilla JS
-  or frameworks like Angular etc.
+  The same frame as a calendar - an arrow on each side of the title, content
+  below - but the body is yours. Not a page-number list; the paging itself is
+  your job, <code>mw-pagination-loading</code> dims the body while the next page
+  is on its way.
 </p>
 
-<div class="mw-pagination" id="weekPagination">
+<div class="mw-pagination mw-my-6" id="weekPagination">
   <div class="mw-pagination-header">
-    <button class="mw-pagination-nav" id="prevBtn" onclick="navigateWeek(-1)">
-      <i class="fas fa-arrow-left"></i>
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-pagination-nav"
+      data-pagination-nav="-1"
+      aria-label="Previous week"
+    >
+      <i class="fas fa-chevron-left"></i>
     </button>
 
-    <h3 class="mw-pagination-title" id="weekTitle">Week 10</h3>
+    <div class="mw-pagination-title" aria-live="polite">Week 10</div>
 
-    <button class="mw-pagination-nav" id="nextBtn" onclick="navigateWeek(1)">
-      <i class="fas fa-arrow-right"></i>
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline mw-btn-sm mw-pagination-nav"
+      data-pagination-nav="1"
+      aria-label="Next week"
+    >
+      <i class="fas fa-chevron-right"></i>
     </button>
   </div>
 
-  <div class="mw-pagination-content" id="weekContent">
-    <h4>Week 10 Content</h4>
-    <p>
-      This is the content for week 10. You can put any content here - text,
-      forms, images, etc.
+  <div class="mw-pagination-content">
+    <h4 class="mw-mb-2">Week 10 Content</h4>
+    <p class="mw-text-muted">
+      Put anything in here - text, a form, a table, a chart. The frame only
+      gives it a title and two arrows.
     </p>
   </div>
 </div>
+
+<script>
+  // Showcase only: the framework ships no pagination JS, this just proves the
+  // two arrows are ordinary buttons
+  (function () {
+    const pager = document.getElementById('weekPagination');
+    if (!pager) return;
+
+    const title = pager.querySelector('.mw-pagination-title');
+    const heading = pager.querySelector('.mw-pagination-content h4');
+    let week = 10;
+
+    pager.addEventListener('click', (event) => {
+      const nav = event.target.closest('[data-pagination-nav]');
+      if (!nav) return;
+
+      week = Math.min(
+        52,
+        Math.max(1, week + Number(nav.dataset.paginationNav))
+      );
+      title.textContent = 'Week ' + week;
+      heading.textContent = 'Week ' + week + ' Content';
+    });
+  })();
+</script>

package/src/partials/segmented-container.html

@@ -0,0 +1,66 @@
+<h3 class="mw-section-subtitle">Segmented Control</h3>
+
+<p class="mw-text-muted mw-mb-6">
+  Two or three positions of <em>one</em> switch - income or expense, offer or
+  quote. Deliberately not a <strong>mw-button-bar</strong>: that one stacks
+  below 576px and gives every button 96% width, which is right for a row of
+  independent actions and wrong here. Stacked, two positions of a switch look
+  like two buttons you could press both of. A segmented control stays horizontal
+  at every width and splits the row into equal shares.
+</p>
+
+<div class="mw-grid-2-lg">
+  <div>
+    <h3 class="mw-mb-4">Two Positions</h3>
+    <div class="mw-card mw-card-simple">
+      <label class="mw-field-label mw-d-block mw-mb-2">Booking type</label>
+      <div class="mw-segmented mw-mb-6">
+        <button type="button" class="mw-segmented-item mw-active">
+          <i class="fas fa-arrow-down"></i>
+          Income
+        </button>
+        <button type="button" class="mw-segmented-item">
+          <i class="fas fa-arrow-up"></i>
+          Expense
+        </button>
+      </div>
+
+      <label class="mw-field-label mw-d-block mw-mb-2">Document</label>
+      <div class="mw-segmented">
+        <button type="button" class="mw-segmented-item">Offer</button>
+        <button type="button" class="mw-segmented-item mw-active">Quote</button>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Three Positions & Variants</h3>
+    <div class="mw-card mw-card-simple">
+      <label class="mw-field-label mw-d-block mw-mb-2">Period</label>
+      <div class="mw-segmented mw-mb-6">
+        <button type="button" class="mw-segmented-item">Day</button>
+        <button type="button" class="mw-segmented-item mw-active">Week</button>
+        <button type="button" class="mw-segmented-item">Month</button>
+      </div>
+
+      <label class="mw-field-label mw-d-block mw-mb-2">
+        Secondary tone &ndash; <code>mw-segmented-secondary</code>
+      </label>
+      <div class="mw-segmented mw-segmented-secondary mw-mb-6">
+        <button type="button" class="mw-segmented-item mw-active">List</button>
+        <button type="button" class="mw-segmented-item">Grid</button>
+      </div>
+
+      <label class="mw-field-label mw-d-block mw-mb-2">
+        Inline &ndash; <code>mw-segmented-auto</code>
+      </label>
+      <div class="mw-segmented mw-segmented-auto">
+        <button type="button" class="mw-segmented-item mw-active">All</button>
+        <button type="button" class="mw-segmented-item">Open</button>
+        <button type="button" class="mw-segmented-item" disabled>
+          Archived
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/tables-container.html

@@ -15,7 +15,7 @@
           <th>Name</th>
           <th>Position</th>
           <th>Location</th>
-          <th class="mw-text-numeric">Budget</th>
+          <th class="mw-text-currency">Budget</th>
         </tr>
       </thead>
       <tbody>
@@ -24,31 +24,33 @@
           <td>John Doe</td>
           <td>Developer</td>
           <td>New York</td>
-          <td class="mw-text-numeric">1,204.50</td>
+          <td class="mw-text-currency">1,204.50</td>
         </tr>
         <tr>
           <td>2</td>
           <td>Jane Smith</td>
           <td>Designer</td>
           <td>London</td>
-          <td class="mw-text-numeric">87.00</td>
+          <td class="mw-text-currency">87.00</td>
         </tr>
         <tr>
           <td>3</td>
           <td>Bob Johnson</td>
           <td>Manager</td>
           <td>Berlin</td>
-          <td class="mw-text-numeric">15,930.25</td>
+          <td class="mw-text-currency">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>.
+      <strong>mw-text-currency</strong> &ndash; right-aligned with tabular,
+      lining digits and no wrapping mid-number. 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. If you only want the fixed-width digits without the
+      alignment, use <strong>mw-text-numeric</strong>. For the input side there
+      is <strong>mw-input-numeric</strong>.
     </p>
   </div>
 
@@ -111,7 +113,7 @@
             <th>#</th>
             <th>Name</th>
             <th>Position</th>
-            <th class="mw-text-numeric">Budget</th>
+            <th class="mw-text-currency">Budget</th>
           </tr>
         </thead>
         <tbody>
@@ -119,91 +121,161 @@
             <td>1</td>
             <td>John Doe</td>
             <td>Developer</td>
-            <td class="mw-text-numeric">12,400</td>
+            <td class="mw-text-currency">12,400</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jane Smith</td>
             <td>Designer</td>
-            <td class="mw-text-numeric">9,800</td>
+            <td class="mw-text-currency">9,800</td>
           </tr>
           <tr>
             <td>3</td>
             <td>Bob Johnson</td>
             <td>Manager</td>
-            <td class="mw-text-numeric">21,050</td>
+            <td class="mw-text-currency">21,050</td>
           </tr>
           <tr>
             <td>4</td>
             <td>Alice Brown</td>
             <td>Developer</td>
-            <td class="mw-text-numeric">11,300</td>
+            <td class="mw-text-currency">11,300</td>
           </tr>
           <tr>
             <td>5</td>
             <td>Charlie Davis</td>
             <td>Analyst</td>
-            <td class="mw-text-numeric">7,600</td>
+            <td class="mw-text-currency">7,600</td>
           </tr>
           <tr>
             <td>6</td>
             <td>Emma Wilson</td>
             <td>Designer</td>
-            <td class="mw-text-numeric">10,150</td>
+            <td class="mw-text-currency">10,150</td>
           </tr>
           <tr>
             <td>7</td>
             <td>Frank Miller</td>
             <td>Developer</td>
-            <td class="mw-text-numeric">13,900</td>
+            <td class="mw-text-currency">13,900</td>
           </tr>
           <tr>
             <td>8</td>
             <td>Grace Lee</td>
             <td>Manager</td>
-            <td class="mw-text-numeric">19,700</td>
+            <td class="mw-text-currency">19,700</td>
           </tr>
           <tr>
             <td>9</td>
             <td>Henry Clark</td>
             <td>Analyst</td>
-            <td class="mw-text-numeric">8,250</td>
+            <td class="mw-text-currency">8,250</td>
           </tr>
           <tr>
             <td>10</td>
             <td>Ivy Turner</td>
             <td>Developer</td>
-            <td class="mw-text-numeric">14,600</td>
+            <td class="mw-text-currency">14,600</td>
           </tr>
           <tr>
             <td>11</td>
             <td>Jack Morris</td>
             <td>Designer</td>
-            <td class="mw-text-numeric">9,400</td>
+            <td class="mw-text-currency">9,400</td>
           </tr>
           <tr>
             <td>12</td>
             <td>Karen Hall</td>
             <td>Manager</td>
-            <td class="mw-text-numeric">22,800</td>
+            <td class="mw-text-currency">22,800</td>
           </tr>
           <tr>
             <td>13</td>
             <td>Liam Scott</td>
             <td>Developer</td>
-            <td class="mw-text-numeric">12,950</td>
+            <td class="mw-text-currency">12,950</td>
           </tr>
           <tr>
             <td>14</td>
             <td>Mia Adams</td>
             <td>Analyst</td>
-            <td class="mw-text-numeric">7,900</td>
+            <td class="mw-text-currency">7,900</td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
 
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-2">Scroll Hint</h4>
+    <p class="mw-text-muted mw-mb-4">
+      <strong>mw-table-responsive-hint</strong> fades the right edge, so it is
+      visible that more columns are hiding behind it. The wrapper below is
+      capped at 520px to force the overflow; normally the viewport does that.
+    </p>
+
+    <div
+      class="mw-table-responsive mw-table-responsive-hint"
+      style="max-width: 520px"
+    >
+      <table class="mw-table mw-table-compact">
+        <thead>
+          <tr>
+            <th>Invoice</th>
+            <th>Customer</th>
+            <th>Issued</th>
+            <th>Due</th>
+            <th>Status</th>
+            <th class="mw-text-currency">Net</th>
+            <th class="mw-text-currency">VAT</th>
+            <th class="mw-text-currency">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>2026-0042</td>
+            <td>Fischer GmbH</td>
+            <td>19.08.2026</td>
+            <td>19.09.2026</td>
+            <td><span class="mw-tag mw-tag-warning">Open</span></td>
+            <td class="mw-text-currency">1,012.18</td>
+            <td class="mw-text-currency">192.32</td>
+            <td class="mw-text-currency">1,204.50</td>
+          </tr>
+          <tr>
+            <td>2026-0041</td>
+            <td>Wagner AG</td>
+            <td>12.08.2026</td>
+            <td>12.09.2026</td>
+            <td><span class="mw-tag mw-tag-success">Paid</span></td>
+            <td class="mw-text-currency">73.11</td>
+            <td class="mw-text-currency">13.89</td>
+            <td class="mw-text-currency">87.00</td>
+          </tr>
+          <tr>
+            <td>2026-0040</td>
+            <td>Schmidt &amp; Partner</td>
+            <td>02.08.2026</td>
+            <td>02.09.2026</td>
+            <td><span class="mw-tag mw-tag-neutral">XRechnung</span></td>
+            <td class="mw-text-currency">13,386.76</td>
+            <td class="mw-text-currency">2,543.49</td>
+            <td class="mw-text-currency">15,930.25</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p class="mw-text-muted mw-mt-3">
+      Opt-in, unlike the automatic hint on a tab bar, and by a different
+      mechanism: a table paints its own opaque surface, so the gradient trick
+      used there would sit behind the rows and never show. A mask sits in front
+      and does show - but a mask has no <code>local</code> attachment, so it
+      cannot fade away once the last column is reached. Put the class on the
+      tables you know overflow, leave it off the ones that fit.
+    </p>
+  </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

@@ -1,15 +1,23 @@
 <h3 class="mw-section-subtitle">Tabs</h3>
+<p class="mw-text-muted mw-mb-6">
+  A tab bar scrolls sideways when it runs out of room, and now it says so: a
+  shadow appears on whichever side still has tabs behind it, and disappears once
+  that end is reached. Four gradients, no scroll listener. The fade colour comes
+  from <code>--mw-scroll-hint-cover</code> and follows the surface - inside a
+  card it fades into the card, on the page into the page. Seven tabs on a phone
+  used to mean the seventh was simply never found.
+</p>
 
 <h3 class="mw-mb-4">Default Tabs</h3>
 <div class="mw-tabs mw-mb-6">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item active" data-tab="tab1">Features</div>
+    <div class="mw-tabs-nav-item mw-active" data-tab="tab1">Features</div>
     <div class="mw-tabs-nav-item" data-tab="tab2">Specifications</div>
     <div class="mw-tabs-nav-item" data-tab="tab3">Reviews</div>
     <div class="mw-tabs-nav-item" data-tab="tab4">Support</div>
   </div>
   <div class="mw-tabs-content">
-    <div class="mw-tabs-panel active" id="tab1">
+    <div class="mw-tabs-panel mw-active" id="tab1">
       <div class="mw-card mw-card-simple">
         <h4>Key Features</h4>
         <p>
@@ -81,13 +89,15 @@
 <h3 class="mw-mb-4">Vertical Tabs</h3>
 <div class="mw-tabs mw-tabs-vertical mw-mb-6">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item active" data-tab="vtab1">Getting Started</div>
+    <div class="mw-tabs-nav-item mw-active" data-tab="vtab1">
+      Getting Started
+    </div>
     <div class="mw-tabs-nav-item" data-tab="vtab2">Configuration</div>
     <div class="mw-tabs-nav-item" data-tab="vtab3">Customization</div>
     <div class="mw-tabs-nav-item" data-tab="vtab4">Best Practices</div>
   </div>
   <div class="mw-tabs-content">
-    <div class="mw-tabs-panel active" id="vtab1">
+    <div class="mw-tabs-panel mw-active" id="vtab1">
       <div class="mw-card mw-card-simple">
         <h4>Getting Started Guide</h4>
         <p>Begin by creating a new project folder:</p>
@@ -221,13 +231,13 @@ href="path/maverick-wave.min.css"&gt;</code></pre>
 <h3 class="mw-mb-4">Pills Style Tabs</h3>
 <div class="mw-tabs mw-tabs-pills">
   <div class="mw-tabs-nav">
-    <div class="mw-tabs-nav-item active" data-tab="ptab1">Dashboard</div>
+    <div class="mw-tabs-nav-item mw-active" data-tab="ptab1">Dashboard</div>
     <div class="mw-tabs-nav-item" data-tab="ptab2">Profile</div>
     <div class="mw-tabs-nav-item" data-tab="ptab3">Messages</div>
     <div class="mw-tabs-nav-item" data-tab="ptab4">Settings</div>
   </div>
   <div class="mw-tabs-content">
-    <div class="mw-tabs-panel active" id="ptab1">
+    <div class="mw-tabs-panel mw-active" id="ptab1">
       <div class="mw-card mw-card-simple">
         <h4>Dashboard Overview</h4>
         <p>

package/src/partials/tags-container.html

@@ -210,6 +210,21 @@
         <span class="mw-tag mw-tag-warning">Open</span>
         <span class="mw-tag mw-tag-danger">Cancelled</span>
         <span class="mw-tag mw-tag-muted">Draft</span>
+        <span class="mw-tag mw-tag-neutral">XRechnung</span>
+      </div>
+
+      <h5 class="mw-text-medium mw-mb-2">Neutral vs. Muted</h5>
+      <p class="mw-text-muted mw-text-sm mw-mb-3">
+        <strong>mw-tag-neutral</strong> is a plain identifier - a customer
+        number, a document type. <strong>mw-tag-muted</strong> means the label
+        steps back. On an invoice the difference carries real meaning:
+        &ldquo;XRechnung&rdquo; is a property, &ldquo;no e-invoice&rdquo; is a
+        shortcoming.
+      </p>
+      <div class="mw-d-flex mw-flex-wrap mw-gap-2 mw-mb-4">
+        <span class="mw-tag mw-tag-neutral">Customer 4711</span>
+        <span class="mw-tag mw-tag-neutral">XRechnung</span>
+        <span class="mw-tag mw-tag-muted">No e-invoice</span>
       </div>
 
       <h5 class="mw-text-medium mw-mb-2">Large</h5>

package/src/partials/timelines-container.html

@@ -5,7 +5,7 @@
   You can use every card within the timeline content wrapper.
 </p>
 <div class="mw-timeline-big mw-my-6">
-  <div class="mw-timeline-big-step active">
+  <div class="mw-timeline-big-step mw-active">
     <div class="mw-timeline-big-date-container">
       <div class="mw-timeline-big-date-main">01/2023 – Present</div>
     </div>
@@ -135,7 +135,7 @@
 </p>
 
 <div class="mw-timeline-simple mw-my-5">
-  <div class="mw-timeline-simple-step active">
+  <div class="mw-timeline-simple-step mw-active">
     <div class="mw-timeline-simple-date">2023-11-10</div>
     <div class="mw-timeline-simple-content">
       <div class="mw-card mw-card-simple">

package/src/partials/utilities-container.html

@@ -116,6 +116,87 @@
   </div>
 </div>
 
+<h3 class="mw-mb-4 mw-mt-6">Split Rows</h3>
+<p class="mw-text-muted">
+  The most common row in any interface: what it is on the left, the value or the
+  action on the right. <code>mw-row-split</code> wraps, so on a narrow screen
+  the right half drops below instead of squashing the left one.
+  <code>mw-row-split-center</code> switches from baseline to center alignment,
+  for a row that mixes text with a button or an icon.
+</p>
+<div class="mw-grid-2-lg">
+  <div class="mw-card mw-card-simple">
+    <div class="mw-row-split mw-mb-4">
+      <strong>Invoice 2026-0042</strong>
+      <span class="mw-text-currency">1,204.50</span>
+    </div>
+    <div class="mw-row-split mw-mb-4">
+      <span class="mw-text-muted">Due date</span>
+      <span>19.09.2026</span>
+    </div>
+    <div class="mw-row-split">
+      <span class="mw-text-muted">Status</span>
+      <span class="mw-tag mw-tag-neutral">XRechnung</span>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple">
+    <div class="mw-row-split mw-row-split-center mw-mb-4">
+      <h4>Team members</h4>
+      <button type="button" class="mw-btn mw-btn-sm mw-btn-primary">
+        <i class="fas fa-plus"></i>
+        Add
+      </button>
+    </div>
+    <div class="mw-row-split mw-row-split-center">
+      <span><i class="fas fa-user mw-mr-2"></i>Alex Fischer</span>
+      <button
+        type="button"
+        class="mw-btn-mini mw-btn-mini-danger"
+        aria-label="Remove Alex Fischer"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mb-4 mw-mt-6">Numbers</h3>
+<p class="mw-text-muted">
+  <code>mw-text-numeric</code> gives fixed-width digits and nothing else - for a
+  clock, a counter or an ID that must not jitter while it changes.
+  <code>mw-text-currency</code> adds right alignment and prevents wrapping
+  mid-number, which is what a money column in a table wants.
+</p>
+<div class="mw-card mw-card-simple">
+  <div class="mw-row-split mw-mb-4">
+    <span>Elapsed <code>mw-text-numeric</code></span>
+    <span class="mw-text-numeric">00:11:38</span>
+  </div>
+  <div class="mw-row-split">
+    <span>Total <code>mw-text-currency</code></span>
+    <span class="mw-text-currency">15,930.25</span>
+  </div>
+</div>
+
+<h3 class="mw-mb-4 mw-mt-6">Screen Reader Only</h3>
+<p class="mw-text-muted">
+  <code>mw-sr-only</code> hides text visually but keeps it in the accessibility
+  tree - the label an icon-only button still owes its user.
+  <code>display: none</code> would not do: it drops the element out of that tree
+  as well. The two buttons below look identical; only one of them says what it
+  does.
+</p>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-items-center mw-gap-4">
+    <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
+      <i class="fas fa-trash"></i>
+      <span class="mw-sr-only">Delete invoice 2026-0042</span>
+    </button>
+    <code>&lt;span class="mw-sr-only"&gt;Delete invoice&lt;/span&gt;</code>
+  </div>
+</div>
+
 <h3 class="mw-mb-4 mw-mt-6">Tooltips</h3>
 <p class="mw-text-muted">
   Put <code>data-tooltip="..."</code> on any element - pure CSS, no script

package/src/scss/abstracts/_mixins.scss

@@ -43,3 +43,37 @@
     @content;
   }
 }
+
+// Scroll hint for a horizontally scrollable strip - a tab bar, a wide table.
+//
+// Four gradient layers in two pairs. The cover pair is attached to the content
+// (`local`) and therefore scrolls out of the way once that edge is reached;
+// the shadow pair stays on the frame (`scroll`). Net effect: a shadow shows
+// only on the side that still has something hidden behind it. No JavaScript,
+// no scroll listener.
+//
+// The cover has to match whatever the strip sits on, which is why it reads a
+// token: preset to the page, re-pointed inside cards, panels and modals.
+@mixin scroll-hint {
+  background-image:
+    linear-gradient(
+      to right,
+      var(--mw-scroll-hint-cover, var(--mw-page-background)) 20%,
+      transparent
+    ),
+    linear-gradient(
+      to left,
+      var(--mw-scroll-hint-cover, var(--mw-page-background)) 20%,
+      transparent
+    ),
+    linear-gradient(to right, var(--mw-shadow), transparent),
+    linear-gradient(to left, var(--mw-shadow), transparent);
+  background-position: left, right, left, right;
+  background-repeat: no-repeat;
+  background-size:
+    2.5rem 100%,
+    2.5rem 100%,
+    0.9rem 100%,
+    0.9rem 100%;
+  background-attachment: local, local, scroll, scroll;
+}