maverick-wave 5.30.0 → 5.31.0

package/src/partials/parallax-container.html

@@ -1,147 +0,0 @@
-<h3 class="mw-section-subtitle">Parallax</h3>
-<p class="mw-text-muted mw-text-measure">
-  Two ways to play a picture against the scroll, both on the browser's scroll
-  timeline - no listener, and no
-  <code>background-attachment: fixed</code>, which iOS ignores. The image lives
-  in its own <code>mw-parallax-media</code> layer, as an
-  <code>&lt;img&gt;</code> or as a div with a background image. Where scroll
-  timelines are missing, or with <code>prefers-reduced-motion</code>, the
-  picture stands still and nothing else changes.
-</p>
-
-<h4 class="mw-text-medium mw-mb-2">
-  Drift - <code>mw-parallax</code>, the picture moves slower than the page
-</h4>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
-  How far it travels is <code>--mw-parallax-depth</code> (<code>10vh</code> by
-  default); the layer overhangs the block by exactly that much, so no edge is
-  ever uncovered. <code>mw-parallax-dimmed</code> turns the picture down and the
-  text light.
-</p>
-
-<div class="mw-grid-1 mw-gap-6 mw-mb-6">
-  <div class="mw-parallax mw-parallax-dimmed">
-    <img
-      class="mw-parallax-media"
-      src="images/slider-field.svg"
-      alt=""
-      loading="lazy"
-    />
-    <div class="mw-parallax-content mw-text-center">
-      <h3>Scroll past me</h3>
-      <p class="mw-mb-0">The field moves slower than the page does.</p>
-    </div>
-  </div>
-
-  <div class="mw-parallax" style="--mw-parallax-depth: 20vh">
-    <img
-      class="mw-parallax-media"
-      src="images/gallery-mountain.svg"
-      alt="Mountain range"
-      loading="lazy"
-    />
-  </div>
-</div>
-
-<h4 class="mw-text-medium mw-mb-2">
-  Reveal - <code>mw-parallax-sticky</code>, the picture stays and the page rides
-  over it
-</h4>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
-  The home section of this page does it: the block pins itself to the top of the
-  screen and everything after it slides up over the picture. It goes on whatever
-  element the page content is a <strong>sibling</strong> of - the section around
-  a hero, not the hero itself - because that is what sticky and the sibling
-  selector need. Everything after it gets the page background and a layer above,
-  or the pinned picture shows through. The section right after it also gets an
-  upward shadow, so it reads as sliding over the picture rather than cutting it
-  off. That one carries fixed values instead of the elevation ramp: it lands on
-  the picture, not on a theme surface, and the light theme's shadows are cut for
-  paper and vanish there. Pair it with <code>mw-header-reveal</code> on the
-  header and the page opens on the picture alone: the bar stays away for the
-  first 130px of scroll and has ridden in by 420px. A control marked
-  <code>mw-header-keep</code> sits that ride out - it travels the bar's distance
-  the other way and waits at the position it will hold once the bar is there, so
-  a login button is on the picture from the first frame and nothing jumps at the
-  end. On a narrow screen it is how the burger reaches the reader before the bar
-  exists. While it floats it carries a ring and a soft shadow so a dark control
-  still reads on a dark picture, and focus leaves the bar alone - it is on
-  screen already, so a click on the theme toggle no longer hauls the header in.
-</p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
-  Add <code>mw-parallax-rise</code> next to it and the picture lifts by
-  <code>12vh</code> while the text stays where it is - a pinned block does not
-  travel through the viewport, so that layer runs on the document's own scroll
-  instead, over the first screen of it. That makes it a hero move: further down
-  the page those pixels are long gone and the picture holds still.
-  <code>--mw-parallax-depth</code> is the dial, here as everywhere. Several
-  pinned blocks on one page are fine, each takes over from the one before.
-</p>
-
-<h4 class="mw-text-medium mw-mb-2">
-  Slow - <code>mw-parallax-slow</code>, the block travels behind the page
-</h4>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
-  The band before the components section on this page: it keeps its place in the
-  flow and moves at a fifth of your scrolling, so picture and text are still
-  going while the next section closes in from below. Pinning is the same move
-  with the tempo at zero.
-  <code>--mw-parallax-slow-travel</code> (<code>45vh</code>) is the dial and
-  reads against the block's own height - half the height is half speed, the full
-  height stands still. Going past it sends the block backwards. The dial belongs
-  on the element carrying the class, the height on the
-  <code>mw-parallax</code> block inside it: set on the inner block it never
-  reaches the animation and the tempo stays at the default.
-</p>
-
-<h4 class="mw-text-medium mw-mb-2">
-  Pattern - <code>mw-parallax-pattern</code>, a second layer that makes the
-  movement visible
-</h4>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
-  The travel is vertical, so only an edge across it - a rule, a grid, a hatch -
-  ever shows it. A gradient has none and slides without looking like it moves.
-  Add a second <code>mw-parallax-media</code> carrying
-  <code>mw-parallax-pattern</code>: it travels a third of the distance, and it
-  is the difference between the two layers that reads as depth. In a hero the
-  pattern comes from <code>$mw-hero-pattern</code>, the way the picture comes
-  from <code>$mw-hero-image</code>; anywhere else set
-  <code>--mw-parallax-pattern-image</code> on it.
-</p>
-
-<div class="mw-parallax mw-parallax-dimmed mw-mb-6">
-  <div class="mw-parallax-media parallax-demo-ground"></div>
-  <div class="mw-parallax-media mw-parallax-pattern parallax-demo-lines"></div>
-  <div class="mw-parallax-content mw-text-center">
-    <h3>The grid drifts, the gradient holds</h3>
-    <p class="mw-mb-0">
-      Both layers move. Only the one with edges tells you so.
-    </p>
-  </div>
-</div>
-
-<div class="mw-code-block">
-  <div class="mw-code-block-header">
-    <span class="mw-code-block-filename">index.html</span>
-    <span class="mw-code-block-language">HTML</span>
-  </div>
-  <div class="mw-code-container">
-    <pre><code>&lt;header class="mw-header mw-header-reveal"&gt;
-  ...
-  &lt;button class="mw-login-btn mw-header-keep"&gt;...&lt;/button&gt;
-  &lt;button class="mw-menu-btn mw-header-keep"&gt;...&lt;/button&gt;
-&lt;/header&gt;
-
-&lt;main class="mw-main"&gt;
-  &lt;section class="mw-section mw-parallax-sticky mw-parallax-rise"&gt;
-    &lt;div class="mw-container mw-parallax"&gt;
-      &lt;div class="mw-parallax-media"&gt;&lt;/div&gt;
-      &lt;div class="mw-parallax-media mw-parallax-pattern"&gt;&lt;/div&gt;
-      &lt;div class="mw-hero"&gt;...&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/section&gt;
-
-  &lt;section class="mw-section"&gt;...&lt;/section&gt;
-&lt;/main&gt;</code></pre>
-  </div>
-</div>

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

@@ -1,175 +0,0 @@
-<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>

package/src/partials/preview-container.html

@@ -1,136 +0,0 @@
-<!--
-  Showcase only: a page-shaped preview for the variant switches. The sections
-  above show one component at a time, which is the wrong lens for a switch that
-  retunes everything at once - here the parts sit next to each other the way
-  they would on a real page, and a change reads as a change of look. One column,
-  because the panel is fixed over the right half while any of this is in use.
--->
-<div class="preview-page">
-  <div class="preview-head">
-    <div>
-      <h3 class="preview-title">Quarterly report</h3>
-      <p class="preview-lede">
-        Numbers for Q3 are in. The
-        <a href="#preview" class="mw-link">full breakdown</a> sits in the sheet,
-        the short version is below.
-      </p>
-    </div>
-    <span class="mw-badge mw-badge-info">Draft</span>
-  </div>
-
-  <div class="mw-alert mw-alert-info mw-mb-5">
-    <div class="mw-alert-icon">
-      <i class="fas fa-circle-info"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Two figures are still provisional</span>
-      <p>Finance signs off on Friday, the rest is final.</p>
-    </div>
-  </div>
-
-  <div class="mw-grid-3 mw-gap-4 mw-mb-5">
-    <div class="mw-card">
-      <div class="mw-card-badge mw-card-addon-success">Best</div>
-      <div class="mw-card-body">
-        <h4 class="mw-card-title">
-          <span class="mw-card-title-icon">
-            <i class="fas fa-arrow-trend-up"></i>
-          </span>
-          Revenue
-        </h4>
-        <hr class="mw-card-title-divider" />
-        <p class="mw-card-subtitle">EUR 4.2m, up 12 percent</p>
-        <p class="mw-card-text">
-          Carried by the two enterprise deals that closed in September.
-        </p>
-        <div class="mw-card-footer">
-          <span class="mw-text-muted mw-text-xs">Updated today</span>
-          <button type="button" class="mw-btn mw-btn-link">Details</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="mw-card">
-      <div class="mw-card-body">
-        <h4 class="mw-card-title">
-          <span class="mw-card-title-icon">
-            <i class="fas fa-user-minus"></i>
-          </span>
-          Churn
-        </h4>
-        <hr class="mw-card-title-divider" />
-        <p class="mw-card-subtitle">1.8 percent, flat</p>
-        <p class="mw-card-text">
-          Both accounts that left cited the same missing integration.
-        </p>
-        <div class="mw-card-footer">
-          <span class="mw-text-muted mw-text-xs">Updated today</span>
-          <button type="button" class="mw-btn mw-btn-link">Details</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="mw-card">
-      <div class="mw-card-body">
-        <h4 class="mw-card-title">
-          <span class="mw-card-title-icon">
-            <i class="fas fa-users"></i>
-          </span>
-          Headcount
-        </h4>
-        <hr class="mw-card-title-divider" />
-        <p class="mw-card-subtitle">41 people, four hires</p>
-        <p class="mw-card-text">
-          Two of them on the platform team. One open role left this quarter.
-        </p>
-        <div class="mw-card-footer">
-          <span class="mw-text-muted mw-text-xs">Updated today</span>
-          <button type="button" class="mw-btn mw-btn-link">Details</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="preview-row mw-mb-5">
-    <input
-      type="text"
-      class="mw-input"
-      placeholder="Add a note"
-      aria-label="Add a note"
-    />
-    <select class="mw-select" aria-label="Reviewer">
-      <option>Send to finance</option>
-      <option>Send to the board</option>
-      <option>Keep to myself</option>
-    </select>
-    <label class="mw-toggle">
-      <input type="checkbox" checked />
-      <div class="mw-toggle-track"></div>
-      <span class="mw-toggle-label">Notify the team</span>
-    </label>
-  </div>
-
-  <div class="preview-actions mw-mb-5">
-    <button type="button" class="mw-btn mw-btn-primary">Publish</button>
-    <button type="button" class="mw-btn mw-btn-secondary">Save draft</button>
-    <button type="button" class="mw-btn mw-btn-outline">Discard</button>
-    <button type="button" class="mw-btn mw-btn-ghost">Cancel</button>
-  </div>
-
-  <div class="preview-status">
-    <span class="mw-spinner-border mw-spinner-sm"></span>
-    <span>
-      <strong>Syncing with the finance sheet</strong>
-      <small>The two provisional figures update when it finishes.</small>
-    </span>
-  </div>
-
-  <div class="mw-tags">
-    <span class="mw-tags-item">
-      <i class="fas fa-tag mw-tags-icon"></i>
-      Q3
-    </span>
-    <span class="mw-tags-item">finance</span>
-    <span class="mw-tags-item">internal</span>
-  </div>
-</div>