maverick-wave 5.27.0 → 5.29.0

package/src/partials/stories-container.html

@@ -0,0 +1,182 @@
+<h3 class="mw-section-subtitle">Story Archive</h3>
+<p class="mw-text-muted mw-text-measure">
+  Stories that stay. A circle opens its story full screen on a phone and
+  phone-shaped on a desktop; every frame shows for five seconds and a bar at the
+  top counts them off - that part is CSS alone. A few lines of script add the
+  rest: a tap on the right moves on, on the left goes back (arrows under a
+  mouse), a video starts when its frame comes up, the story closes at its end.
+  Holding a finger on it or the pause button stops it; Escape, the cross or a
+  click beside it close it. With reduced motion set in the system nothing plays
+  by itself - the frames become a strip to swipe through instead.
+</p>
+
+<div class="mw-stories" aria-label="Story archive">
+  <button type="button" class="mw-story" popovertarget="story-coast">
+    <span class="mw-story-cover"
+      ><img src="images/story-beach.svg" alt=""
+    /></span>
+    <span class="mw-story-label">Coast</span>
+  </button>
+  <div class="mw-story-reel" id="story-coast" popover>
+    <div class="mw-story-reel-head">
+      <span>Coast</span>
+      <label class="mw-overlay-btn mw-story-reel-pause"
+        ><input type="checkbox" aria-label="Pause"
+      /></label>
+      <button
+        type="button"
+        class="mw-overlay-btn"
+        popovertarget="story-coast"
+        popovertargetaction="hide"
+        aria-label="Close"
+      >
+        &#120299;
+      </button>
+    </div>
+    <img
+      src="images/story-beach.svg"
+      alt="Beach at sunset with waves running up the sand"
+      loading="lazy"
+    />
+    <video
+      src="media/story-sunrise.mp4"
+      poster="media/story-sunrise.jpg"
+      autoplay
+      muted
+      loop
+      playsinline
+    ></video>
+    <img
+      src="images/photo-lighthouse.svg"
+      alt="Lighthouse on a cliff at dusk"
+      loading="lazy"
+    />
+  </div>
+  <button type="button" class="mw-story" popovertarget="story-nights">
+    <span class="mw-story-cover"
+      ><img src="images/story-stars.svg" alt=""
+    /></span>
+    <span class="mw-story-label">Nights</span>
+  </button>
+  <div class="mw-story-reel" id="story-nights" popover>
+    <div class="mw-story-reel-head">
+      <span>Nights</span>
+      <label class="mw-overlay-btn mw-story-reel-pause"
+        ><input type="checkbox" aria-label="Pause"
+      /></label>
+      <button
+        type="button"
+        class="mw-overlay-btn"
+        popovertarget="story-nights"
+        popovertargetaction="hide"
+        aria-label="Close"
+      >
+        &#120299;
+      </button>
+    </div>
+    <img
+      src="images/story-stars.svg"
+      alt="Tent glowing under the milky way"
+      loading="lazy"
+    />
+    <img
+      src="images/photo-tower.svg"
+      alt="Television tower above the city at night"
+      loading="lazy"
+    />
+  </div>
+  <button type="button" class="mw-story" popovertarget="story-north">
+    <span class="mw-story-cover"
+      ><img src="images/story-aurora.svg" alt=""
+    /></span>
+    <span class="mw-story-label">North</span>
+  </button>
+  <div class="mw-story-reel" id="story-north" popover>
+    <div class="mw-story-reel-head">
+      <span>North</span>
+      <label class="mw-overlay-btn mw-story-reel-pause"
+        ><input type="checkbox" aria-label="Pause"
+      /></label>
+      <button
+        type="button"
+        class="mw-overlay-btn"
+        popovertarget="story-north"
+        popovertargetaction="hide"
+        aria-label="Close"
+      >
+        &#120299;
+      </button>
+    </div>
+    <img
+      src="images/story-aurora.svg"
+      alt="Northern lights over a snowy forest"
+      loading="lazy"
+    />
+    <img
+      src="images/photo-peak.svg"
+      alt="Snowy mountain peak under a starry sky"
+      loading="lazy"
+    />
+  </div>
+  <button type="button" class="mw-story" popovertarget="story-hikes">
+    <span class="mw-story-cover"
+      ><img src="images/photo-forest-path.svg" alt=""
+    /></span>
+    <span class="mw-story-label">Hikes</span>
+  </button>
+  <div class="mw-story-reel" id="story-hikes" popover>
+    <div class="mw-story-reel-head">
+      <span>Hikes</span>
+      <label class="mw-overlay-btn mw-story-reel-pause"
+        ><input type="checkbox" aria-label="Pause"
+      /></label>
+      <button
+        type="button"
+        class="mw-overlay-btn"
+        popovertarget="story-hikes"
+        popovertargetaction="hide"
+        aria-label="Close"
+      >
+        &#120299;
+      </button>
+    </div>
+    <img
+      src="images/photo-forest-path.svg"
+      alt="Path through a sunlit forest"
+      loading="lazy"
+    />
+    <img
+      src="images/photo-waterfall.svg"
+      alt="Waterfall between mossy cliffs"
+      loading="lazy"
+    />
+  </div>
+  <button type="button" class="mw-story" popovertarget="story-sky">
+    <span class="mw-story-cover"
+      ><img src="images/photo-balloon.svg" alt=""
+    /></span>
+    <span class="mw-story-label">Up high</span>
+  </button>
+  <div class="mw-story-reel" id="story-sky" popover>
+    <div class="mw-story-reel-head">
+      <span>Up high</span>
+      <label class="mw-overlay-btn mw-story-reel-pause"
+        ><input type="checkbox" aria-label="Pause"
+      /></label>
+      <button
+        type="button"
+        class="mw-overlay-btn"
+        popovertarget="story-sky"
+        popovertargetaction="hide"
+        aria-label="Close"
+      >
+        &#120299;
+      </button>
+    </div>
+    <img
+      src="images/photo-balloon.svg"
+      alt="Hot air balloon in a morning sky"
+      loading="lazy"
+    />
+  </div>
+</div>

package/src/partials/tables-container.html

@@ -13,11 +13,30 @@
     <p class="mw-text-muted">
       This is the basic table that supports all functions except the complete
       responsive feeling with the cards - five columns do not fit a phone, so it
-      sits in a <code>mw-table-responsive</code> wrapper
+      sits in a <code>mw-table-responsive</code> wrapper.
+      <code>mw-table-compact</code> is the same table with less spacing and
+      smaller type.
     </p>
 
+    <div class="mw-segmented mw-mb-4" data-modifier-demo="table-demo">
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier=""
+      >
+        Default
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-table-compact"
+      >
+        Compact
+      </button>
+    </div>
+
     <div class="mw-table-responsive">
-      <table class="mw-table">
+      <table class="mw-table" id="table-demo">
         <thead>
           <tr>
             <th>#</th>
@@ -64,44 +83,6 @@
     </p>
   </div>
 
-  <div class="mw-card mw-card-simple mw-mb-6">
-    <h4 class="mw-mb-2">Compact Table</h4>
-    <p class="mw-text-muted">
-      Same table as basic table but a bit with less spacing and smaller fonts
-    </p>
-
-    <table class="mw-table mw-table-compact">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Name</th>
-          <th>Position</th>
-          <th>Location</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Mara Kessler</td>
-          <td>Developer</td>
-          <td>New York</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Tom Aldridge</td>
-          <td>Designer</td>
-          <td>London</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Jonas Reuter</td>
-          <td>Manager</td>
-          <td>Berlin</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
   <div class="mw-card mw-card-simple mw-mb-6">
     <h4 class="mw-mb-2">Subtle Header &amp; Sticky Header</h4>
     <p class="mw-text-muted">

package/src/scss/abstracts/_mixins.scss

@@ -391,6 +391,8 @@ $_corner-opaque: 55%;
 
   @if $corners == 'bottom' {
     mask-image: $bottom;
+  } @else if $corners == 'top' {
+    mask-image: $top;
   } @else {
     mask-image: $top, $bottom;
   }

package/src/scss/abstracts/_variables.scss

@@ -47,6 +47,9 @@ $info-color: #0780ca !default;
 // take --mw-accent-text-color: tooltip, mw-btn-mini, mw-info-mini, gallery arrows
 $fixed-surface-text: #efefef !default;
 
+// Near-black behind a photo in both themes: it is judged against black
+$fixed-stage: #0b0d12 !default;
+
 // Darkening in both themes: the label on a solid surface is $accent-text-color,
 // and lightening the surface is what breaks it
 $hover-shift: 15% !default;
@@ -520,7 +523,13 @@ $z-index: (
   'lift': 3,
   'card': 10,
   'menu': 30,
+  // The scrim sits under the bar, the panel hangs off it, the logo clears the
+  // panel and the burger stays on top of all of them while it is the X.
+  'header-scrim': 99,
   'header': 100,
+  'header-panel': 103,
+  'header-logo': 105,
+  'header-burger': 110,
   'spinner': 300,
   'modal': 500,
   'tooltip': 700,

package/src/scss/components/_avatars.scss

@@ -25,6 +25,21 @@
       transition: transform var(--mw-duration-slow) var(--mw-ease-out);
     }
 
+    // Inside the frame, as on a card: the clip lets nothing paint over the border
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      border: 2px solid var(--mw-corner-accent);
+      border-radius: inherit;
+      mask-image: radial-gradient(
+        ellipse 75% 50% at 100% 0,
+        #000 55%,
+        transparent 100%
+      );
+    }
+
     // `:has(img)` keeps the sweep off the initials variant, where it would just
     // flash a white bar across the letters
     &:has(img)::after {
@@ -82,8 +97,23 @@
       font-size: font-size('6xl');
     }
 
+    // Above -square, so that one still sharpens them
+    &-landscape,
+    &-portrait {
+      border-radius: radius('xl');
+
+      // The card's arc, same radius - 5px stands in for the 4-6px frame of lg/xl
+      &::before {
+        @include corner-accent(5px, 'top');
+      }
+    }
+
     &-square {
       border-radius: radius('sm');
+
+      &::before {
+        border-radius: max(0px, calc(#{radius('sm')} - 3px));
+      }
     }
 
     // Initials - for users without a picture. Centers its text content and puts
@@ -176,6 +206,28 @@
         border-width: 6px;
       }
     }
+
+    // Below the size steps on purpose - they set both axes, the ratio frees one
+    &-landscape {
+      width: auto;
+      aspect-ratio: 3 / 2;
+    }
+
+    &-portrait {
+      height: auto;
+      aspect-ratio: 9 / 16;
+    }
+
+    // 9:16 this small reads as a sliver - wider at the same height instead
+    &-lg.mw-avatar-portrait {
+      width: auto;
+      height: calc(120px * 16 / 9);
+      aspect-ratio: 2 / 3;
+
+      @include media-up('sm') {
+        height: calc(144px * 16 / 9);
+      }
+    }
   }
 
   @each $name, $col in $semantic-colors {

package/src/scss/components/_cards.scss

@@ -72,8 +72,9 @@
 
     // The arc on the two round corners is the one mark that makes a card look
     // like this framework and not like a rounded box, so it is what the hover
-    // pulls on. Recoloured through the token the mixin already reads, which is
-    // why the rule sits on the card and not on its ::after.
+    // pulls on. Recoloured through the token the mixin already reads - on the
+    // ::after alone, because set on the card it inherits into every arc inside
+    // it, an avatar's or a nested card's.
     &::after {
       transition: var(--mw-transition);
     }
@@ -81,7 +82,10 @@
     &:hover {
       box-shadow: var(--mw-elevation-3);
       border-color: var(--mw-border-accent);
-      --mw-corner-accent: var(--mw-corner-accent-hover);
+
+      &::after {
+        --mw-corner-accent: var(--mw-corner-accent-hover);
+      }
     }
 
     // Pointer-guarded, unlike the colour and shadow above: on touch `:hover`

package/src/scss/components/_feed.scss

@@ -0,0 +1,203 @@
+@use '../abstracts' as *;
+@use 'overlay-btn';
+
+@layer mw.components {
+  // A strip of the next row stays in view, so the box reads as scrollable
+  $peek: 0.3;
+  $gap: 2px;
+  $rows: (
+    '': 3,
+    '.mw-feed-rows-2': 2,
+  );
+
+  .mw-feed {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    // The ratio further down sizes the grid; the frame goes around it
+    box-sizing: content-box;
+    padding: spacing('3');
+    border: 1px solid var(--mw-border-accent);
+    border-radius: radius('lg');
+    background: var(--mw-card-background);
+    gap: $gap;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    scroll-padding-top: spacing('3');
+    @include scrollbar;
+
+    @include media-up('md') {
+      padding: spacing('4');
+      scroll-padding-top: spacing('4');
+    }
+  }
+
+  .mw-feed-plain {
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('none');
+    background: none;
+    scroll-padding-top: 0;
+  }
+
+  // Once posts overflow: box height from its width, rows splitting it exactly
+  @each $rows-modifier, $count in $rows {
+    $more: ':has(> :nth-child(#{$count * 3 + 1}))';
+
+    .mw-feed#{$rows-modifier}#{$more} {
+      aspect-ratio: #{9} / #{4 * ($count + $peek)};
+      grid-auto-rows: calc((100% - #{$count} * #{$gap}) / #{$count + $peek});
+    }
+
+    .mw-feed#{$rows-modifier}.mw-feed-square#{$more} {
+      aspect-ratio: #{3} / #{$count + $peek};
+    }
+  }
+
+  .mw-feed-item {
+    position: relative;
+    margin: spacing('0');
+    // Sizes free rows only; stretched both ways, so box-sized rows win
+    aspect-ratio: 3 / 4;
+    place-self: stretch;
+    overflow: hidden;
+    scroll-snap-align: start;
+    background: var(--mw-card-background);
+
+    // A link to a page of its own, or a button that opens the photo in place
+    > a,
+    > button {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 100%;
+      padding: spacing('0');
+      border: none;
+      background: none;
+      cursor: pointer;
+      @include tappable;
+      @include focus-ring-inset(-3px);
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: rgb(0 0 0 / 0%);
+        transition: background-color var(--mw-duration-fast) var(--mw-ease-out);
+      }
+
+      &:hover::after {
+        background: rgb(0 0 0 / 18%);
+      }
+
+      &:active::after {
+        background: rgb(0 0 0 / 30%);
+        transition-duration: var(--mw-duration-instant);
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .mw-feed-square .mw-feed-item {
+    aspect-ratio: 1;
+  }
+
+  .mw-feed-post {
+    // Not only the UA rule, or a browser without popovers shows it in the grid
+    display: none;
+    width: min(32rem, 100vw - 2rem);
+    max-height: calc(100dvh - 2rem);
+    margin: auto;
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('md');
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    background: var(--mw-card-background);
+    color: var(--mw-text-color);
+    box-shadow: var(--mw-elevation-5);
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity var(--mw-duration-base) var(--mw-ease-out),
+      transform var(--mw-duration-base) var(--mw-ease-out),
+      overlay var(--mw-duration-base) allow-discrete,
+      display var(--mw-duration-base) allow-discrete;
+
+    &:popover-open {
+      display: block;
+      opacity: 1;
+      transform: none;
+
+      @starting-style {
+        opacity: 0;
+        transform: scale(0.96);
+      }
+    }
+
+    &::backdrop {
+      background: var(--mw-overlay-background);
+      backdrop-filter: blur(3px);
+      opacity: 0;
+      transition:
+        opacity var(--mw-duration-base) var(--mw-ease-out),
+        overlay var(--mw-duration-base) allow-discrete,
+        display var(--mw-duration-base) allow-discrete;
+    }
+
+    &:popover-open::backdrop {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    > img {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-height: 78dvh;
+      object-fit: contain;
+      background: $fixed-stage;
+    }
+
+    > figcaption {
+      padding: spacing('4') spacing('5') spacing('5');
+      font-size: font-size('sm');
+      line-height: 1.55;
+
+      > * {
+        margin: spacing('0');
+      }
+
+      > * + * {
+        margin-top: spacing('2');
+      }
+
+      time,
+      small {
+        display: block;
+        color: var(--mw-text-muted-color);
+        font-size: font-size('xs');
+      }
+    }
+  }
+
+  .mw-feed-post-close {
+    position: absolute;
+    top: spacing('3');
+    right: spacing('3');
+  }
+
+  // A popover does not lock the page scroll behind it
+  :root:has(.mw-feed-post:popover-open) {
+    overflow: hidden;
+    scrollbar-gutter: stable; // Or the page shifts by the hidden scrollbar
+  }
+}

package/src/scss/components/_hero-badge.scss

@@ -0,0 +1,48 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Glass rather than a fill: on a hero image a solid badge is the loudest thing
+  // on the screen and plain text sinks into the picture.
+  .mw-hero-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing('3');
+    max-width: 100%;
+    margin-bottom: spacing('6');
+    padding: spacing('2') spacing('5');
+    border: 1px solid #{fade('hero-text-color', 22%)};
+    border-radius: 999px;
+    // A vertical ramp and not a flat tint: glass is lit from above, and the
+    // gradient is what gives the pill a thickness instead of a fogged panel
+    background: linear-gradient(
+      to bottom,
+      #{fade('hero-text-color', 16%)},
+      #{fade('hero-text-color', 5%)}
+    );
+    // saturate() is what separates glass from frosted plastic: the blur alone
+    // greys out what shows through, and pushing the chroma back up is how a
+    // real lens reads. The two inset lines are the specular highlight - light
+    // catching the top edge, a fainter bounce off the bottom - and the outer
+    // shadow is what lifts the pill off the photo instead of pasting it on.
+    backdrop-filter: blur(14px) saturate(180%);
+    box-shadow:
+      inset 0 1px 0 #{fade('hero-text-color', 40%)},
+      inset 0 -1px 0 #{fade('hero-text-color', 12%)},
+      0 2px 12px rgb(0 0 0 / 18%);
+    color: fade('hero-text-color', 88%);
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    letter-spacing: 0.02em;
+  }
+
+  // Carries the secondary colour, because the badge is a state, not a label -
+  // override `background` for a different one
+  .mw-hero-badge-dot {
+    width: 8px;
+    height: 8px;
+    flex-shrink: 0;
+    border-radius: radius('full');
+    background: var(--mw-secondary-color);
+  }
+}

package/src/scss/components/_index.scss

@@ -17,21 +17,27 @@
 @forward 'divider';
 @forward 'dropdown';
 @forward 'empty-state';
+@forward 'feed';
 @forward 'flag';
 @forward 'gallery';
+@forward 'hero-badge';
 @forward 'info';
 @forward 'kanban';
 @forward 'kbd';
 @forward 'lang-switch';
 @forward 'leader-row';
+@forward 'lightbox';
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';
 @forward 'media';
 @forward 'meta-info';
 @forward 'modals';
+@forward 'mosaic';
+@forward 'overlay-btn';
 @forward 'pagination';
 @forward 'panels';
+@forward 'portrait-gallery';
 @forward 'pricing';
 @forward 'progress';
 @forward 'prose';
@@ -40,6 +46,7 @@
 @forward 'skeleton';
 @forward 'spinners';
 @forward 'stepper';
+@forward 'stories';
 @forward 'tables';
 @forward 'tabs';
 @forward 'tags';
@@ -49,3 +56,4 @@
 @forward 'tiles';
 @forward 'timelines';
 @forward 'toasts';
+@forward 'tooltip';