maverick-wave 3.0.0

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

@@ -0,0 +1,141 @@
+<h3 class="mw-section-subtitle">Form Field Pattern</h3>
+
+<div class="mw-grid-2 mw-gap-6">
+  <!-- LEFT: mw-field wrapper -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Field Wrapper (mw-field)</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-text-sm mw-mb-4">
+        The <code>mw-field</code> wrapper groups label, input, hint, and error
+        message as a single unit — the recommended pattern for Angular reactive
+        forms.
+      </p>
+
+      <!-- Normal field with hint -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label mw-required" for="ff-email"
+          >Email address</label
+        >
+        <input
+          id="ff-email"
+          type="email"
+          class="mw-input"
+          placeholder="user@example.com"
+        />
+        <span class="mw-field-hint"
+          >We'll never share your email with anyone.</span
+        >
+      </div>
+
+      <!-- Field in error state -->
+      <div class="mw-field mw-field-has-error mw-mb-4">
+        <label class="mw-field-label mw-required" for="ff-email-err"
+          >Email address</label
+        >
+        <input
+          id="ff-email-err"
+          type="email"
+          class="mw-input"
+          value="not-an-email"
+        />
+        <span class="mw-field-error">
+          <i class="fas fa-exclamation-circle"></i>
+          Please enter a valid email address.
+        </span>
+      </div>
+
+      <!-- Select field with hint -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ff-country">Country</label>
+        <select id="ff-country" class="mw-select">
+          <option value="" disabled selected>Select a country</option>
+          <option>Germany</option>
+          <option>Austria</option>
+          <option>Switzerland</option>
+        </select>
+        <span class="mw-field-hint"
+          >Your billing country for tax purposes.</span
+        >
+      </div>
+
+      <!-- Textarea with character hint -->
+      <div class="mw-field">
+        <label class="mw-field-label mw-required" for="ff-bio">Bio</label>
+        <textarea
+          id="ff-bio"
+          class="mw-textarea"
+          rows="3"
+          placeholder="Tell us about yourself..."
+        ></textarea>
+        <span class="mw-field-hint">Maximum 500 characters.</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: Angular validation simulation + readonly -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Validation & Readonly States</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-text-sm mw-mb-4">
+        Angular adds <code>.ng-invalid.ng-touched</code> and
+        <code>.ng-valid.ng-touched.ng-dirty</code>
+        automatically. The styles below are applied by the framework.
+      </p>
+
+      <!-- Simulated ng-invalid ng-touched -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label mw-required" for="ff-username"
+          >Username (invalid &amp; touched)</label
+        >
+        <input
+          id="ff-username"
+          type="text"
+          class="mw-input ng-invalid ng-touched"
+          value=""
+          placeholder="Required"
+        />
+        <span class="mw-field-error">
+          <i class="fas fa-exclamation-circle"></i> Username is required.
+        </span>
+      </div>
+
+      <!-- Simulated ng-valid ng-touched ng-dirty -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label mw-required" for="ff-password"
+          >Password (valid &amp; dirty)</label
+        >
+        <input
+          id="ff-password"
+          type="password"
+          class="mw-input ng-valid ng-touched ng-dirty"
+          value="secret123"
+        />
+        <span class="mw-field-hint">Looks good!</span>
+      </div>
+
+      <!-- Readonly -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ff-account-id"
+          >Account ID (readonly)</label
+        >
+        <input
+          id="ff-account-id"
+          type="text"
+          class="mw-input"
+          readonly
+          value="USR-00042"
+        />
+        <span class="mw-field-hint">This value cannot be changed.</span>
+      </div>
+
+      <!-- Disabled -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ff-plan">Plan (disabled)</label>
+        <select id="ff-plan" class="mw-select" disabled>
+          <option>Enterprise</option>
+        </select>
+        <span class="mw-field-hint">Contact support to change your plan.</span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/gallery-container.html

@@ -0,0 +1,49 @@
+<h3 class="mw-section-subtitle">Image Gallery</h3>
+
+<div class="mw-gallery-container">
+  <div class="mw-gallery">
+    <!-- Prev button -->
+    <button type="button" class="mw-gallery-navi mw-gallery-navi-prev">
+      &#10094;
+    </button>
+
+    <!-- Track -->
+    <div class="mw-gallery-track">
+      <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
+        <img src="https://picsum.photos/id/1011/800/400" alt="1" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Peaceful Lake">
+        <img src="https://picsum.photos/id/1012/800/400" alt="2" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="City Vibes">
+        <img src="https://picsum.photos/id/1015/800/400" alt="3" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Golden Forest">
+        <img src="https://picsum.photos/id/1016/800/400" alt="4" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Desert View">
+        <img src="https://picsum.photos/id/1018/800/400" alt="5" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Ocean Breeze">
+        <img src="https://picsum.photos/id/1020/800/400" alt="6" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Old Town">
+        <img src="https://picsum.photos/id/1021/800/400" alt="7" />
+      </div>
+      <div class="mw-gallery-slide" data-desc="Snowy Hills">
+        <img src="https://picsum.photos/id/1025/800/400" alt="8" />
+      </div>
+    </div>
+
+    <!-- Next button -->
+    <button type="button" class="mw-gallery-navi mw-gallery-navi-next">
+      &#10095;
+    </button>
+  </div>
+
+  <!-- Description below slider -->
+  <div class="mw-gallery-desc">Beautiful Mountain</div>
+
+  <!-- Dots -->
+  <div class="mw-gallery-dots"></div>
+</div>

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

@@ -0,0 +1,294 @@
+<h3>Installation</h3>
+<p>
+  Add MaverickWave CSS framework to your project using one of these methods:
+</p>
+
+<h4 class="mw-mt-4">Option 1: CDN</h4>
+<pre
+  class="mw-code-block"
+><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/m1well/maverick-wave@v{{VERSION}}/maverick-wave.min.css"&gt;
+&lt;script src="https://cdn.jsdelivr.net/gh/m1well/maverick-wave@v{{VERSION}}/maverick-wave.min.js"&gt;&lt;/script&gt;</code></pre>
+
+<h4 class="mw-mt-4">Option 2: Direct Download</h4>
+<div class="mw-d-flex mw-gap-4">
+  <a href="maverick-wave.min.css" download class="mw-btn mw-btn-primary">
+    Download CSS
+  </a>
+  <a href="maverick-wave.min.js" download class="mw-btn mw-btn-outline">
+    Download JS
+  </a>
+</div>
+
+<h3 class="mw-mt-6">Integration Options</h3>
+
+<div class="mw-tabs mw-mb-6">
+  <div class="mw-tabs-nav">
+    <div class="mw-tabs-nav-item active" data-tab="html-css">HTML/CSS</div>
+    <div class="mw-tabs-nav-item" data-tab="scss">SCSS Projects</div>
+    <div class="mw-tabs-nav-item" data-tab="angular">Angular</div>
+    <div class="mw-tabs-nav-item" data-tab="react">React</div>
+  </div>
+
+  <div class="mw-tabs-content">
+    <!-- HTML/CSS Tab -->
+    <div class="mw-tabs-panel active" id="html-css">
+      <div class="mw-card mw-card-simple">
+        <h4>Using Pre-compiled CSS (CDN or Download)</h4>
+        <p>
+          This is the simplest method if you don't need SCSS customization. Link
+          the compiled <code>maverick-wave.min.css</code> and
+          <code>maverick-wave.min.js</code> files in your HTML head and before
+          the closing body tag, respectively.
+        </p>
+        <pre class="mw-code-block"><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+    &lt;title&gt;My MaverickWave Project&lt;/title&gt;
+    &lt;!-- Framework CSS --&gt;
+    &lt;link rel="stylesheet" href="path/to/maverick-wave.min.css"&gt;
+
+    &lt;!-- Your Custom Styles (load AFTER framework) --&gt;
+    &lt;link rel="stylesheet" href="your-custom-styles.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;!-- Your content --&gt;
+
+    &lt;!-- Framework JS --&gt;
+    &lt;script src="path/to/maverick-wave.min.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+        <h5 class="mw-mt-4">Customizing via CSS Variables</h5>
+        <p>
+          Even without SCSS, you can customize colors and fonts by overriding
+          the CSS custom properties. Create your own CSS file and load it
+          <strong>after</strong> the MaverickWave CSS.
+        </p>
+        <pre class="mw-code-block"><code>/* your-custom-styles.css */
+:root {
+  /* Brand colors */
+  --mw-primary-color: #e94560;
+  --mw-secondary-color: #f39c12;
+
+  /* Dark theme overrides */
+  --mw-dark-page-background: #1a1a2e;
+  --mw-dark-card-background: #2a2a4a;
+
+  /* Light theme overrides */
+  --mw-light-page-background: #ffffff;
+  --mw-light-card-background: #f0f0f5;
+
+  /* Font */
+  --mw-font-family-base: 'Your Custom Font', sans-serif;
+}</code></pre>
+      </div>
+    </div>
+
+    <!-- SCSS Tab -->
+    <div class="mw-tabs-panel" id="scss">
+      <div class="mw-card mw-card-simple">
+        <h4>Using SCSS Source Files</h4>
+        <p>
+          For full customization, clone the repository and integrate the SCSS
+          source directly into your project's Sass build (Dart Sass required).
+          The entry point is <code>src/scss/main.scss</code>.
+        </p>
+        <p>
+          MaverickWave uses <code>@use</code> / <code>@forward</code> (modern
+          Sass module syntax). Override Sass variables <em>before</em> importing
+          the framework.
+        </p>
+
+        <h5 class="mw-mt-4">Theme Mode</h5>
+        <p>Set <code>$mw-theme-mode</code> to control theme behavior:</p>
+        <ul>
+          <li>
+            <code>'switchable'</code> (default) — dark base, toggleable to light
+            via <code>.mw-theme-light</code> on <code>&lt;body&gt;</code>
+          </li>
+          <li><code>'dark'</code> — compile dark theme only</li>
+          <li><code>'light'</code> — compile light theme only</li>
+        </ul>
+        <p class="mw-text-warning">
+          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
+          <strong>Note:</strong> The main header and navigation always use the
+          dark appearance regardless of theme mode.
+        </p>
+
+        <h5 class="mw-mt-4">Example — your main SCSS file</h5>
+        <pre class="mw-code-block"><code>// styles.scss
+
+// 1. Theme mode (optional, default is 'switchable')
+$mw-theme-mode: 'switchable';
+
+// 2. Override base color variables
+$primary-color: #e94560;
+$secondary-color: #f39c12;
+
+// 3. Override background / text colors
+$dark-background: #1f1f2e;
+$light-background: #f8f9fa;
+$dark-text-color: #ffffff;
+$light-text-color: #1c1c1c;
+
+// 4. Import the framework (adjust path as needed)
+@use 'path/to/maverick-wave/src/scss/main';
+
+// 5. Your additional styles
+body {
+  // custom overrides
+}</code></pre>
+      </div>
+    </div>
+
+    <!-- Angular Tab -->
+    <div class="mw-tabs-panel" id="angular">
+      <div class="mw-card mw-card-simple">
+        <h4>Angular Integration</h4>
+        <p>
+          Download the compiled files and place them in your Angular project
+          (e.g. <code>src/assets/</code>), then reference them in
+          <code>angular.json</code>:
+        </p>
+        <pre class="mw-code-block"><code>// angular.json
+"styles": [
+  "src/assets/maverick-wave.min.css",
+  "src/styles.scss"
+],
+"scripts": [
+  "src/assets/maverick-wave.min.js"
+]</code></pre>
+        <p>
+          Alternatively, use the CDN link directly in
+          <code>src/index.html</code>:
+        </p>
+        <pre class="mw-code-block"><code>&lt;link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/m1well/maverick-wave@v{{VERSION}}/maverick-wave.min.css"&gt;</code></pre>
+        <p>
+          For SCSS integration, copy the <code>src/scss/</code> source into your
+          project and import it from <code>src/styles.scss</code>:
+        </p>
+        <pre class="mw-code-block"><code>// src/styles.scss
+$primary-color: #3f51b5;
+$mw-theme-mode: 'switchable';
+
+@use 'maverick-wave/src/scss/main';</code></pre>
+        <h5 class="mw-mt-4">Theme switching</h5>
+        <pre class="mw-code-block"><code>// app.component.ts
+toggleTheme() {
+  document.body.classList.toggle('mw-theme-light');
+}</code></pre>
+        <h5 class="mw-mt-4">Reactive Forms</h5>
+        <p>
+          MaverickWave automatically styles Angular form state classes. Use the
+          <code>mw-field</code> wrapper pattern:
+        </p>
+        <pre
+          class="mw-code-block"
+        ><code>&lt;div class="mw-field" [class.mw-field-has-error]="email.invalid && email.touched"&gt;
+  &lt;label class="mw-field-label mw-required" for="email"&gt;Email&lt;/label&gt;
+  &lt;input id="email" type="email" class="mw-input" formControlName="email" /&gt;
+  &lt;span class="mw-field-error" *ngIf="email.invalid && email.touched"&gt;
+    &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt; Please enter a valid email.
+  &lt;/span&gt;
+&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+
+    <!-- React Tab -->
+    <div class="mw-tabs-panel" id="react">
+      <div class="mw-card mw-card-simple">
+        <h4>React Integration</h4>
+        <p>
+          Download the compiled CSS file and import it in your entry point, or
+          use the CDN link in <code>index.html</code>:
+        </p>
+        <pre class="mw-code-block"><code>// main.jsx / index.js
+import './assets/maverick-wave.min.css';
+
+// If you need the JS functionality (accordion, tabs, etc.)
+import './assets/maverick-wave.min.js';</code></pre>
+        <p>Example usage in a React component:</p>
+        <pre class="mw-code-block"><code>function App() {
+  return (
+    &lt;div className="mw-container"&gt;
+      &lt;h1 className="mw-text-primary"&gt;Hello, MaverickWave!&lt;/h1&gt;
+      &lt;button className="mw-btn mw-btn-primary"&gt;Get Started&lt;/button&gt;
+    &lt;/div&gt;
+  );
+}</code></pre>
+        <p>
+          For SCSS integration with Vite, copy the source and import from your
+          main stylesheet:
+        </p>
+        <pre class="mw-code-block"><code>/* src/index.css or src/App.scss */
+@use './maverick-wave/src/scss/main';</code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mt-6">Adding Custom Fonts</h3>
+<p>
+  To use custom fonts with MaverickWave, load the font files using
+  <code>@font-face</code> and then override the CSS font variable.
+</p>
+<div class="mw-card mw-card-simple">
+  <h5 class="mw-mb-2">1. Load the Font</h5>
+  <pre class="mw-code-block"><code>/* your-custom-styles.css */
+@font-face {
+  font-family: 'Your Custom Font';
+  src: url('/path/to/font.woff2') format('woff2'),
+       url('/path/to/font.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Your Custom Font';
+  src: url('/path/to/font-bold.woff2') format('woff2'),
+       url('/path/to/font-bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+</code></pre>
+
+  <h5 class="mw-mt-4 mw-mb-2">2. Apply the Font</h5>
+  <p>
+    <strong>CSS Variable Method:</strong>
+  </p>
+  <pre
+    class="mw-code-block"
+  ><code>/* your-custom-styles.css — load AFTER maverick-wave.min.css */
+:root {
+  --mw-font-family-base: 'Your Custom Font', system-ui, sans-serif;
+  --mw-font-family-heading: 'Your Custom Font', system-ui, sans-serif;
+}</code></pre>
+</div>
+
+<div class="mw-d-flex mw-flex-wrap mw-gap-4 mw-justify-center mw-mt-6">
+  <button
+    type="button"
+    onclick="location.href = '#documentation'"
+    class="mw-btn mw-btn-primary"
+  >
+    Explore Documentation
+  </button>
+  <button
+    type="button"
+    onclick="
+      window.open(
+        'https://github.com/m1well/maverick-wave',
+        '_blank',
+        'noopener'
+      )
+    "
+    class="mw-btn mw-btn-outline"
+  >
+    <i class="fab fa-github"></i> GitHub Repository
+  </button>
+</div>

package/src/partials/grid-container.html

@@ -0,0 +1,171 @@
+<h3 class="mw-section-subtitle">Grid System</h3>
+
+<p class="mw-text-muted mw-mb-4">
+  MaverickWave CSS framework provides a simple grid system that adapts to
+  different screen sizes, making responsive layouts simple to implement. It also
+  has an advanced grid system with custom column spans. Perfect for complex
+  layouts that need different column widths. Automatically stacks to single
+  column on mobile devices.
+</p>
+
+<h3 class="mw-mb-4">Grid with 1 Column</h3>
+<div class="mw-grid-1 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 2 Columns</h3>
+<div class="mw-grid-2 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 3 Columns</h3>
+<div class="mw-grid-3 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple">Column 3</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 4 Columns</h3>
+<div class="mw-grid-4 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple">Column 4</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 5 Columns</h3>
+<div class="mw-grid-5 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple">Column 3</div>
+  <div class="mw-card mw-card-simple">Column 4</div>
+  <div class="mw-card mw-card-simple">Column 5</div>
+</div>
+
+<h3 class="mw-mb-3">Flexible Grid with Column Spans</h3>
+<p class="mw-mb-2 mw-text-sm mw-text-muted">
+  12-column grid with custom spans: 2 columns + 4 columns + 1 column
+</p>
+<div class="mw-grid-flex mw-mb-6">
+  <div class="mw-col-span-2 mw-card mw-card-simple">Span 2 Columns</div>
+  <div class="mw-col-span-4 mw-card mw-card-simple">Span 4 Columns</div>
+  <div class="mw-col-span-1 mw-card mw-card-simple">1 col</div>
+</div>
+
+<h3 class="mw-mb-3">Mixed Column Spans</h3>
+<p class="mw-mb-2 mw-text-sm mw-text-muted">
+  Various column combinations: 3 + 6 + 3 columns
+</p>
+<div class="mw-grid-flex mw-mb-6">
+  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
+  <div class="mw-col-span-6 mw-card mw-card-simple">
+    Span 6 Columns (Main Content)
+  </div>
+  <div class="mw-col-span-3 mw-card mw-card-simple">Span 3 Columns</div>
+</div>
+
+<h3 class="mw-mb-3">Asymmetric Layout</h3>
+<p class="mw-mb-2 mw-text-sm mw-text-muted">
+  Sidebar + content layout: 4 + 8 columns
+</p>
+<div class="mw-grid-flex mw-mb-6">
+  <div class="mw-col-span-4 mw-card mw-card-simple">Sidebar (4 cols)</div>
+  <div class="mw-col-span-8 mw-card mw-card-simple">
+    Main Content Area (8 cols)
+  </div>
+</div>
+
+<h3 class="mw-mb-3">Auto Grid (Responsive Card Layout)</h3>
+<p class="mw-mb-2 mw-text-sm mw-text-muted">
+  Perfect for unknown number of items. Cards maintain minimum 300px width and
+  automatically wrap to new rows. Great for product listings, galleries, or any
+  dynamic content.
+</p>
+<div class="mw-grid-auto-sm mw-mb-6">
+  <div class="mw-card mw-card-simple">Product Card</div>
+  <div class="mw-card mw-card-simple">Service Card</div>
+  <div class="mw-card mw-card-simple">Team Member</div>
+  <div class="mw-card mw-card-simple">Portfolio Item</div>
+  <div class="mw-card mw-card-simple">Blog Post</div>
+  <div class="mw-card mw-card-simple">Feature</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 3 Columns - Default Spacing</h3>
+<div class="mw-grid-3 mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple">Column 3</div>
+</div>
+
+<h3 class="mw-mb-4">Grid with 3 Columns - Large Spacing</h3>
+<div class="mw-grid-3-lg mw-mb-6">
+  <div class="mw-card mw-card-simple">Column 1</div>
+  <div class="mw-card mw-card-simple">Column 2</div>
+  <div class="mw-card mw-card-simple">Column 3</div>
+</div>
+
+<h3 class="mw-mb-4">Flexible Grid - Default Spacing</h3>
+<div class="mw-grid-flex mw-mb-6">
+  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
+  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+</div>
+
+<h3 class="mw-mb-4">Flexible Grid - Large Spacing</h3>
+<div class="mw-grid-flex-lg mw-mb-6">
+  <div class="mw-col-span-4 mw-card mw-card-simple">4 Columns</div>
+  <div class="mw-col-span-8 mw-card mw-card-simple">8 Columns</div>
+</div>
+
+<h3 class="mw-mb-4">Auto Grid - Large Spacing</h3>
+<div class="mw-grid-auto-lg mw-mb-6">
+  <div class="mw-card mw-card-simple">Auto 1</div>
+  <div class="mw-card mw-card-simple">Auto 2</div>
+  <div class="mw-card mw-card-simple">Auto 3</div>
+  <div class="mw-card mw-card-simple">Auto 4</div>
+</div>
+
+<h3 class="mw-mb-4">Grid Stack - Natural Width (Left Aligned)</h3>
+<div class="mw-grid-stack mw-mb-6">
+  <button class="mw-btn mw-btn-primary">Small Button</button>
+  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
+  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
+  <div class="mw-card mw-card-simple" style="width: 200px">
+    Fixed Width Card
+  </div>
+</div>
+
+<h3 class="mw-mb-4">Grid Stack - Centered</h3>
+<div class="mw-grid-stack-center mw-mb-6">
+  <button class="mw-btn mw-btn-primary">Small Button</button>
+  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
+  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
+  <div class="mw-card mw-card-simple" style="width: 200px">
+    Fixed Width Card
+  </div>
+</div>
+
+<h3 class="mw-mb-4">Grid Stack - Right Aligned</h3>
+<div class="mw-grid-stack-end mw-mb-6">
+  <button class="mw-btn mw-btn-primary">Small Button</button>
+  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
+  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
+  <div class="mw-card mw-card-simple" style="width: 200px">
+    Fixed Width Card
+  </div>
+</div>
+
+<h3 class="mw-mb-4">Grid Stack - Full Width (Same as Grid-1)</h3>
+<div class="mw-grid-stack-stretch mw-mb-6">
+  <button class="mw-btn mw-btn-primary">Small Button</button>
+  <button class="mw-btn mw-btn-secondary">Medium Length Button</button>
+  <button class="mw-btn mw-btn-outline">Very Long Button Text Here</button>
+  <div class="mw-card mw-card-simple">Full Width Card</div>
+</div>
+
+<h3 class="mw-mb-4">Grid Stack - Large Spacing & Centered</h3>
+<div class="mw-grid-stack-center-lg mw-mb-6">
+  <button class="mw-btn mw-btn-primary">Button 1</button>
+  <button class="mw-btn mw-btn-secondary">Button 2</button>
+  <div class="mw-card mw-card-simple" style="width: 300px">Centered Card</div>
+</div>