maverick-wave 4.21.0 → 4.23.0

package/src/assets/images/tile-analytics.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Business intelligence suite">
+  <defs>
+    <linearGradient id="an-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7a5cf0"/>
+      <stop offset="1" stop-color="#3d2a9c"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#an-bg)"/>
+  <circle cx="40" cy="36" r="52" fill="#ffffff" opacity="0.09"/>
+  <g fill="#ffffff" opacity="0.9">
+    <rect x="62" y="114" width="20" height="34" rx="4"/>
+    <rect x="90" y="96" width="20" height="52" rx="4"/>
+    <rect x="118" y="78" width="20" height="70" rx="4"/>
+  </g>
+  <path d="M72 104 l28 -18 l28 -20" fill="none" stroke="#ffd166" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+  <g fill="#ffd166">
+    <circle cx="72" cy="104" r="6"/>
+    <circle cx="100" cy="86" r="6"/>
+    <circle cx="128" cy="66" r="6"/>
+  </g>
+  <rect x="58" y="154" width="84" height="6" rx="3" fill="#ffffff" opacity="0.55"/>
+</svg>

package/src/assets/images/tile-cloud.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Cloud infrastructure">
+  <defs>
+    <linearGradient id="cl-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2eb6c9"/>
+      <stop offset="1" stop-color="#1d6d95"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#cl-bg)"/>
+  <circle cx="172" cy="176" r="52" fill="#ffffff" opacity="0.09"/>
+  <path d="M70 100 a24 24 0 0 1 46 -11 a18 18 0 0 1 14 30 h-52 a22 22 0 0 1 -8 -19 Z" fill="#ffffff" opacity="0.94"/>
+  <g fill="#ffffff" opacity="0.75">
+    <rect x="68" y="132" width="64" height="14" rx="4"/>
+    <rect x="68" y="152" width="64" height="14" rx="4"/>
+  </g>
+  <g fill="#1d6d95">
+    <circle cx="78" cy="139" r="3.5"/>
+    <circle cx="78" cy="159" r="3.5"/>
+  </g>
+</svg>

package/src/assets/images/tile-ecommerce.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="E-commerce platform">
+  <defs>
+    <linearGradient id="ec-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2f6fed"/>
+      <stop offset="1" stop-color="#1b3f9c"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#ec-bg)"/>
+  <circle cx="160" cy="40" r="52" fill="#ffffff" opacity="0.09"/>
+  <path d="M64 88 h72 l-7 56 a9 9 0 0 1 -9 8 h-40 a9 9 0 0 1 -9 -8 Z" fill="#ffffff" opacity="0.94"/>
+  <path d="M84 90 v-10 a16 16 0 0 1 32 0 v10" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/>
+  <circle cx="88" cy="110" r="6" fill="#2f6fed"/>
+  <circle cx="112" cy="110" r="6" fill="#2f6fed"/>
+</svg>

package/src/assets/images/tile-enterprise.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Enterprise solutions">
+  <defs>
+    <linearGradient id="en-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3fa66f"/>
+      <stop offset="1" stop-color="#1c5c46"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#en-bg)"/>
+  <circle cx="166" cy="46" r="50" fill="#ffffff" opacity="0.09"/>
+  <g fill="#ffffff" opacity="0.92">
+    <rect x="58" y="96" width="42" height="52" rx="5"/>
+    <rect x="106" y="70" width="42" height="78" rx="5"/>
+  </g>
+  <g fill="#1c5c46">
+    <rect x="67" y="106" width="10" height="10" rx="2.5"/><rect x="82" y="106" width="10" height="10" rx="2.5"/>
+    <rect x="67" y="124" width="10" height="10" rx="2.5"/><rect x="82" y="124" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="80" width="10" height="10" rx="2.5"/><rect x="130" y="80" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="98" width="10" height="10" rx="2.5"/><rect x="130" y="98" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="116" width="10" height="10" rx="2.5"/><rect x="130" y="116" width="10" height="10" rx="2.5"/>
+  </g>
+  <rect x="52" y="152" width="102" height="7" rx="3.5" fill="#ffffff" opacity="0.6"/>
+</svg>

package/src/assets/images/tile-marketing.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Marketing automation">
+  <defs>
+    <linearGradient id="mk-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8646a"/>
+      <stop offset="1" stop-color="#a32f6e"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#mk-bg)"/>
+  <circle cx="36" cy="168" r="56" fill="#ffffff" opacity="0.09"/>
+  <path d="M66 92 h16 l38 -26 v70 l-38 -26 h-16 a9 9 0 0 1 -9 -9 Z" fill="#ffffff" opacity="0.94"/>
+  <path d="M82 110 l5 28 h16 l-5 -28 Z" fill="#ffffff" opacity="0.94"/>
+  <g fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.7">
+    <path d="M132 90 a20 20 0 0 1 0 24"/>
+    <path d="M144 78 a38 38 0 0 1 0 48"/>
+  </g>
+</svg>

package/src/partials/announcement-container.html

@@ -0,0 +1,67 @@
+<h3 class="mw-section-subtitle">Announcement</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The ribbon glued under the fixed header - a discount, a launch note, a
+  maintenance window. Shown here with <code>mw-announcement-static</code>, so
+  the demos sit in the flow instead of over this page. Without it the ribbon
+  fixes itself below the header, stays put while the page scrolls beneath it,
+  and reserves the anchor scroll offset via
+  <code>--mw-announcement-height</code>. The surface is 75% opaque with a
+  backdrop blur - visible wherever content sits behind it, like the first demo
+  below.
+</p>
+
+<div class="mw-grid-1 mw-gap-6">
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">
+      Default (primary) with highlight pill - over content, showing the 75%
+      surface and the blur
+    </h5>
+    <div
+      style="
+        background: url('images/slider-mountains.svg') center / cover;
+        padding: 1.75rem 1rem;
+      "
+    >
+      <aside class="mw-announcement mw-announcement-static">
+        <a class="mw-announcement-content" href="#announcement">
+          <span class="mw-announcement-highlight">-20 %</span>
+          <span>Summer discount on every plan until 30.09.</span>
+        </a>
+      </aside>
+    </div>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
+    <aside
+      class="mw-announcement mw-announcement-secondary mw-announcement-static"
+    >
+      <a class="mw-announcement-content" href="#announcement">
+        <span class="mw-announcement-highlight">NEW</span>
+        <span>Version 5 is out - see what changed.</span>
+      </a>
+    </aside>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Warning, without a link</h5>
+    <aside
+      class="mw-announcement mw-announcement-warning mw-announcement-static"
+    >
+      <div class="mw-announcement-content">
+        <span>Maintenance window on Saturday, 02:00 - 04:00 UTC.</span>
+      </div>
+    </aside>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+    <aside
+      class="mw-announcement mw-announcement-danger mw-announcement-static"
+    >
+      <div class="mw-announcement-content">
+        <span>The legacy API shuts down on 01.12. - migrate now.</span>
+      </div>
+    </aside>
+  </div>
+</div>

package/src/partials/content-slider-container.html

@@ -4,7 +4,7 @@
 <div class="mw-image-slider">
   <div class="mw-image-slider-base" data-index="0">
     <img
-      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop"
+      src="images/slider-mountains.svg"
       class="mw-image-slider-base-image"
       alt="Mountain Landscape"
     />
@@ -12,28 +12,16 @@
 
   <div class="mw-image-slider-overlay">
     <div class="mw-image-slider-overlay-image" data-index="1">
-      <img
-        src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=800&h=500&fit=crop"
-        alt="Lake"
-      />
+      <img src="images/slider-lake.svg" alt="Lake" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="2">
-      <img
-        src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800&h=500&fit=crop"
-        alt="Forest"
-      />
+      <img src="images/slider-forest.svg" alt="Forest" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="3">
-      <img
-        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=500&fit=crop"
-        alt="Field"
-      />
+      <img src="images/slider-field.svg" alt="Field" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="4">
-      <img
-        src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=500&fit=crop"
-        alt="Trees"
-      />
+      <img src="images/slider-trees.svg" alt="Trees" />
     </div>
   </div>
 

package/src/partials/gallery-container.html

@@ -15,28 +15,28 @@
     <!-- Track -->
     <div class="mw-gallery-track">
       <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
-        <img src="https://picsum.photos/id/1011/800/400" alt="1" />
+        <img src="images/gallery-mountain.svg" alt="Beautiful Mountain" />
       </div>
       <div class="mw-gallery-slide" data-desc="Peaceful Lake">
-        <img src="https://picsum.photos/id/1012/800/400" alt="2" />
+        <img src="images/gallery-lake.svg" alt="Peaceful Lake" />
       </div>
       <div class="mw-gallery-slide" data-desc="City Vibes">
-        <img src="https://picsum.photos/id/1015/800/400" alt="3" />
+        <img src="images/gallery-city.svg" alt="City Vibes" />
       </div>
       <div class="mw-gallery-slide" data-desc="Golden Forest">
-        <img src="https://picsum.photos/id/1016/800/400" alt="4" />
+        <img src="images/gallery-forest.svg" alt="Golden Forest" />
       </div>
       <div class="mw-gallery-slide" data-desc="Desert View">
-        <img src="https://picsum.photos/id/1018/800/400" alt="5" />
+        <img src="images/gallery-desert.svg" alt="Desert View" />
       </div>
       <div class="mw-gallery-slide" data-desc="Ocean Breeze">
-        <img src="https://picsum.photos/id/1020/800/400" alt="6" />
+        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" />
       </div>
       <div class="mw-gallery-slide" data-desc="Old Town">
-        <img src="https://picsum.photos/id/1021/800/400" alt="7" />
+        <img src="images/gallery-oldtown.svg" alt="Old Town" />
       </div>
       <div class="mw-gallery-slide" data-desc="Snowy Hills">
-        <img src="https://picsum.photos/id/1025/800/400" alt="8" />
+        <img src="images/gallery-snow.svg" alt="Snowy Hills" />
       </div>
     </div>
 

package/src/partials/home-container.html

@@ -7,9 +7,14 @@
         Build stunning, responsive websites effortlessly with a modern,
         lightweight CSS framework crafted for speed, style, and flexibility.
       </p>
+      <p>
+        Effortless dark mode, mobile-first layouts and accessibility at its
+        core. The same foundation carries a portfolio, a corporate site and a
+        full e-commerce platform.
+      </p>
     </div>
 
-    <div class="mw-d-flex mw-gap-8 mw-justify-center mw-mb-7">
+    <div class="mw-d-flex mw-gap-8 mw-justify-center">
       <button
         type="button"
         onclick="location.href = '#get-started'"
@@ -25,24 +30,10 @@
         Documentation
       </button>
     </div>
-
-    <div class="mw-card mw-card-simple mw-text-center">
-      <h3 class="mw-text-2xl mw-mb-4">Simple. Adaptive. Unstoppable.</h3>
-      <p class="mw-mb-4">
-        MaverickWave is a sleek foundation for creators who value elegance
-        without compromise. Its fluid design philosophy bends and flexes like
-        the tide - shaping itself perfectly to your vision.
-      </p>
-      <p class="mw-mb-4">
-        Launch stunning portfolios, vibrant corporate sites, and powerful
-        e-commerce platforms faster than ever. MaverickWave gives you the
-        ultimate creative freedom without sacrificing performance.
-      </p>
-      <p>
-        Experience the future of styling with effortless dark mode, mobile-first
-        responsive layouts, and accessibility at its core - because great design
-        is for everyone.
-      </p>
-    </div>
   </div>
 </div>
+
+<a class="mw-scroll-hint" href="#get-started">
+  More
+  <i class="fas fa-chevron-down"></i>
+</a>

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';