maverick-wave 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maverick-wave",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "config": {
     "version_short": "3.6"
   },

package/src/partials/cards-container.html

@@ -2,7 +2,7 @@
 
 <h3 class="mw-mb-4">Standard Cards</h3>
 <div class="mw-grid-3">
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-img">
       <img
         src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
@@ -26,7 +26,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-body">
       <h3 class="mw-card-title">Project Update</h3>
       <hr class="mw-card-title-divider" />
@@ -44,7 +44,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-body">
       <h3 class="mw-card-title">Development Stack</h3>
       <hr class="mw-card-title-divider" />
@@ -166,8 +166,13 @@
   while maintaining centering and proportions. (See the first large and the
   second extra large card)
 </p>
+<p class="mw-text-muted">
+  Besides <code>mw-card-lg</code> and <code>mw-card-xl</code> you can set any
+  image height yourself with the <code>--mw-card-img-height</code> custom
+  property on the card.
+</p>
 <div class="mw-grid-2">
-  <div class="mw-card mw-card-content mw-card-lg">
+  <div class="mw-card mw-card-lg">
     <div class="mw-card-img">
       <img
         src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
@@ -178,7 +183,7 @@
       <h3 class="mw-card-title">Large Card</h3>
       <hr class="mw-card-title-divider" />
       <p class="mw-card-text">
-        Large cards feature taller images (330px height) that work well for
+        Large cards feature taller images (340px height) that work well for
         portrait-oriented photos or when you want to showcase more of your
         visual content.
       </p>
@@ -191,7 +196,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content mw-card-lg">
+  <div class="mw-card mw-card-lg">
     <div class="mw-card-img">
       <img
         src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
@@ -221,7 +226,7 @@
   <code>mw-card-img-contain</code> class on the second image.
 </p>
 <div class="mw-grid-2">
-  <div class="mw-card mw-card-content mw-card-xl">
+  <div class="mw-card mw-card-xl">
     <div class="mw-card-img">
       <img
         src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
@@ -247,7 +252,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content mw-card-xl">
+  <div class="mw-card mw-card-xl">
     <div class="mw-card-img-contain">
       <img
         src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
@@ -273,7 +278,7 @@
 
 <h3 class="mw-mb-4 mw-mt-6">Card Variations</h3>
 <div class="mw-grid-3">
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-body">
       <h3 class="mw-card-title">Card with Tags</h3>
       <hr class="mw-card-title-divider" />
@@ -291,7 +296,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-body">
       <h3 class="mw-card-title">Card with Avatar</h3>
       <hr class="mw-card-title-divider" />
@@ -315,7 +320,7 @@
     </div>
   </div>
 
-  <div class="mw-card mw-card-content">
+  <div class="mw-card">
     <div class="mw-card-body">
       <h3 class="mw-card-title">Card with Progress</h3>
       <hr class="mw-card-title-divider" />
@@ -351,7 +356,7 @@
     <h3 class="mw-card-title">Badges</h3>
     <div class="mw-grid-2-lg">
       <!-- Badge 1 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-badge mw-card-addon-primary">New</div>
         <div class="mw-card-body">
           <h3 class="mw-card-title">Latest Gadget</h3>
@@ -365,7 +370,7 @@
         </div>
       </div>
       <!-- Badge 2 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-badge mw-card-addon-secondary">Hot</div>
         <div class="mw-card-img">
           <img
@@ -385,7 +390,7 @@
         </div>
       </div>
       <!-- Badge 3 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-badge mw-card-addon-success">Sale</div>
         <div class="mw-card-img">
           <img
@@ -407,7 +412,7 @@
         </div>
       </div>
       <!-- Badge 4 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-badge mw-card-addon-danger">Limited</div>
         <div class="mw-card-body">
           <h3 class="mw-card-title">Limited Offer</h3>
@@ -430,7 +435,7 @@
     <h3 class="mw-card-title">Ribbons</h3>
     <div class="mw-grid-2-lg">
       <!-- Ribbon 1 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-ribbon mw-card-addon-primary">Featured</div>
         <div class="mw-card-img">
           <img
@@ -450,7 +455,7 @@
         </div>
       </div>
       <!-- Ribbon 2 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-ribbon mw-card-addon-info">
           <span>Info</span>
         </div>
@@ -468,7 +473,7 @@
         </div>
       </div>
       <!-- Ribbon 3 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-ribbon mw-card-addon-warning">Beta</div>
         <div class="mw-card-img">
           <img
@@ -488,7 +493,7 @@
         </div>
       </div>
       <!-- Ribbon 4 -->
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-ribbon mw-card-addon-danger">Highlight Project</div>
         <div class="mw-card-body">
           <h3 class="mw-card-title">VIP Access</h3>

package/src/partials/timelines-container.html

@@ -10,7 +10,7 @@
       <div class="mw-timeline-big-date-main">01/2023 – Present</div>
     </div>
     <div class="mw-timeline-big-content">
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-body">
           <h3 class="mw-card-title">Lead Developer</h3>
           <p class="mw-card-subtitle">Innovatech Inc • San Francisco</p>
@@ -41,7 +41,7 @@
       <div class="mw-timeline-big-date-sub">(1 year 4 months)</div>
     </div>
     <div class="mw-timeline-big-content">
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-body">
           <h3 class="mw-card-title">Senior Developer</h3>
           <p class="mw-card-subtitle">Innovatech Inc • San Francisco</p>
@@ -78,7 +78,7 @@
       <div class="mw-timeline-big-date-sub">(1 year 1 month)</div>
     </div>
     <div class="mw-timeline-big-content">
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-body">
           <h3 class="mw-card-title">Mid-Level Developer</h3>
           <p class="mw-card-subtitle">DevSolutions LLC • Remote</p>
@@ -109,7 +109,7 @@
       <div class="mw-timeline-big-date-sub">(2 year 3 months)</div>
     </div>
     <div class="mw-timeline-big-content">
-      <div class="mw-card mw-card-content">
+      <div class="mw-card">
         <div class="mw-card-body">
           <h3 class="mw-card-title">Junior Developer</h3>
           <p class="mw-card-subtitle">StartupXYZ • Berlin</p>

package/src/partials/utilities-container.html

@@ -115,3 +115,38 @@
     </div>
   </div>
 </div>
+
+<h3 class="mw-mb-4 mw-mt-6">Tooltips</h3>
+<p class="mw-text-muted">
+  Put <code>data-tooltip="..."</code> on any element - pure CSS, no script
+  needed. The bubble sits above the element on hover or keyboard focus and long
+  text wraps instead of running off in one endless line. It reaches outside a
+  card, because cards only clip their content when they carry a ribbon. What
+  does still cut it off: a scroll container, and the edge of the screen.
+</p>
+<div class="mw-card mw-card-simple">
+  <p class="mw-mb-4">
+    Works on inline elements too:
+    <a href="#utilities" data-tooltip="A link">a link</a>,
+    <code data-tooltip="Some code">a code span</code> or
+    <i class="fas fa-circle-info" data-tooltip="An icon"></i> an icon.
+  </p>
+  <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
+    <button
+      type="button"
+      class="mw-btn mw-btn-outline"
+      data-tooltip="Hover or focus me"
+    >
+      A button
+    </button>
+    <span class="mw-tag mw-tag-primary" data-tooltip="Tags work as well">
+      Tag
+    </span>
+    <span
+      class="mw-tag mw-tag-success"
+      data-tooltip="Long text wraps at 280px instead of running off the screen in one endless line"
+    >
+      Long text
+    </span>
+  </div>
+</div>

package/src/scss/components/_buttons.scss

@@ -126,7 +126,7 @@
   height: 18px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: var(--mw-accent-text-color);
+  color: #efefef;
   border: none;
   padding: 0;
   line-height: 1;

package/src/scss/components/_cards.scss

@@ -9,20 +9,37 @@ $_mw-card-addon-colors: (
   danger: var(--mw-danger-color),
 );
 
+// Fading rule used by the title divider and the stack header underline
+@mixin _card-divider-gradient {
+  background-image: linear-gradient(
+    to right,
+    var(--mw-secondary-color),
+    var(--mw-secondary-color),
+    var(--mw-gray-background),
+    transparent
+  );
+  opacity: 0.75;
+}
+
 .mw-card {
+  // flex column so the footer can be pushed to the bottom - no height: 100%,
+  // grid and flex items already stretch and it would blow up block parents
+  display: flex;
+  flex-direction: column;
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  padding: spacing('5') spacing('0') spacing('3') spacing('0');
   box-shadow: 0 5px 10px var(--mw-shadow);
-  transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
+  transition: var(--mw-transition);
   position: relative;
-  overflow: hidden;
-  margin: spacing('0');
-  z-index: z-index('card');
+  // deliberately not `overflow: hidden` - that would also cut off anything a
+  // child wants to show outside the card, a tooltip above a button being the
+  // common case. Images round their own corners below, and only the ribbon
+  // really needs the card to clip.
+  overflow: visible;
 
-  &-simple {
-    padding: spacing('5');
+  &:has(.mw-card-ribbon) {
+    overflow: hidden;
   }
 
   &:hover {
@@ -31,6 +48,13 @@ $_mw-card-addon-colors: (
     border-color: var(--mw-border-accent);
   }
 
+  // Padded surface for arbitrary content - stays a block container so inline
+  // children keep flowing instead of turning into flex items
+  &-simple {
+    display: block;
+    padding: spacing('5');
+  }
+
   &-badge {
     position: absolute;
     top: spacing('2');
@@ -38,10 +62,10 @@ $_mw-card-addon-colors: (
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
     color: var(--mw-accent-text-color);
-    background: var(--mw-primary-color);
+    background: var(--mw-card-addon-color, var(--mw-primary-color));
     border-radius: radius('md');
     white-space: nowrap;
-    z-index: z-index('card') + 5;
+    z-index: 1;
     pointer-events: none;
     text-align: center;
     opacity: 0.9;
@@ -55,10 +79,10 @@ $_mw-card-addon-colors: (
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
     color: var(--mw-accent-text-color);
-    background: var(--mw-primary-color);
+    background: var(--mw-card-addon-color, var(--mw-primary-color));
     white-space: nowrap;
     width: 220px;
-    z-index: z-index('card') + 5;
+    z-index: 1;
     pointer-events: none;
     transform: rotate(25deg);
     text-align: center;
@@ -69,27 +93,18 @@ $_mw-card-addon-colors: (
     }
   }
 
-  // Content card variant - uses flex layout for footer positioning
-  &-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  &-img {
-    height: 210px;
+  &-img,
+  &-img-contain {
+    height: var(--mw-card-img-height, 210px);
     overflow: hidden;
-    top: 0;
-    left: 0;
-    margin-top: -1 * spacing('5');
     flex-shrink: 0;
+    border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: var(--mw-transition);
-      z-index: z-index('card') + 2;
     }
 
     &:hover img {
@@ -97,11 +112,20 @@ $_mw-card-addon-colors: (
     }
   }
 
-  &-img-contain {
-    @extend .mw-card-img;
-    img {
-      object-fit: contain;
-      object-position: center;
+  &-img-contain img {
+    object-fit: contain;
+    object-position: center;
+  }
+
+  &-lg {
+    --mw-card-img-height: 340px;
+  }
+
+  &-xl {
+    --mw-card-img-height: 480px;
+
+    @include media-down('sm') {
+      --mw-card-img-height: 440px;
     }
   }
 
@@ -109,7 +133,20 @@ $_mw-card-addon-colors: (
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: spacing('5');
+    padding: spacing('7') spacing('5') spacing('6');
+
+    @include media-down('sm') {
+      padding: spacing('6') spacing('4') spacing('5');
+    }
+
+    > *:last-child:not(.mw-card-footer) {
+      margin-bottom: spacing('0');
+    }
+
+    .mw-card-footer {
+      margin-top: auto;
+      padding-top: spacing('5');
+    }
   }
 
   &-title {
@@ -124,15 +161,8 @@ $_mw-card-addon-colors: (
     height: 4px;
     margin: spacing('1') spacing('0') spacing('4') spacing('0');
     border: 0;
-    background-image: linear-gradient(
-      to right,
-      var(--mw-secondary-color),
-      var(--mw-secondary-color),
-      var(--mw-gray-background),
-      transparent
-    );
-    opacity: 0.75;
     width: 70%;
+    @include _card-divider-gradient;
   }
 
   &-subtitle {
@@ -154,15 +184,6 @@ $_mw-card-addon-colors: (
     }
   }
 
-  &-body > *:last-child:not(.mw-card-footer) {
-    margin-bottom: spacing('0');
-  }
-
-  &-body .mw-card-footer {
-    margin-top: auto;
-    padding-top: spacing('5');
-  }
-
   &-footer {
     display: flex;
     justify-content: flex-start;
@@ -171,7 +192,7 @@ $_mw-card-addon-colors: (
     flex-shrink: 0;
     text-wrap: balance;
 
-    /* push the last element all the way right */
+    /* push the last element all the way right - a single one included */
     > *:last-child {
       margin-left: auto;
       text-align: right;
@@ -199,41 +220,9 @@ $_mw-card-addon-colors: (
     }
   }
 
-  // Card sizes
-  &-lg {
-    .mw-card-img {
-      height: 340px;
-    }
-  }
-
-  &-xl {
-    .mw-card-img {
-      height: 480px;
-      @include media-down('sm') {
-        height: 440px;
-      }
-    }
-  }
-
-  @include media-down('sm') {
-    &-body {
-      padding: spacing('4');
-    }
-
-    // Adjust the image margin to match the new padding
-    .mw-card-img {
-      margin-bottom: spacing('2');
-      img {
-        width: 100%;
-      }
-    }
-  }
-
   &-stack {
     padding: spacing('4') spacing('5');
-    transition: all 0.4s ease;
 
-    // Icon transition setup
     &-icon {
       width: 38px;
       height: 38px;
@@ -247,15 +236,13 @@ $_mw-card-addon-colors: (
       font-size: font-size('md');
       flex-shrink: 0;
       box-shadow: 0 4px 8px var(--mw-shadow);
-      transition: transform 0.6s ease;
+      transition: var(--mw-transition);
     }
 
-    // Add rotation on hover
     &:hover &-icon {
       transform: rotate(25deg);
     }
 
-    // Rest of your styles...
     &-header {
       display: flex;
       align-items: center;
@@ -265,18 +252,11 @@ $_mw-card-addon-colors: (
         content: '';
         position: absolute;
         bottom: spacing('-3');
-        left: 48%;
+        left: 50%;
         transform: translateX(-50%);
         width: 90%;
         height: 2px;
-        background-image: linear-gradient(
-          to right,
-          var(--mw-secondary-color),
-          var(--mw-secondary-color),
-          var(--mw-gray-background),
-          transparent
-        );
-        opacity: 0.75;
+        @include _card-divider-gradient;
       }
     }
 
@@ -307,6 +287,22 @@ $_mw-card-addon-colors: (
 
 @each $name, $col in $_mw-card-addon-colors {
   .mw-card-addon-#{$name} {
-    background: #{$col};
+    --mw-card-addon-color: #{$col};
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-card,
+  .mw-card-img img,
+  .mw-card-img-contain img,
+  .mw-card-stack-icon {
+    transition: none;
+  }
+
+  .mw-card:hover,
+  .mw-card-img:hover img,
+  .mw-card-img-contain:hover img,
+  .mw-card-stack:hover .mw-card-stack-icon {
+    transform: none;
   }
 }

package/src/scss/components/_gallery.scss

@@ -46,7 +46,7 @@
     border: none;
     border-radius: radius('md');
     background: rgb(0 0 0 / 40%);
-    color: var(--mw-accent-text-color);
+    color: #efefef;
     font-size: font-size('xl');
     line-height: 1;
     cursor: pointer;

package/src/scss/components/_info.scss

@@ -92,7 +92,7 @@ button.mw-info {
   height: 20px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: var(--mw-accent-text-color);
+  color: #efefef;
   border: none;
   padding: 0;
   line-height: 1;

package/src/scss/layout/_header.scss

@@ -11,14 +11,20 @@
   border-bottom: 1px solid var(--mw-header-border);
   padding: spacing('3') spacing('0');
   transition: var(--mw-transition);
-
-  // Flex, so the container stays vertically centered once the height token
-  // exceeds the intrinsic content height. min-height, so a too-small token
-  // never clips a taller logo or a wrapping action row.
   display: flex;
   align-items: center;
   min-height: var(--mw-header-height);
 
+  // A component host (Angular, React) sitting between the header and its
+  // container would become the flex item and shrink to content width, leaving
+  // mw-container to center inside a far too narrow box. The container brings
+  // its own width and centering, so the wrapper only has to fill the line.
+  // Absolutely positioned children are out of flow and stay unaffected.
+  > *:not(.mw-container) {
+    flex: 1;
+    min-width: 0;
+  }
+
   .mw-container {
     display: flex;
     justify-content: space-between;