maverick-wave 5.30.0 → 5.32.0

package/src/partials/tables-container.html

@@ -1,309 +0,0 @@
-<h3 class="mw-section-subtitle">Tables</h3>
-<p class="mw-text-muted mw-text-measure">
-  Rows for data that has columns. On a phone a wide table either scrolls inside
-  its own frame or turns each row into a card -
-  <code>mw-table-responsive</code> for the first,
-  <code>mw-table-cards</code> for the second. The compact variant is for the
-  tables that hold a screenful at a time.
-</p>
-
-<div class="mw-grid-1">
-  <div class="mw-card mw-card-simple mw-mb-6">
-    <h4 class="mw-mb-2">Basic Table</h4>
-    <p class="mw-text-muted">
-      This is the basic table that supports all functions except the complete
-      responsive feeling with the cards - five columns do not fit a phone, so it
-      sits in a <code>mw-table-responsive</code> wrapper.
-      <code>mw-table-compact</code> is the same table with less spacing and
-      smaller type.
-    </p>
-
-    <div class="mw-segmented mw-mb-4" data-modifier-demo="table-demo">
-      <button
-        type="button"
-        class="mw-segmented-item mw-active"
-        data-modifier=""
-      >
-        Default
-      </button>
-      <button
-        type="button"
-        class="mw-segmented-item"
-        data-modifier="mw-table-compact"
-      >
-        Compact
-      </button>
-    </div>
-
-    <div class="mw-table-responsive">
-      <table class="mw-table" id="table-demo">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Name</th>
-            <th>Position</th>
-            <th>Location</th>
-            <th class="mw-text-currency">Budget</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>Mara Kessler</td>
-            <td>Developer</td>
-            <td>New York</td>
-            <td class="mw-text-currency">1,204.50</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>Tom Aldridge</td>
-            <td>Designer</td>
-            <td>London</td>
-            <td class="mw-text-currency">87.00</td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>Jonas Reuter</td>
-            <td>Manager</td>
-            <td>Berlin</td>
-            <td class="mw-text-currency">15,930.25</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <p class="mw-text-muted mw-mt-3">
-      The <strong>Budget</strong> column uses
-      <strong>mw-text-currency</strong> - 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>
-
-  <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>)
-      - 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-currency">Budget</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>Mara Kessler</td>
-            <td>Developer</td>
-            <td class="mw-text-currency">12,400</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>Tom Aldridge</td>
-            <td>Designer</td>
-            <td class="mw-text-currency">9,800</td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>Jonas Reuter</td>
-            <td>Manager</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-currency">11,300</td>
-          </tr>
-          <tr>
-            <td>5</td>
-            <td>Charlie Davis</td>
-            <td>Analyst</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-currency">10,150</td>
-          </tr>
-          <tr>
-            <td>7</td>
-            <td>Frank Miller</td>
-            <td>Developer</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-currency">19,700</td>
-          </tr>
-          <tr>
-            <td>9</td>
-            <td>Henry Clark</td>
-            <td>Analyst</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-currency">14,600</td>
-          </tr>
-          <tr>
-            <td>11</td>
-            <td>Jack Morris</td>
-            <td>Designer</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-currency">22,800</td>
-          </tr>
-          <tr>
-            <td>13</td>
-            <td>Liam Scott</td>
-            <td>Developer</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-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">
-      This is the same table but with cards for smaller screens
-    </p>
-
-    <div class="mw-table-responsive">
-      <table class="mw-table mw-table-cards">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Name</th>
-            <th>Position</th>
-            <th>Location</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td data-label="#">1</td>
-            <td data-label="Name">Mara Kessler</td>
-            <td data-label="Position">Developer</td>
-            <td data-label="Location">New York</td>
-          </tr>
-          <tr>
-            <td data-label="#">2</td>
-            <td data-label="Name">Tom Aldridge</td>
-            <td data-label="Position">Designer</td>
-            <td data-label="Location">London</td>
-          </tr>
-          <tr>
-            <td data-label="#">3</td>
-            <td data-label="Name">Jonas Reuter</td>
-            <td data-label="Position">Manager</td>
-            <td data-label="Location">Berlin</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>

package/src/partials/tabs-container.html

@@ -1,290 +0,0 @@
-<h3 class="mw-section-subtitle">Tabs</h3>
-<p class="mw-text-muted">
-  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">
-    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="tab1">
-      Features
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="tab2">
-      Specifications
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="tab3">
-      Reviews
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="tab4">
-      Support
-    </button>
-  </div>
-  <div class="mw-tabs-content">
-    <div class="mw-tabs-panel mw-active" id="tab1">
-      <div class="mw-card mw-card-simple">
-        <h4>Key Features</h4>
-        <p>What you get once the two files are on the page:</p>
-        <ul>
-          <li>A grid that collapses to one column on a phone</li>
-          <li>48 components, all on the same tokens</li>
-          <li>Dark and light theme, switched by one class on the body</li>
-          <li>Utility classes for spacing, flex and display</li>
-          <li>Form controls that share one height scale</li>
-        </ul>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="tab2">
-      <div class="mw-card mw-card-simple">
-        <h4>Technical Specifications</h4>
-        <p>
-          MaverickWave CSS framework is built with modern web standards in mind:
-        </p>
-        <ul>
-          <li>Built with SCSS for better organization and maintainability</li>
-          <li>Optimized file size (about 40KB minified and gzipped)</li>
-          <li>
-            Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)
-          </li>
-          <li>No JavaScript dependencies for core functionality</li>
-          <li>CSS custom properties for easy theming and customization</li>
-        </ul>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="tab3">
-      <div class="mw-card mw-card-simple">
-        <h4>User Reviews</h4>
-        <div class="mw-mb-4">
-          <h5>Alex T. - Frontend Developer</h5>
-          <p>
-            "Dropped it into a side project on a Sunday. The grid and the form
-            controls were the parts I did not have to touch afterwards."
-          </p>
-        </div>
-        <div class="mw-mb-4">
-          <h5>Jamie L. - UX Designer</h5>
-          <p>
-            "One variable for the brand colour and the whole palette followed.
-            The dark theme needed no work from my side at all."
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="tab4">
-      <div class="mw-card mw-card-simple">
-        <h4>Support Options</h4>
-        <p>Where to look when something does not work:</p>
-        <ul>
-          <li>This page, which is the documentation</li>
-          <li>Issues and discussions on GitHub</li>
-          <li>A changelog for every release</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Vertical Tabs</h3>
-<div class="mw-tabs mw-tabs-vertical mw-mb-6">
-  <div class="mw-tabs-nav">
-    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="vtab1">
-      Getting Started
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="vtab2">
-      Configuration
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="vtab3">
-      Customization
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="vtab4">
-      Best Practices
-    </button>
-  </div>
-  <div class="mw-tabs-content">
-    <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>
-        <div class="mw-terminal mw-my-3">
-          <span class="mw-terminal-line">mkdir my-project</span>
-          <span class="mw-terminal-line">cd my-project</span>
-          <span class="mw-terminal-line">touch index.html styles.css</span>
-        </div>
-        <p>Add the CSS to your HTML:</p>
-        <div class="mw-code-container">
-          <pre><code>&lt;link rel="stylesheet" 
-href="path/maverick-wave.min.css"&gt;</code></pre>
-        </div>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="vtab2">
-      <div class="mw-card mw-card-simple">
-        <h4>Configuration Options</h4>
-        <p>
-          MaverickWave offers flexibility in how you configure and customize its
-          appearance. The primary methods involve overriding CSS variables or,
-          for deeper integration, overriding Sass variables during a build
-          process.
-        </p>
-
-        <h5 class="mw-mt-4 mw-mb-2">Theme Mode (SCSS Build Only)</h5>
-        <p>
-          If using the SCSS source files, you can control the theme output by
-          setting the <code>$mw-theme-mode</code> variable before importing the
-          framework:
-        </p>
-        <ul>
-          <li>
-            <code>'switchable'</code> (Default): Includes dark and light themes,
-            controlled by JS.
-          </li>
-          <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 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
-          appearance regardless of this setting.
-        </p>
-
-        <h5 class="mw-mt-4 mw-mb-2">Color & Font Overrides</h5>
-        <p>
-          See the "Customization" tab for details on overriding colors and fonts
-          using either CSS or SCSS variables.
-        </p>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="vtab3">
-      <div class="mw-card mw-card-simple">
-        <h4>Customization Guide</h4>
-        <p>
-          Choose the customization method that best suits your project setup:
-        </p>
-
-        <h5 class="mw-mt-4 mw-mb-2">Method 1: CSS Variable Overrides</h5>
-        <p>
-          Ideal for CDN/pre-compiled CSS usage. Define overrides in your own CSS
-          file (loaded after MaverickWave):
-        </p>
-        <pre class="mw-code-block"><code>/* your-custom-styles.css */
-:root {
-  --mw-primary-color: #0f766e; 
-  --mw-dark-page-background: #172127; 
-  --mw-font-family-base: 'Your Custom Font', sans-serif; 
-  /* ... other overrides ... */
-}</code></pre>
-
-        <h5 class="mw-mt-4 mw-mb-2">Method 2: SCSS Variable Overrides</h5>
-        <p>
-          Requires a Sass build process. Pass the overrides through
-          <code>@use ... with (...)</code>:
-        </p>
-        <pre class="mw-code-block"><code>// your-styles.scss
-@use 'path/to/maverick-wave/src/scss/main' with (
-  $primary-color: #0f766e,
-  $secondary-color: #b45309
-  // ... other root colors ...
-);</code></pre>
-        <p>
-          Both methods end up at the same place: the derived tones (hover
-          colors, translucent backgrounds, borders, the ink variant the dark
-          theme needs) are calculated at runtime with <code>color-mix()</code>
-          and relative color syntax, 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 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">
-          <a href="#get-started" class="mw-link">
-            Refer to the "Get Started" section
-          </a>
-          for more detailed examples.
-        </p>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="vtab4">
-      <div class="mw-card mw-card-simple">
-        <h4>Best Practices</h4>
-        <p>When working with MaverickWave:</p>
-        <ul>
-          <li>Use semantic HTML elements for better accessibility</li>
-          <li>Reach for the utility classes before writing custom CSS</li>
-          <li>Customize variables to match your brand identity</li>
-          <li>Test thoroughly across different browsers and devices</li>
-          <li>Consider performance by only including components you need</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4">Pills Style Tabs</h3>
-<div class="mw-tabs mw-tabs-pills">
-  <div class="mw-tabs-nav">
-    <button type="button" class="mw-tabs-nav-item mw-active" data-tab="ptab1">
-      Dashboard
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="ptab2">
-      Profile
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="ptab3">
-      Messages
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="ptab4">
-      Settings
-    </button>
-  </div>
-  <div class="mw-tabs-content">
-    <div class="mw-tabs-panel mw-active" id="ptab1">
-      <div class="mw-card mw-card-simple">
-        <h4>Dashboard Overview</h4>
-        <p>
-          Welcome to your dashboard! Here you can monitor key metrics, recent
-          activity, and important notifications at a glance.
-        </p>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="ptab2">
-      <div class="mw-card mw-card-simple">
-        <h4>User Profile</h4>
-        <p>
-          Manage your profile information, update your avatar, and customize
-          your bio and contact details.
-        </p>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="ptab3">
-      <div class="mw-card mw-card-simple">
-        <h4>Message Center</h4>
-        <p>
-          View and respond to messages from your team members. Organize
-          conversations and track important communications.
-        </p>
-      </div>
-    </div>
-    <div class="mw-tabs-panel" id="ptab4">
-      <div class="mw-card mw-card-simple">
-        <h4>Account Settings</h4>
-        <p>
-          Configure your account preferences, notification settings, privacy
-          options, and security features.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>