maverick-wave 5.6.0 → 5.7.0

package/package.json

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

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

@@ -143,7 +143,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">
@@ -190,24 +191,24 @@
 
     <label class="variant-row">
       <span class="variant-label">
-        Single accent color
+        Glass buttons
         <small
-          >Drop the second brand colour - hovers, tints and borders all come
-          from the first one.</small
+          >Filled buttons become tinted glass - the colour drops to a
+          translucent wash with a lit top edge.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-accent-single" />
+      <input type="checkbox" data-variant-class="mw-btn-glass" />
     </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">
@@ -256,6 +257,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
@@ -321,5 +338,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
+  Nine 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>
@@ -448,6 +448,10 @@
     <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,7 +461,10 @@
     <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-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

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/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 {

package/src/scss/utilities/_variants.scss

@@ -57,25 +57,55 @@
     border-radius: 999px;
   }
 
-  // Photos drained of colour until pointed at - the palette then comes only from
-  // the brand tones. Avatars stay out: a greyed-out face reads as disabled, and
-  // so does mw-media, which is the audio player and holds no picture at all.
-  :root.mw-media-mono {
-    .mw-card-img img,
-    .mw-card-img-contain img,
-    .mw-tile-img img,
-    .mw-gallery img,
-    .mw-image-slider img,
-    img.mw-blog-post-featured-image {
-      filter: grayscale(1);
-      transition: filter var(--mw-duration-zoom) var(--mw-ease-out);
-    }
+  // Tinted glass: a translucent wash with a vertical ramp and a specular line
+  // along the top edge, which is what gives the button its thickness.
+  //
+  // Deliberately without `backdrop-filter`, and that omission has to stay. The
+  // filter makes the button a containing block for its own fixed-position
+  // descendants, which drops a [data-tooltip] bubble inside the button instead
+  // of above it; and nested inside the header's own blur it flickers while the
+  // page scrolls. At the tint below there was next to nothing to see through.
+  //
+  // The tint stays heavy on purpose, and that is the other trade-off: a 20%
+  // wash reads as real glass, but the label then rides on whatever is behind
+  // it, and over a light card that contrast is gone. At 88/70 the label keeps
+  // roughly the fill's contrast.
+  //
+  // Hover and active are restated rather than inherited: this sits in
+  // mw.utilities, which outranks every rule in mw.components whatever its
+  // specificity, so the states would otherwise be flattened along with the fill.
+  :root.mw-btn-glass {
+    @each $name in ('primary', 'secondary', 'danger', 'success') {
+      .mw-btn-#{$name} {
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--mw-#{$name}-color) 88%, transparent),
+          color-mix(in srgb, var(--mw-#{$name}-color) 70%, transparent)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--mw-#{$name}-color) 70%,
+          transparent
+        );
+        box-shadow:
+          inset 0 1px 0 rgb(255 255 255 / 28%),
+          0 1px 3px rgb(0 0 0 / 14%);
 
-    // The blog image carries the class itself rather than sitting in a wrapper,
-    // so it is the one that has to answer for its own hover
-    :is(.mw-card, .mw-tile, .mw-gallery, .mw-image-slider):hover img,
-    img.mw-blog-post-featured-image:hover {
-      filter: none;
+        &:hover:not(:disabled),
+        &.mw-active:not(:disabled),
+        &.active:not(:disabled) {
+          background: linear-gradient(
+            to bottom,
+            color-mix(in srgb, var(--mw-#{$name}-color) 97%, transparent),
+            color-mix(in srgb, var(--mw-#{$name}-color) 82%, transparent)
+          );
+          border-color: color-mix(
+            in srgb,
+            var(--mw-#{$name}-color) 85%,
+            transparent
+          );
+        }
+      }
     }
   }