maverick-wave 4.20.0 → 4.22.0

package/src/partials/media-container.html

@@ -0,0 +1,27 @@
+<h3 class="mw-section-subtitle">Media</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Self-hosted audio and video. The framework ships no player - the native
+  controls are the player, and <code>accent-color</code> already brands them.
+  The wrapper makes the element a full-width block; a <code>video</code> also
+  gets the surface silhouette and a resting shadow, same markup with a
+  <code>&lt;video&gt;</code> element inside.
+</p>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Audio with caption</h5>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-media">
+        <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
+        <p class="mw-media-caption">A short chime, served from this site.</p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Bare, without a card</h5>
+    <div class="mw-media">
+      <audio controls preload="metadata" src="media/demo-chime.wav"></audio>
+    </div>
+  </div>
+</div>

package/src/partials/prose-container.html

@@ -0,0 +1,43 @@
+<h3 class="mw-section-subtitle">Prose</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Long-form running text - a legal page, terms, a plain article. One class on
+  the container, bare <code>h2</code>/<code>h3</code>/<code>p</code>/<code
+    >ul</code
+  >
+  inside: exactly what a CMS or a JSON-driven page produces. Headings stay
+  deliberately small - in a document they structure the reading, they do not
+  compete with the page title.
+</p>
+
+<div class="mw-card mw-card-simple mw-prose">
+  <h2>1. Scope</h2>
+  <p>
+    These terms apply to every order placed through this site. Deviating
+    conditions of the customer do not apply unless expressly confirmed in
+    writing.
+  </p>
+
+  <h2>2. Contract</h2>
+  <p>
+    The presentation of products is not a binding offer. A contract comes into
+    existence when the order confirmation arrives, at the latest with the
+    delivery of the goods.
+  </p>
+  <h3>2.1 Cancellation</h3>
+  <p>
+    Consumers may cancel within fourteen days without giving a reason. The
+    period starts on the day the goods arrive. For the cancellation to count,
+    one of the following is enough:
+  </p>
+  <ul>
+    <li>an informal e-mail naming the order number</li>
+    <li>the returned goods with a short note</li>
+    <li>the cancellation form from the appendix</li>
+  </ul>
+
+  <h2>3. Prices</h2>
+  <p>
+    All prices are final prices and include the statutory value-added tax.
+    Shipping costs are shown separately before the order is placed.
+  </p>
+</div>

package/src/partials/testimonials-container.html

@@ -0,0 +1,82 @@
+<h3 class="mw-section-subtitle">Testimonials</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A quote card with its source - a <code>figure</code>, because quote and
+  attribution belong together. One voice may stand above the grid as
+  <code>mw-testimonial-featured</code>; the rest flow in
+  <code>mw-columns-3</code>, the masonry layout for cards of unequal height. The
+  cards below also carry <code>mw-reveal</code> - scroll them into view to see
+  the entrance.
+</p>
+
+<figure class="mw-testimonial mw-testimonial-featured mw-mb-6">
+  <blockquote>
+    We rebuilt our whole customer portal on this in three weeks. The team never
+    argued about spacing or shadows again - the framework had already decided,
+    and it had decided well.
+  </blockquote>
+  <figcaption class="mw-testimonial-source">
+    Maren K.
+    <span class="mw-testimonial-detail">&middot; Head of Engineering</span>
+  </figcaption>
+</figure>
+
+<div class="mw-columns-3">
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>
+      The dark theme just worked. We flipped one class and every component
+      followed.
+    </blockquote>
+    <figcaption class="mw-testimonial-source">
+      Jonas R.
+      <span class="mw-testimonial-detail">&middot; Frontend Developer</span>
+    </figcaption>
+  </figure>
+
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>
+      I came for the grid and stayed for the corner accents. Our app finally
+      looks like one product instead of five teams.
+    </blockquote>
+    <figcaption class="mw-testimonial-source">
+      Priya S.
+      <span class="mw-testimonial-detail">&middot; Product Designer</span>
+    </figcaption>
+  </figure>
+
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>Small CSS, no build step, readable class names.</blockquote>
+    <figcaption class="mw-testimonial-source">
+      Tom W. <span class="mw-testimonial-detail">&middot; Freelancer</span>
+    </figcaption>
+  </figure>
+
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>
+      The form controls line up with the buttons out of the box. That alone
+      saved us a week of pixel pushing across three breakpoints - and the touch
+      targets grow on their own on mobile.
+    </blockquote>
+    <figcaption class="mw-testimonial-source">
+      Aylin D. <span class="mw-testimonial-detail">&middot; Agency Lead</span>
+    </figcaption>
+  </figure>
+
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>
+      Swapped one primary color, the whole palette followed.
+    </blockquote>
+    <figcaption class="mw-testimonial-source">
+      Ben L. <span class="mw-testimonial-detail">&middot; Indie Hacker</span>
+    </figcaption>
+  </figure>
+
+  <figure class="mw-testimonial mw-reveal">
+    <blockquote>
+      Our legal pages, our landing page and our admin tables all speak the same
+      language now.
+    </blockquote>
+    <figcaption class="mw-testimonial-source">
+      Carla M. <span class="mw-testimonial-detail">&middot; CTO</span>
+    </figcaption>
+  </figure>
+</div>

package/src/partials/tiles-container.html

@@ -69,10 +69,7 @@
     <div class="mw-tiles mw-tiles-2col">
       <div class="mw-tile">
         <div class="mw-tile-img">
-          <img
-            src="https://picsum.photos/80/80?random=1"
-            alt="E-commerce platform"
-          />
+          <img src="images/tile-ecommerce.svg" alt="E-commerce platform" />
         </div>
         <h3 class="mw-tile-header">E-commerce Platform</h3>
         <div class="mw-tile-body">
@@ -84,10 +81,7 @@
 
       <div class="mw-tile">
         <div class="mw-tile-img">
-          <img
-            src="https://picsum.photos/80/80?random=2"
-            alt="Marketing automation"
-          />
+          <img src="images/tile-marketing.svg" alt="Marketing automation" />
         </div>
         <h3 class="mw-tile-header">Marketing Automation</h3>
         <div class="mw-tile-body">
@@ -181,10 +175,7 @@
     <div class="mw-tiles">
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img
-            src="https://picsum.photos/80/80?random=3"
-            alt="Cloud infrastructure"
-          />
+          <img src="images/tile-cloud.svg" alt="Cloud infrastructure" />
         </div>
         <h2 class="mw-tile-header">Cloud Infrastructure</h2>
         <div class="mw-tile-body">
@@ -201,10 +192,7 @@
 
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img
-            src="https://picsum.photos/100/100?random=8"
-            alt="Business intelligence"
-          />
+          <img src="images/tile-analytics.svg" alt="Business intelligence" />
         </div>
         <h2 class="mw-tile-header">Business Intelligence Suite</h2>
         <div class="mw-tile-body">
@@ -222,10 +210,7 @@
 
       <div class="mw-tile mw-tile-lg">
         <div class="mw-tile-img">
-          <img
-            src="https://picsum.photos/100/100?random=9"
-            alt="Enterprise solutions"
-          />
+          <img src="images/tile-enterprise.svg" alt="Enterprise solutions" />
         </div>
         <h2 class="mw-tile-header">Enterprise Solutions</h2>
         <div class="mw-tile-body">

package/src/scss/base/_base.scss

@@ -99,6 +99,12 @@ $_active-prefix: 'dark';
   // header height
   --mw-header-height: #{$header-height};
 
+  // Height the announcement ribbon reserves - the anchor scroll offset is
+  // calculated from it, so a project with a taller ribbon raises this token
+  // rather than fighting the offset. Below `sm` the component itself steps it
+  // up for the wrapped line.
+  --mw-announcement-height: 2.7rem;
+
   // Layout knobs. A good default is not enough here: what reads as generous on
   // a landing page costs visible content in an application with a sticky
   // header. Same framework, two different right answers.
@@ -123,7 +129,7 @@ $_active-prefix: 'dark';
     1200px,
     calc(100% - 2 * var(--mw-container-gutter))
   );
-  --mw-section-padding-block: #{spacing('7')};
+  --mw-section-padding-block: #{spacing('10')};
   --mw-section-title-gap: #{spacing('7')};
   --mw-scroll-hint-offset: #{spacing('9')};
   --mw-scroll-hint-inline: var(--mw-container-gutter);

package/src/scss/components/_announcement.scss

@@ -0,0 +1,84 @@
+@use '../abstracts' as *;
+
+// The ribbon under the fixed header - a discount, a launch note, a maintenance
+// window. One per page, and always a single line of content with an optional
+// highlight pill in front of it.
+.mw-announcement {
+  position: fixed;
+  top: var(--mw-header-height);
+  right: 0;
+  left: 0;
+  z-index: z-index('header') - 10;
+  background: color-mix(in srgb, var(--mw-primary-color) 75%, transparent);
+  backdrop-filter: blur(7px);
+  color: var(--mw-primary-accent-text-color);
+  box-shadow: var(--mw-elevation-2);
+}
+
+// The one row inside - usually a link to the thing announced.
+.mw-announcement-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: spacing('4');
+  min-height: var(--mw-announcement-height);
+  padding: spacing('1') spacing('4');
+  font-size: font-size('sm');
+  text-align: center;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in srgb, #000 10%, transparent);
+  }
+
+  @include focus-ring-inset;
+  @include tappable;
+}
+
+// The highlight pill - the "-20 %", the "NEW". Darkened glass rather than a
+// color of its own, so it works on every variant without a token per pair.
+.mw-announcement-highlight {
+  flex-shrink: 0;
+  padding: spacing('1') spacing('3');
+  border-radius: 999px;
+  background: color-mix(in srgb, #000 18%, transparent);
+  font-weight: font-weight('bold');
+}
+
+// The ribbon in the document flow instead of glued under the header - for a
+// notice inside a page, or a demo of the component itself. Static, it scrolls
+// with the content and shifts no anchor offset below.
+.mw-announcement-static {
+  position: static;
+}
+
+// Anchors scrolled to under the fixed chrome would land under the ribbon too -
+// the same reason the reset reserves the header height. Scoped with :has, so a
+// page without a ribbon keeps the plain offset - and a static ribbon does not
+// count, it scrolls with the content.
+html:has(.mw-announcement:not(.mw-announcement-static)) {
+  scroll-padding-top: calc(
+    var(--mw-header-height) + var(--mw-announcement-height)
+  );
+}
+
+// On a phone the line wraps and the ribbon grows - the height token follows,
+// so the scroll offset above stays honest. Here and not in base, so cherry-
+// picking the component brings the whole behaviour along.
+@include media-down('sm') {
+  :root {
+    --mw-announcement-height: 3.4rem;
+  }
+}
+
+// Color variants
+$_mw-announcement-colors: (secondary, success, warning, danger, info);
+
+@each $name in $_mw-announcement-colors {
+  .mw-announcement-#{$name} {
+    background: color-mix(in srgb, var(--mw-#{$name}-color) 75%, transparent);
+    color: var(--mw-#{$name}-accent-text-color);
+  }
+}

package/src/scss/components/_index.scss

@@ -1,5 +1,6 @@
 @forward 'accordions';
 @forward 'alerts';
+@forward 'announcement';
 @forward 'avatars';
 @forward 'badge';
 @forward 'blog-post';
@@ -21,12 +22,14 @@
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';
+@forward 'media';
 @forward 'meta-info';
 @forward 'modals';
 @forward 'pagination';
 @forward 'panels';
 @forward 'pricing';
 @forward 'progress';
+@forward 'prose';
 @forward 'ratings';
 @forward 'segmented';
 @forward 'skeleton';
@@ -36,6 +39,7 @@
 @forward 'tabs';
 @forward 'tags';
 @forward 'techstack-bucket';
+@forward 'testimonial';
 @forward 'theme-toggle';
 @forward 'tiles';
 @forward 'timelines';

package/src/scss/components/_media.scss

@@ -0,0 +1,26 @@
+@use '../abstracts' as *;
+
+// Self-hosted audio and video. The framework ships no player - the native
+// controls are the player, and `accent-color` on :root already brands them.
+// This only makes the element sit right: full width, block, and a video gets
+// the surface silhouette so it reads as part of the family.
+.mw-media {
+  audio,
+  video {
+    display: block;
+    width: 100%;
+  }
+
+  video {
+    height: auto;
+    border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+    box-shadow: var(--mw-elevation-2);
+  }
+}
+
+.mw-media-caption {
+  margin-top: spacing('2');
+  font-size: font-size('sm');
+  color: var(--mw-text-muted-color);
+  text-align: center;
+}

package/src/scss/components/_prose.scss

@@ -0,0 +1,42 @@
+@use '../abstracts' as *;
+
+// Long-form running text - a legal page, terms, a plain article. One class on
+// the container instead of a utility chain on every heading: the markup inside
+// stays bare h2/h3/p/ul, which is exactly what a CMS or a JSON-driven page
+// produces anyway.
+//
+// Headings are deliberately small: in a document they structure the reading,
+// they do not compete with the page title.
+.mw-prose {
+  h2 {
+    font-size: font-size('lg');
+    color: var(--mw-primary-text-color);
+    margin: spacing('8') 0 spacing('3');
+  }
+
+  h3 {
+    font-size: font-size('md');
+    color: var(--mw-primary-text-color);
+    margin: spacing('6') 0 spacing('2');
+  }
+
+  ul,
+  ol {
+    margin: 0 0 spacing('3') spacing('7');
+  }
+
+  li {
+    margin-bottom: spacing('1');
+  }
+
+  // The first heading in a card already sits on the card's padding, the last
+  // paragraph on its bottom edge - without these the container carries double
+  // spacing at both ends.
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}

package/src/scss/components/_testimonial.scss

@@ -0,0 +1,58 @@
+@use '../abstracts' as *;
+
+// A voice about the product - a quote card with its source. A figure, because
+// quote and attribution belong together and that is the element that says so:
+//
+// <figure class="mw-testimonial">
+//   <blockquote>...</blockquote>
+//   <figcaption class="mw-testimonial-source">
+//     Name <span class="mw-testimonial-detail">&middot; role or occasion</span>
+//   </figcaption>
+// </figure>
+.mw-testimonial {
+  @include surface;
+  display: flex;
+  flex-direction: column;
+  padding: spacing('5');
+  background: var(--mw-card-background);
+  border: 1px solid var(--mw-border);
+  box-shadow: var(--mw-elevation-2);
+
+  // Several of these in a row, each quote on the base blockquote tint, add up
+  // to a solid colored wall nobody reads through. The card already carries the
+  // surface - inside it the quote keeps only the edge and the quotation marks
+  // as its sign.
+  blockquote {
+    background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
+    border-left-color: color-mix(
+      in srgb,
+      var(--mw-secondary-color) 45%,
+      transparent
+    );
+    padding-block: spacing('2');
+    font-size: font-size('base');
+    line-height: 1.6;
+  }
+}
+
+// margin-top: auto, so in a grid of equal-height cards every source line sits
+// on its card's bottom edge instead of floating under quotes of random length.
+.mw-testimonial-source {
+  margin-top: auto;
+  padding-top: spacing('5');
+  font-size: font-size('sm');
+  font-weight: font-weight('bold');
+  color: var(--mw-primary-text-color);
+}
+
+.mw-testimonial-detail {
+  font-weight: font-weight('normal');
+  color: var(--mw-text-muted-color);
+}
+
+// The one voice lifted above the grid - it may speak a size louder.
+.mw-testimonial-featured {
+  blockquote {
+    font-size: font-size('md');
+  }
+}

package/src/scss/layout/_grid.scss

@@ -220,6 +220,45 @@
   }
 }
 
+// Masonry columns - for cards of unequal height, where a row grid tears a gap
+// under every short one. CSS multi-column instead: entries flow into columns
+// and close up, the column count steps down with the viewport. break-inside
+// keeps each child whole - without it a page break lands mid-card.
+//
+// Reading order caveat: columns read top to bottom, then across. Right for
+// testimonials and galleries, wrong for anything ranked or chronological -
+// that stays in a grid.
+%columns-base {
+  column-gap: spacing('6');
+
+  > * {
+    break-inside: avoid;
+    margin-bottom: spacing('6');
+  }
+}
+
+.mw-columns-2 {
+  @extend %columns-base;
+  columns: 2;
+
+  @include media-down('sm') {
+    columns: 1;
+  }
+}
+
+.mw-columns-3 {
+  @extend %columns-base;
+  columns: 3;
+
+  @include media-down('lg') {
+    columns: 2;
+  }
+
+  @include media-down('sm') {
+    columns: 1;
+  }
+}
+
 // Base stack - items keep their natural width
 .mw-grid-stack {
   @extend %grid-base;

package/src/scss/layout/_main.scss

@@ -97,8 +97,15 @@
       // width it has, so both variants get the strip back. Last of the three,
       // because a media query adds no specificity and would otherwise lose to
       // the end rule above.
+      //
+      // A smaller strip than on the desktop, though: a phone screen is barely
+      // taller than the hero text on it, so the full reserve is what tips the
+      // container past 100dvh - and everything below that line, the cue first,
+      // is off screen. min-height already leaves room here in most cases.
       @include media-down('md') {
         &:has(> .mw-scroll-hint) {
+          --mw-scroll-hint-reserve: #{spacing('6')};
+
           padding-bottom: calc(
             var(--mw-scroll-hint-offset) + var(--mw-scroll-hint-reserve)
           );
@@ -124,12 +131,20 @@
   flex-direction: column;
   align-items: center;
   gap: spacing('2');
-  color: color-mix(in srgb, var(--mw-hero-text-color) 45%, transparent);
+  color: color-mix(in srgb, var(--mw-hero-text-color) 72%, transparent);
   font-size: font-size('xs');
   letter-spacing: 0.08em;
   text-transform: uppercase;
   text-decoration: none;
   animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+  text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
+
+  // The arrow carries the meaning, the word only confirms it - so it is the
+  // arrow that gets the size, and the label stays quiet at 'xs'.
+  > i,
+  > svg {
+    font-size: font-size('lg');
+  }
 
   @include hover {
     color: var(--mw-hero-text-color);

package/src/scss/layout/_section.scss

@@ -22,6 +22,20 @@
   }
 }
 
+// The lead line under a section title. Every landing page writes this
+// paragraph, and it always wants the same four things: centred, muted,
+// narrower than the container so it reads as a line rather than a block, and
+// pulled up toward the title it belongs to - the title's gap is sized for the
+// content below, not for its own subtitle.
+.mw-section-intro {
+  max-width: 46rem;
+  margin: spacing('-3') auto spacing('9');
+  font-size: font-size('md');
+  color: var(--mw-text-muted-color);
+  text-align: center;
+  text-wrap: balance;
+}
+
 .mw-section-subtitle {
   font-size: font-size('2xl');
   margin: spacing('8') spacing('0') spacing('6') spacing('0');
@@ -110,6 +124,16 @@
 .mw-section {
   padding: var(--mw-section-padding-block) spacing('0');
   position: relative;
+
+  // ...except around a hero. The hero container is already 100dvh, so the
+  // padding pushes exactly that much of it past the bottom of the screen -
+  // and with it the scroll cue sitting on its lower edge. A hero is the full
+  // screen by definition and brings its own breathing room.
+  @supports (selector(:has(.mw-hero))) {
+    &:has(.mw-hero) {
+      padding-block: spacing('0');
+    }
+  }
 }
 
 // Pattern variant for sections

package/src/scss/utilities/_index.scss

@@ -4,6 +4,7 @@
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';
+@forward 'reveal';
 @forward 'spacing';
 @forward 'text';
 @forward 'touch-targets';

package/src/scss/utilities/_reveal.scss

@@ -0,0 +1,34 @@
+@use '../abstracts' as *;
+
+// Scroll entrance: a block rises briefly as it scrolls into view. Driven by
+// the browser's scroll timeline - no JavaScript, no IntersectionObserver
+// recalculating on every scroll step.
+//
+// Both guards matter. `prefers-reduced-motion` is the obvious one. The
+// @supports guard is the safety net: a browser without scroll timelines would
+// otherwise apply `both` fill on an animation that never runs and leave the
+// block invisible forever - guarded, it simply renders in place.
+//
+// The range ends well before the block reaches the middle of the screen, so
+// nothing is still moving while someone already reads it.
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-reveal {
+      animation: mw-reveal linear both;
+      animation-timeline: view();
+      animation-range: entry 2% entry 62%;
+    }
+  }
+}
+
+@keyframes mw-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(26px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -140,10 +140,18 @@
   -webkit-overflow-scrolling: touch;
 }
 
-// Phone layout
+// Phone layout. The section rhythm steps down twice: a tablet keeps a middle
+// value, a phone drops further - every rem here is one the reader has to
+// scroll past on a screen that is already all scrolling.
 @include media-down('md') {
   :root {
-    --mw-section-padding-block: #{spacing('6')};
+    --mw-section-padding-block: #{spacing('9')};
+  }
+}
+
+@include media-down('sm') {
+  :root {
+    --mw-section-padding-block: #{spacing('7')};
   }
 }