maverick-wave 5.30.0 → 5.32.0

package/src/partials/avatars-container.html

@@ -1,229 +0,0 @@
-<h3 class="mw-section-subtitle">Avatars</h3>
-<p class="mw-text-muted mw-text-measure">
-  A picture or a pair of initials, in five sizes. The colour variants sit on the
-  border, so they still read over a photo; on an initials avatar they fill the
-  circle as well. Inside a group the overlap follows the avatar size.
-  <code>mw-avatar-landscape</code> (3:2) and
-  <code>mw-avatar-portrait</code> (9:16, 2:3 on <code>-lg</code>) are for a
-  photo that is not square - meant for the two large sizes. Both run larger than
-  the round step, and a landscape avatar shrinks to fit a narrow column.
-</p>
-
-<div class="mw-grid-2">
-  <div>
-    <h3 class="mw-mb-4">Avatar Sizes</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-grid-stack-center">
-        <div class="mw-avatar mw-avatar-xs">
-          <img
-            src="https://i.pravatar.cc/150?img=1"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-sm">
-          <img
-            src="https://i.pravatar.cc/150?img=2"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar">
-          <img
-            src="https://i.pravatar.cc/150?img=3"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-lg">
-          <img
-            src="https://i.pravatar.cc/150?img=4"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-xl">
-          <img
-            src="https://i.pravatar.cc/150?img=5"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Avatar Shapes & Colors & Group</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mb-2">Avatar Shapes</h4>
-      <div>
-        <div class="mw-avatar">
-          <img
-            src="https://i.pravatar.cc/150?img=6"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-square">
-          <img
-            src="https://i.pravatar.cc/150?img=7"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-
-      <h4 class="mw-mb-2 mw-mt-4">Avatar Colors</h4>
-      <div>
-        <div class="mw-avatar mw-avatar-primary">
-          <img
-            src="https://i.pravatar.cc/150?img=9"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-secondary">
-          <img
-            src="https://i.pravatar.cc/150?img=10"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-      <div>
-        <div class="mw-avatar mw-avatar-success">
-          <img
-            src="https://i.pravatar.cc/150?img=11"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-
-        <div class="mw-avatar mw-avatar-warning">
-          <img
-            src="https://i.pravatar.cc/150?img=12"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-
-        <div class="mw-avatar mw-avatar-danger">
-          <img
-            src="https://i.pravatar.cc/150?img=13"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-
-        <div class="mw-avatar">
-          <img
-            src="https://i.pravatar.cc/150?img=14"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-
-      <h4 class="mw-mb-2 mw-mt-4">Avatar Initials</h4>
-      <p class="mw-text-muted mw-text-sm">
-        For users without a picture. The color variants tint the surface here
-        instead of the border.
-      </p>
-      <div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-sm">AB</div>
-        <div class="mw-avatar mw-avatar-initials">CD</div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-secondary">EF</div>
-      </div>
-      <div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-success">GH</div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-warning">IJ</div>
-        <div class="mw-avatar mw-avatar-initials mw-avatar-danger">KL</div>
-        <div
-          class="mw-avatar mw-avatar-initials mw-avatar-info mw-avatar-square"
-        >
-          MN
-        </div>
-      </div>
-
-      <h4 class="mw-mb-2 mw-mt-4">Avatar Group</h4>
-      <div class="mw-avatar-group mw-mt-3 mw-mb-5">
-        <div class="mw-avatar mw-avatar-sm">
-          <img
-            src="https://i.pravatar.cc/150?img=19"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-sm">
-          <img
-            src="https://i.pravatar.cc/150?img=20"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-sm">
-          <img
-            src="https://i.pravatar.cc/150?img=21"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-sm">
-          <img
-            src="https://i.pravatar.cc/150?img=22"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="mw-grid-2 mw-grid-from-lg mw-mt-6">
-  <div>
-    <h3 class="mw-mb-4">Landscape</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-column mw-items-center mw-gap-6">
-        <div class="mw-avatar mw-avatar-lg mw-avatar-landscape">
-          <img
-            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&crop=faces&w=720&h=480&q=80"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-xl mw-avatar-landscape">
-          <img
-            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&w=720&h=480&q=80"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Portrait</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-d-flex mw-flex-wrap mw-justify-center mw-items-end">
-        <div class="mw-avatar mw-avatar-lg mw-avatar-portrait">
-          <img
-            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=480&h=720&q=80"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-avatar mw-avatar-xl mw-avatar-portrait">
-          <img
-            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&crop=faces&w=450&h=800&q=80"
-            alt="Avatar"
-            loading="lazy"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/badges-container.html

@@ -1,114 +0,0 @@
-<h3 class="mw-section-subtitle">Badges</h3>
-
-<p class="mw-text-muted mw-text-measure">
-  A badge is not a tag. A tag names something and sits in a row of its own kind;
-  a badge carries a count or a status and usually sits <em>on</em> something -
-  the number on a bell, the dot on an avatar. That is why it fills its colour
-  instead of tinting it, and why it comes with an anchor.
-</p>
-
-<div class="mw-grid-2 mw-gap-6">
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Counts</h3>
-    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Colors</h4>
-        <div class="mw-d-flex mw-items-center mw-gap-3 mw-flex-wrap">
-          <span class="mw-badge">3</span>
-          <span class="mw-badge mw-badge-secondary">8</span>
-          <span class="mw-badge mw-badge-success">1</span>
-          <span class="mw-badge mw-badge-warning">4</span>
-          <span class="mw-badge mw-badge-danger">99+</span>
-          <span class="mw-badge mw-badge-info">12</span>
-          <span class="mw-badge mw-badge-muted">0</span>
-          <span class="mw-badge mw-badge-outline">new</span>
-        </div>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Sizes</h4>
-        <div class="mw-d-flex mw-items-center mw-gap-3">
-          <span class="mw-badge mw-badge-sm">7</span>
-          <span class="mw-badge">7</span>
-          <span class="mw-badge mw-badge-lg">7</span>
-        </div>
-        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
-          Round on one character, a pill from two on - a
-          <code>min-width</code> the padding grows past, the same rule an OS
-          badge follows. The digits are tabular, so a counter ticking 9 to 10
-          does not shift what sits beside it.
-        </p>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Anchored to something</h4>
-        <div class="mw-d-flex mw-items-center mw-gap-6">
-          <span class="mw-badge-anchor">
-            <button class="mw-btn mw-btn-outline">
-              <i class="fas fa-inbox"></i> Inbox
-            </button>
-            <span class="mw-badge mw-badge-danger mw-badge-float">5</span>
-          </span>
-          <span class="mw-badge-anchor">
-            <i class="fas fa-bell mw-text-xl"></i>
-            <span class="mw-badge mw-badge-primary mw-badge-float mw-badge-sm"
-              >2</span
-            >
-          </span>
-        </div>
-        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
-          <code>mw-badge-anchor</code> on the thing being badged,
-          <code>mw-badge-float</code> on the badge. It hangs off the corner and
-          carries a ring in the surface colour, so it reads as a separate object
-          rather than a blob on the icon.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Status</h3>
-    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Dot with a label</h4>
-        <div class="mw-grid-1 mw-gap-3">
-          <span class="mw-badge-status mw-badge-status-success">
-            <span class="mw-badge-dot"></span> Online
-          </span>
-          <span class="mw-badge-status mw-badge-status-warning">
-            <span class="mw-badge-dot"></span> Degraded
-          </span>
-          <span class="mw-badge-status mw-badge-status-danger">
-            <span class="mw-badge-dot mw-badge-pulse"></span> Incident
-          </span>
-          <span class="mw-badge-status mw-badge-status-muted">
-            <span class="mw-badge-dot"></span> Archived
-          </span>
-        </div>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">Live</h4>
-        <p class="mw-text-muted mw-text-sm mw-mb-0">
-          <code>mw-badge-pulse</code> adds a ring that grows out and fades. The
-          dot underneath never moves, so a column of them in a table stays
-          readable. For something actually running - a job, an open connection -
-          not for decoration.
-        </p>
-      </div>
-      <div>
-        <h4 class="mw-text-medium mw-mb-2">In a row</h4>
-        <div class="mw-row-split mw-row-split-center">
-          <span>Deployment #4812</span>
-          <span class="mw-badge-status mw-badge-status-success">
-            <span class="mw-badge-dot"></span> Passed
-          </span>
-        </div>
-        <hr class="mw-divider" />
-        <div class="mw-row-split mw-row-split-center">
-          <span>Deployment #4811</span>
-          <span class="mw-badge-status mw-badge-status-danger">
-            <span class="mw-badge-dot"></span> Failed
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/blog-posts-container.html

@@ -1,158 +0,0 @@
-<h3 class="mw-section-subtitle">Blog Posts</h3>
-<p class="mw-text-muted mw-text-measure">
-  A long-form article rather than a card: title, meta line, body and the way
-  back out. The gradient rule down the left edge is what makes it read as a page
-  instead of a panel.
-</p>
-
-<div class="mw-blog-post">
-  <h2 class="mw-blog-post-title">
-    Just a dummy blog post (markdown generated)
-  </h2>
-
-  <div class="mw-blog-post-header">
-    <div class="mw-blog-post-header-icon">
-      <i class="fas fa-code"></i>
-    </div>
-    <div class="mw-blog-post-meta">
-      <div class="mw-blog-post-meta-item">
-        <i class="far fa-calendar"></i>
-        <span>April 10, 2025</span>
-      </div>
-      <div class="mw-blog-post-meta-item">
-        <i class="far fa-user"></i>
-        <span>By Nadia Kern</span>
-      </div>
-      <div class="mw-blog-post-meta-item">
-        <i class="far fa-clock"></i>
-        <span>8 min read</span>
-      </div>
-    </div>
-  </div>
-
-  <img
-    src="https://images.unsplash.com/photo-1603969072881-b0fc7f3d77d7?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-    alt="UI/UX design"
-    class="mw-blog-post-featured-image"
-    loading="lazy"
-  />
-
-  <div class="mw-blog-post-content-markdown">
-    <p>
-      The landscape of web development continues to evolve at a rapid pace. In
-      this article, we explore the latest frameworks, tools, and methodologies
-      that are shaping the industry in 2025.
-    </p>
-
-    <h3>The Rise of AI-Assisted Development</h3>
-    <p>
-      Artificial intelligence has transformed how we approach coding. Modern
-      IDEs now come equipped with sophisticated AI assistants that can generate
-      entire components, optimize performance, and even identify potential bugs
-      before they manifest.
-    </p>
-
-    <p>
-      The most significant advancement has been in the realm of natural language
-      programming, where developers can describe functionality in plain English
-      and have the AI generate the corresponding code.
-    </p>
-
-    <blockquote>
-      "AI did not replace us. It took the boilerplate, and left the part where
-      you decide what the thing should do." - Elena Vega, Lead Developer at
-      TechFront
-    </blockquote>
-
-    <h3>Serverless Architecture: Beyond the Basics</h3>
-    <p>
-      Serverless has grown past single functions. Whole applications now run on
-      it, and the current generation of platforms offers:
-    </p>
-
-    <ul>
-      <li>Stateful serverless functions with built-in memory persistence</li>
-      <li>Edge-optimized execution for global performance</li>
-      <li>Integrated database connections with automatic scaling</li>
-      <li>Real-time monitoring and debugging capabilities</li>
-    </ul>
-
-    <h4>Code Example: Modern Serverless Function</h4>
-    <pre><code>// Modern serverless function with state management
-export async function handler(event, context) {
-  // Access persistent state across invocations
-  const state = await context.getState();
-
-  // Process the incoming request
-  const result = processRequest(event, state);
-
-  // Update the state for future invocations
-  await context.setState({
-    lastProcessed: new Date(),
-    counter: (state.counter || 0) + 1,
-    recentRequests: [...(state.recentRequests || []), event.id].slice(-10)
-  });
-
-  return {
-    statusCode: 200,
-    body: JSON.stringify(result)
-  };
-}</code></pre>
-
-    <h3>Web Components and Micro-Frontends</h3>
-    <p>
-      The component-based architecture has evolved into a more standardized
-      approach with Web Components becoming the foundation of modern frontend
-      development. This has enabled true interoperability between different
-      frameworks and libraries.
-    </p>
-
-    <p>
-      Micro-frontends have also gained widespread adoption, allowing teams to
-      develop, test, and deploy parts of a frontend independently, using
-      different technologies if necessary.
-    </p>
-
-    <ul>
-      <li>
-        DOP is not anti-OOP - it's a refinement for clearer thinking and
-        modeling.
-      </li>
-      <li>
-        With <code>record</code>, <code>sealed interface</code>, and Pattern
-        Matching, Java is finally ready for this style.
-      </li>
-      <li>
-        You’ll get:
-        <ul>
-          <li>Transparent and predictable models</li>
-          <li>Easier testing and logging</li>
-          <li>Less coupling and fewer side effects</li>
-        </ul>
-      </li>
-      <li>
-        This approach can make your domain models sharper and your codebase
-        easier to reason about.
-      </li>
-    </ul>
-
-    <h3>What this means for the next project</h3>
-    <p>
-      None of this is exotic any more. The tooling ships with the framework, the
-      runtimes are on every major host, and the cost of trying one of them on a
-      real feature is an afternoon.
-    </p>
-  </div>
-
-  <div class="mw-blog-post-footer">
-    <button type="button" class="mw-btn mw-blog-post-footer-button">
-      <i class="fas fa-arrow-left"></i>
-      <span>Previous Post</span>
-    </button>
-    <button type="button" class="mw-btn mw-btn-primary">Back to Blog</button>
-    <button type="button" class="mw-btn mw-blog-post-footer-button next">
-      <i class="fas fa-arrow-right"></i>
-      <span>Next Post</span>
-    </button>
-  </div>
-</div>

package/src/partials/breadcrumbs-container.html

@@ -1,126 +0,0 @@
-<h3 class="mw-section-subtitle">Breadcrumbs</h3>
-<p class="mw-text-muted mw-text-measure">
-  Modern skewed navigation breadcrumbs with overlapping design.
-</p>
-
-<div class="mw-grid-stack-stretch">
-  <div>
-    <h4 class="mw-mb-2">Basic Breadcrumbs</h4>
-    <nav class="mw-breadcrumbs" aria-label="Breadcrumb">
-      <ol class="mw-breadcrumbs-list">
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Home</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Products</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Electronics</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
-          <a href="#" class="mw-breadcrumbs-active">
-            <span>Phones</span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-
-  <div>
-    <h4 class="mw-mb-2">With Home Icon</h4>
-    <nav class="mw-breadcrumbs" aria-label="Breadcrumb">
-      <ol class="mw-breadcrumbs-list">
-        <li class="mw-breadcrumbs-item">
-          <a href="#" aria-label="Home">
-            <i class="fas fa-home"></i>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Products</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Electronics</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
-          <a href="#" class="mw-breadcrumbs-active">
-            <span>Phones</span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-
-  <div>
-    <h4 class="mw-mb-2">Small Size Variant</h4>
-    <nav class="mw-breadcrumbs mw-breadcrumbs-sm" aria-label="Breadcrumb">
-      <ol class="mw-breadcrumbs-list">
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Admin</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Users</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
-          <a href="#" class="mw-breadcrumbs-active">
-            <span>Profile</span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-
-  <div>
-    <h4 class="mw-mb-2">Long Path (Responsive Collapse)</h4>
-    <p class="mw-text-muted mw-text-sm mw-mt-1">
-      Middle items collapse on smaller screens.
-    </p>
-    <nav class="mw-breadcrumbs mw-breadcrumbs-collapse" aria-label="Breadcrumb">
-      <ol class="mw-breadcrumbs-list">
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>E-commerce</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Electronics</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Computers</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Laptops</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item">
-          <a href="#">
-            <span>Gaming</span>
-          </a>
-        </li>
-        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
-          <a href="#" class="mw-breadcrumbs-active">
-            <span>RTX 4080</span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</div>