maverick-wave 5.29.0 → 5.31.0

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "maverick-wave",
-  "version": "5.29.0",
+  "version": "5.31.0",
   "config": {
-    "version_short": "5.29"
+    "version_short": "5.31"
   },
   "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/components/_avatars.scss

@@ -58,7 +58,7 @@
 
     @include hover-move {
       img {
-        transform: scale(1.12);
+        transform: scale(1.06);
       }
 
       // Transition only here, so the sweep resets instantly instead of travelling back
@@ -218,14 +218,46 @@
       aspect-ratio: 9 / 16;
     }
 
+    // Width-driven, so max-width can shrink it to a narrow column at 3:2
+    &-lg.mw-avatar-landscape,
+    &-xl.mw-avatar-landscape {
+      height: auto;
+      max-width: 100%;
+    }
+
+    // Over the round step - a photo shows more of the person than a face
+    &-lg.mw-avatar-landscape {
+      width: 228px;
+
+      @include media-up('sm') {
+        width: 273px;
+      }
+    }
+
+    &-xl.mw-avatar-landscape {
+      width: 285px;
+
+      @include media-up('sm') {
+        width: 399px;
+      }
+    }
+
+    &-xl.mw-avatar-portrait {
+      width: 172px;
+
+      @include media-up('sm') {
+        width: 242px;
+      }
+    }
+
     // 9:16 this small reads as a sliver - wider at the same height instead
     &-lg.mw-avatar-portrait {
       width: auto;
-      height: calc(120px * 16 / 9);
+      height: calc(138px * 16 / 9);
       aspect-ratio: 2 / 3;
 
       @include media-up('sm') {
-        height: calc(144px * 16 / 9);
+        height: calc(166px * 16 / 9);
       }
     }
   }

package/src/scss/components/_dropdown.scss

@@ -43,7 +43,7 @@
     top: calc(100% + #{spacing('2')});
     left: 0;
     z-index: z-index('menu');
-    min-width: 200px;
+    min-width: var(--mw-dropdown-min-width, 200px);
     // Never wider than the screen it opens on, whatever the longest item says
     max-width: min(320px, calc(100vw - 2 * var(--mw-container-gutter)));
     padding: spacing('2');
@@ -252,6 +252,21 @@
     .mw-dropdown-up .mw-dropdown-menu {
       position-area: block-start span-inline-end;
     }
+
+    // In the bar a menu hangs off the bar's lower edge, not the trigger's - the
+    // trigger sits mid-bar, and a menu a few pixels under it starts inside it.
+    // Only a sideways flip is left, a menu above the bar would be off screen.
+    .mw-header-actions .mw-dropdown-menu {
+      position-area: none;
+      position-try-fallbacks: flip-inline;
+      top: var(--mw-header-height);
+      left: anchor(left);
+    }
+
+    .mw-header-actions .mw-dropdown-end .mw-dropdown-menu {
+      left: auto;
+      right: anchor(right);
+    }
   }
 
   // A menu opened by a thumb needs rows a thumb can hit, and the room to show
@@ -260,6 +275,14 @@
   @include touch-context('sm') {
     .mw-dropdown-menu {
       min-width: max(100%, 240px);
+
+      // A fixed menu's 100% is its containing block - the viewport, or a whole
+      // bar with a backdrop filter - which slid a header menu under the logo.
+      // The plain 240px is for a Safari that anchors but cannot measure yet.
+      @supports (anchor-scope: all) and (position-area: block-end) {
+        min-width: 240px;
+        min-width: max(anchor-size(width), 240px);
+      }
     }
 
     .mw-dropdown-item {

package/src/scss/components/_lang-switch.scss

@@ -47,14 +47,10 @@
   }
 
   // A language list is short and its labels are one word - the 200px default
-  // menu leaves half of it empty. The one place it must not be narrowed is under
-  // a thumb, where the dropdown widens every menu on purpose.
-  .mw-lang-switch .mw-dropdown-menu {
-    min-width: 170px;
-
-    @include touch-context('sm') {
-      min-width: max(100%, 240px);
-    }
+  // menu leaves half of it empty. Through the dropdown's property, so under a
+  // thumb the dropdown's own widening still wins.
+  .mw-lang-switch {
+    --mw-dropdown-min-width: 170px;
   }
 
   .mw-lang-switch-name {

package/src/scss/components/_modals.scss

@@ -42,9 +42,10 @@
     background: var(--mw-card-background);
     @include surface(0);
     box-shadow: var(--mw-elevation-5);
+    --mw-modal-max-height: 85dvh;
     max-width: 520px;
     width: 100%;
-    max-height: 85dvh;
+    max-height: var(--mw-modal-max-height);
     display: flex;
     flex-direction: column;
     z-index: z-index('modal');
@@ -61,15 +62,15 @@
     // two read as the same modal rendered twice.
     &.mw-modal-sm {
       max-width: 370px;
-      max-height: 80dvh;
+      --mw-modal-max-height: 80dvh;
     }
     &.mw-modal-lg {
       max-width: 720px;
-      max-height: 90dvh;
+      --mw-modal-max-height: 90dvh;
     }
     &.mw-modal-xl {
       max-width: 960px;
-      max-height: 92dvh;
+      --mw-modal-max-height: 92dvh;
     }
   }
 
@@ -85,7 +86,7 @@
     .mw-modal.mw-modal-lg,
     .mw-modal.mw-modal-xl {
       max-width: 100%;
-      max-height: 92dvh;
+      --mw-modal-max-height: 92dvh;
       border-radius: radius('xl') radius('xl') radius('none') radius('none');
       padding-bottom: env(safe-area-inset-bottom, 0px);
       // Straight up from the bottom edge - a sheet does not scale in
@@ -173,6 +174,13 @@
       display var(--mw-duration-base) allow-discrete;
 
     &[open] {
+      // 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);
 
@@ -184,6 +192,19 @@
       }
     }
 
+    // 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);
@@ -230,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/.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."
-}