maverick-wave 3.10.0 → 4.0.0

package/src/partials/calendar-container.html

@@ -0,0 +1,205 @@
+<h3 class="mw-section-subtitle">Calendar</h3>
+<p class="mw-text-muted">
+  Month, compact and week share every class - a week is seven cells instead of
+  forty-two, <code>mw-calendar-compact</code> drops the dots and a third of the
+  height. The status dots come in as
+  <code>data-calendar-markers='{"2026-08-19": ["success", "warning"]}'</code>.
+</p>
+<p class="mw-text-muted">
+  What a dot <em>means</em> belongs to the caller: the same calendar reads
+  &ldquo;request pending / booked / time offered&rdquo; in a scheduling app and
+  something else entirely on a public booking page. So the colour is a property,
+  <code>--mw-calendar-dot</code>, settable per dot or inherited from the cell -
+  <code>mw-calendar-dot-success</code> and friends are named presets for it, not
+  the only way in.
+</p>
+<div class="mw-card mw-card-simple mw-mb-6">
+  <div class="mw-row-split mw-row-split-center">
+    <span>Any colour, set on the dot itself</span>
+    <span class="mw-d-flex mw-items-center mw-gap-3">
+      <span class="mw-calendar-dot" style="--mw-calendar-dot: #7a4fd4"></span>
+      <span class="mw-calendar-dot" style="--mw-calendar-dot: #d47a4f"></span>
+      <span class="mw-calendar-dot mw-calendar-dot-success"></span>
+      <code>--mw-calendar-dot</code>
+    </span>
+  </div>
+</div>
+
+<div class="mw-grid-2 calendar-demos mw-my-6">
+  <div>
+    <h4 class="mw-mb-2">Month</h4>
+    <div
+      class="mw-calendar calendar-demo"
+      id="calendar-month"
+      data-calendar="month"
+      data-calendar-locale="en-GB"
+    >
+      <div class="mw-calendar-header">
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="-1"
+          aria-label="Previous month"
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+
+        <div class="mw-calendar-title" aria-live="polite"></div>
+
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="1"
+          aria-label="Next month"
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+      </div>
+
+      <div class="mw-calendar-grid"></div>
+
+      <div class="mw-calendar-legend">
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-success"></span>
+          Slots free
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-warning"></span>
+          Almost booked
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-danger"></span>
+          Fully booked
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-info"></span>
+          Public holiday
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Compact Month</h4>
+    <div
+      class="mw-calendar mw-calendar-compact calendar-demo"
+      id="calendar-compact"
+      data-calendar="month"
+      data-calendar-locale="en-GB"
+    >
+      <div class="mw-calendar-header">
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="-1"
+          aria-label="Previous month"
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+
+        <div class="mw-calendar-title" aria-live="polite"></div>
+
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="1"
+          aria-label="Next month"
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+      </div>
+
+      <div class="mw-calendar-grid"></div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Week</h4>
+    <div
+      class="mw-calendar calendar-demo"
+      id="calendar-week"
+      data-calendar="week"
+      data-calendar-locale="en-GB"
+    >
+      <div class="mw-calendar-header">
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="-1"
+          aria-label="Previous week"
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+
+        <div class="mw-calendar-title" aria-live="polite"></div>
+
+        <button
+          type="button"
+          class="mw-btn mw-btn-outline mw-btn-sm mw-calendar-nav"
+          data-calendar-nav="1"
+          aria-label="Next week"
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+      </div>
+
+      <div class="mw-calendar-grid"></div>
+
+      <div class="mw-calendar-legend">
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-success"></span>
+          Slots free
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-warning"></span>
+          Almost booked
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-danger"></span>
+          Fully booked
+        </span>
+        <span class="mw-calendar-legend-item">
+          <span class="mw-calendar-dot mw-calendar-dot-info"></span>
+          Public holiday
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Showcase only: the demo markers hang off today, so the dots stay in view no
+  // matter when this page is opened. A real page ships them as a literal.
+  (function () {
+    const markers = {};
+
+    const add = (offset, tones) => {
+      const date = new Date();
+      date.setDate(date.getDate() + offset);
+      const key =
+        date.getFullYear() +
+        '-' +
+        String(date.getMonth() + 1).padStart(2, '0') +
+        '-' +
+        String(date.getDate()).padStart(2, '0');
+      markers[key] = tones;
+    };
+
+    add(-6, ['danger']);
+    add(-4, ['success']);
+    add(-1, ['warning', 'info']);
+    add(0, ['success', 'warning']);
+    add(1, ['success']);
+    add(2, ['info']);
+    add(3, ['danger', 'warning', 'success']);
+    add(5, ['secondary']);
+    add(8, ['success']);
+    add(11, ['warning']);
+    add(14, ['danger']);
+
+    const encoded = JSON.stringify(markers);
+    document.querySelectorAll('[data-calendar]').forEach((calendar) => {
+      calendar.dataset.calendarMarkers = encoded;
+    });
+  })();
+</script>

package/src/partials/cards-container.html

@@ -276,6 +276,49 @@
   </div>
 </div>
 
+<h3 class="mw-mb-4 mw-mt-6">Note Above the Actions</h3>
+<p class="mw-text-muted">
+  <code>mw-actions-note</code> puts one right-aligned, muted line above a row of
+  actions - what the buttons apply to, why one of them is disabled, or that
+  something cannot be taken back. It goes straight into the action row and needs
+  no wrapper: the line takes the full width and pushes the buttons below it. It
+  works the same way in <code>mw-card-footer</code>,
+  <code>mw-modal-footer</code>, <code>mw-form-actions</code> and
+  <code>mw-panel-footer</code>.
+</p>
+<div class="mw-grid-2-lg">
+  <div class="mw-card">
+    <div class="mw-card-body">
+      <h3 class="mw-card-title">Subscription</h3>
+      <hr class="mw-card-title-divider" />
+      <p class="mw-card-text">
+        The plan stays active until the end of the current billing period.
+      </p>
+      <div class="mw-card-footer">
+        <p class="mw-actions-note">Renews on 19 September 2026.</p>
+        <button type="button" class="mw-btn mw-btn-outline">Change plan</button>
+        <button type="button" class="mw-btn mw-btn-primary">Keep it</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-card">
+    <div class="mw-card-body">
+      <h3 class="mw-card-title">Export</h3>
+      <hr class="mw-card-title-divider" />
+      <p class="mw-card-text">
+        Every invoice of the selected period, as one ZIP archive.
+      </p>
+      <div class="mw-card-footer">
+        <p class="mw-actions-note">128 invoices, roughly 40 MB.</p>
+        <button type="button" class="mw-btn mw-btn-primary">
+          Start export
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <h3 class="mw-mb-4 mw-mt-6">Card Variations</h3>
 <div class="mw-grid-3">
   <div class="mw-card">

package/src/partials/documentation-container.html

@@ -144,6 +144,9 @@
       <li>
         <a href="#kanban">Kanban</a>
       </li>
+      <li>
+        <a href="#calendar">Calendar</a>
+      </li>
       <li>
         <a href="#pagination">Pagination</a>
       </li>

package/src/partials/form-container.html

@@ -245,7 +245,7 @@
     </div>
 
     <div class="mw-form-actions">
-      <p class="mw-form-actions-hint">
+      <p class="mw-actions-note">
         Changes are saved to your account immediately after clicking Save.
       </p>
       <button type="reset" class="mw-btn mw-btn-outline">Reset</button>

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

@@ -23,7 +23,7 @@
 
 <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 mw-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>
@@ -31,7 +31,7 @@
 
   <div class="mw-tabs-content">
     <!-- HTML/CSS Tab -->
-    <div class="mw-tabs-panel active" id="html-css">
+    <div class="mw-tabs-panel mw-active" id="html-css">
       <div class="mw-card mw-card-simple">
         <h4>Using Pre-compiled CSS (CDN or Download)</h4>
         <p>