maverick-wave 5.30.0 → 5.32.0

package/src/partials/code-container.html

@@ -1,194 +0,0 @@
-<h3 class="mw-section-subtitle">Code</h3>
-<p class="mw-text-muted mw-text-measure">
-  Inline code gets a surface of its own so it reads as a quoted thing; blocks
-  get a filename bar and a terminal variant. The syntax colours are a fixed pair
-  of themes rather than brand tokens - code is easier to read in the colours an
-  editor already uses.
-</p>
-
-<div class="mw-grid-2 mw-gap-5">
-  <div>
-    <h3 class="mw-mb-4">Inline Code</h3>
-    <div class="mw-card mw-card-simple">
-      <p>
-        Use <code>inline code</code> for variables, function names, or short
-        code snippets within your text.
-      </p>
-      <p>
-        For example, use <code>mw-btn</code> class to create a button or
-        <code>mw-card</code> to create a card component in your layout.
-      </p>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Code Block</h3>
-    <div class="mw-card mw-card-simple">
-      <p>Use code blocks for multi-line code examples:</p>
-      <div class="mw-code-container">
-        <pre><code>// A simple greeting function
-function greet(name) {
-  return `Hello, ${name}!`;
-}
-
-// Display greeting in console
-console.log(greet('Developer'));</code></pre>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="mw-grid-1 mw-mt-6 mw-gap-5">
-  <div>
-    <h3 class="mw-mb-4">Code Block with Filename</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-code-block">
-        <div class="mw-code-block-header">
-          <span class="mw-code-block-filename">counter.jsx</span>
-          <span class="mw-code-block-language">React</span>
-        </div>
-        <div class="mw-code-container">
-          <pre><code>// A simple React counter component
-import { useState } from 'react';
-
-function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    ......
-  );
-}</code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Terminal</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-terminal">
-        <span class="mw-terminal-line">cd my-project</span>
-        <span class="mw-terminal-line"
-          >touch index.html styles.css script.js</span
-        >
-        <span class="mw-terminal-line mw-terminal-output">Created 3 files</span>
-        <span class="mw-terminal-line">mkdir assets</span>
-        <span class="mw-terminal-line">ls -la</span>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Syntax Highlighting (Integration)</h3>
-    <div class="mw-card mw-card-simple">
-      <p>
-        MaverickWave provides styling for code containers
-        (<code>.mw-code-block</code>, <code>.mw-code-container</code>) and basic
-        styles for common code tokens (like keywords, comments, strings) using
-        classes such as <code>.mw-code-keyword</code>,
-        <code>.mw-code-comment</code>, etc.
-      </p>
-      <p>
-        However, MaverickWave
-        <strong>does not include a built-in JavaScript library</strong>
-        for automatically parsing code and applying these highlighting classes.
-      </p>
-      <h4 class="mw-mt-4 mw-mb-2">Option 1: Manual Highlighting</h4>
-      <p>
-        For simple snippets, you can manually wrap parts of your code with
-        <code>&lt;span&gt;</code> tags using the provided
-        <code>.mw-code-*</code> classes:
-      </p>
-      <div class="mw-code-container">
-        <div class="mw-code-block">
-          <div class="mw-code-block-header">
-            <span class="mw-code-block-filename">manual-example.js</span>
-            <span class="mw-code-block-language">JavaScript</span>
-          </div>
-          <pre><code><span class="mw-code-keyword">const</span> <span class="mw-code-function">greet</span> = (<span class="mw-code-keyword">name</span>) <span class="mw-code-operator">=></span> {
-  <span class="mw-code-comment">// Simple greeting</span>
-  <span class="mw-code-keyword">return</span> <span class="mw-code-string">`Hello, ${<span class="mw-code-keyword">name</span>}!`</span>;
-};</code></pre>
-        </div>
-      </div>
-
-      <h4 class="mw-mt-4 mw-mb-2">
-        Option 2: Using a Syntax Highlighting Library
-      </h4>
-      <p>
-        For automatic highlighting of various languages, integrate a dedicated
-        JavaScript library like
-        <a href="https://prismjs.com/" target="_blank" class="mw-link"
-          >Prism.js</a
-        >
-        or
-        <a href="https://highlightjs.org/" target="_blank" class="mw-link"
-          >Highlight.js</a
-        >.
-      </p>
-      <ol class="mw-list mw-list-dot">
-        <li>Include the library's CSS and JavaScript files in your project.</li>
-        <li>
-          Ensure the library is configured to process code within MaverickWave's
-          <code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;&lt;/pre&gt;</code>
-          structures, often by adding specific language classes (e.g.,
-          <code>&lt;code class="language-javascript"&gt;</code>).
-        </li>
-        <li>
-          You might need to slightly adjust the library's theme or
-          MaverickWave's token styles (<code>.mw-code-*</code>) for perfect
-          visual integration, or simply rely entirely on the chosen library's
-          theme.
-        </li>
-      </ol>
-      <p>
-        Use an external library for reliable, multi-language syntax
-        highlighting.
-      </p>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Using Code Components</h3>
-    <div class="mw-card mw-card-simple">
-      <h4>Basic Structure</h4>
-      <p>
-        Here's how to structure the HTML for MaverickWave's code components:
-      </p>
-
-      <h5 class="mw-mt-4 mw-mb-2">Inline Code</h5>
-      <pre
-        class="mw-code-block"
-      ><code>&lt;p&gt;Use the &lt;code&gt;mw-btn&lt;/code&gt; class.&lt;/p&gt;</code></pre>
-
-      <h5 class="mw-mt-4 mw-mb-2">Basic Code Block</h5>
-      <pre class="mw-code-block"><code>&lt;div class="mw-code-container"&gt;
-  &lt;pre&gt;&lt;code&gt;your_code_here();
-    more_code();&lt;/code&gt;&lt;/pre&gt;
-&lt;/div&gt;</code></pre>
-
-      <h5 class="mw-mt-4 mw-mb-2">Code Block with Header</h5>
-      <pre
-        class="mw-code-block"
-      ><code>&lt;div class="mw-code-block"&gt; &lt;!-- Note: .mw-code-block wraps header + container --&gt;
-  &lt;div class="mw-code-block-header"&gt;
-    &lt;span class="mw-code-block-filename"&gt;script.js&lt;/span&gt;
-    &lt;span class="mw-code-block-language"&gt;JavaScript&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div class="mw-code-container"&gt;
-    &lt;pre&gt;&lt;code&gt;your_code_here();&lt;/code&gt;&lt;/pre&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-      <h5 class="mw-mt-4 mw-mb-2">Terminal Block</h5>
-      <pre class="mw-code-block"><code>&lt;div class="mw-terminal"&gt;
-  &lt;span class="mw-terminal-line"&gt;npm install maverick-wave&lt;/span&gt;
-  &lt;span class="mw-terminal-line mw-terminal-output"&gt;+ maverick-wave added&lt;/span&gt;
-&lt;/div&gt;</code></pre>
-      <p class="mw-mt-4">
-        Remember to integrate a syntax highlighting library if you need
-        automatic language coloring (see the "Syntax Highlighting" section
-        above).
-      </p>
-    </div>
-  </div>
-</div>

package/src/partials/colors-container.html

@@ -1,263 +0,0 @@
-<h3 class="mw-section-subtitle">Main Colors</h3>
-
-<!-- the hex code string is getting updated via javascript! -->
-
-<p class="mw-text-muted mw-text-measure">
-  These thirteen are the only colors you ever set. Everything else - hover
-  tones, translucent backgrounds, borders, muted text, the card and footer
-  surfaces, the ink variant the dark theme needs - is derived from them at
-  runtime with
-  <code>color-mix()</code> and relative color syntax, so overriding a root token
-  cascades to all of its variants.
-</p>
-
-<div class="mw-grid-auto-sm">
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-primary-color)"
-      ></div>
-      <p>Primary</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-secondary-color)"
-      ></div>
-      <p>Secondary</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-success-color)"
-      ></div>
-      <p>Success</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-warning-color)"
-      ></div>
-      <p>Warning</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-danger-color)"
-      ></div>
-      <p>Danger</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-info-color)"></div>
-      <p>Info</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-gray-color)"></div>
-      <p>Gray</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-accent-text-color)"
-      ></div>
-      <p>Accent Text</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-dark-page-background)"
-      ></div>
-      <p>Dark Page</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-dark-text-color)"
-      ></div>
-      <p>Dark Text</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-light-page-background)"
-      ></div>
-      <p>Light Page</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-light-text-color)"
-      ></div>
-      <p>Light Text</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple color-card">
-    <div class="mw-text-center">
-      <div
-        class="color-swatch"
-        style="background: var(--mw-form-elements-background)"
-      ></div>
-      <p>Form Elements</p>
-      <p class="mw-text-muted">#000000</p>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-section-subtitle">Fill or Ink</h3>
-
-<p class="mw-text-muted">
-  Every brand and status colour comes in two tokens.
-  <code>--mw-primary-color</code> is the exact colour, for anything it
-  <strong>fills</strong> - buttons, badges, bars - with
-  <code>--mw-primary-accent-text-color</code> on top.
-  <code>--mw-primary-text-color</code> is the same colour as ink
-  <strong>on</strong> a theme surface: text, icons, focus rings, accent borders.
-  A colour picked to carry a label is by definition too dark or too light to be
-  read on the page it sits on. The ink token clamps OKLch lightness - at least
-  0.68 on the dark page, at most 0.55 on the light one - and keeps hue and
-  chroma, so it works for any palette: a dark colour gets lifted, a very light
-  one deepened, and a colour already in range passes through untouched. Toggle
-  the theme and watch the second row.
-</p>
-
-<div class="mw-grid-auto-sm mw-mb-6">
-  <div class="mw-card mw-card-simple">
-    <p class="mw-mb-3"><strong>Fill</strong> - <code>--mw-*-color</code></p>
-    <div class="mw-tags">
-      <span class="mw-tag mw-tag-primary">Primary</span>
-      <span class="mw-tag mw-tag-secondary">Secondary</span>
-    </div>
-    <p class="mw-mt-4">
-      <button class="mw-btn mw-btn-primary">Primary</button>
-      <button class="mw-btn mw-btn-secondary">Secondary</button>
-    </p>
-  </div>
-
-  <div class="mw-card mw-card-simple">
-    <p class="mw-mb-3"><strong>Ink</strong> - <code>--mw-*-text-color</code></p>
-    <p class="mw-text-primary">Primary text, links and icons</p>
-    <p class="mw-text-secondary">Secondary accent</p>
-    <p class="mw-text-success">Success</p>
-    <p class="mw-text-warning">Warning</p>
-    <p class="mw-text-danger">Danger</p>
-    <p class="mw-text-info">Info</p>
-  </div>
-</div>
-
-<h3 class="mw-section-subtitle">Label Ink Per Colour</h3>
-
-<p class="mw-text-muted">
-  <code>--mw-accent-text-color</code> is the label on every solid coloured
-  surface, and one value for all six only holds while the whole palette sits on
-  the same side of the lightness scale. A neon green primary next to a deep blue
-  secondary needs a dark label on the one and a light label on the other, so
-  every colour carries its own override:
-  <code>--mw-primary-accent-text-color</code>,
-  <code>--mw-secondary-accent-text-color</code> and the same for
-  <code>success</code>, <code>warning</code>, <code>danger</code> and
-  <code>info</code>. Each one defaults to <code>--mw-accent-text-color</code>,
-  so nothing changes until you set one.
-</p>
-
-<pre class="mw-code-block mw-mb-6"><code>:root {
-  --mw-primary-color: #39ff14;
-  /* the shared label stays light for the rest of the palette ... */
-  --mw-accent-text-color: #f2f6fc;
-  /* ... only the neon primary gets a dark one */
-  --mw-primary-accent-text-color: #0b0f0a;
-}</code></pre>
-
-<p class="mw-text-muted mw-mb-6">
-  Everything that fills a surface with that colour follows: buttons and mini
-  buttons, the burger button, table and panel headers, card badges and ribbons,
-  segmented and tab items, stepper dots, calendar selection, timeline dates,
-  accordion headers and progress labels. The burger button switches to
-  <code>--mw-secondary-accent-text-color</code> while the drawer is open,
-  because its surface does the same - override
-  <code>--mw-header-burgerbutton-color</code> and
-  <code>--mw-header-burgerbutton-open-color</code> to break out of that.
-</p>
-
-<p class="mw-text-muted">
-  Tinted surfaces follow one rule as well:
-  <code>--mw-*-background</code> is 20% of the colour,
-  <code>--mw-*-background-hover</code> 45%. Both stay close enough to the
-  surface underneath that <code>--mw-text-color</code> keeps working on top -
-  which is what makes an alert, badge or tag readable in either theme.
-</p>
-
-<p class="mw-text-muted mw-mb-6">
-  The surfaces work the same way. Card, footer and border scale the page
-  background's OKLch lightness and chroma by one factor and keep the hue, so a
-  tinted page hands its tint down instead of graying out. A card always steps
-  <strong>away from the text colour</strong> - darker than the page in the dark
-  theme, lighter in the light one - so content sits on the cleaner surface. That
-  is also why the dark page background is not near-black: the surfaces below it
-  need somewhere to go.
-</p>
-
-<p class="mw-text-muted mw-mb-6">
-  Each factor is an SCSS knob, so how far a card sits from the page is one
-  number per theme. Below 1 steps toward black, above 1 toward white - read
-  <code>0.85</code> as "the card sits at 85% of the page's lightness". Move both
-  card knobs toward 1 for a flat, borderless look, push them apart for cards
-  that read as raised panels. Keep the footer further out than the card in the
-  dark theme and on the other side in the light one, or the band under the page
-  stops reading as chrome.
-</p>
-
-<pre
-  class="mw-code-block mw-mb-6"
-><code>@use 'maverick-wave/src/scss/main' with (
-  $card-surface-dark: 0.85,   // card, dark theme
-  $card-surface-light: 1.05,  // card, light theme
-  $footer-surface-dark: 0.75, // footer and header chrome
-  $footer-surface-light: 0.95
-);</code></pre>

package/src/partials/coming-soon-container.html

@@ -1,10 +0,0 @@
-<h3 class="mw-section-subtitle">Coming Soon Banner</h3>
-<p class="mw-text-muted mw-text-measure">
-  A placeholder for a section that is not built yet. Loud on purpose: the whole
-  point is that nobody ships it by accident.
-</p>
-
-<div class="mw-coming-soon">
-  <i class="mw-coming-soon-icon fas fa-tools"></i>
-  <div class="mw-coming-soon-text">Coming Soon</div>
-</div>

package/src/partials/contact-container.html

@@ -1,85 +0,0 @@
-<h3 class="mw-section-subtitle">Contact</h3>
-<p class="mw-text-muted mw-text-measure">
-  The practical block at the end of a site - when we are open, how to reach us.
-  Only the second half is a component: <code>mw-contact</code> is an
-  <code>&lt;address&gt;</code> with its italics undone and a label column that
-  keeps the values under each other. The hours are a <code>&lt;dl&gt;</code> of
-  <code>mw-leader-row</code>, because a day and its times with a line between
-  them is the row that component already is.
-</p>
-
-<div class="mw-grid-auto-md">
-  <article class="mw-card">
-    <div class="mw-card-body">
-      <h4 class="mw-card-title">
-        <span class="mw-card-title-icon">
-          <i class="fas fa-clock" aria-hidden="true"></i>
-        </span>
-        Opening hours
-      </h4>
-      <hr class="mw-card-title-divider" />
-
-      <dl class="mw-item-list">
-        <div class="mw-leader-row">
-          <dt class="mw-leader-row-label">Monday to Friday</dt>
-          <dd class="mw-leader-row-value">11.30 - 14.00</dd>
-          <dd class="mw-leader-row-value">17.00 - 23.00</dd>
-        </div>
-        <div class="mw-leader-row">
-          <dt class="mw-leader-row-label">Saturday</dt>
-          <dd class="mw-leader-row-value">17.00 - 23.00</dd>
-        </div>
-        <div class="mw-leader-row">
-          <dt class="mw-leader-row-label">Sunday</dt>
-          <dd class="mw-leader-row-value">11.30 - 20.00</dd>
-        </div>
-      </dl>
-
-      <p class="mw-text-sm mw-text-muted mw-mt-6 mw-mb-0">
-        Hot food all day on Sunday. Otherwise the kitchen closes an hour before
-        the house does.
-      </p>
-    </div>
-  </article>
-
-  <article class="mw-card mw-card-addon-secondary">
-    <div class="mw-card-body">
-      <h4 class="mw-card-title">
-        <span class="mw-card-title-icon">
-          <i class="fas fa-location-dot" aria-hidden="true"></i>
-        </span>
-        How to reach us
-      </h4>
-      <hr class="mw-card-title-divider" />
-
-      <address class="mw-contact mw-mb-6">
-        <p class="mw-text-bold">Gasthaus Lamm</p>
-        <p>
-          Marktplatz 3<br />
-          72622 Musterhausen
-        </p>
-        <p class="mw-contact-row">
-          <span class="mw-contact-label">Phone</span>
-          <a class="mw-link" href="tel:+497123456789">07123 456789</a>
-        </p>
-        <p class="mw-contact-row">
-          <span class="mw-contact-label">Email</span>
-          <a class="mw-link" href="mailto:info@gasthaus-lamm.de"
-            >info@gasthaus-lamm.de</a
-          >
-        </p>
-      </address>
-
-      <div class="mw-button-bar mw-button-bar-left">
-        <a class="mw-btn mw-btn-primary" href="tel:+497123456789">
-          <i class="fas fa-phone" aria-hidden="true"></i>
-          Call us
-        </a>
-        <a class="mw-btn mw-btn-outline" href="mailto:info@gasthaus-lamm.de">
-          <i class="fas fa-envelope" aria-hidden="true"></i>
-          Write us
-        </a>
-      </div>
-    </div>
-  </article>
-</div>

package/src/partials/content-slider-container.html

@@ -1,36 +0,0 @@
-<h3 class="mw-section-subtitle">Content Slider</h3>
-<p class="mw-text-muted mw-text-center">Image Slider</p>
-
-<div class="mw-image-slider">
-  <div class="mw-image-slider-base" data-index="0">
-    <img
-      src="images/slider-mountains.svg"
-      class="mw-image-slider-base-image"
-      alt="Mountain Landscape"
-      loading="lazy"
-    />
-  </div>
-
-  <div class="mw-image-slider-overlay">
-    <div class="mw-image-slider-overlay-image" data-index="1">
-      <img src="images/slider-lake.svg" alt="Lake" loading="lazy" />
-    </div>
-    <div class="mw-image-slider-overlay-image" data-index="2">
-      <img src="images/slider-forest.svg" alt="Forest" loading="lazy" />
-    </div>
-    <div class="mw-image-slider-overlay-image" data-index="3">
-      <img src="images/slider-field.svg" alt="Field" loading="lazy" />
-    </div>
-    <div class="mw-image-slider-overlay-image" data-index="4">
-      <img src="images/slider-trees.svg" alt="Trees" loading="lazy" />
-    </div>
-  </div>
-
-  <div class="mw-image-slider-controls-grid-3">
-    <button class="mw-btn mw-btn-primary" data-index="0">Base View</button>
-    <button class="mw-btn mw-btn-primary" data-index="1">Lake</button>
-    <button class="mw-btn mw-btn-primary" data-index="2">Forest</button>
-    <button class="mw-btn mw-btn-primary" data-index="3">Field</button>
-    <button class="mw-btn mw-btn-primary" data-index="4">Trees</button>
-  </div>
-</div>

package/src/partials/divider-container.html

@@ -1,70 +0,0 @@
-<h3 class="mw-section-subtitle">Divider</h3>
-<p class="mw-text-muted mw-text-measure">
-  A rule between two things - horizontal or vertical, solid or dashed, in a
-  brand colour, or with a label sitting in the middle of it.
-</p>
-
-<div class="mw-grid-2 mw-gap-6">
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Horizontal</h3>
-    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Default</h4>
-        <p class="mw-text-muted">Content above</p>
-        <hr class="mw-divider" />
-        <p class="mw-text-muted">Content below</p>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Thick</h4>
-        <hr class="mw-divider mw-divider-thick" />
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Dashed</h4>
-        <hr class="mw-divider mw-divider-dashed" />
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Primary color</h4>
-        <hr class="mw-divider mw-divider-primary" />
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Secondary color</h4>
-        <hr class="mw-divider mw-divider-secondary" />
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-card-title mw-mb-4">With Text & Vertical</h3>
-    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">With label</h4>
-        <div class="mw-divider-text">
-          <span>or</span>
-        </div>
-      </div>
-      <div>
-        <div class="mw-divider-text">
-          <span>Section Title</span>
-        </div>
-      </div>
-      <div>
-        <div class="mw-divider-text mw-divider-primary">
-          <span><i class="fas fa-star"></i> Featured</span>
-        </div>
-      </div>
-
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h4>
-        <div
-          style="display: flex; align-items: center; gap: 1rem; height: 70px"
-        >
-          <span class="mw-text-muted">Left</span>
-          <div class="mw-divider-vertical"></div>
-          <span class="mw-text-muted">Middle</span>
-          <div class="mw-divider-vertical"></div>
-          <span class="mw-text-muted">Right</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>