maverick-wave 4.21.0 → 4.23.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.21.0",
+  "version": "4.23.0",
   "config": {
-    "version_short": "4.21"
+    "version_short": "4.23"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",
@@ -15,7 +15,7 @@
     "start": "gulp",
     "build": "gulp clean && gulp build",
     "verify": "node scripts/verify.js",
-    "release": "gulp release"
+    "prepack": "gulp release"
   },
   "repository": {
     "type": "git",

package/release.sh

@@ -5,7 +5,7 @@ VERSION=$(npm pkg get version --workspaces=false | tr -d \")
 echo "## checkout release branch and grab changes from main"
 git checkout release && git merge main --no-commit
 echo "## make a new release"
-npm run build && npm run release
+npm run build && npm run prepack
 echo "## add all changes and push it"
 git add --all
 git commit -m "release: ${VERSION}"

package/scripts/verify.js

@@ -6,6 +6,7 @@
  *   1. every var(--mw-*) has a definition
  *   2. every --mw-* definition is used somewhere
  *   3. every mw-* class in the markup exists in the built CSS
+ *   4. the committed root release files exist and are not empty
  *
  * Sources are scanned rather than hard-coded so a new partial is covered
  * automatically. Exits 1 on any error; warnings never fail the build.
@@ -118,6 +119,20 @@ for (const [c, where] of [...classesInMarkup].sort()) {
   errors.push(`class used in ${where} but not generated by the CSS: .${c}`);
 }
 
+// --- 4: root release files -------------------------------------------------
+// These are committed and consumed via jsDelivr and the GitHub release page.
+// 4.22.0 shipped without them after `gulp clean` deleted them and the deletion
+// got committed - this check makes CI fail instead.
+
+for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
+  const p = path.join(ROOT, f);
+  if (!fs.existsSync(p) || fs.statSync(p).size === 0) {
+    errors.push(
+      `release file missing or empty: ${f} - run \`npm run prepack\` and commit it`
+    );
+  }
+}
+
 // Informational: framework classes the showcase never demonstrates
 const undocumented = [...classesInCss].filter(
   (c) => !classesInMarkup.has(c) && !classesInJs.has(c)

package/src/assets/images/gallery-city.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="City skyline at night">
+  <defs>
+    <linearGradient id="city-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#101830"/>
+      <stop offset="0.6" stop-color="#3a3566"/>
+      <stop offset="1" stop-color="#a5628a"/>
+    </linearGradient>
+    <pattern id="city-win" x="0" y="0" width="18" height="24" patternUnits="userSpaceOnUse">
+      <rect x="4" y="6" width="7" height="9" fill="#ffd98a" opacity="0.72"/>
+    </pattern>
+  </defs>
+  <rect width="800" height="450" fill="url(#city-sky)"/>
+  <circle cx="150" cy="98" r="30" fill="#f4e7c8"/>
+  <circle cx="163" cy="90" r="30" fill="#26224a"/>
+  <g fill="#241f43">
+    <rect x="20" y="248" width="72" height="202"/>
+    <rect x="104" y="196" width="58" height="254"/>
+    <rect x="176" y="286" width="86" height="164"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="20" y="248" width="72" height="202"/>
+    <rect x="104" y="196" width="58" height="254"/>
+    <rect x="176" y="286" width="86" height="164"/>
+  </g>
+  <g fill="#1a1633">
+    <rect x="272" y="156" width="78" height="294"/>
+    <rect x="362" y="228" width="64" height="222"/>
+    <rect x="440" y="122" width="52" height="328"/>
+    <rect x="506" y="204" width="88" height="246"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="272" y="156" width="78" height="294"/>
+    <rect x="362" y="228" width="64" height="222"/>
+    <rect x="440" y="122" width="52" height="328"/>
+    <rect x="506" y="204" width="88" height="246"/>
+  </g>
+  <rect x="462" y="96" width="8" height="30" fill="#1a1633"/>
+  <circle cx="466" cy="92" r="6" fill="#ff7b6b"/>
+  <g fill="#120f27">
+    <rect x="604" y="262" width="70" height="188"/>
+    <rect x="686" y="182" width="60" height="268"/>
+    <rect x="758" y="300" width="42" height="150"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="604" y="262" width="70" height="188"/>
+    <rect x="686" y="182" width="60" height="268"/>
+    <rect x="758" y="300" width="42" height="150"/>
+  </g>
+</svg>

package/src/assets/images/gallery-desert.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Desert dunes under a low sun">
+  <defs>
+    <linearGradient id="des-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#e28b52"/>
+      <stop offset="0.6" stop-color="#f3b972"/>
+      <stop offset="1" stop-color="#fbdda6"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#des-sky)"/>
+  <circle cx="256" cy="180" r="62" fill="#fff2cf"/>
+  <circle cx="256" cy="180" r="104" fill="#fff2cf" opacity="0.16"/>
+  <path d="M0,250 C130,214 236,268 360,252 C486,236 588,196 800,246 L800,450 L0,450 Z" fill="#e9b273"/>
+  <path d="M0,306 C142,264 266,330 402,308 C540,286 660,246 800,304 L800,450 L0,450 Z" fill="#d3924f"/>
+  <g fill="#7d4520">
+    <path d="M602,368 c-5,-28 -3,-54 8,-78 l11,4 c-10,23 -12,48 -8,74 Z"/>
+    <path d="M616,292 c-32,-12 -58,-2 -72,16 c26,-10 48,-11 70,-4 Z"/>
+    <path d="M616,292 c-30,-24 -58,-24 -78,-14 c28,0 52,6 74,20 Z"/>
+    <path d="M616,292 c32,-12 58,-2 72,16 c-26,-10 -48,-11 -70,-4 Z"/>
+    <path d="M616,292 c30,-24 58,-24 78,-14 c-28,0 -52,6 -74,20 Z"/>
+    <path d="M616,292 c-8,-30 2,-50 18,-60 c-8,22 -12,40 -12,60 Z"/>
+    <circle cx="612" cy="296" r="5"/>
+  </g>
+  <path d="M0,368 C122,332 246,390 396,364 C548,338 668,314 800,372 L800,450 L0,450 Z" fill="#b0703a"/>
+  <path d="M0,424 C160,398 300,436 452,414 C598,392 690,382 800,420 L800,450 L0,450 Z" fill="#8a5228"/>
+</svg>

package/src/assets/images/gallery-forest.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Autumn forest with light through the trees">
+  <defs>
+    <linearGradient id="for-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#fbe3ab"/>
+      <stop offset="0.45" stop-color="#e0a659"/>
+      <stop offset="1" stop-color="#7d5327"/>
+    </linearGradient>
+    <linearGradient id="for-haze" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffeec2" stop-opacity="0.6"/>
+      <stop offset="1" stop-color="#ffeec2" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#for-bg)"/>
+  <circle cx="404" cy="132" r="58" fill="#fff6da" opacity="0.75"/>
+  <circle cx="404" cy="132" r="110" fill="#fff6da" opacity="0.22"/>
+  <g fill="#a97236" opacity="0.4">
+    <rect x="72" y="0" width="13" height="450"/>
+    <rect x="214" y="0" width="10" height="450"/>
+    <rect x="352" y="0" width="14" height="450"/>
+    <rect x="498" y="0" width="11" height="450"/>
+    <rect x="628" y="0" width="13" height="450"/>
+    <rect x="756" y="0" width="10" height="450"/>
+  </g>
+  <g fill="#6b451f" opacity="0.85">
+    <rect x="128" y="0" width="22" height="450"/>
+    <rect x="288" y="0" width="18" height="450"/>
+    <rect x="566" y="0" width="20" height="450"/>
+    <rect x="702" y="0" width="16" height="450"/>
+  </g>
+  <g fill="#3d2611">
+    <rect x="24" y="0" width="30" height="450"/>
+    <rect x="428" y="0" width="26" height="450"/>
+    <rect x="772" y="0" width="28" height="450"/>
+  </g>
+  <path d="M0,342 C140,326 280,356 420,340 C560,324 680,344 800,332 L800,450 L0,450 Z" fill="#5b3818"/>
+  <rect y="316" width="800" height="134" fill="url(#for-haze)"/>
+  <g fill="#e8a94d" opacity="0.65">
+    <ellipse cx="150" cy="392" rx="11" ry="7"/>
+    <ellipse cx="298" cy="420" rx="9" ry="6"/>
+    <ellipse cx="472" cy="386" rx="12" ry="7"/>
+    <ellipse cx="624" cy="424" rx="10" ry="6"/>
+    <ellipse cx="722" cy="390" rx="9" ry="6"/>
+    <ellipse cx="76" cy="428" rx="10" ry="6"/>
+    <ellipse cx="390" cy="436" rx="9" ry="6"/>
+  </g>
+</svg>

package/src/assets/images/gallery-lake.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Calm lake at dusk">
+  <defs>
+    <linearGradient id="lake-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#2b3a63"/>
+      <stop offset="0.55" stop-color="#8f6d8e"/>
+      <stop offset="1" stop-color="#f0b083"/>
+    </linearGradient>
+    <linearGradient id="lake-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c98f74"/>
+      <stop offset="0.35" stop-color="#5c5f85"/>
+      <stop offset="1" stop-color="#24304f"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#lake-sky)"/>
+  <circle cx="400" cy="238" r="38" fill="#ffd9a8"/>
+  <polygon points="0,258 132,182 250,246 360,196 470,252 600,178 720,250 800,214 800,272 0,272" fill="#5b4f74"/>
+  <polygon points="0,272 800,272 800,450 0,450" fill="url(#lake-water)"/>
+  <rect x="386" y="278" width="28" height="96" rx="14" fill="#ffd9a8" opacity="0.5"/>
+  <rect x="120" y="296" width="180" height="5" rx="2.5" fill="#e7c3ae" opacity="0.35"/>
+  <rect x="470" y="318" width="230" height="5" rx="2.5" fill="#e7c3ae" opacity="0.3"/>
+  <rect x="220" y="348" width="300" height="6" rx="3" fill="#e7c3ae" opacity="0.22"/>
+  <rect x="80" y="392" width="420" height="6" rx="3" fill="#e7c3ae" opacity="0.16"/>
+  <polygon points="586,272 612,192 638,272" fill="#1e2a44"/>
+  <polygon points="634,272 658,206 682,272" fill="#1e2a44"/>
+  <rect x="607" y="262" width="10" height="18" fill="#1e2a44"/>
+</svg>

package/src/assets/images/gallery-mountain.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Mountain range at sunrise">
+  <defs>
+    <linearGradient id="mtn-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#14273f"/>
+      <stop offset="0.5" stop-color="#3d6a97"/>
+      <stop offset="1" stop-color="#a8c6d8"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#mtn-sky)"/>
+  <circle cx="612" cy="128" r="44" fill="#ffe0ae"/>
+  <circle cx="612" cy="128" r="76" fill="#ffe0ae" opacity="0.18"/>
+  <polygon points="0,318 118,214 228,286 344,176 470,296 588,206 704,300 800,224 800,450 0,450" fill="#7096b8"/>
+  <polygon points="344,176 383,214 370,209 357,220 342,210 320,216" fill="#e8f1f7"/>
+  <polygon points="588,206 620,238 608,233 597,243 585,234 566,240" fill="#e8f1f7"/>
+  <polygon points="0,360 96,272 206,344 318,252 438,352 560,268 672,356 800,286 800,450 0,450" fill="#3f6489"/>
+  <polygon points="318,252 350,286 338,281 327,291 315,282 297,288" fill="#dae7f0"/>
+  <polygon points="-20,412 130,320 268,404 404,314 548,406 676,330 800,398 800,450 0,450" fill="#22405e"/>
+  <rect y="424" width="800" height="26" fill="#182f47"/>
+</svg>

package/src/assets/images/gallery-ocean.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Ocean waves rolling to the horizon">
+  <defs>
+    <linearGradient id="oce-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5aa8cc"/>
+      <stop offset="1" stop-color="#d3edf3"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#oce-sky)"/>
+  <g fill="#ffffff" opacity="0.5">
+    <ellipse cx="150" cy="88" rx="66" ry="20"/>
+    <ellipse cx="198" cy="78" rx="44" ry="16"/>
+    <ellipse cx="596" cy="126" rx="78" ry="18"/>
+    <ellipse cx="644" cy="116" rx="46" ry="14"/>
+  </g>
+  <rect y="204" width="800" height="246" fill="#1f6f96"/>
+  <path d="M0,204 C120,196 200,222 320,214 C440,206 540,228 660,218 C720,213 764,220 800,216 L800,268 L0,268 Z" fill="#2b88ad"/>
+  <path d="M0,262 C140,250 230,286 372,272 C500,259 596,290 800,272 L800,330 L0,330 Z" fill="#1a6c92"/>
+  <path d="M0,326 C150,310 260,354 410,336 C556,318 660,352 800,330 L800,394 L0,394 Z" fill="#125877"/>
+  <path d="M0,390 C170,370 300,414 460,394 C610,375 700,404 800,390 L800,450 L0,450 Z" fill="#0b4159"/>
+  <g fill="#eaf7fb" opacity="0.85">
+    <path d="M60,268 c40,-8 70,6 108,0 c-34,14 -70,4 -108,0 Z"/>
+    <path d="M430,276 c48,-10 84,6 128,-2 c-40,18 -84,6 -128,2 Z"/>
+    <path d="M170,336 c56,-12 96,8 148,-2 c-46,20 -96,6 -148,2 Z"/>
+    <path d="M560,392 c46,-10 80,6 120,-2 c-36,18 -78,6 -120,2 Z"/>
+  </g>
+</svg>

package/src/assets/images/gallery-oldtown.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Old town rooftops and a church tower">
+  <defs>
+    <linearGradient id="old-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#6f93b5"/>
+      <stop offset="1" stop-color="#f2ddc0"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#old-sky)"/>
+  <circle cx="668" cy="112" r="34" fill="#fff3d6" opacity="0.85"/>
+  <g fill="#9a8570" opacity="0.6">
+    <polygon points="60,300 118,240 176,300"/>
+    <rect x="60" y="300" width="116" height="150"/>
+    <polygon points="640,296 700,234 760,296"/>
+    <rect x="640" y="296" width="120" height="154"/>
+  </g>
+  <polygon points="330,206 372,146 414,206" fill="#8f4b3c"/>
+  <rect x="344" y="206" width="56" height="244" fill="#e0cdb2"/>
+  <rect x="360" y="142" width="24" height="10" fill="#6b4136"/>
+  <circle cx="372" cy="238" r="14" fill="#f6efe1" stroke="#6b4136" stroke-width="3"/>
+  <g>
+    <polygon points="140,326 196,268 252,326" fill="#a4553f"/>
+    <rect x="146" y="326" width="100" height="124" fill="#e6d4b8"/>
+    <polygon points="252,308 316,246 380,308" fill="#8d4a38"/>
+    <rect x="258" y="308" width="116" height="142" fill="#dcc7a6"/>
+    <polygon points="400,318 458,258 516,318" fill="#b25e44"/>
+    <rect x="406" y="318" width="104" height="132" fill="#e9d9be"/>
+    <polygon points="516,300 578,240 640,300" fill="#94503b"/>
+    <rect x="522" y="300" width="112" height="150" fill="#d9c4a2"/>
+  </g>
+  <g fill="#6b5a45">
+    <rect x="168" y="356" width="20" height="26"/><rect x="206" y="356" width="20" height="26"/>
+    <rect x="168" y="404" width="20" height="26"/><rect x="206" y="404" width="20" height="26"/>
+    <rect x="282" y="342" width="22" height="30"/><rect x="328" y="342" width="22" height="30"/>
+    <rect x="282" y="396" width="22" height="30"/><rect x="328" y="396" width="22" height="30"/>
+    <rect x="428" y="352" width="20" height="28"/><rect x="468" y="352" width="20" height="28"/>
+    <rect x="428" y="404" width="20" height="28"/><rect x="468" y="404" width="20" height="28"/>
+    <rect x="546" y="336" width="22" height="30"/><rect x="590" y="336" width="22" height="30"/>
+    <rect x="546" y="392" width="22" height="30"/><rect x="590" y="392" width="22" height="30"/>
+  </g>
+  <rect y="440" width="800" height="10" fill="#6b5a45"/>
+</svg>

package/src/assets/images/gallery-snow.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Snowy hills with pine trees">
+  <defs>
+    <linearGradient id="sno-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#48628a"/>
+      <stop offset="0.65" stop-color="#9db6cf"/>
+      <stop offset="1" stop-color="#e2edf4"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#sno-sky)"/>
+  <g fill="#ffffff" opacity="0.75">
+    <circle cx="92" cy="66" r="3"/><circle cx="214" cy="112" r="2.5"/><circle cx="336" cy="54" r="3"/>
+    <circle cx="452" cy="128" r="2.5"/><circle cx="548" cy="72" r="3"/><circle cx="664" cy="140" r="2.5"/>
+    <circle cx="742" cy="62" r="3"/><circle cx="160" cy="172" r="2.5"/><circle cx="392" cy="190" r="2.5"/>
+    <circle cx="612" cy="204" r="2.5"/>
+  </g>
+  <polygon points="0,272 148,178 288,266 428,166 566,262 706,182 800,252 800,450 0,450" fill="#c3d6e6"/>
+  <path d="M0,318 C150,282 268,344 420,320 C560,298 672,286 800,326 L800,450 L0,450 Z" fill="#e8f2f8"/>
+  <g fill="#2c4a41">
+    <polygon points="96,388 128,296 160,388"/>
+    <polygon points="104,356 128,296 152,356"/>
+    <rect x="122" y="386" width="12" height="22"/>
+    <polygon points="228,404 268,290 308,404"/>
+    <polygon points="238,364 268,290 298,364"/>
+    <rect x="260" y="402" width="14" height="26"/>
+    <polygon points="504,398 540,296 576,398"/>
+    <polygon points="513,362 540,296 567,362"/>
+    <rect x="533" y="396" width="13" height="24"/>
+    <polygon points="600,382 632,300 664,382"/>
+    <polygon points="608,352 632,300 656,352"/>
+    <rect x="626" y="380" width="12" height="20"/>
+  </g>
+  <g fill="#f3f9fc">
+    <polygon points="128,296 141,326 115,326"/>
+    <polygon points="268,290 283,324 253,324"/>
+    <polygon points="540,296 553,328 527,328"/>
+    <polygon points="632,300 644,328 620,328"/>
+  </g>
+  <path d="M0,406 C170,388 300,428 460,410 C608,393 700,398 800,412 L800,450 L0,450 Z" fill="#ffffff"/>
+</svg>

package/src/assets/images/slider-field.svg

@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Golden field under a wide sky">
+  <defs>
+    <linearGradient id="sd-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5ea3d8"/>
+      <stop offset="1" stop-color="#f1e2b6"/>
+    </linearGradient>
+    <linearGradient id="sd-field" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dfba5c"/>
+      <stop offset="1" stop-color="#9c6d1e"/>
+    </linearGradient>
+    <g id="ear">
+      <path d="M0,0 v-24" stroke="#8a6018" stroke-width="2.4" stroke-linecap="round" fill="none"/>
+      <ellipse cx="0" cy="-31" rx="4.4" ry="9" fill="#e0b241"/>
+      <ellipse cx="0" cy="-31" rx="1.6" ry="9" fill="#a97c1e" opacity="0.5"/>
+    </g>
+  </defs>
+  <rect width="800" height="500" fill="url(#sd-sky)"/>
+  <circle cx="606" cy="104" r="46" fill="#fff5d0"/>
+  <circle cx="606" cy="104" r="78" fill="#fff5d0" opacity="0.25"/>
+  <g fill="#ffffff" opacity="0.8">
+    <ellipse cx="168" cy="98" rx="66" ry="20"/>
+    <ellipse cx="216" cy="86" rx="44" ry="16"/>
+    <ellipse cx="430" cy="62" rx="52" ry="16"/>
+    <ellipse cx="470" cy="54" rx="34" ry="12"/>
+  </g>
+  <g fill="#6d8a4e">
+    <ellipse cx="86" cy="272" rx="30" ry="20"/>
+    <ellipse cx="122" cy="276" rx="22" ry="15"/>
+    <ellipse cx="248" cy="274" rx="26" ry="17"/>
+    <ellipse cx="470" cy="272" rx="34" ry="21"/>
+    <ellipse cx="508" cy="277" rx="24" ry="15"/>
+    <ellipse cx="686" cy="274" rx="28" ry="18"/>
+    <ellipse cx="722" cy="278" rx="20" ry="13"/>
+  </g>
+  <path d="M0,278 C120,270 220,284 340,276 C460,268 580,282 800,272 L800,306 L0,306 Z" fill="#7fa15a"/>
+  <path d="M0,300 C160,292 300,312 460,300 C600,290 700,300 800,296 L800,500 L0,500 Z" fill="url(#sd-field)"/>
+  <g opacity="0.55">
+    <use href="#ear" transform="translate(8,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(29,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(50,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(71,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(92,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(113,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(134,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(155,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(176,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(197,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(218,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(239,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(260,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(281,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(302,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(323,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(344,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(365,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(386,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(407,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(428,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(449,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(470,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(491,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(512,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(533,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(554,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(575,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(596,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(617,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(638,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(659,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(680,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(701,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(722,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(743,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(764,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(785,335) scale(0.5)"/>
+  </g>
+  <g opacity="0.8">
+    <use href="#ear" transform="translate(4,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(37,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(70,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(103,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(136,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(169,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(202,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(235,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(268,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(301,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(334,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(367,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(400,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(433,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(466,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(499,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(532,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(565,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(598,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(631,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(664,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(697,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(730,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(763,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(796,402) scale(0.78)"/>
+  </g>
+  <g>
+    <use href="#ear" transform="translate(-6,482) scale(1.15)"/>
+    <use href="#ear" transform="translate(41,501) scale(1.15)"/>
+    <use href="#ear" transform="translate(88,492) scale(1.15)"/>
+    <use href="#ear" transform="translate(135,497) scale(1.15)"/>
+    <use href="#ear" transform="translate(182,488) scale(1.15)"/>
+    <use href="#ear" transform="translate(229,493) scale(1.15)"/>
+    <use href="#ear" transform="translate(276,498) scale(1.15)"/>
+    <use href="#ear" transform="translate(323,489) scale(1.15)"/>
+    <use href="#ear" transform="translate(370,494) scale(1.15)"/>
+    <use href="#ear" transform="translate(417,499) scale(1.15)"/>
+    <use href="#ear" transform="translate(464,490) scale(1.15)"/>
+    <use href="#ear" transform="translate(511,495) scale(1.15)"/>
+    <use href="#ear" transform="translate(558,500) scale(1.15)"/>
+    <use href="#ear" transform="translate(605,491) scale(1.15)"/>
+    <use href="#ear" transform="translate(652,496) scale(1.15)"/>
+    <use href="#ear" transform="translate(699,501) scale(1.15)"/>
+    <use href="#ear" transform="translate(746,492) scale(1.15)"/>
+    <use href="#ear" transform="translate(793,497) scale(1.15)"/>
+  </g>
+</svg>

package/src/assets/images/slider-forest.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Misty pine forest">
+  <defs>
+    <linearGradient id="sf-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#b9cfc4"/>
+      <stop offset="0.5" stop-color="#6f9481"/>
+      <stop offset="1" stop-color="#294438"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sf-bg)"/>
+  <g fill="#8fae9d" opacity="0.55">
+    <polygon points="60,400 108,190 156,400"/>
+    <polygon points="210,410 252,206 294,410"/>
+    <polygon points="380,396 424,180 468,396"/>
+    <polygon points="546,410 590,200 634,410"/>
+    <polygon points="700,398 744,186 788,398"/>
+  </g>
+  <rect y="240" width="800" height="90" fill="#c3d6cc" opacity="0.45"/>
+  <g fill="#3f6653">
+    <polygon points="0,440 52,214 104,440"/>
+    <polygon points="146,450 196,196 246,450"/>
+    <polygon points="316,436 370,180 424,436"/>
+    <polygon points="490,452 542,192 594,452"/>
+    <polygon points="644,438 700,178 756,438"/>
+  </g>
+  <rect y="366" width="800" height="70" fill="#cfe0d7" opacity="0.4"/>
+  <g fill="#1e3a2d">
+    <polygon points="-20,500 40,270 100,500"/>
+    <polygon points="228,500 292,250 356,500"/>
+    <polygon points="452,500 512,262 572,500"/>
+    <polygon points="686,500 752,244 818,500"/>
+  </g>
+  <rect y="470" width="800" height="30" fill="#16291f"/>
+</svg>

package/src/assets/images/slider-lake.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Turquoise mountain lake">
+  <defs>
+    <linearGradient id="sl-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3f8fb8"/>
+      <stop offset="1" stop-color="#bfe4e8"/>
+    </linearGradient>
+    <linearGradient id="sl-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#2aa39b"/>
+      <stop offset="1" stop-color="#0d5c66"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sl-sky)"/>
+  <g fill="#ffffff" opacity="0.7">
+    <ellipse cx="580" cy="72" rx="58" ry="18"/>
+    <ellipse cx="624" cy="64" rx="38" ry="14"/>
+  </g>
+  <polygon points="0,272 140,158 292,268 430,142 568,272 706,178 800,266 800,300 0,300" fill="#6e9fb8"/>
+  <polygon points="430,142 470,182 456,177 442,190 426,178 402,185" fill="#ffffff"/>
+  <polygon points="0,300 800,300 800,500 0,500" fill="url(#sl-water)"/>
+  <polygon points="0,300 140,362 292,304 430,376 568,302 706,352 800,306 800,300" fill="#3fb3a8" opacity="0.55"/>
+  <g fill="#e8fbfa" opacity="0.5">
+    <rect x="90" y="348" width="180" height="6" rx="3"/>
+    <rect x="410" y="392" width="240" height="6" rx="3"/>
+    <rect x="180" y="428" width="300" height="7" rx="3.5"/>
+    <rect x="520" y="452" width="200" height="6" rx="3"/>
+  </g>
+  <g fill="#1c5c4a">
+    <polygon points="88,304 116,214 144,304"/>
+    <polygon points="140,304 164,232 188,304"/>
+    <polygon points="624,304 652,222 680,304"/>
+    <polygon points="676,304 700,240 724,304"/>
+  </g>
+  <path d="M0,296 C60,290 120,300 190,296 L190,312 L0,312 Z" fill="#2f6f52"/>
+  <path d="M610,296 C680,288 740,300 800,294 L800,312 L610,312 Z" fill="#2f6f52"/>
+</svg>

package/src/assets/images/slider-mountains.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Mountain landscape in daylight">
+  <defs>
+    <linearGradient id="sm-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4c8fd0"/>
+      <stop offset="1" stop-color="#cfe6f5"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sm-sky)"/>
+  <g fill="#ffffff" opacity="0.85">
+    <ellipse cx="182" cy="96" rx="62" ry="22"/>
+    <ellipse cx="228" cy="84" rx="42" ry="18"/>
+    <ellipse cx="140" cy="104" rx="40" ry="16"/>
+    <ellipse cx="612" cy="140" rx="70" ry="20"/>
+    <ellipse cx="660" cy="130" rx="44" ry="16"/>
+  </g>
+  <polygon points="0,330 124,214 248,318 372,196 500,326 628,222 752,332 800,300 800,500 0,500" fill="#8fb0cc"/>
+  <polygon points="372,196 414,236 400,231 386,243 370,232 344,239" fill="#ffffff"/>
+  <polygon points="628,222 664,258 651,253 639,264 626,254 604,260" fill="#ffffff"/>
+  <polygon points="0,378 138,272 268,372 400,258 536,382 664,286 800,388 800,500 0,500" fill="#5c86ab"/>
+  <polygon points="400,258 438,296 425,291 412,302 397,292 374,298" fill="#f2f8fc"/>
+  <polygon points="0,430 150,344 296,428 438,340 578,432 706,362 800,428 800,500 0,500" fill="#3b5f83"/>
+  <path d="M0,462 C160,444 300,478 460,458 C606,440 700,448 800,462 L800,500 L0,500 Z" fill="#2a4762"/>
+  <g fill="#24405a">
+    <polygon points="86,462 106,410 126,462"/>
+    <polygon points="128,466 152,404 176,466"/>
+    <polygon points="640,464 664,406 688,464"/>
+    <polygon points="684,468 704,418 724,468"/>
+  </g>
+</svg>

package/src/assets/images/slider-trees.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Row of trees against a sunset">
+  <defs>
+    <linearGradient id="st-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#6a3a72"/>
+      <stop offset="0.45" stop-color="#d4674f"/>
+      <stop offset="1" stop-color="#f7c56b"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#st-sky)"/>
+  <circle cx="400" cy="330" r="72" fill="#ffe9a8"/>
+  <circle cx="400" cy="330" r="120" fill="#ffe9a8" opacity="0.22"/>
+  <path d="M0,352 C140,336 260,362 400,348 C540,334 660,356 800,344 L800,500 L0,500 Z" fill="#7a3f37"/>
+  <g fill="#2a1622">
+    <path d="M104,362 l-9,-142 c0,-6 22,-6 22,0 l-9,142 Z"/>
+    <ellipse cx="106" cy="214" rx="46" ry="34"/><ellipse cx="76" cy="234" rx="34" ry="26"/>
+    <ellipse cx="138" cy="232" rx="32" ry="24"/><ellipse cx="112" cy="188" rx="30" ry="24"/>
+    <path d="M246,360 l-7,-176 c0,-5 18,-5 18,0 l-7,176 Z"/>
+    <ellipse cx="246" cy="178" rx="40" ry="30"/><ellipse cx="218" cy="196" rx="30" ry="23"/>
+    <ellipse cx="274" cy="194" rx="28" ry="22"/><ellipse cx="252" cy="156" rx="26" ry="21"/>
+    <path d="M560,358 l-9,-166 c0,-6 22,-6 22,0 l-9,166 Z"/>
+    <ellipse cx="560" cy="188" rx="44" ry="33"/><ellipse cx="528" cy="208" rx="32" ry="25"/>
+    <ellipse cx="592" cy="206" rx="30" ry="23"/><ellipse cx="566" cy="162" rx="28" ry="23"/>
+    <path d="M690,358 l-7,-128 c0,-5 18,-5 18,0 l-7,128 Z"/>
+    <ellipse cx="690" cy="226" rx="36" ry="27"/><ellipse cx="666" cy="242" rx="27" ry="21"/>
+    <ellipse cx="714" cy="240" rx="25" ry="20"/><ellipse cx="696" cy="204" rx="24" ry="19"/>
+  </g>
+  <g fill="#1a0f18">
+    <path d="M42,382 l-11,-130 c0,-7 26,-7 26,0 l-11,130 Z"/>
+    <ellipse cx="42" cy="248" rx="42" ry="32"/><ellipse cx="12" cy="268" rx="32" ry="25"/>
+    <ellipse cx="72" cy="266" rx="28" ry="22"/><ellipse cx="50" cy="218" rx="26" ry="22"/>
+    <path d="M768,384 l-10,-124 c0,-7 24,-7 24,0 l-10,124 Z"/>
+    <ellipse cx="768" cy="258" rx="40" ry="30"/><ellipse cx="740" cy="276" rx="30" ry="24"/>
+    <ellipse cx="796" cy="274" rx="26" ry="21"/><ellipse cx="774" cy="230" rx="25" ry="20"/>
+  </g>
+  <path d="M0,428 C170,414 320,442 480,424 C620,408 700,418 800,426 L800,500 L0,500 Z" fill="#3d1f22"/>
+  <g fill="#8f4c3c" opacity="0.55">
+    <ellipse cx="180" cy="404" rx="34" ry="7"/>
+    <ellipse cx="470" cy="392" rx="42" ry="8"/>
+    <ellipse cx="662" cy="410" rx="30" ry="7"/>
+  </g>
+</svg>