maverick-wave 4.16.0 → 4.18.0

package/package.json

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

package/src/partials/cards-container.html

@@ -115,6 +115,23 @@
       </p>
     </div>
   </div>
+
+  <div class="mw-card">
+    <div class="mw-card-body">
+      <h3 class="mw-card-title">
+        <span class="mw-card-title-icon mw-card-title-icon-lg">
+          <img src="https://m1well.com/images/header_logo.svg" alt="" />
+        </span>
+        A logo instead of an icon
+      </h3>
+      <hr class="mw-card-title-divider" />
+      <p class="mw-card-text">
+        The same slot takes an <code>&lt;img&gt;</code> - a product logo, a
+        portrait. Add <code>mw-card-title-icon-lg</code> there: a wordmark
+        inside the default 38px is a smudge.
+      </p>
+    </div>
+  </div>
 </div>
 
 <h3 class="mw-mb-4 mw-mt-6">Tech-Stack Cards</h3>

package/src/partials/info-container.html

@@ -26,6 +26,19 @@
   </div>
 </div>
 
+<h4 class="mw-mb-2 mw-mt-5">Block</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-info mw-info-primary mw-info-block">
+    <strong>The same frame, carrying a paragraph</strong>
+    <span
+      >The base is built for a short figure and centres it in a narrow column.
+      The block variant ranges its text left up to a measure, sets it in body
+      weight and leading, and stays put under the pointer - for a note, a
+      disclaimer, or a short explanation beside the thing it explains.</span
+    >
+  </div>
+</div>
+
 <h4 class="mw-mb-2 mw-mt-5">Counters</h4>
 <div class="mw-card mw-card-simple">
   <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">

package/src/scss/abstracts/_variables.scss

@@ -77,8 +77,20 @@ $hover-shift: 15% !default;
 // dark before it reads as ink on a light one - OKLch lightness, 0 to 1. A bound,
 // not a target: a color already inside the range is used untouched, so a bright
 // brand color stays bright and only one that would drown gets moved.
-$ink-lightness-dark: 0.4 !default;
-$ink-lightness-light: 0.7 !default;
+//
+// 0.52 is where the default blue clears 3:1 on a dark card - the floor a rule
+// or a large label needs. At 0.4 it sat at 1.9:1: a price nobody reads and an
+// outline button whose border nobody finds. 0.58 does the same job for the
+// yellow on a light card, which was at 2.5:1, and is as low as that end can go
+// without collecting company - the orange and the cyan sit at 0.57, so one
+// step further moves three colors instead of one.
+//
+// Which is the point of a bound: in both directions exactly one of the six root
+// colors is outside it and gets moved. The other five pass through byte for
+// byte, and a project that swaps the palette gets the same treatment for
+// whichever of its own colors needs it.
+$ink-lightness-dark: 0.52 !default;
+$ink-lightness-light: 0.58 !default;
 // How much of the primary color the muted text gray picks up, so it belongs to
 // the palette instead of being a stock #888. 0% is a true gray.
 $muted-tint: 23% !default;
@@ -638,6 +650,11 @@ $spacing: (
 );
 
 // Breakpoints
+// Card width at which a card footer stops being a row. Shared: the footer rule
+// lives in _cards.scss, the exception for a price in it in _pricing.scss, and
+// the two have to agree or a price gets the row back one pixel too late.
+$mw-card-narrow: 360px !default;
+
 $breakpoints: (
   'xs': 375px,
   // Extra small devices (smaller phones)

package/src/scss/base/_base.scss

@@ -124,6 +124,8 @@ $_active-prefix: 'dark';
     calc(100% - 2 * var(--mw-container-gutter))
   );
   --mw-section-padding-block: #{spacing('7')};
+  --mw-section-title-gap: #{spacing('7')};
+  --mw-scroll-hint-offset: #{spacing('9')};
 
   // Active theme - aliases onto the dark or light set above
   @each $name, $value in $_active-theme {

package/src/scss/components/_avatars.scss

@@ -57,9 +57,9 @@ $_mw-avatar-colors: (
   }
 
   &-xl {
-    width: 250px;
-    height: 250px;
-    border-width: 7px;
+    width: 210px;
+    height: 210px;
+    border-width: 6px;
     font-size: font-size('6xl');
   }
 
@@ -125,7 +125,7 @@ $_mw-avatar-colors: (
       margin-right: -23px;
     }
     .mw-avatar-xl {
-      margin-right: -40px;
+      margin-right: -32px;
     }
 
     .mw-avatar:last-child {
@@ -152,9 +152,9 @@ $_mw-avatar-colors: (
     }
 
     &-xl {
-      width: 170px;
-      height: 170px;
-      border-width: 6px;
+      width: 150px;
+      height: 150px;
+      border-width: 5px;
     }
   }
 }

package/src/scss/components/_cards.scss

@@ -1,8 +1,5 @@
 @use '../abstracts' as *;
 
-// Card width at which the footer stops being a row
-$_mw-card-narrow: 360px;
-
 $_mw-card-addon-colors: (
   primary: var(--mw-primary-color),
   secondary: var(--mw-secondary-color),
@@ -27,6 +24,13 @@ $_mw-card-addon-colors: (
   color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 // Fading rule used by the title divider and the stack header underline
@@ -216,9 +220,18 @@ $_mw-card-addon-colors: (
   //     <span class="mw-card-title-icon"><i class="fas fa-file-invoice"></i></span>
   //     Invoices
   //   </h3>
+  //
+  // An <img> works in the same slot - a product logo or a portrait instead of
+  // an icon. Reach for the -lg step there: a wordmark inside 38px is a smudge.
   &-title-icon {
     @include _card-icon-circle;
     font-size: font-size('lg');
+
+    &-lg {
+      width: 62px;
+      height: 62px;
+      font-size: font-size('2xl');
+    }
   }
 
   &-title-divider {
@@ -275,7 +288,7 @@ $_mw-card-addon-colors: (
     // Stacked once the card is narrow, not once the window is - a card in a
     // three-column grid on a wide desktop is as narrow as the same card on a
     // phone and used to keep its actions in a cramped row anyway.
-    @container mw-card (max-width: #{$_mw-card-narrow}) {
+    @container mw-card (max-width: #{$mw-card-narrow}) {
       flex-direction: column;
       align-items: stretch;
       gap: spacing('2');

package/src/scss/components/_info.scss

@@ -64,6 +64,42 @@ $_mw-info-colors: (
     font-weight: font-weight('medium');
   }
 
+  // Block variant: the same framed surface, carrying a paragraph instead of a
+  // value. The base is built for a short figure - it centres its content in a
+  // narrow column, sets it in medium weight and lifts on hover, which turns
+  // running text into a ragged stack that twitches under the pointer. This
+  // reads as a note instead: ranged left up to a measure, body weight, body
+  // leading, and it stays put.
+  //
+  //   <div class="mw-info mw-info-primary mw-info-block">
+  //     <strong>Why greyscale?</strong>
+  //     <span>Because the frame is not the stage ...</span>
+  //   </div>
+  &-block {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 68ch;
+    margin-inline: auto;
+    padding: spacing('6') spacing('7');
+    font-weight: font-weight('normal');
+    line-height: 1.7;
+    text-align: left;
+    text-wrap: pretty;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    @include hover {
+      transform: none;
+    }
+
+    strong {
+      margin-bottom: spacing('2');
+    }
+  }
+
   // counter variant: big number + small label
   &-counter {
     min-width: spacing('12');

package/src/scss/components/_pricing.scss

@@ -179,6 +179,22 @@ $_mw-price-word-scale: 0.68;
     margin-top: spacing('0');
   }
 
+  // The one action on an offer card fills its row. A card footer otherwise
+  // keeps every button at its label's width - a "Details" link has no business
+  // being a band - but this is the button the whole card was built to get
+  // pressed, and an 80px target parked in a corner is not that.
+  //
+  // Only when it stands alone: with a price beside it the row is shared, and
+  // that case is at the bottom of this file.
+  //
+  // The auto margin has to go with it. An auto margin in a flex row eats the
+  // free space *before* flex-grow is ever offered any, so growing on its own
+  // leaves the button sitting exactly where it was.
+  > .mw-card-body > .mw-card-footer > .mw-btn:only-child {
+    flex: 1 1 auto;
+    margin-left: spacing('0');
+  }
+
   // A solid band across the top carrying the name and the price - the layout
   // for when the price is the thing being compared and the feature list is
   // only its justification. Colour comes from `mw-card-addon-*` on the card,
@@ -229,3 +245,33 @@ $_mw-price-word-scale: 0.68;
 .mw-offer:has(> .mw-offer-head)::after {
   @include corner-accent(1px, 'bottom');
 }
+
+// A price in a card footer is a label next to an action, not a second action.
+//
+// The footer stacks its children to full width once the *card* is narrow, which
+// is right for two buttons that would otherwise squeeze into nothing on a phone
+// - and wrong here: "33 Euro" needs no width, and the one button beside it does
+// not need the whole card either. A full-bleed action under a left-aligned
+// price reads as a banner, not as the end of a card.
+//
+// So the row survives, and the action takes half of it. Lives here rather than
+// in _cards.scss because the price is the guest: the footer's own rule is
+// correct for everything that is not one.
+@container mw-card (max-width: #{$mw-card-narrow}) {
+  .mw-card-footer:has(> .mw-price) {
+    flex-direction: row;
+    align-items: center;
+
+    // The footer's own rule hands every child `width: 100%` for the stack. Taken
+    // back for all of them, not just the price - the second slot is a button on
+    // one card and an "Ausgebucht" tag on the next, and a full-width tag is no
+    // better than a full-width button.
+    > * {
+      width: auto;
+    }
+
+    > .mw-btn {
+      width: 50%;
+    }
+  }
+}

package/src/scss/layout/_footer.scss

@@ -3,8 +3,7 @@
 
 .mw-footer {
   background: var(--mw-footer-background);
-  padding: spacing('5') spacing('0');
-  margin-top: spacing('6');
+  padding: spacing('7') spacing('0');
   border-top: 1px solid var(--mw-border-accent);
 
   &-top {

package/src/scss/layout/_main.scss

@@ -77,6 +77,51 @@
   }
 }
 
+// The "scroll down" cue at the bottom of a hero. It belongs to the hero
+// container and not to the flow below it: a hero fills the viewport, so the
+// cue has to sit on its lower edge no matter how tall the content above is.
+// Selector beats the `> *` rule above it, which would otherwise put the
+// element back into flow.
+.mw-container:has(.mw-hero) > .mw-scroll-hint {
+  position: absolute;
+  bottom: var(--mw-scroll-hint-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: spacing('2');
+  // Ink on the hero image, stepped back - the cue is an offer, not a headline
+  color: color-mix(in srgb, var(--mw-hero-text-color) 45%, transparent);
+  font-size: font-size('xs');
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  // A loop keeps its own timing - at any of the duration tokens this would
+  // read as nervous rather than as a slow bob
+  animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+
+  @include hover {
+    color: var(--mw-hero-text-color);
+  }
+}
+
+@keyframes mw-scroll-hint-float {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+  50% {
+    transform: translate(-50%, 7px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-scroll-hint {
+    animation: none;
+  }
+}
+
 .mw-content {
   flex: 1;
   padding-top: spacing('7');

package/src/scss/layout/_section.scss

@@ -2,7 +2,7 @@
 
 .mw-section-title {
   font-size: font-size('3xl');
-  margin-bottom: spacing('7');
+  margin-bottom: var(--mw-section-title-gap);
   text-align: center;
   position: relative;
 

package/src/scss/utilities/_touch-targets.scss

@@ -83,6 +83,40 @@
     min-height: 44px;
   }
 
+  // A gallery dot is 9px here - the target got *smaller* exactly where the
+  // pointer got coarser. Same treatment as the mini button below: the dot keeps
+  // its silhouette, only the hit area grows to the 24px floor. The gap has to
+  // grow with it, or two neighbouring hit areas overlap and a tap aimed at one
+  // slide brings up the next.
+  .mw-gallery-dots {
+    gap: spacing('6');
+  }
+
+  .mw-gallery-dot {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -7.5px;
+    }
+  }
+
+  // A range input is as tall as its track - 8px, and 6px in the small variant.
+  // That is the whole hit area, thumb included: a slider you can only grab by
+  // hitting an 8px band is a slider you drag the page with instead.
+  //
+  // `content-box` is what keeps the track out of it: the height stays the
+  // track's, the padding is the hit area on top, and clipping the background
+  // to the content box means the visible bar does not grow with it. No track
+  // height is repeated from `_slider.scss` this way - each variant grows off
+  // whatever it already has: 8px + 36 = 44, the small one 42, the large 52.
+  .mw-slider {
+    box-sizing: content-box;
+    padding-block: 18px;
+    background-clip: content-box;
+  }
+
   // The 18px silhouette stays: mini buttons sit in tag rows and table cells,
   // where growing the circle would shift the layout around them. Only the hit
   // area grows, to 28px - clear of the 24px floor. The extra margin keeps two
@@ -121,9 +155,13 @@
   }
 
   // A row of actions on a phone stacks, and stacked buttons that are each as
-  // wide as their label look like a list of unrelated things
-  .mw-form-actions .mw-btn,
-  .mw-card-footer .mw-btn {
+  // wide as their label look like a list of unrelated things.
+  //
+  // Not `mw-card-footer`: that one stacks on its *container*, not on the
+  // window, so at 390px it is still a row - and a `flex-grow` handed to a row
+  // is what turned a card's action into a full-bleed band. Stacked it needs no
+  // help either, the footer's own `width: 100%` is what fills the column.
+  .mw-form-actions .mw-btn {
     flex: 1 1 auto;
   }
 }