maverick-wave 5.28.0 → 5.30.0

package/src/partials/mosaic-container.html

@@ -0,0 +1,173 @@
+<h3 class="mw-section-subtitle">Mosaic</h3>
+<p class="mw-text-muted mw-text-measure">
+  Photos of any shape in one grid. The script reads each photo's proportions
+  from its <code>width</code> and <code>height</code> and gives it a tile to
+  match - wide for landscape, tall for portrait, square for the rest - and the
+  smaller tiles fill the holes. The tile crops, the lightbox does not: a tap
+  opens the photo whole with its caption, and a swipe moves on to the next one.
+  <code>mw-mosaic-gap-sm</code> and <code>mw-mosaic-gap-lg</code> change the
+  gaps.
+</p>
+
+<div class="mw-segmented mw-mb-5" data-modifier-demo="mosaic-demo">
+  <button
+    type="button"
+    class="mw-segmented-item"
+    data-modifier="mw-mosaic-gap-sm"
+  >
+    Gap sm
+  </button>
+  <button type="button" class="mw-segmented-item mw-active" data-modifier="">
+    Default
+  </button>
+  <button
+    type="button"
+    class="mw-segmented-item"
+    data-modifier="mw-mosaic-gap-lg"
+  >
+    Gap lg
+  </button>
+</div>
+
+<div class="mw-mosaic" id="mosaic-demo">
+  <figure class="mw-mosaic-item mw-mosaic-big">
+    <a href="images/gallery-mountain.svg">
+      <img
+        src="images/gallery-mountain.svg"
+        alt="Mountain range at sunrise"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+    </a>
+    <figcaption>
+      First light on the ridge. <code>mw-mosaic-big</code> makes a photo the
+      centrepiece.
+    </figcaption>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-peak.svg">
+      <img
+        src="images/photo-peak.svg"
+        alt="Snowy mountain peak under a starry sky"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+    <figcaption>Summit night, 3,000 metres up.</figcaption>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-balloon.svg">
+      <img
+        src="images/photo-balloon.svg"
+        alt="Hot air balloon in a morning sky"
+        width="800"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-palm.svg">
+      <img
+        src="images/photo-palm.svg"
+        alt="Palm tree against a sunset over the sea"
+        width="800"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+    <figcaption>The last evening on the island.</figcaption>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/gallery-lake.svg">
+      <img
+        src="images/gallery-lake.svg"
+        alt="Peaceful lake"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-tower.svg">
+      <img
+        src="images/photo-tower.svg"
+        alt="Television tower above the city at night"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-waterfall.svg">
+      <img
+        src="images/photo-waterfall.svg"
+        alt="Waterfall between mossy cliffs"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+    <figcaption>Two hours up the gorge, and worth every step of it.</figcaption>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/gallery-city.svg">
+      <img
+        src="images/gallery-city.svg"
+        alt="City skyline at night"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/photo-lighthouse.svg">
+      <img
+        src="images/photo-lighthouse.svg"
+        alt="Lighthouse on a cliff at dusk"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/story-aurora.svg">
+      <img
+        src="images/story-aurora.svg"
+        alt="Northern lights over a snowy forest"
+        width="720"
+        height="1280"
+        loading="lazy"
+      />
+    </a>
+    <figcaption>Minus eighteen degrees. Nobody minded.</figcaption>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/gallery-desert.svg">
+      <img
+        src="images/gallery-desert.svg"
+        alt="Desert dunes"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+  <figure class="mw-mosaic-item">
+    <a href="images/gallery-snow.svg">
+      <img
+        src="images/gallery-snow.svg"
+        alt="Snowy hills"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+    </a>
+  </figure>
+</div>

package/src/partials/panels-container.html

@@ -1,175 +1,126 @@
 <h3 class="mw-section-subtitle">Panels</h3>
 <p class="mw-text-muted mw-text-measure">
   A card whose header and footer are part of the frame rather than the content.
-  The body scrolls on its own, which is what the max-height variants are for.
+  <code>mw-panel-primary</code> and <code>mw-panel-secondary</code> fill the
+  header. The body scrolls on its own, which is what the max-height variants are
+  for: <code>mw-panel-max-height-sm</code>, <code>-md</code> and
+  <code>-lg</code> cap the panel at 300, 500 and 700px.
+  <code>mw-panel-scrollable</code> is the older name for md.
 </p>
 
-<div class="mw-grid-1 mw-mb-6">
-  <div class="mw-panel">
-    <h4 class="mw-panel-header">Default Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This is a default panel with header, body, and footer sections. Panels
-        are useful for grouping related content.
-      </p>
+<div class="mw-grid-2-lg mw-mb-6">
+  <div>
+    <div class="mw-segmented mw-mb-4" data-modifier-demo="panel-color-demo">
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier=""
+      >
+        Default
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-panel-primary"
+      >
+        Primary
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-panel-secondary"
+      >
+        Secondary
+      </button>
     </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-      <button type="button" class="mw-btn mw-btn-primary">Save</button>
-    </div>
-  </div>
-</div>
-
-<div class="mw-grid-3-lg">
-  <div class="mw-panel mw-panel-primary">
-    <h4 class="mw-panel-header">Primary Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This is a primary panel with a colored header. You can use different
-        panel variants to indicate different types of content.
-      </p>
-    </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-      <button type="button" class="mw-btn mw-btn-primary">Save</button>
-    </div>
-  </div>
-
-  <div class="mw-panel mw-panel-secondary">
-    <h4 class="mw-panel-header">Secondary Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This is a secondary panel with a colored header. Panels can contain any
-        type of content, including forms, tables, or other components.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-panel mw-panel-scrollable">
-    <h4 class="mw-panel-header">Scrollable Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This panel has a fixed maximum height of 500px and will scroll when
-        content exceeds this height. Scrollable panels are ideal for displaying
-        large amounts of content in a constrained space.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
-        mauris.
-      </p>
-      <p>
-        Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
-        tellus.
-      </p>
-      <p>
-        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae.
-      </p>
-      <p>
-        Pellentesque habitant morbi tristique senectus et netus et malesuada
-        fames ac turpis egestas.
-      </p>
-      <p>
-        Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et
-        malesuada fames ac ante ipsum primis in faucibus.
-      </p>
-      <p>
-        Mauris egestas elit vel nunc maximus, in aliquam magna vehicula. Cras
-        vitae sapien a erat facilisis faucibus.
-      </p>
-      <p>
-        Donec dignissim, odio ac imperdiet luctus, elit lorem eleifend massa,
-        sed efficitur turpis velit vel odio.
-      </p>
-      <p>
-        Suspendisse potenti. Nullam gravida fermentum turpis eu ultrices.
-        Curabitur imperdiet imperdiet lacus.
-      </p>
-      <p>
-        Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum
-        primis in faucibus.
-      </p>
-    </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-      <button type="button" class="mw-btn mw-btn-primary">Save</button>
-    </div>
-  </div>
-</div>
-
-<div class="mw-grid-2 mw-my-6">
-  <div class="mw-panel mw-panel-primary mw-panel-max-height-md">
-    <h4 class="mw-panel-header">Medium Height Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This panel uses the medium height variant (500px) and will scroll when
-        content exceeds this height.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
-        mauris.
-      </p>
-      <p>
-        Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
-        tellus.
-      </p>
-      <p>
-        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae.
-      </p>
-      <p>
-        Pellentesque habitant morbi tristique senectus et netus et malesuada
-        fames ac turpis egestas.
-      </p>
-      <p>
-        Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et
-        malesuada fames ac ante ipsum primis in faucibus.
-      </p>
-      <p>
-        Mauris egestas elit vel nunc maximus, in aliquam magna vehicula. Cras
-        vitae sapien a erat facilisis faucibus.
-      </p>
-      <p>
-        Donec dignissim, odio ac imperdiet luctus, elit lorem eleifend massa,
-        sed efficitur turpis velit vel odio.
-      </p>
-    </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-primary">OK</button>
+    <div class="mw-panel" id="panel-color-demo">
+      <h4 class="mw-panel-header">Panel</h4>
+      <div class="mw-panel-body">
+        <p>
+          This is a panel with header, body, and footer sections. Panels are
+          useful for grouping related content, including forms, tables, or other
+          components.
+        </p>
+      </div>
+      <div class="mw-panel-footer">
+        <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+        <button type="button" class="mw-btn mw-btn-primary">Save</button>
+      </div>
     </div>
   </div>
 
-  <div class="mw-panel mw-panel-secondary mw-panel-max-height-sm">
-    <h4 class="mw-panel-header">Small Height Panel</h4>
-    <div class="mw-panel-body">
-      <p>
-        This panel uses the small height variant (300px) and will scroll when
-        content exceeds this height. Ideal for compact UI elements.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
-        mauris.
-      </p>
-      <p>
-        Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
-        tellus.
-      </p>
-      <p>
-        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-        cubilia Curae.
-      </p>
-      <p>
-        Pellentesque habitant morbi tristique senectus et netus et malesuada
-        fames ac turpis egestas.
-      </p>
-      <p>
-        Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et
-        malesuada fames ac ante ipsum primis in faucibus.
-      </p>
+  <div>
+    <div class="mw-segmented mw-mb-4" data-modifier-demo="panel-height-demo">
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-panel-max-height-sm"
+      >
+        300px
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item mw-active"
+        data-modifier="mw-panel-max-height-md"
+      >
+        500px
+      </button>
+      <button
+        type="button"
+        class="mw-segmented-item"
+        data-modifier="mw-panel-max-height-lg"
+      >
+        700px
+      </button>
     </div>
-    <div class="mw-panel-footer">
-      <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
-      <button type="button" class="mw-btn mw-btn-secondary">Submit</button>
+    <div class="mw-panel mw-panel-max-height-md" id="panel-height-demo">
+      <h4 class="mw-panel-header">Scrollable Panel</h4>
+      <div class="mw-panel-body">
+        <p>
+          The body scrolls once the content outgrows the cap. Header and footer
+          stay where they are.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
+          mauris.
+        </p>
+        <p>
+          Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
+          tellus.
+        </p>
+        <p>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia Curae.
+        </p>
+        <p>
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas.
+        </p>
+        <p>
+          Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et
+          malesuada fames ac ante ipsum primis in faucibus.
+        </p>
+        <p>
+          Mauris egestas elit vel nunc maximus, in aliquam magna vehicula. Cras
+          vitae sapien a erat facilisis faucibus.
+        </p>
+        <p>
+          Donec dignissim, odio ac imperdiet luctus, elit lorem eleifend massa,
+          sed efficitur turpis velit vel odio.
+        </p>
+        <p>
+          Suspendisse potenti. Nullam gravida fermentum turpis eu ultrices.
+          Curabitur imperdiet imperdiet lacus.
+        </p>
+        <p>
+          Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum
+          primis in faucibus.
+        </p>
+      </div>
+      <div class="mw-panel-footer">
+        <button type="button" class="mw-btn mw-btn-outline">Cancel</button>
+        <button type="button" class="mw-btn mw-btn-primary">Save</button>
+      </div>
     </div>
   </div>
 </div>

package/src/partials/portrait-gallery-container.html

@@ -0,0 +1,175 @@
+<h3 class="mw-section-subtitle">Portrait Gallery</h3>
+<p class="mw-text-muted mw-text-measure">
+  Upright photos in a strip the browser scrolls itself: a swipe on a phone,
+  arrows under a mouse, and the next photo always peeks in at the edge. One
+  slide on a phone, two and a half on a tablet, three on a desktop. A photo in
+  the other orientation - the lake below - is not cropped to a sliver but shown
+  whole, over a blurred copy of itself.
+  <code>mw-portrait-gallery-gap-sm</code> and
+  <code>mw-portrait-gallery-gap-lg</code> change the gaps.
+</p>
+
+<div class="mw-segmented mw-mb-5" data-modifier-demo="portrait-demo">
+  <button
+    type="button"
+    class="mw-segmented-item"
+    data-modifier="mw-portrait-gallery-gap-sm"
+  >
+    Gap sm
+  </button>
+  <button type="button" class="mw-segmented-item mw-active" data-modifier="">
+    Default
+  </button>
+  <button
+    type="button"
+    class="mw-segmented-item"
+    data-modifier="mw-portrait-gallery-gap-lg"
+  >
+    Gap lg
+  </button>
+</div>
+
+<div class="mw-portrait-gallery mw-mb-8" id="portrait-demo">
+  <div
+    class="mw-portrait-gallery-track"
+    tabindex="0"
+    aria-label="Portrait photos"
+  >
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-lighthouse.svg"
+        alt="Lighthouse on a cliff at dusk"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+      <figcaption>
+        <strong>North Cape</strong>
+        The lamp comes on just after the sun goes.
+      </figcaption>
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-peak.svg"
+        alt="Snowy mountain peak under a starry sky"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+      <figcaption>
+        <strong>Summit night</strong>
+        3,000 metres and one thermos of tea.
+      </figcaption>
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/gallery-lake.svg"
+        alt="Peaceful lake"
+        width="800"
+        height="450"
+        loading="lazy"
+      />
+      <figcaption>
+        <strong>Landscape, not cropped</strong>
+        Shown whole over a blurred copy of itself.
+      </figcaption>
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-forest-path.svg"
+        alt="Path through a sunlit forest"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-tower.svg"
+        alt="Television tower above the city at night"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+      <figcaption>
+        <strong>Blue hour</strong>
+        The tower, the moon and not a single cloud.
+      </figcaption>
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-waterfall.svg"
+        alt="Waterfall between mossy cliffs"
+        width="600"
+        height="800"
+        loading="lazy"
+      />
+    </figure>
+  </div>
+</div>
+
+<h4 class="mw-text-medium mw-mb-2">Story shape</h4>
+<p class="mw-text-muted mw-text-measure">
+  <code>mw-portrait-gallery-tall</code> turns the slides into 9:16, the shape of
+  a phone screen - for stories, reels and screenshots. A video works like a
+  photo; the square balloon gets the same blurred frame the lake did.
+</p>
+
+<div class="mw-portrait-gallery mw-portrait-gallery-tall">
+  <div
+    class="mw-portrait-gallery-track"
+    tabindex="0"
+    aria-label="Story-shaped photos"
+  >
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/story-beach.svg"
+        alt="Beach at sunset with waves running up the sand"
+        width="720"
+        height="1280"
+        loading="lazy"
+      />
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <video
+        src="media/story-sunrise.mp4"
+        poster="media/story-sunrise.jpg"
+        autoplay
+        muted
+        loop
+        playsinline
+      ></video>
+      <figcaption>
+        <strong>Sunrise</strong>
+        A muted, looping video.
+      </figcaption>
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/story-aurora.svg"
+        alt="Northern lights over a snowy forest"
+        width="720"
+        height="1280"
+        loading="lazy"
+      />
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/photo-balloon.svg"
+        alt="Hot air balloon in a morning sky"
+        width="800"
+        height="800"
+        loading="lazy"
+      />
+    </figure>
+    <figure class="mw-portrait-gallery-slide">
+      <img
+        src="images/story-stars.svg"
+        alt="Tent glowing under the milky way"
+        width="720"
+        height="1280"
+        loading="lazy"
+      />
+    </figure>
+  </div>
+</div>