maverick-wave 3.0.0

package/src/partials/header-container.html

@@ -0,0 +1,49 @@
+<div class="mw-logo">
+  <button type="button" onclick="location.href = '#home'">
+    <img src="header-logo.svg" alt="MaverickWave Logo" />
+  </button>
+</div>
+
+<div class="mw-header-actions">
+  <nav class="mw-navbar mw-navbar-medium">
+    <ul class="mw-navbar-list">
+      <li class="mw-navbar-item">
+        <a href="#get-started" class="mw-navbar-link">Get Started</a>
+      </li>
+      <li class="mw-navbar-item">
+        <a href="#foundations" class="mw-navbar-link">Foundations</a>
+      </li>
+      <li class="mw-navbar-item">
+        <a href="#layout" class="mw-navbar-link">Layout</a>
+      </li>
+      <li class="mw-navbar-item">
+        <a href="#components" class="mw-navbar-link">Components</a>
+      </li>
+      <li class="mw-navbar-item">
+        <a href="#forms" class="mw-navbar-link">Forms</a>
+      </li>
+      <li class="mw-navbar-item">
+        <a href="#data-display" class="mw-navbar-link">Data & Display</a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Theme Toggle -->
+  <div class="mw-theme-toggle mw-ml-5">
+    <div class="mw-theme-toggle-slider">
+      <div class="mw-theme-toggle-icon">
+        <i class="fas fa-moon"></i>
+      </div>
+    </div>
+  </div>
+
+  <!-- Login Button -->
+  <button class="mw-login-btn" id="login-button">
+    <i class="fas fa-lock"></i>
+  </button>
+
+  <!-- Burger Menu Button -->
+  <div class="mw-menu-btn">
+    <div class="mw-menu-btn-burger"></div>
+  </div>
+</div>

package/src/partials/header-utilities-container.html

@@ -0,0 +1,80 @@
+<h3 class="mw-section-subtitle">Header Utilities</h3>
+
+<div class="mw-mt-6">
+  <h3 class="mw-mb-2">Color Switcher (on a fake header here)</h3>
+  <p class="mw-text-muted">
+    This is not clickable here - because the real color switcher is on top
+    whtihin the header
+  </p>
+  <!-- Fake header -->
+  <div class="mw-mb-4" style="position: relative; overflow: hidden">
+    <div
+      class="mw-d-flex mw-justify-between mw-items-center mw-p-3"
+      style="
+        background: rgb(12, 17, 30);
+        border-bottom: 1px solid var(--mw-primary-color-hover);
+      "
+    >
+      <div class="mw-d-flex mw-items-center">
+        <div
+          style="
+            font-weight: bold;
+            font-size: 1.2rem;
+            color: var(--mw-header-burgerbutton-color);
+          "
+        >
+          Your Logo
+        </div>
+      </div>
+      <div class="mw-d-flex mw-items-center mw-gap-6">
+        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
+        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
+        <a style="color: var(--mw-header-navbar-list-color)"> Contact </a>
+        <div class="mw-theme-toggle">
+          <div class="mw-theme-toggle-slider">
+            <div class="mw-theme-toggle-icon">
+              <i class="fas fa-moon"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="mw-mt-6">
+  <h3 class="mw-mb-2">Localhost Indicator (on a fake header here)</h3>
+  <p class="mw-text-muted">
+    This is what the localhost indicator looks like when it has been activated
+    (so that you can recognise in the header that you are currently working
+    locally)
+  </p>
+  <!-- Fake header -->
+  <div class="mw-mb-4" style="position: relative; overflow: hidden">
+    <div
+      class="mw-d-flex mw-justify-between mw-items-center mw-p-3"
+      style="
+        background: rgb(12, 17, 30);
+        border-bottom: 1px solid var(--mw-primary-color-hover);
+      "
+    >
+      <div class="mw-localhost-indicator-pulse"></div>
+      <div class="mw-d-flex mw-items-center">
+        <div
+          style="
+            font-weight: bold;
+            font-size: 1.2rem;
+            color: var(--mw-header-burgerbutton-color);
+          "
+        >
+          Your Logo
+        </div>
+      </div>
+      <div class="mw-d-flex mw-items-center mw-gap-6">
+        <a style="color: var(--mw-header-navbar-list-color)"> Home </a>
+        <a style="color: var(--mw-header-navbar-list-color)"> About </a>
+        <a style="color: var(--mw-header-navbar-list-color)"> Contact </a>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/home-container.html

@@ -0,0 +1,48 @@
+<div class="mw-hero">
+  <div class="mw-home mw-home-content-fade">
+    <div class="mw-home-text">
+      <span class="version-corner">v{{VERSION}}</span>
+      <h1>Maverick<span class="mw-text-primary">Wave</span></h1>
+      <p>
+        Build stunning, responsive websites effortlessly with a modern,
+        lightweight CSS framework crafted for speed, style, and flexibility.
+      </p>
+    </div>
+
+    <div class="mw-d-flex mw-gap-8 mw-justify-center mw-mb-7">
+      <button
+        type="button"
+        onclick="location.href = '#get-started'"
+        class="mw-btn mw-btn-primary mw-btn-lg"
+      >
+        Get Started
+      </button>
+      <button
+        type="button"
+        onclick="location.href = '#documentation'"
+        class="mw-btn mw-btn-outline mw-btn-lg"
+      >
+        Documentation
+      </button>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-text-center">
+      <h3 class="mw-text-2xl mw-mb-4">Simple. Adaptive. Unstoppable.</h3>
+      <p class="mw-mb-4">
+        MaverickWave is a sleek foundation for creators who value elegance
+        without compromise. Its fluid design philosophy bends and flexes like
+        the tide - shaping itself perfectly to your vision.
+      </p>
+      <p class="mw-mb-4">
+        Launch stunning portfolios, vibrant corporate sites, and powerful
+        e-commerce platforms faster than ever. MaverickWave gives you the
+        ultimate creative freedom without sacrificing performance.
+      </p>
+      <p>
+        Experience the future of styling with effortless dark mode, mobile-first
+        responsive layouts, and accessibility at its core - because great design
+        is for everyone.
+      </p>
+    </div>
+  </div>
+</div>

package/src/partials/html-lists-container.html

@@ -0,0 +1,58 @@
+<h3 class="mw-section-subtitle">HTML Lists</h3>
+
+<div class="mw-grid-2-lg">
+  <div class="mw-card mw-card-simple">
+    <h4 class="mw-mb-2">Basic List</h4>
+    <ul class="mw-list">
+      <li>First item</li>
+      <li>Second item</li>
+      <li>
+        Third item
+        <ul class="mw-list">
+          <li>Nested item 1</li>
+          <li>Nested item 2</li>
+        </ul>
+      </li>
+      <li>Fourth item</li>
+    </ul>
+
+    <h4 class="mw-mb-2">Unstyled List</h4>
+    <ul class="mw-list mw-list-unstyled">
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+    </ul>
+
+    <h4 class="mw-mb-2">Inline List</h4>
+    <ul class="mw-list mw-list-inline">
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+    </ul>
+  </div>
+
+  <div class="mw-card mw-card-simple">
+    <h4 class="mw-mb-2">Dot List</h4>
+    <ul class="mw-list mw-list-dot">
+      <li>First item with dot</li>
+      <li>Second item with dot</li>
+      <li>Third item with dot</li>
+    </ul>
+
+    <h4 class="mw-mb-2">Check List</h4>
+    <ul class="mw-list mw-list-check">
+      <li>First completed item</li>
+      <li>Second completed item</li>
+      <li>Third completed item</li>
+    </ul>
+
+    <h4 class="mw-mb-2">Links List</h4>
+    <ul class="mw-list mw-list-link">
+      <li><a>First link</a></li>
+      <li><a>Second link</a></li>
+      <li><a>Third link</a></li>
+    </ul>
+  </div>
+</div>

package/src/partials/info-container.html

@@ -0,0 +1,87 @@
+<h3 class="mw-section-subtitle">Info Badges & Counters</h3>
+
+<h4 class="mw-mb-2">Pill Badges</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
+    <span class="mw-info">Default</span>
+    <span class="mw-info mw-info-sm">Small</span>
+    <span class="mw-info mw-info-lg">Large</span>
+    <span class="mw-info mw-info-xl">XL</span>
+  </div>
+</div>
+
+<h4 class="mw-mb-2 mw-mt-5">Color Badges (with Border)</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
+    <span class="mw-info mw-info-primary">Primary</span>
+    <span class="mw-info mw-info-secondary">Secondary</span>
+    <span class="mw-info mw-info-info">Info</span>
+    <span class="mw-info mw-info-success">Success</span>
+    <span class="mw-info mw-info-warning">Warning</span>
+    <span class="mw-info mw-info-danger">Danger</span>
+  </div>
+</div>
+
+<h4 class="mw-mb-2 mw-mt-5">Counters</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
+    <div class="mw-info mw-info-counter">
+      <div class="mw-info-value">5</div>
+      <div class="mw-info-label">Projects Completed</div>
+    </div>
+    <div class="mw-info mw-info-counter mw-info-primary">
+      <div class="mw-info-value">24/7</div>
+      <div class="mw-info-label">Support</div>
+    </div>
+    <div class="mw-info mw-info-counter mw-info-success mw-info-lg">
+      <div class="mw-info-value">150</div>
+      <div class="mw-info-label">Users</div>
+    </div>
+    <div class="mw-info mw-info-counter mw-info-danger mw-info-sm">
+      <div class="mw-info-value">3</div>
+      <div class="mw-info-label">Alerts</div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mw-mb-2 mw-mt-5">Mini Info Badges (Sizes)</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
+    <span class="mw-info-mini mw-info-mini-sm mw-info-mini-primary">
+      <i class="fas fa-check"></i>
+    </span>
+
+    <span class="mw-info-mini mw-info-mini-primary">
+      <i class="fas fa-check"></i>
+    </span>
+
+    <span class="mw-info-mini mw-info-mini-lg mw-info-mini-primary">
+      <i class="fas fa-check"></i>
+    </span>
+
+    <span class="mw-info-mini mw-info-mini-xl mw-info-mini-primary">
+      <i class="fas fa-check"></i>
+    </span>
+  </div>
+</div>
+
+<h4 class="mw-mb-2 mw-mt-5">Mini Info Badges (Colors)</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
+    <span class="mw-info-mini mw-info-mini-primary">
+      <i class="fas fa-info"></i>
+    </span>
+    <span class="mw-info-mini mw-info-mini-secondary"></span>
+    <span class="mw-info-mini mw-info-mini-info">
+      <i class="fas fa-question"></i>
+    </span>
+    <span class="mw-info-mini mw-info-mini-success">
+      <i class="fas fa-check"></i>
+    </span>
+    <span class="mw-info-mini mw-info-mini-warning"></span>
+    <span class="mw-info-mini mw-info-mini-danger">
+      <i class="fas fa-times"></i>
+    </span>
+    <span class="mw-info-mini"></span>
+  </div>
+</div>

package/src/partials/input-group-container.html

@@ -0,0 +1,285 @@
+<h3 class="mw-section-subtitle">Input Group</h3>
+
+<div class="mw-grid-2 mw-gap-6">
+  <!-- LEFT: Prefix & Suffix examples -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Prefix & Suffix</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Icon prefix (search) -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-search">Search</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-search"></i
+          ></span>
+          <input
+            id="ig-search"
+            type="text"
+            class="mw-input"
+            placeholder="Search projects..."
+          />
+        </div>
+      </div>
+
+      <!-- Text prefix (URL) -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-website">Website</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix">https://</span>
+          <input
+            id="ig-website"
+            type="text"
+            class="mw-input"
+            placeholder="your-domain.com"
+          />
+        </div>
+      </div>
+
+      <!-- Currency prefix + suffix -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-price">Price</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-euro-sign"></i
+          ></span>
+          <input
+            id="ig-price"
+            type="number"
+            class="mw-input"
+            placeholder="0.00"
+          />
+          <span class="mw-input-group-suffix">EUR</span>
+        </div>
+      </div>
+
+      <!-- Suffix icon -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-email">Email</label>
+        <div class="mw-input-group">
+          <input
+            id="ig-email"
+            type="email"
+            class="mw-input"
+            placeholder="user@example.com"
+          />
+          <span class="mw-input-group-suffix"
+            ><i class="fas fa-envelope"></i
+          ></span>
+        </div>
+      </div>
+
+      <!-- @ prefix -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ig-username">Username</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix">@</span>
+          <input
+            id="ig-username"
+            type="text"
+            class="mw-input"
+            placeholder="your_handle"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: With buttons & sizes -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">With Buttons & Sizes</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Input + search button -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-search-btn"
+          >Search with action</label
+        >
+        <div class="mw-input-group">
+          <input
+            id="ig-search-btn"
+            type="text"
+            class="mw-input"
+            placeholder="Keyword..."
+          />
+          <button type="button" class="mw-btn mw-btn-primary">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Copy URL -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-share">Share link</label>
+        <div class="mw-input-group">
+          <input
+            id="ig-share"
+            type="text"
+            class="mw-input"
+            value="https://maverick-wave.m1well.com"
+            readonly
+          />
+          <button
+            type="button"
+            class="mw-btn mw-btn-outline"
+            onclick="
+              navigator.clipboard?.writeText('https://maverick-wave.m1well.com')
+            "
+          >
+            <i class="fas fa-copy"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Small size -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-tag">Small</label>
+        <div class="mw-input-group mw-input-group-sm">
+          <span class="mw-input-group-prefix"><i class="fas fa-tag"></i></span>
+          <input
+            id="ig-tag"
+            type="text"
+            class="mw-input mw-input-sm"
+            placeholder="Tag name"
+          />
+        </div>
+      </div>
+
+      <!-- Large size -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-password">Large</label>
+        <div class="mw-input-group mw-input-group-lg">
+          <span class="mw-input-group-prefix"><i class="fas fa-lock"></i></span>
+          <input
+            id="ig-password"
+            type="password"
+            class="mw-input mw-input-lg"
+            placeholder="Password"
+          />
+        </div>
+      </div>
+
+      <!-- Prefix + Suffix button -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ig-message">Message</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-comment"></i
+          ></span>
+          <input
+            id="ig-message"
+            type="text"
+            class="mw-input"
+            placeholder="Type a message..."
+          />
+          <button type="button" class="mw-btn mw-btn-primary">
+            <i class="fas fa-paper-plane"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="mw-grid-2 mw-gap-6 mw-mt-6">
+  <!-- LEFT: Date & DateTime -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Date & DateTime</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Date -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-date">Date</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-calendar-days"></i
+          ></span>
+          <input id="ig-date" type="date" class="mw-input" />
+        </div>
+      </div>
+
+      <!-- DateTime-local -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-datetime">Date & Time</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-calendar-days"></i
+          ></span>
+          <input id="ig-datetime" type="datetime-local" class="mw-input" />
+        </div>
+      </div>
+
+      <!-- Date small -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-date-sm">Date (small)</label>
+        <div class="mw-input-group mw-input-group-sm">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-calendar-days"></i
+          ></span>
+          <input id="ig-date-sm" type="date" class="mw-input mw-input-sm" />
+        </div>
+      </div>
+
+      <!-- Date large -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ig-date-lg">Date (large)</label>
+        <div class="mw-input-group mw-input-group-lg">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-calendar-days"></i
+          ></span>
+          <input id="ig-date-lg" type="date" class="mw-input mw-input-lg" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: Time -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Time</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Time default -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-time">Time</label>
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-clock"></i
+          ></span>
+          <input id="ig-time" type="time" class="mw-input" />
+        </div>
+      </div>
+
+      <!-- Time with hint -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label mw-required" for="ig-time-hint"
+          >Start time</label
+        >
+        <div class="mw-input-group">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-clock"></i
+          ></span>
+          <input id="ig-time-hint" type="time" class="mw-input" />
+        </div>
+        <span class="mw-field-hint">Select the meeting start time.</span>
+      </div>
+
+      <!-- Time small -->
+      <div class="mw-field mw-mb-4">
+        <label class="mw-field-label" for="ig-time-sm">Time (small)</label>
+        <div class="mw-input-group mw-input-group-sm">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-clock"></i
+          ></span>
+          <input id="ig-time-sm" type="time" class="mw-input mw-input-sm" />
+        </div>
+      </div>
+
+      <!-- Time large -->
+      <div class="mw-field">
+        <label class="mw-field-label" for="ig-time-lg">Time (large)</label>
+        <div class="mw-input-group mw-input-group-lg">
+          <span class="mw-input-group-prefix"
+            ><i class="fas fa-clock"></i
+          ></span>
+          <input id="ig-time-lg" type="time" class="mw-input mw-input-lg" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>