npm - maverick-wave - Versions diffs - 3.0.0 - Mend

maverick-wave 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/.claude/commands/mw.md +580 -0
package/.claude/settings.local.json +11 -0
package/.idea/codeStyles/Project.xml +59 -0
package/.idea/codeStyles/codeStyleConfig.xml +5 -0
package/.idea/maverick-wave.iml +12 -0
package/.idea/modules.xml +8 -0
package/.idea/prettier.xml +6 -0
package/.idea/vcs.xml +6 -0
package/.prettierignore +6 -0
package/.prettierrc.json +7 -0
package/CHANGELOG.md +420 -0
package/CLAUDE.md +53 -0
package/LICENSE +21 -0
package/README.md +191 -0
package/gulpfile.js +158 -0
package/index.html +472 -0
package/maverick-wave.min.css +1 -0
package/maverick-wave.min.js +1 -0
package/package.json +52 -0
package/release.sh +17 -0
package/src/assets/favicon/android-chrome-192x192.png +0 -0
package/src/assets/favicon/android-chrome-512x512.png +0 -0
package/src/assets/favicon/apple-touch-icon.png +0 -0
package/src/assets/favicon/favicon-16x16.png +0 -0
package/src/assets/favicon/favicon-32x32.png +0 -0
package/src/assets/favicon/site.webmanifest +1 -0
package/src/assets/favicon.ico +0 -0
package/src/assets/header-logo.svg +24 -0
package/src/js/main.js +587 -0
package/src/partials/accordions-container.html +163 -0
package/src/partials/alerts-container.html +120 -0
package/src/partials/avatars-container.html +84 -0
package/src/partials/blog-posts-container.html +157 -0
package/src/partials/breadcrumbs-container.html +126 -0
package/src/partials/button-bar-container.html +168 -0
package/src/partials/buttons-container.html +133 -0
package/src/partials/cards-container.html +508 -0
package/src/partials/code-container.html +194 -0
package/src/partials/colors-container.html +125 -0
package/src/partials/coming-soon-container.html +6 -0
package/src/partials/content-slider-container.html +47 -0
package/src/partials/divider-container.html +52 -0
package/src/partials/documentation-container.html +161 -0
package/src/partials/empty-state-container.html +74 -0
package/src/partials/footer-container.html +113 -0
package/src/partials/form-container.html +257 -0
package/src/partials/form-elements-container.html +595 -0
package/src/partials/form-field-container.html +141 -0
package/src/partials/gallery-container.html +49 -0
package/src/partials/get-started-container.html +294 -0
package/src/partials/grid-container.html +171 -0
package/src/partials/header-container.html +49 -0
package/src/partials/header-utilities-container.html +80 -0
package/src/partials/home-container.html +48 -0
package/src/partials/html-lists-container.html +58 -0
package/src/partials/info-container.html +87 -0
package/src/partials/input-group-container.html +285 -0
package/src/partials/item-lists-container.html +413 -0
package/src/partials/login-container.html +61 -0
package/src/partials/meta-info-container.html +16 -0
package/src/partials/modals-container.html +136 -0
package/src/partials/pagination-container.html +27 -0
package/src/partials/panels-container.html +196 -0
package/src/partials/progress-container.html +226 -0
package/src/partials/ratings-container.html +104 -0
package/src/partials/skeleton-container.html +82 -0
package/src/partials/spinners-container.html +92 -0
package/src/partials/stepper-container.html +107 -0
package/src/partials/tables-container.html +120 -0
package/src/partials/tabs-container.html +263 -0
package/src/partials/tags-container.html +168 -0
package/src/partials/techstack-bucket-container.html +174 -0
package/src/partials/tiles-container.html +245 -0
package/src/partials/timelines-container.html +196 -0
package/src/partials/typography-container.html +66 -0
package/src/partials/utilities-container.html +85 -0
package/src/scss/abstracts/_functions.scss +37 -0
package/src/scss/abstracts/_index.scss +3 -0
package/src/scss/abstracts/_mixins.scss +45 -0
package/src/scss/abstracts/_variables.scss +222 -0
package/src/scss/base/_base.scss +165 -0
package/src/scss/base/_index.scss +3 -0
package/src/scss/base/_reset.scss +75 -0
package/src/scss/base/_typography.scss +230 -0
package/src/scss/components/_accordions.scss +91 -0
package/src/scss/components/_alerts.scss +105 -0
package/src/scss/components/_avatars.scss +123 -0
package/src/scss/components/_blog-post.scss +268 -0
package/src/scss/components/_breadcrumbs.scss +108 -0
package/src/scss/components/_button-bar.scss +139 -0
package/src/scss/components/_buttons.scss +164 -0
package/src/scss/components/_cards.scss +316 -0
package/src/scss/components/_code.scss +252 -0
package/src/scss/components/_coming-soon.scss +92 -0
package/src/scss/components/_content-slider.scss +119 -0
package/src/scss/components/_divider.scss +70 -0
package/src/scss/components/_empty-state.scss +73 -0
package/src/scss/components/_gallery.scss +158 -0
package/src/scss/components/_index.scss +33 -0
package/src/scss/components/_info.scss +143 -0
package/src/scss/components/_lists.scss +653 -0
package/src/scss/components/_localhost-indicator.scss +29 -0
package/src/scss/components/_meta-info.scss +34 -0
package/src/scss/components/_modals.scss +118 -0
package/src/scss/components/_pagination.scss +99 -0
package/src/scss/components/_panels.scss +112 -0
package/src/scss/components/_progress.scss +107 -0
package/src/scss/components/_ratings.scss +47 -0
package/src/scss/components/_skeleton.scss +90 -0
package/src/scss/components/_spinners.scss +208 -0
package/src/scss/components/_stepper.scss +145 -0
package/src/scss/components/_tables.scss +127 -0
package/src/scss/components/_tabs.scss +146 -0
package/src/scss/components/_tags.scss +93 -0
package/src/scss/components/_techstack-bucket.scss +145 -0
package/src/scss/components/_theme-toggle.scss +50 -0
package/src/scss/components/_tiles.scss +217 -0
package/src/scss/components/_timelines.scss +339 -0
package/src/scss/form-elements/_checkbox.scss +174 -0
package/src/scss/form-elements/_form.scss +122 -0
package/src/scss/form-elements/_index.scss +10 -0
package/src/scss/form-elements/_input-group.scss +103 -0
package/src/scss/form-elements/_input.scss +72 -0
package/src/scss/form-elements/_login.scss +62 -0
package/src/scss/form-elements/_radio.scss +144 -0
package/src/scss/form-elements/_select.scss +56 -0
package/src/scss/form-elements/_slider.scss +174 -0
package/src/scss/form-elements/_textarea.scss +74 -0
package/src/scss/form-elements/_toggle.scss +174 -0
package/src/scss/layout/_footer.scss +214 -0
package/src/scss/layout/_grid.scss +287 -0
package/src/scss/layout/_header.scss +441 -0
package/src/scss/layout/_home.scss +40 -0
package/src/scss/layout/_index.scss +6 -0
package/src/scss/layout/_main.scss +116 -0
package/src/scss/layout/_section.scss +89 -0
package/src/scss/main.scss +5 -0
package/src/scss/utilities/_display.scss +35 -0
package/src/scss/utilities/_flex.scss +66 -0
package/src/scss/utilities/_index.scss +3 -0
package/src/scss/utilities/_spacing.scss +78 -0

package/src/partials/panels-container.html ADDED Viewed

@@ -0,0 +1,196 @@
+<h3 class="mw-section-subtitle">Panels</h3>
+<div class="mw-grid-1 mw-my-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>
+    <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-4-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 mw-btn-sm">
+        Cancel
+      </button>
+      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+        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 class="mw-panel-footer">
+      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
+        Cancel
+      </button>
+      <button type="button" class="mw-btn mw-btn-secondary mw-btn-sm">
+        Submit
+      </button>
+    </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 mw-btn-sm">
+        Cancel
+      </button>
+      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+        Save
+      </button>
+    </div>
+  </div>
+  <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-outline mw-btn-sm">
+        Cancel
+      </button>
+      <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
+        Save
+      </button>
+    </div>
+  </div>
+</div>
+<div class="mw-grid-1 mw-my-6">
+  <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-panel-footer">
+      <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
+        Cancel
+      </button>
+      <button type="button" class="mw-btn mw-btn-secondary mw-btn-sm">
+        Submit
+      </button>
+    </div>
+  </div>
+</div>

package/src/partials/progress-container.html ADDED Viewed

@@ -0,0 +1,226 @@
+<h3 class="mw-section-subtitle">Progress Bars</h3>
+<div class="mw-grid-2">
+  <div>
+    <h3 class="mw-mb-4">Basic Progress Bars</h3>
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mt-1 mw-mb-4">Default (75%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Project Completion</span>
+          <span class="mw-progress-value mw-progress-percent">75</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="75"></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Without Info (50%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo mw-progress-hide-info">
+          <span class="mw-progress-label">Hidden</span>
+          <span class="mw-progress-value">50</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="50"></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">With scale 1-10</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">User Rating</span>
+          <span class="mw-progress-value mw-progress-numeric">7</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="70"></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">With inline label (55%)</h4>
+      <div
+        class="mw-progress-container mw-progress-inline-label mw-mt-1 mw-mb-5"
+      >
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill mw-progress-primary" data-value="55">
+            55%
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 class="mw-mb-4">Colored Progress Bars</h3>
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mt-1 mw-mb-4">Primary (60%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Downloads</span>
+          <span class="mw-progress-value mw-progress-percent">60</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-primary"
+            data-value="60"
+          ></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Secondary (50%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Uploads</span>
+          <span class="mw-progress-value mw-progress-percent">50</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-secondary"
+            data-value="50"
+          ></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Success (100%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Task Complete</span>
+          <span class="mw-progress-value mw-progress-percent">100</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-success"
+            data-value="100"
+          ></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Warning (30%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Disk Space</span>
+          <span class="mw-progress-value mw-progress-percent">30</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-warning"
+            data-value="30"
+          ></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Danger (15%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Battery</span>
+          <span class="mw-progress-value mw-progress-percent">15</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-danger"
+            data-value="15"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 class="mw-mb-4">Sizable Progress Bars</h3>
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mt-1 mw-mb-4">Small Progress (65%)</h4>
+      <div class="mw-progress-container mw-progress-sm mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Small</span>
+          <span class="mw-progress-value mw-progress-percent">65</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="65"></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Default (65%)</h4>
+      <div class="mw-progress-container mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Default</span>
+          <span class="mw-progress-value mw-progress-percent">65</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="60"></div>
+        </div>
+      </div>
+      <h4 class="mw-my-4">Large (65%)</h4>
+      <div class="mw-progress-container mw-progress-lg mw-mt-1 mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Large</span>
+          <span class="mw-progress-value mw-progress-percent">65</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div class="mw-progress-fill" data-value="65"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 class="mw-mb-4">Skill Levels</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- React → Junior (25%) -->
+      <div class="mw-progress-container mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">React</span>
+          <span class="mw-progress-value">Junior</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-secondary"
+            data-value="25"
+          ></div>
+        </div>
+      </div>
+      <!-- Java → Professional (50%) -->
+      <div class="mw-progress-container mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Java</span>
+          <span class="mw-progress-value">Professional</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-secondary"
+            data-value="50"
+          ></div>
+        </div>
+      </div>
+      <!-- Python → Senior (70%) -->
+      <div class="mw-progress-container mw-mb-5">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Python</span>
+          <span class="mw-progress-value">Senior</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-secondary"
+            data-value="75"
+          ></div>
+        </div>
+      </div>
+      <!-- Go → Expert (90%) -->
+      <div class="mw-progress-container">
+        <div class="mw-progress-barinfo">
+          <span class="mw-progress-label">Go</span>
+          <span class="mw-progress-value">Expert</span>
+        </div>
+        <div class="mw-progress-bar">
+          <div
+            class="mw-progress-fill mw-progress-secondary"
+            data-value="95"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/ratings-container.html ADDED Viewed

@@ -0,0 +1,104 @@
+<h3 class="mw-section-subtitle">Ratings</h3>
+<p class="mw-text-muted">
+  Change the <code>data-rating</code> attribute (0–5) to see how many thumbs-up
+  light up. You can also determine the icon flexibly.
+</p>
+<div class="mw-grid-2">
+  <div>
+    <h3 class="mw-mb-4">Ratings in different sizes</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">User Rating (size SM)</p>
+        <div class="mw-rating mw-rating-sm" data-rating="4">
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Movie Rating (size LG)</p>
+        <div class="mw-rating mw-rating-lg" data-rating="2">
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 class="mw-mb-4">Ratings with other icons</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
+        </div>
+      </div>
+      <div class="mw-rating-container mw-my-3">
+        <p class="mw-rating-info">Product Rating</p>
+        <div class="mw-rating" data-rating="3">
+          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
+          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/skeleton-container.html ADDED Viewed

@@ -0,0 +1,82 @@
+<h3 class="mw-section-subtitle">Skeleton Loader</h3>
+<div class="mw-grid-3 mw-gap-6">
+  <!-- COLUMN 1: Text skeleton -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Text Lines</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-3">Article Placeholder</h5>
+      <div class="mw-skeleton-card">
+        <span class="mw-skeleton mw-skeleton-title"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+      </div>
+      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Short Paragraph</h5>
+      <div class="mw-skeleton-card">
+        <span class="mw-skeleton mw-skeleton-text"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+      </div>
+    </div>
+  </div>
+  <!-- COLUMN 2: Avatar + text -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Avatar & Content</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-3">User Card</h5>
+      <div class="mw-skeleton-card">
+        <div class="mw-skeleton-row">
+          <span class="mw-skeleton mw-skeleton-circle"></span>
+          <div class="mw-skeleton-body">
+            <span
+              class="mw-skeleton mw-skeleton-text"
+              style="width: 55%"
+            ></span>
+            <span
+              class="mw-skeleton mw-skeleton-text"
+              style="width: 80%"
+            ></span>
+          </div>
+        </div>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+      </div>
+      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Comment Row</h5>
+      <div class="mw-skeleton-card">
+        <div class="mw-skeleton-row">
+          <span class="mw-skeleton mw-skeleton-circle"></span>
+          <div class="mw-skeleton-body">
+            <span
+              class="mw-skeleton mw-skeleton-text"
+              style="width: 40%"
+            ></span>
+            <span class="mw-skeleton mw-skeleton-text"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- COLUMN 3: Image + rect shapes -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Image & Shapes</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-3">Image Card</h5>
+      <div class="mw-skeleton-card">
+        <span class="mw-skeleton mw-skeleton-rect"></span>
+        <span class="mw-skeleton mw-skeleton-title"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+        <span class="mw-skeleton mw-skeleton-text"></span>
+      </div>
+      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Small Banner</h5>
+      <div class="mw-skeleton-card">
+        <span class="mw-skeleton mw-skeleton-rect mw-skeleton-rect-sm"></span>
+        <span class="mw-skeleton mw-skeleton-text" style="width: 50%"></span>
+      </div>
+    </div>
+  </div>
+</div>