maverick-wave 6.3.0 → 6.5.0

package/package.json

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

package/src/scss/components/_dropdown.scss

@@ -256,10 +256,16 @@
     // only have to stop pushing the menu around with insets
     .mw-dropdown-end .mw-dropdown-menu {
       position-area: block-end span-inline-start;
+      right: auto;
     }
 
     .mw-dropdown-up .mw-dropdown-menu {
       position-area: block-start span-inline-end;
+      bottom: auto;
+    }
+
+    .mw-dropdown-end.mw-dropdown-up .mw-dropdown-menu {
+      position-area: block-start span-inline-start;
     }
 
     // In the bar a menu hangs off the bar's lower edge, not the trigger's - the

package/src/scss/components/_marquee.scss

@@ -43,7 +43,7 @@
     font-weight: font-weight('medium');
     white-space: nowrap;
 
-    > i {
+    > :is(i, svg, .mw-icon) {
       color: var(--mw-primary-text-color);
     }
 

package/src/scss/components/_modals.scss

@@ -30,6 +30,13 @@
       max-width: 960px;
       --mw-modal-max-height: 92dvh;
     }
+
+    // A document at a fixed height - one page gets the same box as twelve
+    &.mw-modal-full {
+      max-width: 1400px;
+      height: 92dvh;
+      --mw-modal-max-height: 92dvh;
+    }
   }
 
   // Phone: the dialog becomes a sheet
@@ -282,6 +289,20 @@
     }
   }
 
+  // Flex is safe at a fixed height, as in the drawer below: the body takes the rest
+  dialog.mw-modal.mw-modal-full {
+    &[open] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .mw-modal-body {
+      flex: 1 1 0;
+      min-height: 0;
+      max-height: none;
+    }
+  }
+
   // Stays a side panel on a phone, where every other modal becomes a sheet
   dialog.mw-modal.mw-modal-drawer {
     inset-block: 0;

package/src/scss/components/_mosaic.scss

@@ -32,10 +32,16 @@
     background: var(--mw-card-background);
     transition: transform var(--mw-duration-fast) var(--mw-ease-out);
 
-    > a {
+    // A button where an application opens its own lightbox
+    > :is(a, button) {
       position: absolute;
       inset: 0;
       display: block;
+      width: 100%;
+      padding: 0;
+      border: 0;
+      background: none;
+      cursor: pointer;
       @include tappable;
       @include focus-ring-inset(-3px);
     }
@@ -58,7 +64,7 @@
       }
     }
 
-    &:has(> a:active) {
+    &:has(> :is(a, button):active) {
       transform: scale(0.97);
       transition-duration: var(--mw-duration-instant);
     }

package/src/scss/components/_tables.scss

@@ -85,6 +85,11 @@
         cursor: text;
       }
 
+      // A row header stands first in its card and becomes its title
+      tbody th {
+        display: block;
+      }
+
       // Style each cell as a row in the card
       td {
         display: flex;

package/src/scss/components/_theme-toggle.scss

@@ -61,5 +61,17 @@
       font-size: font-size('base');
       transform: rotate(16deg);
     }
+
+    // Both icons in the markup, for an inline SVG the script cannot swap by class
+    &-sun,
+    &.mw-active &-moon,
+    &.active &-moon {
+      display: none;
+    }
+
+    &.mw-active &-sun,
+    &.active &-sun {
+      display: block;
+    }
   }
 }