maverick-wave 5.30.0 → 5.32.0

package/src/assets/images/story-aurora.svg

@@ -1,36 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1280" width="720" height="1280" role="img" aria-label="Northern lights over a snowy forest">
-  <defs>
-    <linearGradient id="sa-sky" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#050d1c"/>
-      <stop offset="1" stop-color="#123049"/>
-    </linearGradient>
-    <linearGradient id="sa-band" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#7cf5c4" stop-opacity="0"/>
-      <stop offset="0.6" stop-color="#58e0a8" stop-opacity="0.7"/>
-      <stop offset="1" stop-color="#2fb3a0" stop-opacity="0"/>
-    </linearGradient>
-    <filter id="sa-soft" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="14"/>
-    </filter>
-  </defs>
-  <rect width="720" height="1280" fill="url(#sa-sky)"/>
-  <g filter="url(#sa-soft)">
-    <path d="M-40,520 C120,300 260,560 420,340 C540,180 640,300 760,160 L760,420 C640,540 540,420 420,600 C260,820 120,560 -40,760 Z" fill="url(#sa-band)"/>
-    <path d="M-40,700 C160,560 300,760 480,560 C580,450 680,520 760,470 L760,600 C660,660 580,590 480,700 C300,900 160,720 -40,860 Z" fill="url(#sa-band)" opacity="0.7"/>
-  </g>
-  <g fill="#fff">
-    <circle cx="100" cy="90" r="1.8"/>
-    <circle cx="300" cy="140" r="1.4"/>
-    <circle cx="560" cy="80" r="2"/>
-    <circle cx="660" cy="240" r="1.4"/>
-    <circle cx="200" cy="220" r="1.2"/>
-  </g>
-  <path d="M0,1000 C240,960 480,1010 720,970 L720,1280 L0,1280 Z" fill="#dfe9f2"/>
-  <path d="M0,1120 C260,1080 460,1140 720,1100 L720,1280 L0,1280 Z" fill="#c4d4e2"/>
-  <g fill="#0a1a26">
-    <polygon points="60,1010 100,860 140,1010"/>
-    <polygon points="130,1000 180,820 230,1000"/>
-    <polygon points="520,990 570,830 620,990"/>
-    <polygon points="600,985 640,880 680,985"/>
-  </g>
-</svg>

package/src/assets/images/story-beach.svg

@@ -1,34 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1280" width="720" height="1280" role="img" aria-label="Beach at sunset with waves running up the sand">
-  <defs>
-    <linearGradient id="sb-sky" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#4b3b7d"/>
-      <stop offset="0.5" stop-color="#e2717b"/>
-      <stop offset="1" stop-color="#fbc37a"/>
-    </linearGradient>
-    <linearGradient id="sb-sea" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#6d6fa8"/>
-      <stop offset="1" stop-color="#2f4f7a"/>
-    </linearGradient>
-  </defs>
-  <rect width="720" height="640" fill="url(#sb-sky)"/>
-  <circle cx="360" cy="620" r="110" fill="#ffe0a3"/>
-  <g fill="#fff" opacity="0.45">
-    <ellipse cx="160" cy="300" rx="110" ry="18"/>
-    <ellipse cx="560" cy="210" rx="90" ry="14"/>
-  </g>
-  <rect y="620" width="720" height="360" fill="url(#sb-sea)"/>
-  <g fill="#ffe0a3" opacity="0.55">
-    <rect x="270" y="650" width="180" height="6" rx="3"/>
-    <rect x="290" y="690" width="140" height="6" rx="3"/>
-    <rect x="310" y="734" width="100" height="6" rx="3"/>
-  </g>
-  <path d="M0,900 C160,860 320,930 480,890 C600,860 660,880 720,870 L720,1280 L0,1280 Z" fill="#f1d3a8"/>
-  <path d="M0,900 C160,860 320,930 480,890 C600,860 660,880 720,870 L720,900 C640,915 560,900 480,925 C320,965 160,900 0,940 Z" fill="#ffffff" opacity="0.7"/>
-  <path d="M0,1100 C200,1060 420,1140 720,1080 L720,1280 L0,1280 Z" fill="#e3bd8b"/>
-  <g fill="#c99d6c">
-    <ellipse cx="300" cy="1010" rx="10" ry="16"/>
-    <ellipse cx="336" cy="1060" rx="10" ry="16"/>
-    <ellipse cx="310" cy="1120" rx="11" ry="17"/>
-    <ellipse cx="350" cy="1180" rx="11" ry="18"/>
-  </g>
-</svg>

package/src/assets/images/story-stars.svg

@@ -1,35 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1280" width="720" height="1280" role="img" aria-label="Tent glowing under the milky way">
-  <defs>
-    <linearGradient id="ss-sky" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#070b1f"/>
-      <stop offset="0.7" stop-color="#1d2a5a"/>
-      <stop offset="1" stop-color="#40518a"/>
-    </linearGradient>
-    <radialGradient id="ss-glow" cx="0.5" cy="0.5" r="0.5">
-      <stop offset="0" stop-color="#ffcf7a" stop-opacity="0.7"/>
-      <stop offset="1" stop-color="#ffcf7a" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="720" height="1280" fill="url(#ss-sky)"/>
-  <ellipse cx="360" cy="420" rx="520" ry="90" transform="rotate(-58 360 420)" fill="#b9c4f0" opacity="0.14"/>
-  <ellipse cx="360" cy="420" rx="420" ry="40" transform="rotate(-58 360 420)" fill="#e6e9ff" opacity="0.14"/>
-  <g fill="#fff">
-    <circle cx="80" cy="120" r="2.4"/>
-    <circle cx="200" cy="260" r="1.6"/>
-    <circle cx="610" cy="90" r="2.2"/>
-    <circle cx="520" cy="300" r="1.4"/>
-    <circle cx="400" cy="160" r="1.8"/>
-    <circle cx="120" cy="520" r="1.4"/>
-    <circle cx="650" cy="560" r="2"/>
-    <circle cx="300" cy="620" r="1.2"/>
-    <circle cx="560" cy="720" r="1.4"/>
-    <circle cx="60" cy="760" r="1.8"/>
-    <circle cx="260" cy="420" r="1.2"/>
-    <circle cx="460" cy="480" r="1.6"/>
-  </g>
-  <polygon points="0,900 140,800 260,870 400,760 540,860 720,780 720,1280 0,1280" fill="#141c3a"/>
-  <polygon points="0,1000 200,950 420,1010 720,940 720,1280 0,1280" fill="#0c1228"/>
-  <circle cx="360" cy="1030" r="160" fill="url(#ss-glow)"/>
-  <polygon points="280,1090 360,960 440,1090" fill="#f3a64a"/>
-  <polygon points="345,1090 360,1030 375,1090" fill="#7a3f1a"/>
-</svg>

package/src/assets/images/tile-analytics.svg

@@ -1,22 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Business intelligence suite">
-  <defs>
-    <linearGradient id="an-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#7a5cf0"/>
-      <stop offset="1" stop-color="#3d2a9c"/>
-    </linearGradient>
-  </defs>
-  <rect width="200" height="200" fill="url(#an-bg)"/>
-  <circle cx="40" cy="36" r="52" fill="#ffffff" opacity="0.09"/>
-  <g fill="#ffffff" opacity="0.9">
-    <rect x="62" y="114" width="20" height="34" rx="4"/>
-    <rect x="90" y="96" width="20" height="52" rx="4"/>
-    <rect x="118" y="78" width="20" height="70" rx="4"/>
-  </g>
-  <path d="M72 104 l28 -18 l28 -20" fill="none" stroke="#ffd166" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-  <g fill="#ffd166">
-    <circle cx="72" cy="104" r="6"/>
-    <circle cx="100" cy="86" r="6"/>
-    <circle cx="128" cy="66" r="6"/>
-  </g>
-  <rect x="58" y="154" width="84" height="6" rx="3" fill="#ffffff" opacity="0.55"/>
-</svg>

package/src/assets/images/tile-cloud.svg

@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Cloud infrastructure">
-  <defs>
-    <linearGradient id="cl-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#2eb6c9"/>
-      <stop offset="1" stop-color="#1d6d95"/>
-    </linearGradient>
-  </defs>
-  <rect width="200" height="200" fill="url(#cl-bg)"/>
-  <circle cx="172" cy="176" r="52" fill="#ffffff" opacity="0.09"/>
-  <path d="M70 100 a24 24 0 0 1 46 -11 a18 18 0 0 1 14 30 h-52 a22 22 0 0 1 -8 -19 Z" fill="#ffffff" opacity="0.94"/>
-  <g fill="#ffffff" opacity="0.75">
-    <rect x="68" y="132" width="64" height="14" rx="4"/>
-    <rect x="68" y="152" width="64" height="14" rx="4"/>
-  </g>
-  <g fill="#1d6d95">
-    <circle cx="78" cy="139" r="3.5"/>
-    <circle cx="78" cy="159" r="3.5"/>
-  </g>
-</svg>

package/src/assets/images/tile-ecommerce.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="E-commerce platform">
-  <defs>
-    <linearGradient id="ec-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#2f6fed"/>
-      <stop offset="1" stop-color="#1b3f9c"/>
-    </linearGradient>
-  </defs>
-  <rect width="200" height="200" fill="url(#ec-bg)"/>
-  <circle cx="160" cy="40" r="52" fill="#ffffff" opacity="0.09"/>
-  <path d="M64 88 h72 l-7 56 a9 9 0 0 1 -9 8 h-40 a9 9 0 0 1 -9 -8 Z" fill="#ffffff" opacity="0.94"/>
-  <path d="M84 90 v-10 a16 16 0 0 1 32 0 v10" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/>
-  <circle cx="88" cy="110" r="6" fill="#2f6fed"/>
-  <circle cx="112" cy="110" r="6" fill="#2f6fed"/>
-</svg>

package/src/assets/images/tile-enterprise.svg

@@ -1,22 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Enterprise solutions">
-  <defs>
-    <linearGradient id="en-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#3fa66f"/>
-      <stop offset="1" stop-color="#1c5c46"/>
-    </linearGradient>
-  </defs>
-  <rect width="200" height="200" fill="url(#en-bg)"/>
-  <circle cx="166" cy="46" r="50" fill="#ffffff" opacity="0.09"/>
-  <g fill="#ffffff" opacity="0.92">
-    <rect x="58" y="96" width="42" height="52" rx="5"/>
-    <rect x="106" y="70" width="42" height="78" rx="5"/>
-  </g>
-  <g fill="#1c5c46">
-    <rect x="67" y="106" width="10" height="10" rx="2.5"/><rect x="82" y="106" width="10" height="10" rx="2.5"/>
-    <rect x="67" y="124" width="10" height="10" rx="2.5"/><rect x="82" y="124" width="10" height="10" rx="2.5"/>
-    <rect x="115" y="80" width="10" height="10" rx="2.5"/><rect x="130" y="80" width="10" height="10" rx="2.5"/>
-    <rect x="115" y="98" width="10" height="10" rx="2.5"/><rect x="130" y="98" width="10" height="10" rx="2.5"/>
-    <rect x="115" y="116" width="10" height="10" rx="2.5"/><rect x="130" y="116" width="10" height="10" rx="2.5"/>
-  </g>
-  <rect x="52" y="152" width="102" height="7" rx="3.5" fill="#ffffff" opacity="0.6"/>
-</svg>

package/src/assets/images/tile-marketing.svg

@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Marketing automation">
-  <defs>
-    <linearGradient id="mk-bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#e8646a"/>
-      <stop offset="1" stop-color="#a32f6e"/>
-    </linearGradient>
-  </defs>
-  <rect width="200" height="200" fill="url(#mk-bg)"/>
-  <circle cx="36" cy="168" r="56" fill="#ffffff" opacity="0.09"/>
-  <path d="M66 92 h16 l38 -26 v70 l-38 -26 h-16 a9 9 0 0 1 -9 -9 Z" fill="#ffffff" opacity="0.94"/>
-  <path d="M82 110 l5 28 h16 l-5 -28 Z" fill="#ffffff" opacity="0.94"/>
-  <g fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.7">
-    <path d="M132 90 a20 20 0 0 1 0 24"/>
-    <path d="M144 78 a38 38 0 0 1 0 48"/>
-  </g>
-</svg>

package/src/partials/accordions-container.html

@@ -1,179 +0,0 @@
-<h3 class="mw-section-subtitle">Accordions</h3>
-<p class="mw-text-muted mw-text-measure">
-  Only as much content open as anyone needs at once. The header is the control
-  and the panel follows it in the DOM, which is what lets the whole thing run
-  off two state classes and no wrapper element.
-</p>
-
-<div class="mw-accordion">
-  <div class="mw-accordion-item">
-    <button
-      type="button"
-      class="mw-accordion-header mw-active"
-      aria-expanded="true"
-      aria-controls="mw-accordion-panel-1"
-    >
-      <span>What is MaverickWave?</span>
-      <i class="fas fa-chevron-down mw-accordion-icon"></i>
-    </button>
-    <div class="mw-accordion-content mw-active" id="mw-accordion-panel-1">
-      <div class="mw-accordion-content-inner">
-        <p>
-          MaverickWave is a lightweight, responsive CSS framework designed for
-          modern web development. It provides a clean foundation with
-          customizable components and utility classes to help you build
-          beautiful, responsive websites quickly.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-accordion-item">
-    <button
-      type="button"
-      class="mw-accordion-header"
-      aria-expanded="false"
-      aria-controls="mw-accordion-panel-2"
-    >
-      <span>How do I customize MaverickWave?</span>
-      <i class="fas fa-chevron-down mw-accordion-icon"></i>
-    </button>
-    <div class="mw-accordion-content" id="mw-accordion-panel-2">
-      <div class="mw-accordion-content-inner">
-        <p>
-          MaverickWave offers two main ways to customize its appearance to match
-          your project's needs:
-        </p>
-
-        <h4 class="mw-mt-4 mw-mb-2">
-          1. Using CSS Variables (Recommended for CDN/CSS Users)
-        </h4>
-        <p>
-          If you're using the pre-compiled CSS file (via CDN or download), you
-          can override MaverickWave's default styles by redefining its CSS
-          variables in your own stylesheet (loaded *after* MaverickWave's CSS).
-        </p>
-        <pre class="mw-code-block"><code>/* Your custom-styles.css */
-  :root {
-    /* Root colors - hover tones, translucent backgrounds and borders
-       are derived from them at runtime via color-mix() */
-    --mw-primary-color: #0f766e;
-    --mw-secondary-color: #b45309;
-
-    /* Theme colors - card, footer and border are derived from these */
-    --mw-dark-page-background: #172127;
-    --mw-light-page-background: #f2f6f7;
-
-    /* Font */
-    --mw-font-family-base: 'Your Custom Font', sans-serif;
-  }</code></pre>
-        <p>This method is flexible and doesn't require a Sass build process.</p>
-
-        <h4 class="mw-mt-4 mw-mb-2">
-          2. Using SCSS Variables (Requires Sass Build Process)
-        </h4>
-        <p>
-          If you integrate MaverickWave's SCSS source files into your project,
-          pass your overrides through <code>@use ... with (...)</code>. A plain
-          assignment before the <code>@use</code> has no effect - the root
-          colors are declared with <code>!default</code>, which only the
-          configuration reaches.
-        </p>
-        <pre class="mw-code-block"><code>// Your styles.scss
-
-  @use 'path/to/maverick-wave/src/scss/main' with (
-    $primary-color: #0f766e,
-    $mw-theme-mode: 'dark' // 'switchable' | 'dark' | 'light'
-  );</code></pre>
-        <p>
-          This method requires you to have a Sass compiler set up in your
-          project. Single components can be imported instead of
-          <code>main</code> - see the "Get Started" section.
-        </p>
-        <p class="mw-mt-4">
-          <a href="#get-started" class="mw-link">
-            See the "Get Started" section
-          </a>
-          for more detailed integration examples for both methods.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-accordion-item">
-    <button
-      type="button"
-      class="mw-accordion-header"
-      aria-expanded="false"
-      aria-controls="mw-accordion-panel-3"
-    >
-      <span>Is MaverickWave responsive?</span>
-      <i class="fas fa-chevron-down mw-accordion-icon"></i>
-    </button>
-    <div class="mw-accordion-content" id="mw-accordion-panel-3">
-      <div class="mw-accordion-content-inner">
-        <p>
-          Yes, MaverickWave CSS framework is fully responsive and works on all
-          devices. It uses a mobile-first approach with responsive breakpoints
-          for different screen sizes, ensuring your website looks great on
-          phones, tablets, laptops, and desktops.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-accordion-item">
-    <button
-      type="button"
-      class="mw-accordion-header"
-      aria-expanded="false"
-      aria-controls="mw-accordion-panel-4"
-    >
-      <span>Scrollable Content Example</span>
-      <i class="fas fa-chevron-down mw-accordion-icon"></i>
-    </button>
-    <div class="mw-accordion-content" id="mw-accordion-panel-4">
-      <div class="mw-accordion-content-inner">
-        <p>
-          This accordion panel demonstrates scrollable content when the content
-          exceeds the available space. This is useful for displaying large
-          amounts of information in a compact format.
-        </p>
-        <p>
-          Accordions are excellent UI components for FAQs, product details, or
-          any content that benefits from progressive disclosure. They help
-          reduce cognitive load by showing only the most relevant information at
-          first.
-        </p>
-        <p>When designing with accordions, consider these best practices:</p>
-        <ul>
-          <li>
-            Use clear, descriptive headers that indicate the content inside
-          </li>
-          <li>Keep content concise and focused on a single topic per panel</li>
-          <li>
-            Consider whether users need to compare information across panels
-          </li>
-          <li>Ensure keyboard accessibility for navigation</li>
-          <li>Provide visual feedback for interactive elements</li>
-        </ul>
-        <p>
-          MaverickWave accordions are designed with accessibility in mind,
-          ensuring they work well with screen readers and keyboard navigation.
-          The smooth animations provide visual feedback without being
-          distracting.
-        </p>
-        <p>
-          You can customize the appearance of accordions using CSS variables to
-          match your brand colors and design language. The component is built
-          with flexibility in mind.
-        </p>
-        <p>
-          For more complex use cases, you can nest accordions or combine them
-          with other components like tabs or cards to create rich, interactive
-          interfaces that guide users through complex information hierarchies.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/alerts-container.html

@@ -1,151 +0,0 @@
-<h3 class="mw-section-subtitle">Alerts System</h3>
-<p class="mw-text-muted mw-text-measure">
-  A message that belongs to the page it sits on. The colour carries the severity
-  and the left rule repeats it, so the meaning survives where the tint does not.
-  The same markup inside a <code>mw-toast-stack</code> becomes a toast.
-</p>
-
-<div class="mw-grid-2 mw-gap-4">
-  <!-- Primary: System Notifications -->
-  <div class="mw-alert mw-alert-primary">
-    <div class="mw-alert-icon">
-      <i class="fas fa-info-circle"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">System Update</span>
-      <p>Please note that maintenance is scheduled for tonight at 02:00 AM.</p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss System Update"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-
-  <!-- Secondary: Generic Info -->
-  <div class="mw-alert mw-alert-secondary">
-    <div class="mw-alert-icon">
-      <i class="fas fa-bell"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Notification</span>
-      <p>You have unread messages in your inbox.</p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss Notification"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-
-  <!-- Success: Actions -->
-  <div class="mw-alert mw-alert-success">
-    <div class="mw-alert-icon">
-      <i class="fas fa-check-circle"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Profile Updated</span>
-      <p>Your settings have been saved successfully.</p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss Profile Updated"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-
-  <!-- Warning: Caution needed -->
-  <div class="mw-alert mw-alert-warning">
-    <div class="mw-alert-icon">
-      <i class="fas fa-exclamation-triangle"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Storage Low</span>
-      <p>
-        You are running out of storage space (95% used). Consider upgrading your
-        plan.
-      </p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss Storage Low"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-
-  <!-- Danger: Critical Errors -->
-  <div class="mw-alert mw-alert-danger">
-    <div class="mw-alert-icon">
-      <i class="fas fa-times-circle"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Connection Failed</span>
-      <p>
-        Could not connect to database. Please check your credentials and try
-        again.
-      </p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss Connection Failed"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-
-  <!-- Info: Context / Tips -->
-  <div class="mw-alert mw-alert-info">
-    <div class="mw-alert-icon">
-      <i class="fas fa-lightbulb"></i>
-    </div>
-    <div class="mw-alert-content">
-      <span class="mw-alert-title">Did you know?</span>
-      <p>
-        You can use keyboard shortcuts to navigate faster. Press
-        <strong>?</strong> to see help.
-      </p>
-    </div>
-    <button
-      type="button"
-      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      aria-label="Dismiss Did you know?"
-    >
-      <i class="fas fa-times"></i>
-    </button>
-  </div>
-</div>
-
-<h4 class="mw-mb-2 mw-mt-8">Toast Stack</h4>
-<p class="mw-text-muted mw-mb-3">
-  Alerts become toasts by putting them in a fixed, stacked container. Positions:
-  <code>mw-toast-stack-top-right</code> (default),
-  <code>mw-toast-stack-top-center</code>,
-  <code>mw-toast-stack-bottom-right</code>. Auto-dismiss stays the application's
-  job.
-</p>
-
-<div class="mw-card mw-card-simple">
-  <pre
-    class="mw-code-block"
-  ><code>&lt;div class="mw-toast-stack mw-toast-stack-top-right"&gt;
-  &lt;div class="mw-alert mw-alert-success"&gt;
-    &lt;div class="mw-alert-icon"&gt;&lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;&lt;/div&gt;
-    &lt;div class="mw-alert-content"&gt;Entry saved.&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-  <p class="mw-text-muted mw-text-sm">
-    The container is <code>position: fixed</code>, so it cannot be shown inline
-    here. Its width is capped at <code>min(380px, calc(100vw - 2rem))</code>, it
-    lets clicks pass through everywhere except on a toast, and the entry
-    animation respects <code>prefers-reduced-motion</code>.
-  </p>
-</div>

package/src/partials/announcement-container.html

@@ -1,67 +0,0 @@
-<h3 class="mw-section-subtitle">Announcement</h3>
-<p class="mw-text-muted mw-text-measure">
-  The ribbon glued under the fixed header - a discount, a launch note, a
-  maintenance window. Shown here with <code>mw-announcement-static</code>, so
-  the demos sit in the flow instead of over this page. Without it the ribbon
-  fixes itself below the header, stays put while the page scrolls beneath it,
-  and reserves the anchor scroll offset via
-  <code>--mw-announcement-height</code>. The surface is 75% opaque with a
-  backdrop blur - visible wherever content sits behind it, like the first demo
-  below.
-</p>
-
-<div class="mw-grid-1 mw-gap-6">
-  <div>
-    <h4 class="mw-text-medium mw-mb-2">
-      Default (primary) with highlight pill - over content, showing the 75%
-      surface and the blur
-    </h4>
-    <div
-      style="
-        background: url('images/slider-mountains.svg') center / cover;
-        padding: 1.75rem 1rem;
-      "
-    >
-      <aside class="mw-announcement mw-announcement-static">
-        <a class="mw-announcement-content" href="#announcement">
-          <span class="mw-announcement-highlight">-20 %</span>
-          <span>Summer discount on every plan until 30.09.</span>
-        </a>
-      </aside>
-    </div>
-  </div>
-
-  <div>
-    <h4 class="mw-text-medium mw-mb-2">Secondary</h4>
-    <aside
-      class="mw-announcement mw-announcement-secondary mw-announcement-static"
-    >
-      <a class="mw-announcement-content" href="#announcement">
-        <span class="mw-announcement-highlight">NEW</span>
-        <span>Version 5 is out - see what changed.</span>
-      </a>
-    </aside>
-  </div>
-
-  <div>
-    <h4 class="mw-text-medium mw-mb-2">Warning, without a link</h4>
-    <aside
-      class="mw-announcement mw-announcement-warning mw-announcement-static"
-    >
-      <div class="mw-announcement-content">
-        <span>Maintenance window on Saturday, 02:00 - 04:00 UTC.</span>
-      </div>
-    </aside>
-  </div>
-
-  <div>
-    <h4 class="mw-text-medium mw-mb-2">Danger</h4>
-    <aside
-      class="mw-announcement mw-announcement-danger mw-announcement-static"
-    >
-      <div class="mw-announcement-content">
-        <span>The legacy API shuts down on 01.12. - migrate now.</span>
-      </div>
-    </aside>
-  </div>
-</div>