maverick-wave 5.29.0 → 5.30.0

package/package.json

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

package/src/partials/avatars-container.html

@@ -5,8 +5,8 @@
   circle as well. Inside a group the overlap follows the avatar size.
   <code>mw-avatar-landscape</code> (3:2) and
   <code>mw-avatar-portrait</code> (9:16, 2:3 on <code>-lg</code>) are for a
-  photo that is not square - meant for the two large sizes. A landscape avatar
-  is as tall as the round one.
+  photo that is not square - meant for the two large sizes. Both run larger than
+  the round step, and a landscape avatar shrinks to fit a narrow column.
 </p>
 
 <div class="mw-grid-2">
@@ -182,11 +182,11 @@
   </div>
 </div>
 
-<div class="mw-grid-2 mw-mt-6">
+<div class="mw-grid-2 mw-grid-from-lg mw-mt-6">
   <div>
     <h3 class="mw-mb-4">Landscape</h3>
     <div class="mw-card mw-card-simple">
-      <div class="mw-grid-stack-center">
+      <div class="mw-d-flex mw-flex-column mw-items-center mw-gap-6">
         <div class="mw-avatar mw-avatar-lg mw-avatar-landscape">
           <img
             src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&crop=faces&w=720&h=480&q=80"

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] {
+      // 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);
       opacity: 1;
       transform: scale(1) translateY(0);
 
@@ -184,6 +192,12 @@
       }
     }
 
+    // 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
+    .mw-modal-body {
+      position: relative;
+    }
+
     &::backdrop {
       background: var(--mw-overlay-background);
       backdrop-filter: blur(3px);