npm - maverick-wave - Versions diffs - 5.30.0 → 5.32.0 - Mend

maverick-wave 5.30.0 → 5.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/README.md +2 -2
package/maverick-wave.min.css +2 -2
package/package.json +8 -2
package/src/scss/abstracts/_variables.scss +2 -0
package/src/scss/components/_modals.scss +23 -9
package/src/scss/components/_testimonial.scss +2 -0
package/src/scss/layout/_home.scss +46 -0
package/src/scss/layout/_main.scss +20 -0
package/src/scss/layout/_parallax.scss +2 -2
package/src/scss/main-lean.scss +8 -3
package/.claude/settings.local.json +0 -43
package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
package/.claude/skills/mw-maverick-wave/references/components.md +0 -2170
package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
package/.claude/skills/mw-maverick-wave/references/theming.md +0 -530
package/.github/workflows/ci.yml +0 -41
package/.idea/codeStyles/Project.xml +0 -59
package/.idea/codeStyles/codeStyleConfig.xml +0 -5
package/.idea/maverick-wave.iml +0 -12
package/.idea/modules.xml +0 -8
package/.idea/prettier.xml +0 -6
package/.idea/vcs.xml +0 -6
package/.prettierignore +0 -8
package/.prettierrc.json +0 -7
package/CHANGELOG.md +0 -956
package/CLAUDE.md +0 -60
package/gulpfile.js +0 -167
package/index.html +0 -1730
package/release.sh +0 -31
package/scripts/verify.js +0 -252
package/src/assets/favicon/apple-touch-icon.png +0 -0
package/src/assets/favicon/favicon-96x96.png +0 -0
package/src/assets/favicon/favicon.svg +0 -1
package/src/assets/favicon/site.webmanifest +0 -37
package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
package/src/assets/favicon.ico +0 -0
package/src/assets/header-logo.svg +0 -24
package/src/assets/images/gallery-city.svg +0 -49
package/src/assets/images/gallery-desert.svg +0 -25
package/src/assets/images/gallery-forest.svg +0 -46
package/src/assets/images/gallery-lake.svg +0 -26
package/src/assets/images/gallery-mountain.svg +0 -19
package/src/assets/images/gallery-ocean.svg +0 -26
package/src/assets/images/gallery-oldtown.svg +0 -41
package/src/assets/images/gallery-snow.svg +0 -39
package/src/assets/images/photo-balloon.svg +0 -35
package/src/assets/images/photo-forest-path.svg +0 -31
package/src/assets/images/photo-lighthouse.svg +0 -42
package/src/assets/images/photo-palm.svg +0 -27
package/src/assets/images/photo-peak.svg +0 -27
package/src/assets/images/photo-tower.svg +0 -34
package/src/assets/images/photo-waterfall.svg +0 -32
package/src/assets/images/slider-field.svg +0 -124
package/src/assets/images/slider-forest.svg +0 -33
package/src/assets/images/slider-lake.svg +0 -35
package/src/assets/images/slider-mountains.svg +0 -29
package/src/assets/images/slider-trees.svg +0 -41
package/src/assets/images/story-aurora.svg +0 -36
package/src/assets/images/story-beach.svg +0 -34
package/src/assets/images/story-stars.svg +0 -35
package/src/assets/images/tile-analytics.svg +0 -22
package/src/assets/images/tile-cloud.svg +0 -19
package/src/assets/images/tile-ecommerce.svg +0 -14
package/src/assets/images/tile-enterprise.svg +0 -22
package/src/assets/images/tile-marketing.svg +0 -16
package/src/assets/media/demo-chime.wav +0 -0
package/src/assets/media/story-sunrise.jpg +0 -0
package/src/assets/media/story-sunrise.mp4 +0 -0
package/src/partials/accordions-container.html +0 -179
package/src/partials/alerts-container.html +0 -151
package/src/partials/announcement-container.html +0 -67
package/src/partials/avatars-container.html +0 -229
package/src/partials/badges-container.html +0 -114
package/src/partials/blog-posts-container.html +0 -158
package/src/partials/breadcrumbs-container.html +0 -126
package/src/partials/button-bar-container.html +0 -175
package/src/partials/buttons-container.html +0 -272
package/src/partials/calendar-container.html +0 -203
package/src/partials/cards-container.html +0 -727
package/src/partials/code-container.html +0 -194
package/src/partials/colors-container.html +0 -263
package/src/partials/coming-soon-container.html +0 -10
package/src/partials/contact-container.html +0 -85
package/src/partials/content-slider-container.html +0 -36
package/src/partials/divider-container.html +0 -70
package/src/partials/documentation-container.html +0 -204
package/src/partials/dropdown-container.html +0 -119
package/src/partials/empty-state-container.html +0 -79
package/src/partials/feed-container.html +0 -506
package/src/partials/footer-container.html +0 -113
package/src/partials/form-container.html +0 -262
package/src/partials/form-elements-container.html +0 -616
package/src/partials/form-field-container.html +0 -166
package/src/partials/gallery-container.html +0 -62
package/src/partials/get-started-container.html +0 -423
package/src/partials/grid-container.html +0 -191
package/src/partials/header-container.html +0 -69
package/src/partials/header-utilities-container.html +0 -331
package/src/partials/highlights-container.html +0 -71
package/src/partials/history-container.html +0 -67
package/src/partials/home-container.html +0 -31
package/src/partials/html-lists-container.html +0 -63
package/src/partials/info-container.html +0 -104
package/src/partials/input-group-container.html +0 -299
package/src/partials/item-lists-container.html +0 -368
package/src/partials/kanban-container.html +0 -459
package/src/partials/kbd-container.html +0 -63
package/src/partials/leader-row-container.html +0 -139
package/src/partials/login-container.html +0 -65
package/src/partials/lunch-menu-container.html +0 -341
package/src/partials/media-container.html +0 -27
package/src/partials/meta-info-container.html +0 -21
package/src/partials/modals-container.html +0 -199
package/src/partials/mosaic-container.html +0 -173
package/src/partials/page-header-container.html +0 -78
package/src/partials/pagination-container.html +0 -64
package/src/partials/palette-container.html +0 -480
package/src/partials/panels-container.html +0 -126
package/src/partials/parallax-container.html +0 -147
package/src/partials/portrait-gallery-container.html +0 -175
package/src/partials/preview-container.html +0 -136
package/src/partials/pricing-container.html +0 -523
package/src/partials/progress-container.html +0 -230
package/src/partials/prose-container.html +0 -43
package/src/partials/ratings-container.html +0 -104
package/src/partials/section-head-container.html +0 -77
package/src/partials/segmented-container.html +0 -66
package/src/partials/skeleton-container.html +0 -87
package/src/partials/spinners-container.html +0 -96
package/src/partials/stepper-container.html +0 -111
package/src/partials/stories-container.html +0 -182
package/src/partials/tables-container.html +0 -309
package/src/partials/tabs-container.html +0 -290
package/src/partials/tags-container.html +0 -242
package/src/partials/techstack-bucket-container.html +0 -187
package/src/partials/testimonials-container.html +0 -88
package/src/partials/tiles-container.html +0 -247
package/src/partials/timelines-container.html +0 -196
package/src/partials/typography-container.html +0 -74
package/src/partials/utilities-container.html +0 -553

package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md DELETED Viewed

@@ -1,530 +0,0 @@
-# Example: static landing page
-A complete page without a framework - this is the case the shipped
-`maverick-wave.min.js` is built for: accordion, mobile navigation, theme toggle
-and scroll spy all work by themselves. Only opening a modal has to be wired up
-by hand.
-The page uses what a landing page reaches for first: an announcement ribbon
-under the header, a hero with a scroll cue, feature cards and testimonials that
-rise into view as the visitor scrolls, offer cards with a real price row, and an
-accordion FAQ.
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, viewport-fit=cover"
-    />
-    <title>Acme Analytics</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-    />
-    <style>
-      /* Brand colours - one token per family, the rest is derived */
-      :root {
-        --mw-primary-color: #0f766e;
-        --mw-secondary-color: #b45309;
-        --mw-hero-background: url('/assets/hero.jpg');
-      }
-    </style>
-  </head>
-  <body>
-    <header class="mw-header">
-      <div class="mw-container">
-        <div class="mw-logo">
-          <button type="button" onclick="location.href='#home'">
-            <img src="/assets/logo.svg" alt="Acme" />
-          </button>
-        </div>
-        <div class="mw-header-actions">
-          <!-- Four links: mw-navbar-medium, so the panel takes over one
-               breakpoint later than the bare navbar would -->
-          <nav class="mw-navbar mw-navbar-medium">
-            <ul class="mw-navbar-list">
-              <li class="mw-navbar-item">
-                <a href="#features" class="mw-navbar-link">Features</a>
-              </li>
-              <li class="mw-navbar-item">
-                <a href="#pricing" class="mw-navbar-link">Pricing</a>
-              </li>
-              <li class="mw-navbar-item">
-                <a href="#voices" class="mw-navbar-link">Voices</a>
-              </li>
-              <li class="mw-navbar-item">
-                <a href="#faq" class="mw-navbar-link">FAQ</a>
-              </li>
-            </ul>
-          </nav>
-          <button
-            type="button"
-            class="mw-theme-toggle mw-ml-5"
-            aria-label="Toggle light and dark theme"
-          >
-            <div class="mw-theme-toggle-slider">
-              <div class="mw-theme-toggle-icon">
-                <i class="fas fa-moon"></i>
-              </div>
-            </div>
-          </button>
-          <button
-            type="button"
-            class="mw-menu-btn"
-            aria-label="Menu"
-            aria-expanded="false"
-            aria-controls="main-nav"
-          >
-            <span class="mw-menu-btn-burger"></span>
-          </button>
-        </div>
-      </div>
-    </header>
-    <!-- The ribbon under the fixed header. It stays put while the page scrolls
-         beneath it, and the anchor scroll offset grows by its height on its
-         own - #pricing lands below it, not under it -->
-    <aside class="mw-announcement mw-announcement-secondary">
-      <a class="mw-announcement-content" href="#pricing">
-        <span class="mw-announcement-highlight">-20 %</span>
-        <span>Launch offer on every plan until 30.09.</span>
-      </a>
-    </aside>
-    <main class="mw-main">
-      <!-- Hero: the container goes full-bleed because it contains mw-hero.
-           The scroll cue is a sibling of the hero inside that container, and
-           the hero keeps a strip at its bottom free for it -->
-      <section id="home" class="mw-section">
-        <div class="mw-container">
-          <div class="mw-hero">
-            <div class="mw-home mw-home-content-fade">
-              <div class="mw-home-text">
-                <h1>Acme <span class="mw-text-primary">Analytics</span></h1>
-                <p>
-                  Numbers that answer questions instead of raising them. One
-                  dashboard for the whole company, live in an afternoon.
-                </p>
-              </div>
-              <div class="mw-d-flex mw-gap-8 mw-justify-center">
-                <button
-                  type="button"
-                  class="mw-btn mw-btn-primary mw-btn-lg"
-                  data-mw-modal="demo"
-                >
-                  Book a demo
-                </button>
-                <a href="#features" class="mw-btn mw-btn-secondary mw-btn-lg"
-                  >Learn more</a
-                >
-              </div>
-            </div>
-          </div>
-          <a class="mw-scroll-hint" href="#features">
-            More <i class="fas fa-chevron-down"></i>
-          </a>
-        </div>
-      </section>
-      <!-- Features -->
-      <section id="features" class="mw-section mw-section-alternate">
-        <div class="mw-container">
-          <div class="mw-section-head">
-            <h2 class="mw-section-head-title">Features</h2>
-            <p class="mw-section-head-intro">
-              Three things every team asks about on the first call - and the
-              numbers behind them.
-            </p>
-          </div>
-          <!-- mw-reveal-stagger on the grid: every card rises as it scrolls
-               in, the second and third of each row a beat later -->
-          <div class="mw-grid-3 mw-reveal-stagger">
-            <div class="mw-card mw-card-stack">
-              <div class="mw-card-stack-header">
-                <div class="mw-card-stack-icon">
-                  <i class="fas fa-bolt"></i>
-                </div>
-                <h5 class="mw-card-stack-title">Fast</h5>
-              </div>
-              <div class="mw-card-stack-body">
-                <p class="mw-card-stack-text">
-                  Dashboards render in under a second.
-                </p>
-              </div>
-            </div>
-            <div class="mw-card mw-card-stack">
-              <div class="mw-card-stack-header">
-                <div class="mw-card-stack-icon">
-                  <i class="fas fa-shield-halved"></i>
-                </div>
-                <h5 class="mw-card-stack-title">Secure</h5>
-              </div>
-              <div class="mw-card-stack-body">
-                <p class="mw-card-stack-text">EU hosting, SSO, audit log.</p>
-              </div>
-            </div>
-            <div class="mw-card mw-card-stack">
-              <div class="mw-card-stack-header">
-                <div class="mw-card-stack-icon">
-                  <i class="fas fa-plug"></i>
-                </div>
-                <h5 class="mw-card-stack-title">Connected</h5>
-              </div>
-              <div class="mw-card-stack-body">
-                <div class="mw-tags mw-tags-primary">
-                  <span class="mw-tags-item">Postgres</span>
-                  <span class="mw-tags-item">BigQuery</span>
-                  <span class="mw-tags-item">S3</span>
-                </div>
-                <p class="mw-card-stack-text">Twelve connectors, no ETL.</p>
-              </div>
-            </div>
-          </div>
-          <!-- A single block reveals as one: plain mw-reveal -->
-          <div class="mw-grid-3 mw-mt-8 mw-reveal">
-            <div class="mw-info mw-info-counter mw-info-primary">
-              <div class="mw-info-value">120+</div>
-              <div class="mw-info-label">Teams</div>
-            </div>
-            <div class="mw-info mw-info-counter mw-info-success">
-              <div class="mw-info-value">99.9%</div>
-              <div class="mw-info-label">Uptime</div>
-            </div>
-            <div class="mw-info mw-info-counter">
-              <div class="mw-info-value">24/7</div>
-              <div class="mw-info-label">Support</div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Pricing -->
-      <section id="pricing" class="mw-section">
-        <div class="mw-container">
-          <div class="mw-section-head">
-            <h2 class="mw-section-head-title">Pricing</h2>
-            <p class="mw-section-head-intro">
-              Per workspace, per month. Every plan starts with a 14 day trial.
-            </p>
-          </div>
-          <!-- mw-offer pushes the price row to the bottom of the body, so the
-               three prices line up although the lists differ in length. The
-               feature frame reaches above its card - that is what mw-mt-10 is
-               for -->
-          <div class="mw-grid-3 mw-mt-10 mw-reveal-stagger">
-            <article class="mw-card mw-offer">
-              <div class="mw-card-body">
-                <h3 class="mw-card-title">Starter</h3>
-                <hr class="mw-card-title-divider" />
-                <p class="mw-card-text">For small teams getting started.</p>
-                <ul class="mw-list mw-list-check">
-                  <li>3 dashboards</li>
-                  <li>1 data source</li>
-                </ul>
-                <p class="mw-price mw-price-sm">
-                  <span class="mw-price-amount">29</span>
-                  <span class="mw-price-currency">Euro</span>
-                  <span class="mw-price-period">/ month</span>
-                </p>
-                <p class="mw-price-note">Cancel any time.</p>
-                <div class="mw-card-footer">
-                  <button type="button" class="mw-btn mw-btn-outline">
-                    Choose Starter
-                  </button>
-                </div>
-              </div>
-            </article>
-            <div class="mw-card-feature mw-card-feature-secondary">
-              <p class="mw-card-feature-label">Most booked</p>
-              <article class="mw-card mw-offer">
-                <div class="mw-card-body">
-                  <h3 class="mw-card-title">Team</h3>
-                  <hr class="mw-card-title-divider" />
-                  <p class="mw-card-text">For growing organisations.</p>
-                  <ul class="mw-list mw-list-check">
-                    <li>Unlimited dashboards</li>
-                    <li>SSO</li>
-                    <li>Priority support</li>
-                  </ul>
-                  <!-- A struck price is invisible to a screen reader - name
-                       both prices with mw-sr-only -->
-                  <p class="mw-price mw-price-sm">
-                    <span class="mw-price-original">
-                      <span class="mw-sr-only">Regular price:</span>99 Euro
-                    </span>
-                    <span class="mw-sr-only">Now:</span>
-                    <span class="mw-price-amount">79</span>
-                    <span class="mw-price-currency">Euro</span>
-                    <span class="mw-tag mw-tag-secondary">-20%</span>
-                  </p>
-                  <p class="mw-price-note">
-                    Per month, launch offer until 30.09.
-                  </p>
-                  <div class="mw-card-footer">
-                    <button type="button" class="mw-btn mw-btn-primary">
-                      Choose Team
-                    </button>
-                  </div>
-                </div>
-              </article>
-            </div>
-            <article class="mw-card mw-offer">
-              <div class="mw-card-body">
-                <h3 class="mw-card-title">Enterprise</h3>
-                <hr class="mw-card-title-divider" />
-                <p class="mw-card-text">On premise, custom SLA.</p>
-                <ul class="mw-list mw-list-check">
-                  <li>Everything in Team</li>
-                  <li>Named contact</li>
-                </ul>
-                <p class="mw-price mw-price-sm">
-                  <span class="mw-price-word">On request</span>
-                </p>
-                <p class="mw-price-note">Priced per seat, yearly term.</p>
-                <div class="mw-card-footer">
-                  <button
-                    type="button"
-                    class="mw-btn mw-btn-outline"
-                    data-mw-modal="demo"
-                  >
-                    Contact us
-                  </button>
-                </div>
-              </div>
-            </article>
-          </div>
-        </div>
-      </section>
-      <!-- Voices -->
-      <section id="voices" class="mw-section mw-section-alternate">
-        <div class="mw-container">
-          <div class="mw-section-head">
-            <h2 class="mw-section-head-title">Voices</h2>
-            <p class="mw-section-head-intro">
-              What teams say after the first quarter.
-            </p>
-          </div>
-          <!-- Quotes of unequal length: columns, not a grid. The stagger
-               works on the column children just the same -->
-          <div class="mw-columns-3 mw-reveal-stagger">
-            <figure class="mw-testimonial">
-              <blockquote>
-                The first dashboard was live before the kickoff meeting ended.
-              </blockquote>
-              <figcaption class="mw-testimonial-source">
-                Lena B.
-                <span class="mw-testimonial-detail"
-                  >&middot; Head of Operations</span
-                >
-                <time class="mw-testimonial-date" datetime="2026-06"
-                  >June 2026</time
-                >
-              </figcaption>
-            </figure>
-            <figure class="mw-testimonial">
-              <blockquote>
-                We replaced three reporting tools with one. Finance stopped
-                asking for exports, they open the dashboard themselves - and for
-                the first time everyone quotes the same number.
-              </blockquote>
-              <figcaption class="mw-testimonial-source">
-                Daniel K.
-                <span class="mw-testimonial-detail">&middot; CFO</span>
-              </figcaption>
-            </figure>
-            <figure class="mw-testimonial">
-              <blockquote>Connected our warehouse in an afternoon.</blockquote>
-              <figcaption class="mw-testimonial-source">
-                Sofia R.
-                <span class="mw-testimonial-detail"
-                  >&middot; Data Engineer</span
-                >
-              </figcaption>
-            </figure>
-          </div>
-        </div>
-      </section>
-      <!-- FAQ -->
-      <section id="faq" class="mw-section">
-        <div class="mw-container">
-          <div class="mw-section-head">
-            <h2 class="mw-section-head-title">FAQ</h2>
-          </div>
-          <div class="mw-accordion">
-            <div class="mw-accordion-item">
-              <button
-                type="button"
-                class="mw-accordion-header mw-active"
-                aria-expanded="true"
-                aria-controls="faq-storage"
-              >
-                <span>Where is the data stored?</span>
-                <i class="fas fa-chevron-down mw-accordion-icon"></i>
-              </button>
-              <div class="mw-accordion-content mw-active" id="faq-storage">
-                <div class="mw-accordion-content-inner">
-                  <p>In Frankfurt, in our own data centre.</p>
-                </div>
-              </div>
-            </div>
-            <div class="mw-accordion-item">
-              <button
-                type="button"
-                class="mw-accordion-header"
-                aria-expanded="false"
-                aria-controls="faq-cancel"
-              >
-                <span>Can I cancel monthly?</span>
-                <i class="fas fa-chevron-down mw-accordion-icon"></i>
-              </button>
-              <div class="mw-accordion-content" id="faq-cancel">
-                <div class="mw-accordion-content-inner">
-                  <p>Yes, at the end of every billing period.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="mw-alert mw-alert-info mw-mt-6">
-            <div class="mw-alert-icon"><i class="fas fa-lightbulb"></i></div>
-            <div class="mw-alert-content">
-              <span class="mw-alert-title">Still unsure?</span>
-              <!-- A link in running text is mw-link, not a button class - it
-                   keeps the line height of the paragraph around it -->
-              <p>
-                <button type="button" class="mw-link" data-mw-modal="demo">
-                  Book a 20 minute demo</button
-                >, no sales pitch.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-    <footer class="mw-footer">
-      <div class="mw-container">
-        <div class="mw-footer-top">
-          <div class="mw-footer-column">
-            <h3>Acme Analytics</h3>
-            <p>Numbers that answer questions.</p>
-          </div>
-          <div class="mw-footer-column">
-            <h3>Product</h3>
-            <ul>
-              <li><a href="#features">Features</a></li>
-              <li><a href="#pricing">Pricing</a></li>
-              <li><a href="#faq">FAQ</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="mw-social-links">
-          <a href="#" data-tooltip="GitHub"><i class="fab fa-github"></i></a>
-          <a href="mailto:hi@example.com" data-tooltip="Mail"
-            ><i class="fa fa-envelope"></i
-          ></a>
-        </div>
-        <p class="mw-copyright">&copy; 2026 Acme</p>
-      </div>
-    </footer>
-    <!-- Markup stays in the DOM; a trigger carrying data-mw-modal="demo" opens
-         it, .mw-modal-close closes it, closedby="any" dismisses on the backdrop -->
-    <dialog
-      id="demo"
-      class="mw-modal"
-      closedby="any"
-      aria-labelledby="demo-title"
-    >
-      <div class="mw-modal-header">
-        <h4 class="mw-modal-title" id="demo-title">Book a demo</h4>
-        <button type="button" class="mw-modal-close">&#120299;</button>
-      </div>
-      <div class="mw-modal-body">
-        <form class="mw-form">
-          <div class="mw-field">
-            <label class="mw-field-label mw-required" for="demo-email"
-              >Email</label
-            >
-            <div class="mw-input-group">
-              <span class="mw-input-group-prefix"
-                ><i class="fas fa-envelope"></i
-              ></span>
-              <input id="demo-email" type="email" class="mw-input" required />
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="mw-modal-footer">
-        <button type="button" class="mw-modal-close mw-btn mw-btn-outline">
-          Cancel
-        </button>
-        <button type="button" class="mw-btn mw-btn-primary">Send</button>
-      </div>
-    </dialog>
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5/maverick-wave.min.js"></script>
-  </body>
-</html>
-```
-## Notes
-- The theme toggle needs no code - the script persists the choice under
-  `localStorage['mw-theme']`, toggles `mw-theme-light` / `mw-theme-dark` on
-  `<body>` and wraps the
-  flip in `mw-theme-switching` so it starts no transitions.
-- The scroll spy sets `mw-active` on the `mw-navbar-link` whose `href` matches
-  the `section[id]` currently in view - the `<section id="…">` elements are
-  the contract.
-- `mw-navbar` without a size class collapses at `md`. With four to five links
-  use `mw-navbar-medium`, with six or more `mw-navbar-large`.
-- The hero container becomes full-bleed only because it contains `mw-hero`; the
-  other `mw-container` elements stay at `min(1200px, 89%)`. The scroll cue is a
-  sibling of `mw-hero` in that container - the hero reserves a strip at its
-  bottom for it, so the buttons never sit on top of the cue.
-- `mw-announcement` is fixed below the header. `scroll-padding-top` grows by
-  `--mw-announcement-height` automatically, so an anchor scrolled to lands
-  below the ribbon. One per page; `mw-announcement-static` puts it in the flow
-  instead.
-- `mw-reveal-stagger` goes on the grid (or `mw-columns-*`) and reveals every
-  child as it scrolls in, the second and third of each three a beat later.
-  `mw-reveal` on a single block reveals that block as one. Both are off under
-  `prefers-reduced-motion`. A page like this one loads the script, so Firefox -
-  which has no scroll timelines - runs the same entrance off an observer;
-  without the script the blocks stand in place, never invisible.
-- `mw-offer` on a card pushes the price row to the bottom of the body, so the
-  prices in a row line up. The `mw-card-feature` frame around the middle plan
-  reaches 29px above its card - the `mw-mt-10` on the grid is that room.
-- Overriding `--mw-primary-color` in a `<style>` block is enough - hover tones,
-  translucent backgrounds and the border accent follow via `color-mix()`.