maverick-wave 5.6.0 → 5.8.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.6.0",
+  "version": "5.8.0",
   "config": {
-    "version_short": "5.6"
+    "version_short": "5.8"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/scripts/verify.js

@@ -6,7 +6,7 @@
  *   1. every var(--mw-*) has a definition
  *   2. every --mw-* definition is used somewhere
  *   3. every mw-* class in the markup exists in the built CSS
- *   4. the committed root release files exist and are not empty
+ *   4. the committed root release files match a fresh build
  *   5. the CDN version pinned in the docs matches package.json
  *   6. no `animation:` shorthand in a file that uses a scroll timeline
  *
@@ -135,6 +135,16 @@ for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
     errors.push(
       `release file missing or empty: ${f} - run \`npm run prepack\` and commit it`
     );
+    continue;
+  }
+  // `gulp release` runs the same sass/postcss/terser pipeline as the dist tasks
+  // and only writes elsewhere, so dist/ is what the committed file has to equal.
+  // Existing-and-not-empty was not enough: 5.7.0 shipped a root bundle four
+  // commits behind src/, and every CDN consumer got that one.
+  if (read(p) !== read(path.join(ROOT, 'dist', f))) {
+    errors.push(
+      `release file stale: ${f} differs from the fresh build in dist/ - run \`npm run prepack\` and commit it`
+    );
   }
 }
 

package/src/partials/header-container.html

@@ -41,14 +41,16 @@
     </div>
   </button>
 
-  <!-- Login Button -->
+  <!-- Palette Switcher, showcase only - the panel lives in palette-container -->
   <button
     type="button"
-    class="mw-login-btn"
-    id="login-button"
-    aria-label="Log in"
+    class="palette-toggle"
+    id="palette-toggle"
+    aria-expanded="false"
+    aria-controls="palette-panel"
+    aria-label="Try another palette"
   >
-    <i class="fas fa-lock"></i>
+    <i class="fas fa-palette"></i>
   </button>
 
   <!-- Burger Menu Button -->

package/src/partials/history-container.html

@@ -56,7 +56,7 @@
     <div class="mw-timeline-simple-date">2025-04-30</div>
     <div class="mw-timeline-simple-content">
       <div class="mw-card mw-card-simple">
-        <h3 class="mw-card-title">v1.3.0</h3>
+        <h3 class="mw-card-title">v1.0.0</h3>
         <p>
           Let's say initial release - grid, header and a first handful of
           components, published as they were.

package/src/partials/palette-container.html

@@ -1,14 +1,3 @@
-<button
-  type="button"
-  class="palette-fab"
-  id="palette-fab"
-  aria-expanded="false"
-  aria-controls="palette-panel"
-  aria-label="Try another palette"
->
-  <i class="fas fa-palette"></i>
-</button>
-
 <div class="palette-panel" id="palette-panel" hidden>
   <h3 class="palette-heading">Palette</h3>
   <p class="palette-hint">
@@ -25,7 +14,7 @@
       data-dark="#171f30"
       data-light="#e7e7f0"
     >
-      Maverick
+      MaverickWave
     </button>
     <button
       type="button"
@@ -127,6 +116,46 @@
     >
       Wine
     </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#cc8a04"
+      data-secondary="#2b5f9e"
+      data-dark="#231c0f"
+      data-light="#f3ecdc"
+    >
+      Amber
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#6da31c"
+      data-secondary="#a3319b"
+      data-dark="#171e10"
+      data-light="#ecf1e1"
+    >
+      Lime
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#5e2c6e"
+      data-secondary="#c9853a"
+      data-dark="#1c1221"
+      data-light="#ece5f0"
+    >
+      Aubergine
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#b0543a"
+      data-secondary="#3d7160"
+      data-dark="#231613"
+      data-light="#f3e8e4"
+    >
+      Clay
+    </button>
   </div>
 
   <div class="palette-custom">
@@ -143,7 +172,8 @@
   <h3 class="palette-heading palette-heading-split">Variants</h3>
   <p class="palette-hint">
     Every switch is one class on &lt;html&gt; or one custom property - no build,
-    no rebuild. The setup at the bottom is what a project would carry.
+    no rebuild. The box at the bottom is what a project would carry, and it
+    reads back: paste someone else's setup in to see it.
   </p>
 
   <div id="variant-list">
@@ -180,34 +210,43 @@
 
     <label class="variant-row">
       <span class="variant-label">
-        Pill buttons
+        Button shape
         <small
-          >Buttons rounded all the way. Form fields keep their own shape.</small
+          >From cut corners to fully rounded. Form fields keep their own
+          shape.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-btn-pill" />
+      <select data-variant-classes>
+        <option value="mw-btn-square">Square</option>
+        <option value="" selected>Default</option>
+        <option value="mw-btn-pill">Pill</option>
+      </select>
     </label>
 
     <label class="variant-row">
       <span class="variant-label">
-        Single accent color
+        Button style
         <small
-          >Drop the second brand colour - hovers, tints and borders all come
-          from the first one.</small
+          >How a filled button is painted. Outline, ghost and link buttons keep
+          their own treatment.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-accent-single" />
+      <select data-variant-classes>
+        <option value="" selected>Default</option>
+        <option value="mw-btn-glass">Glass</option>
+        <option value="mw-btn-tactile">Tactile</option>
+      </select>
     </label>
 
     <label class="variant-row">
       <span class="variant-label">
-        Photos in grey
+        Single accent color
         <small
-          >Pictures stay grey until the pointer reaches them, so only the brand
-          carries colour.</small
+          >Drop the second brand colour - hovers, tints and borders all come
+          from the first one.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-media-mono" />
+      <input type="checkbox" data-variant-class="mw-accent-single" />
     </label>
 
     <label class="variant-row">
@@ -245,6 +284,17 @@
       <input type="checkbox" data-variant-class="mw-shadows-flat" />
     </label>
 
+    <label class="variant-row">
+      <span class="variant-label">
+        Flush surfaces
+        <small
+          >Cards, panels and the footer drop their own tone and sit on the page
+          colour, separated by their border alone.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-surfaces-flush" />
+    </label>
+
     <label class="variant-row">
       <span class="variant-label">
         Static on hover
@@ -256,6 +306,22 @@
       <input type="checkbox" data-variant-class="mw-hover-static" />
     </label>
 
+    <label class="variant-row">
+      <span class="variant-label">
+        Scroll reveal
+        <small
+          >Cards and sections rise into place as they scroll in. Off has
+          everything sit where it lands.</small
+        >
+      </span>
+      <input
+        type="checkbox"
+        checked
+        data-variant-class="mw-scroll-static"
+        data-variant-invert
+      />
+    </label>
+
     <label class="variant-row">
       <span class="variant-label">
         Sticky header
@@ -285,6 +351,21 @@
       />
     </label>
 
+    <label class="variant-row">
+      <span class="variant-label">
+        Text size
+        <small
+          >The base the whole scale is built on - type, padding and control
+          heights move together.</small
+        >
+      </span>
+      <select data-variant-prop="--mw-root-font-size">
+        <option value="93.75%">Compact</option>
+        <option value="" selected>Default</option>
+        <option value="106.25%">Large</option>
+      </select>
+    </label>
+
     <label class="variant-row">
       <span class="variant-label">
         Section spacing
@@ -308,7 +389,13 @@
         >
       </span>
       <select data-variant-prop="--mw-container-width">
-        <option value="" selected>1200</option>
+        <option value="min(800px, calc(100% - 2 * var(--mw-container-gutter)))">
+          800
+        </option>
+        <option value="min(960px, calc(100% - 2 * var(--mw-container-gutter)))">
+          960
+        </option>
+        <option value="" selected>1200 (default)</option>
         <option
           value="min(1440px, calc(100% - 2 * var(--mw-container-gutter)))"
         >
@@ -321,5 +408,15 @@
     </label>
   </div>
 
-  <pre class="variant-setup" id="variant-setup"></pre>
+  <label class="variant-setup-label" for="variant-setup">
+    Setup - editable, paste one in to load it
+  </label>
+  <textarea
+    class="variant-setup"
+    id="variant-setup"
+    rows="4"
+    spellcheck="false"
+    autocapitalize="off"
+    autocorrect="off"
+  ></textarea>
 </div>

package/src/partials/typography-container.html

@@ -19,6 +19,14 @@
     <blockquote>
       In the complex world of code, simplicity is the ultimate sophistication.
     </blockquote>
+    <p>
+      <span class="mw-text-xs">Extra Small Text</span><br />
+      <span class="mw-text-sm">Small Text</span><br />
+      <span class="mw-text-base">Base Text</span><br />
+      <span class="mw-text-md">Medium Text</span><br />
+      <span class="mw-text-lg">Large Text</span><br />
+      <span class="mw-text-xl">Extra Large Text</span>
+    </p>
   </div>
 
   <div class="mw-grid-stack mw-gap-2">
@@ -59,14 +67,5 @@
     <p class="mw-text-color-light">
       This always remains the text color of the light theme.
     </p>
-
-    <p>
-      <span class="mw-text-xs">Extra Small Text</span><br />
-      <span class="mw-text-sm">Small Text</span><br />
-      <span class="mw-text-base">Base Text</span><br />
-      <span class="mw-text-md">Medium Text</span><br />
-      <span class="mw-text-lg">Large Text</span><br />
-      <span class="mw-text-xl">Extra Large Text</span>
-    </p>
   </div>
 </div>

package/src/partials/utilities-container.html

@@ -426,10 +426,10 @@
 
 <h3 class="mw-mb-4 mw-mt-6">Site-wide Variants</h3>
 <p class="mw-text-muted mw-text-measure">
-  Eight classes on <code>&lt;html&gt;</code> retune the whole look without
+  Twelve classes on <code>&lt;html&gt;</code> retune the whole look without
   touching markup. They stack, and the palette button in the corner switches all
   of them live - the box at the bottom of that panel prints the setup a project
-  would carry.
+  would carry, and reads it back: paste one in to see someone else's.
 </p>
 <ul class="mw-list mw-list-dot mw-text-measure">
   <li>
@@ -444,10 +444,18 @@
     <code>mw-shadows-flat</code> - elevation 1-3 to <code>none</code>, dropdown
     and modal keep theirs
   </li>
+  <li>
+    <code>mw-surfaces-flush</code> - cards, panels and footer on the page
+    colour, held by their border
+  </li>
   <li>
     <code>mw-hover-static</code> - no hover travels; colour and border still
     respond
   </li>
+  <li>
+    <code>mw-scroll-static</code> - no scroll entrance;
+    <code>mw-reveal</code> blocks sit where they land
+  </li>
   <li>
     <code>mw-sections-plain</code> - the hatch behind
     <code>mw-section-alternate</code> collapses into the page colour
@@ -457,10 +465,22 @@
     <code>mw-btn-pill</code> - fully rounded buttons, form fields keep their
     radius
   </li>
-  <li><code>mw-media-mono</code> - photos grey until hovered</li>
+  <li>
+    <code>mw-btn-square</code> - the other end of that axis: buttons cut to a
+    hard corner while the page keeps its radius
+  </li>
+  <li>
+    <code>mw-btn-tactile</code> - filled buttons stand on a darker edge and sink
+    onto it when pressed
+  </li>
+  <li>
+    <code>mw-btn-glass</code> - filled buttons become tinted glass with a lit
+    top edge
+  </li>
 </ul>
 <p class="mw-text-muted mw-text-measure">
-  Four properties do the rest: <code>--mw-radius-scale</code> multiplies every
-  radius, plus <code>--mw-font-family-heading</code>,
-  <code>--mw-container-width</code> and <code>--mw-section-padding-block</code>.
+  Five properties do the rest: <code>--mw-radius-scale</code> multiplies every
+  radius and <code>--mw-root-font-size</code> the whole rem scale, plus
+  <code>--mw-font-family-heading</code>, <code>--mw-container-width</code> and
+  <code>--mw-section-padding-block</code>.
 </p>

package/src/scss/abstracts/_mixins.scss

@@ -133,9 +133,14 @@
 // opt-outs than a colour change does: reduced motion, where a transform still
 // jumps to its end position in one frame however short the duration is, and the
 // static-hover variant. Colour and shadow belong in `hover` and stay either way.
+//
+// A tooltip trigger is a third: a transform makes the element a containing block
+// for its own fixed-position descendants, and the tooltip is exactly that - so a
+// lifted trigger drags the bubble down onto itself. The two cannot both happen,
+// and a label that lands where it belongs beats two pixels of travel.
 @mixin hover-move {
   @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
-    :root:not(.mw-hover-static) &:hover {
+    :root:not(.mw-hover-static) &:hover:not([data-tooltip]) {
       @content;
     }
   }

package/src/scss/abstracts/_variables.scss

@@ -91,12 +91,12 @@ $shadow-far-dark: 16% !default;
 $shadow-near-light: 21% !default;
 $shadow-far-light: 14% !default;
 
-// Control sizes - 32 / 36 / 40px, shared by input, select, textarea and button so
+// Control sizes - 30 / 34 / 38px, shared by input, select, textarea and button so
 // the row lines up. A minimum, not a fixed height, and it is what sets a field's
 // height: trimming `padding-block` moves the text inside the box, not the box.
-$control-height-sm: 2rem !default;
-$control-height: 2.25rem !default;
-$control-height-lg: 2.5rem !default;
+$control-height-sm: 1.875rem !default;
+$control-height: 2.125rem !default;
+$control-height-lg: 2.375rem !default;
 
 // All three fields share it; buttons stay one step above, because a button
 // carries a label and a field carries what the user typed

package/src/scss/base/_base.scss

@@ -54,6 +54,10 @@
     // Same list, for a state that should feel instant rather than animated
     --mw-transition-fast: #{transition-list('--mw-duration-fast')};
 
+    // The whole scale is rem, so this one percentage moves type, spacing and
+    // control heights together. Breakpoints are px and stay where they are.
+    --mw-root-font-size: 100%;
+
     // Custom properties, so an application can tighten its forms without recompiling
     --mw-control-height-sm: #{$control-height-sm};
     --mw-control-height: #{$control-height};

package/src/scss/base/_reset.scss

@@ -10,6 +10,8 @@
   }
 
   html {
+    // Percent and not px, or a reader who raised their browser font loses it
+    font-size: var(--mw-root-font-size);
     scroll-behavior: smooth;
     min-width: 320px;
     scroll-padding-top: var(--mw-header-height);

package/src/scss/components/_avatars.scss

@@ -22,6 +22,35 @@
       height: 100%;
       object-fit: cover;
       display: block;
+      transition: transform var(--mw-duration-slow) var(--mw-ease-out);
+    }
+
+    // `:has(img)` keeps the sweep off the initials variant, where it would just
+    // flash a white bar across the letters
+    &:has(img)::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        115deg,
+        transparent 38%,
+        rgb(255 255 255 / 0.45) 50%,
+        transparent 62%
+      );
+      transform: translateX(-130%);
+      pointer-events: none;
+    }
+
+    @include hover-move {
+      img {
+        transform: scale(1.12);
+      }
+
+      // Transition only here, so the sweep resets instantly instead of travelling back
+      &:has(img)::after {
+        transform: translateX(130%);
+        transition: transform var(--mw-duration-slower) var(--mw-ease-out);
+      }
     }
 
     &-xs {

package/src/scss/components/_button-bar.scss

@@ -132,7 +132,7 @@
     gap: spacing('3');
 
     .mw-btn {
-      padding: spacing('3') spacing('5');
+      padding: spacing('2') spacing('5');
       font-size: font-size('md');
       min-height: var(--mw-control-height-lg);
     }

package/src/scss/components/_buttons.scss

@@ -242,7 +242,7 @@
     min-height: var(--mw-control-height-sm);
   }
   .mw-btn-lg {
-    padding: spacing('3') spacing('5');
+    padding: spacing('2') spacing('5');
     font-size: font-size('md');
     min-height: var(--mw-control-height-lg);
   }

package/src/scss/form-elements/_input.scss

@@ -3,7 +3,7 @@
 @layer mw.forms {
   .mw-input {
     width: 100%;
-    padding: spacing('2') spacing('3');
+    padding: spacing('1') spacing('3');
     font-size: var(--mw-control-font);
     line-height: var(--mw-control-line-height);
     min-height: var(--mw-control-height);

package/src/scss/form-elements/_select.scss

@@ -3,7 +3,7 @@
 @layer mw.forms {
   .mw-select {
     width: 100%;
-    padding: spacing('2') spacing('6') spacing('2') spacing('3');
+    padding: spacing('1') spacing('6') spacing('1') spacing('3');
     font-size: var(--mw-control-font);
     min-height: var(--mw-control-height);
     background: var(--mw-form-elements-background);

package/src/scss/layout/_main.scss

@@ -157,8 +157,23 @@
     padding: spacing('2') spacing('5');
     border: 1px solid #{fade('hero-text-color', 22%)};
     border-radius: 999px;
-    background: fade('hero-text-color', 8%);
-    backdrop-filter: blur(4px);
+    // A vertical ramp and not a flat tint: glass is lit from above, and the
+    // gradient is what gives the pill a thickness instead of a fogged panel
+    background: linear-gradient(
+      to bottom,
+      #{fade('hero-text-color', 16%)},
+      #{fade('hero-text-color', 5%)}
+    );
+    // saturate() is what separates glass from frosted plastic: the blur alone
+    // greys out what shows through, and pushing the chroma back up is how a
+    // real lens reads. The two inset lines are the specular highlight - light
+    // catching the top edge, a fainter bounce off the bottom - and the outer
+    // shadow is what lifts the pill off the photo instead of pasting it on.
+    backdrop-filter: blur(14px) saturate(180%);
+    box-shadow:
+      inset 0 1px 0 #{fade('hero-text-color', 40%)},
+      inset 0 -1px 0 #{fade('hero-text-color', 12%)},
+      0 2px 12px rgb(0 0 0 / 18%);
     color: fade('hero-text-color', 88%);
     font-size: font-size('sm');
     font-weight: font-weight('medium');
@@ -311,6 +326,20 @@
       }
     }
 
+    // A press usually scales the trigger, and a transform makes it a containing
+    // block for the fixed-position bubble above - which would drop the label
+    // into the element being pressed. So it steps aside for the click instead;
+    // by then it has been read anyway. After the hover rule, same weight.
+    &:active::before,
+    &:active::after {
+      opacity: 0;
+      display: none;
+      // Not transitioned: `allow-discrete` holds `display: block` until the fade
+      // ends, and the bubble would spend those 180ms visibly sitting in the
+      // element. Going back out on release keeps the fade - that one is wanted.
+      transition: none;
+    }
+
     // The clipping caveat above, lifted where the browser can do it: `fixed` takes
     // the bubble out of the trigger's containing block, anchor positioning keeps
     // it attached. No `anchor-name` needed - a pseudo element is implicitly

package/src/scss/utilities/_reveal.scss

@@ -11,8 +11,7 @@
   // `animation:` that cannot carry a timeline.
   @supports (animation-timeline: view()) {
     @media (prefers-reduced-motion: no-preference) {
-      .mw-reveal,
-      .mw-reveal-stagger > * {
+      :root:not(.mw-scroll-static) :is(.mw-reveal, .mw-reveal-stagger > *) {
         animation-name: mw-reveal;
         animation-timing-function: var(--mw-ease-out);
         animation-fill-mode: backwards;
@@ -47,6 +46,14 @@
       transform: translateY(40px);
     }
 
+    // The script has already hidden whatever was below the fold when the class
+    // arrives, and it only ever un-hides on intersection - without this the
+    // switch would leave those elements invisible instead of static.
+    :root.mw-scroll-static .mw-reveal-hidden {
+      opacity: 1;
+      transform: none;
+    }
+
     .mw-reveal-run {
       // `backwards` for the reason above - a forwards fill would pin the
       // transform and cost the card its hover lift. The delay comes inline,

package/src/scss/utilities/_touch-targets.scss

@@ -22,7 +22,7 @@
       min-height: 2.5rem;
     }
 
-    // The base fields sit at 2.35rem from the control scale, which is right under
+    // The base fields sit at 2.125rem from the control scale, which is right under
     // a pointer and short of a thumb. Same floor as the button beside them.
     .mw-input,
     .mw-select {