maverick-wave 5.30.0 → 5.32.0

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "maverick-wave",
-  "version": "5.30.0",
+  "version": "5.32.0",
   "config": {
-    "version_short": "5.30"
+    "version_short": "5.32"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",
   "style": "src/scss/main.scss",
+  "files": [
+    "maverick-wave.min.css",
+    "maverick-wave.min.js",
+    "src/scss",
+    "src/js"
+  ],
   "scripts": {
     "clean": "gulp clean",
     "format": "prettier --check \"**/*.{scss,js,json,html,md}\"",

package/src/scss/abstracts/_variables.scss

@@ -60,6 +60,8 @@ $hover-shift: 15% !default;
 // light one - and 0.58 is as low as that end goes without moving three colors.
 $ink-lightness-dark: 0.52 !default;
 $ink-lightness-light: 0.58 !default;
+// On the hero photo 0.52 measured 1.2-2.7:1, 0.72 clears 3:1 and keeps the hue
+$hero-ink-lightness: 0.72 !default;
 // How much primary the muted gray picks up, so it belongs to the palette. 0% is true gray.
 $muted-tint: 23% !default;
 

package/src/scss/components/_modals.scss

@@ -174,13 +174,13 @@
       display var(--mw-duration-base) allow-discrete;
 
     &[open] {
-      // Not the flex column of the div version: iOS WebKit squeezes a scrolling
-      // flex item inside a top-layer dialog to a sliver, so the header shows and
-      // the body is gone. Desktop browsers and Playwright's WebKit do not show it.
-      // The 1fr row takes what max-height leaves, so the body scrolls in it.
-      display: grid;
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns: minmax(0, 1fr);
+      // A block, not the flex column of the div version and not a grid: iOS
+      // WebKit takes the intrinsic height of a scrolling flex or grid item in a
+      // top-layer dialog as zero. A dialog shorter than its cap then shows its
+      // header and footer and nothing between - a grid only hides it until the
+      // content outgrows the cap. Desktop browsers and Playwright's WebKit do not
+      // show it, so only a real iPhone can confirm a change here.
+      display: block;
       opacity: 1;
       transform: scale(1) translateY(0);
 
@@ -192,12 +192,19 @@
       }
     }
 
-    // Without it an absolute child - screen reader text, a tooltip - anchors to
-    // the dialog, escapes the body's scroll and makes the whole dialog scroll
+    // With no row to scroll in, the body gets a cap of its own: the dialog's,
+    // less the room its header and footer take (61px each on a phone sheet)
     .mw-modal-body {
+      max-height: calc(var(--mw-modal-max-height) - 8rem);
+      // Without it an absolute child - screen reader text, a tooltip - anchors to
+      // the dialog, escapes the body's scroll and makes the whole dialog scroll
       position: relative;
     }
 
+    &:not(:has(> .mw-modal-footer)) .mw-modal-body {
+      max-height: calc(var(--mw-modal-max-height) - 4rem);
+    }
+
     &::backdrop {
       background: var(--mw-overlay-background);
       backdrop-filter: blur(3px);
@@ -244,6 +251,13 @@
     }
   }
 
+  // Neither shape locks the page scroll behind it - the <dialog> only makes the
+  // page inert, which still lets a finger or a wheel move it
+  :root:has(dialog.mw-modal[open], .mw-modal-overlay.mw-modal-open) {
+    overflow: hidden;
+    scrollbar-gutter: stable; // Or the page shifts by the hidden scrollbar
+  }
+
   // Modal sections
   .mw-modal-header {
     padding: spacing('3') spacing('5');

package/src/scss/components/_testimonial.scss

@@ -24,6 +24,8 @@
     // surface - inside it the quote keeps only the edge and the quotation marks
     // as its sign.
     blockquote {
+      // Grows with the card, or a short quote's tint stops halfway down it
+      flex-grow: 1;
       background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
       border-left-color: color-mix(
         in srgb,

package/src/scss/layout/_home.scss

@@ -31,6 +31,15 @@
       width: 85%;
       position: relative;
       margin: spacing('0') auto spacing('4');
+
+      // The hero is dark in both themes, the light theme's inks sink into it
+      @each $name, $value in $semantic-colors {
+        --mw-#{$name}-text-color: #{ink-on-dark(
+            '#{$name}-color',
+            $hero-ink-lightness
+          )};
+      }
+
       @include media-up('sm') {
         width: min(75%, 700px);
       }
@@ -45,9 +54,46 @@
     justify-items: start;
     text-align: left;
 
+    // 85% of a phone leaves a ragged strip right of left-aligned text
     .mw-home-text {
+      width: min(100%, 42rem);
       margin-inline: 0;
     }
+
+    .mw-home-actions {
+      margin-inline: 0;
+
+      @include media-up('sm') {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  // Two buttons that wrap onto two lines at their own widths read as a
+  // staircase, so a phone stacks them at one width instead
+  .mw-home-actions {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('4');
+    width: min(100%, 20rem);
+    margin-inline: auto;
+
+    @include media-up('sm') {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: spacing('5');
+      width: auto;
+    }
+  }
+
+  // The rem floor matters: a pure vh band gives the least on a flat screen
+  .mw-home-bottom {
+    padding-block: spacing('6') spacing('4');
+
+    @include media-up('md') {
+      padding-block: spacing('9') clamp(5.5rem, 12vh, 9rem);
+    }
   }
 
   @keyframes mw-home-fade {

package/src/scss/layout/_main.scss

@@ -66,6 +66,11 @@
         z-index: z-index('card');
       }
 
+      // .mw-home sizes itself in % of this flex item, which must not shrink
+      > .mw-hero {
+        width: 100%;
+      }
+
       // Add `mw-parallax` here and a `.mw-parallax-media` child and the picture
       // becomes its own layer, free to drift or to stay pinned. It reads the
       // same token, so the image is still configured in one place - and a
@@ -159,6 +164,21 @@
           );
         }
       }
+
+      // Bottom text shares the lower edge with the cue below lg, phones too
+      &:has(.mw-home-bottom) {
+        align-items: flex-end;
+
+        @include media-down('lg') {
+          &:has(> .mw-scroll-hint) {
+            --mw-scroll-hint-reserve: #{spacing('10')};
+
+            padding-bottom: calc(
+              var(--mw-scroll-hint-offset) + var(--mw-scroll-hint-reserve)
+            );
+          }
+        }
+      }
     }
   }
 

package/src/scss/layout/_parallax.scss

@@ -158,8 +158,8 @@
     :is(.mw-parallax-sticky, .mw-parallax-slow) + *:not(.mw-parallax-sticky)
   ) {
     box-shadow:
-      0 -6px 12px rgb(0 0 0 / 45%),
-      0 -20px 44px rgb(0 0 0 / 26%);
+      0 -8px 18px rgb(0 0 0 / 55%),
+      0 -28px 60px rgb(0 0 0 / 38%);
   }
 
   // Ink on a photograph, the same pair the hero uses: the picture goes down, the

package/src/scss/main-lean.scss

@@ -1,6 +1,7 @@
-// The same framework without the 48 components: tokens, reset, typography,
-// grid, container, section, header, footer and every utility. Add the
-// components the page actually uses next to it, each one its own file:
+// The same framework without the components, bar the two at the end: tokens,
+// reset, typography, grid, container, section, header, footer and every
+// utility. Add the components the page actually uses next to it, each one its
+// own file:
 //
 //   @use 'maverick-wave/src/scss/main-lean' with ($primary-color: #1b1b1d);
 //   @use 'maverick-wave/src/scss/components/buttons';
@@ -14,3 +15,7 @@
 @use 'base';
 @use 'layout';
 @use 'utilities';
+
+// The layout uses these two: data-tooltip in the footer, the badge in the hero
+@use 'components/tooltip';
+@use 'components/hero-badge';

package/.claude/settings.local.json

@@ -1,43 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(grep -rn '$_mw\\\\|$_size\\\\|$_border' src/scss '--include=*.scss')",
-      "Bash(npm run:*)",
-      "Bash(node:*)",
-      "Bash(git ls-tree:*)",
-      "Bash(git ls-remote:*)",
-      "Bash(npm outdated:*)",
-      "Bash(npm update:*)",
-      "Bash(npm audit:*)",
-      "Bash(npx prettier *)"
-    ]
-  },
-  "hooks": {
-    "PostToolUse": [
-      {
-        "matcher": "Edit|Write",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "[ ! -f '/Users/m1well/.claude/skills/impeccable/scripts/impeccable' ] || '/Users/m1well/.claude/skills/impeccable/scripts/impeccable' hook",
-            "timeout": 5,
-            "statusMessage": "Checking UI changes"
-          }
-        ]
-      }
-    ],
-    "Stop": [
-      {
-        "hooks": [
-          {
-            "type": "command",
-            "command": "[ ! -f '/Users/m1well/.claude/skills/impeccable/scripts/impeccable' ] || '/Users/m1well/.claude/skills/impeccable/scripts/impeccable' hook",
-            "timeout": 30,
-            "statusMessage": "Design deep pass"
-          }
-        ]
-      }
-    ]
-  },
-  "description": "Impeccable design detector: immediate-tier checks after Edit/Write on UI files, full-rule deep pass on Stop."
-}