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/form-elements-container.html ADDED Viewed

@@ -0,0 +1,595 @@
+<h3 class="mw-section-subtitle">Form Elements</h3>
+<div class="mw-grid-1">
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Input with different Sizes</h3>
+    <div class="mw-grid-4 mw-mt-4">
+      <!-- Default -->
+      <label for="input-default">
+        <span>Default</span>
+        <input
+          id="input-default"
+          type="text"
+          class="mw-input"
+          placeholder="Default size"
+        />
+      </label>
+      <!-- Small -->
+      <label for="input-sm">
+        <span>Small</span>
+        <input
+          id="input-sm"
+          type="text"
+          class="mw-input mw-input-sm"
+          placeholder="Small size"
+        />
+      </label>
+      <!-- Large -->
+      <label for="input-lg">
+        <span>Large</span>
+        <input
+          id="input-lg"
+          type="text"
+          class="mw-input mw-input-lg"
+          placeholder="Large size"
+        />
+      </label>
+      <!-- X-Large -->
+      <label for="input-xl">
+        <span>Extra Large</span>
+        <input
+          id="input-xl"
+          type="text"
+          class="mw-input mw-input-xl mw-form-element"
+          placeholder="XL size"
+        />
+      </label>
+      <!-- Disabled -->
+      <label for="input-disabled">
+        <span>Disabled</span>
+        <input
+          disabled
+          id="input-disabled"
+          type="text"
+          class="mw-input"
+          placeholder="Default size"
+        />
+      </label>
+      <!-- Error -->
+      <label for="input-error">
+        <span>Error</span>
+        <input
+          id="input-error"
+          type="text"
+          class="mw-input mw-form-element-error"
+          placeholder="Default size"
+        />
+      </label>
+    </div>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Select with Different Sizes</h3>
+    <div class="mw-grid-4 mw-mt-4">
+      <!-- Default -->
+      <label for="select-default-1">
+        <span>Default</span>
+        <select id="select-default-1" class="mw-select">
+          <option value="" disabled selected>Select an option</option>
+          <option>Option One</option>
+          <option>Option Two</option>
+          <option>Option Three</option>
+        </select>
+      </label>
+      <!-- Small -->
+      <label for="select-sm">
+        <span>Small</span>
+        <select id="select-sm" class="mw-select mw-select-sm">
+          <option value="" disabled selected>Small select</option>
+          <option>One</option>
+          <option>Two</option>
+        </select>
+      </label>
+      <!-- Large -->
+      <label for="select-lg">
+        <span>Large</span>
+        <select id="select-lg" class="mw-select mw-select-lg">
+          <option value="" disabled selected>Large select</option>
+          <option>Alpha</option>
+          <option>Beta</option>
+          <option>Gamma</option>
+        </select>
+      </label>
+      <!-- X-Large -->
+      <label for="select-xl">
+        <span>Extra Large</span>
+        <select id="select-xl" class="mw-select mw-select-xl">
+          <option value="" disabled selected>XL select</option>
+          <option>Red</option>
+          <option>Green</option>
+          <option>Blue</option>
+        </select>
+      </label>
+      <!-- Disabled -->
+      <label for="select-default-2">
+        <span>Disabled</span>
+        <select id="select-default-2" disabled class="mw-select">
+          <option value="" disabled selected>Select an option</option>
+          <option>Option One</option>
+          <option>Option Two</option>
+          <option>Option Three</option>
+        </select>
+      </label>
+      <!-- Disabled -->
+      <label for="select-default-3">
+        <span>Error</span>
+        <select id="select-default-3" class="mw-select mw-form-element-error">
+          <option value="" disabled selected>Select an option</option>
+          <option>Option One</option>
+          <option>Option Two</option>
+          <option>Option Three</option>
+        </select>
+      </label>
+    </div>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Checkboxes</h3>
+    <div class="mw-grid-4-lg mw-mt-4">
+      <!-- Default vertical -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Default</h5>
+        <div class="mw-checkbox-group">
+          <label class="mw-checkbox">
+            <input type="checkbox" name="cb1" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Option A</div>
+          </label>
+          <label class="mw-checkbox">
+            <input type="checkbox" name="cb1" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Option B</div>
+          </label>
+        </div>
+      </div>
+      <!-- Inline small -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Small & Inline</h5>
+        <div class="mw-checkbox-group mw-checkbox-group-inline">
+          <label class="mw-checkbox mw-checkbox-sm">
+            <input type="checkbox" name="cb2" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Agree</div>
+          </label>
+          <label class="mw-checkbox mw-checkbox-sm">
+            <input type="checkbox" name="cb2" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Subscribe</div>
+          </label>
+        </div>
+      </div>
+      <!-- Large & colored -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Large &amp; Colored</h5>
+        <div class="mw-checkbox-group mw-checkbox-group">
+          <label class="mw-checkbox mw-checkbox-lg mw-checkbox-success">
+            <input type="checkbox" name="cb3" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Success</div>
+          </label>
+          <label class="mw-checkbox mw-checkbox-lg mw-checkbox-danger">
+            <input type="checkbox" name="cb3" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Danger</div>
+          </label>
+        </div>
+      </div>
+      <!-- XL Disabled -->
+      <div>
+        <h5 class="mw-mb-2">XL Disabled</h5>
+        <div class="mw-checkbox-group mw-checkbox-group">
+          <label class="mw-checkbox mw-checkbox-xl mw-checkbox-disabled">
+            <input type="checkbox" name="cb4" disabled />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Unavailable</div>
+          </label>
+          <label class="mw-checkbox mw-checkbox-xl">
+            <input type="checkbox" name="cb4" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Available</div>
+          </label>
+        </div>
+      </div>
+      <!-- Error -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Error</h5>
+        <div class="mw-checkbox-group mw-form-element-error">
+          <label class="mw-checkbox">
+            <input type="checkbox" name="cb1" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Option A</div>
+          </label>
+          <label class="mw-checkbox">
+            <input type="checkbox" name="cb1" />
+            <div class="mw-checkbox-box"></div>
+            <div class="mw-checkbox-label">Option B</div>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Radio Buttons with different sizes and colors</h3>
+    <div class="mw-grid-4-lg mw-mt-4">
+      <!-- Default (vertical) -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Default</h5>
+        <div class="mw-radio-group">
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option A</div>
+          </label>
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option B</div>
+          </label>
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option C</div>
+          </label>
+        </div>
+      </div>
+      <!-- Small Inline -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Small & Inline</h5>
+        <div class="mw-radio-group mw-radio-group-inline">
+          <label class="mw-radio mw-radio-sm">
+            <input type="radio" name="opt2" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Yes</div>
+          </label>
+          <label class="mw-radio mw-radio-sm">
+            <input type="radio" name="opt2" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">No</div>
+          </label>
+        </div>
+      </div>
+      <!-- Large & Colored -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Large &amp; Colored</h5>
+        <div class="mw-radio-group mw-radio-group">
+          <label class="mw-radio mw-radio-lg mw-radio-success">
+            <input type="radio" name="opt3" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Success</div>
+          </label>
+          <label class="mw-radio mw-radio-lg mw-radio-danger">
+            <input type="radio" name="opt3" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Danger</div>
+          </label>
+        </div>
+      </div>
+      <!-- XL & Disabled -->
+      <div>
+        <h5 class="mw-mb-2">XL Disabled</h5>
+        <div class="mw-radio-group mw-radio-group">
+          <label class="mw-radio mw-radio-xl mw-radio-disabled">
+            <input type="radio" name="opt4" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Unavailable</div>
+          </label>
+          <label class="mw-radio mw-radio-xl">
+            <input type="radio" name="opt4" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Available</div>
+          </label>
+        </div>
+      </div>
+      <!-- Error -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Error</h5>
+        <div class="mw-radio-group mw-form-element-error">
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option A</div>
+          </label>
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option B</div>
+          </label>
+          <label class="mw-radio">
+            <input type="radio" name="opt1" />
+            <div class="mw-radio-button"></div>
+            <div class="mw-radio-label">Option C</div>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Slider -->
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Ultimate Sliders</h3>
+    <!-- First row: default & disabled -->
+    <div class="mw-grid-2-lg mw-mb-4">
+      <label>
+        <span>Volume Control</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-numeric" data-value="3"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-primary"
+            min="0"
+            max="10"
+            value="3"
+          />
+        </div>
+      </label>
+      <label>
+        <span>Muted (Disabled)</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-percent" data-value="30"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-primary"
+            min="0"
+            max="100"
+            value="30"
+            disabled
+          />
+        </div>
+      </label>
+      <!-- Second row: small info & large success -->
+      <label>
+        <span>Screen Brightness</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-percent" data-value="50"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-info mw-slider-sm"
+            min="0"
+            max="100"
+            value="50"
+          />
+        </div>
+      </label>
+      <label>
+        <span>Upload Progress</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-percent" data-value="70"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-success mw-slider-lg"
+            min="0"
+            max="100"
+            value="70"
+          />
+        </div>
+      </label>
+      <!-- Third row: error -->
+      <label>
+        <span>Error</span>
+        <div class="mw-slider-container mw-form-element-error">
+          <div class="mw-slider-value mw-slider-percent" data-value="50"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-info mw-slider-sm"
+            min="0"
+            max="100"
+            value="50"
+          />
+        </div>
+      </label>
+    </div>
+    <!-- Single: extra large danger -->
+    <div class="mw-my-6">
+      <label>
+        <span>Temperature Threshold</span>
+        <div class="mw-slider-container">
+          <div class="mw-slider-value mw-slider-percent" data-value="40"></div>
+          <input
+            type="range"
+            class="mw-slider mw-slider-danger mw-slider-xl"
+            min="0"
+            max="100"
+            value="40"
+          />
+        </div>
+      </label>
+    </div>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Textarea with Different Sizes</h3>
+    <div class="mw-grid-4 mw-mt-4">
+      <!-- Default -->
+      <label for="textarea-default-1">
+        <span>Default</span>
+        <textarea
+          id="textarea-default-1"
+          class="mw-textarea"
+          rows="8"
+          placeholder="Default size... (8 rows)"
+        ></textarea>
+      </label>
+      <!-- Small -->
+      <label for="textarea-sm">
+        <span>Small</span>
+        <textarea
+          id="textarea-sm"
+          rows="5"
+          class="mw-textarea mw-textarea-sm"
+          placeholder="Small size... (5 rows)"
+        ></textarea>
+      </label>
+      <!-- Large -->
+      <label for="textarea-lg">
+        <span>Large</span>
+        <textarea
+          id="textarea-lg"
+          rows="5"
+          class="mw-textarea mw-textarea-lg"
+          placeholder="Large size... (5 rows)"
+        ></textarea>
+      </label>
+      <!-- X-Large -->
+      <label for="textarea-xl">
+        <span>Extra Large</span>
+        <textarea
+          id="textarea-xl"
+          rows="5"
+          class="mw-textarea mw-textarea-xl"
+          placeholder="XL size... (5 rows)"
+        ></textarea>
+      </label>
+      <!-- Error -->
+      <label for="textarea-error">
+        <span>Error</span>
+        <textarea
+          id="textarea-error"
+          rows="3"
+          class="mw-textarea mw-form-element-error"
+          placeholder="This element has an error... (3 rows)"
+        ></textarea>
+      </label>
+      <!-- Disabled -->
+      <label for="textarea-default-2">
+        <span>Disabled</span>
+        <textarea
+          id="textarea-default-2"
+          class="mw-textarea mw-textarea-resizable-vertical"
+          rows="5"
+          disabled
+          placeholder="Default size... (5 rows)"
+        ></textarea>
+      </label>
+      <!-- Resizable vertical -->
+      <label for="textarea-default-3">
+        <span>Resizable vertical</span>
+        <textarea
+          id="textarea-default-3"
+          class="mw-textarea mw-textarea-resizable-vertical"
+          rows="5"
+          placeholder="Default size... (5 rows)"
+        ></textarea>
+      </label>
+    </div>
+    <div class="mw-grid-1 mw-mt-4">
+      <!-- Resizable horizontal -->
+      <label for="textarea-default-4">
+        <span>Resizable horizontal</span>
+        <textarea
+          id="textarea-default-4"
+          class="mw-textarea mw-textarea-resizable-horizontal"
+          rows="5"
+          placeholder="Default size... (5 rows)"
+        ></textarea>
+      </label>
+    </div>
+  </div>
+  <div class="mw-card mw-card-simple">
+    <h3 class="mw-card-title">Toggle Switch</h3>
+    <div class="mw-grid-4-lg mw-mt-4">
+      <!-- Default -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Default</h5>
+        <div class="mw-toggle-group">
+          <label class="mw-toggle">
+            <input type="checkbox" />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Email notifications</span>
+          </label>
+          <label class="mw-toggle">
+            <input type="checkbox" checked />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Dark mode</span>
+          </label>
+        </div>
+      </div>
+      <!-- Small & Inline -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Small & Inline</h5>
+        <div class="mw-toggle-group mw-toggle-group-inline">
+          <label class="mw-toggle mw-toggle-sm">
+            <input type="checkbox" checked />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">API</span>
+          </label>
+          <label class="mw-toggle mw-toggle-sm">
+            <input type="checkbox" />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Logs</span>
+          </label>
+          <label class="mw-toggle mw-toggle-sm">
+            <input type="checkbox" checked />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Metrics</span>
+          </label>
+        </div>
+      </div>
+      <!-- Large & Colored -->
+      <div class="mw-mb-6">
+        <h5 class="mw-mb-2">Large &amp; Colored</h5>
+        <div class="mw-toggle-group">
+          <label class="mw-toggle mw-toggle-lg mw-toggle-success">
+            <input type="checkbox" checked />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Feature enabled</span>
+          </label>
+          <label class="mw-toggle mw-toggle-lg mw-toggle-danger">
+            <input type="checkbox" checked />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Maintenance mode</span>
+          </label>
+        </div>
+      </div>
+      <!-- Disabled -->
+      <div>
+        <h5 class="mw-mb-2">Disabled</h5>
+        <div class="mw-toggle-group">
+          <label class="mw-toggle mw-toggle-disabled">
+            <input type="checkbox" disabled />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Unavailable (off)</span>
+          </label>
+          <label class="mw-toggle mw-toggle-disabled">
+            <input type="checkbox" checked disabled />
+            <div class="mw-toggle-track"></div>
+            <span class="mw-toggle-label">Unavailable (on)</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>