npm - maverick-wave - Versions diffs - 5.29.0 → 5.31.0 - Mend

maverick-wave 5.29.0 → 5.31.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 (144) hide show

package/README.md +2 -2
package/maverick-wave.min.css +2 -2
package/package.json +8 -2
package/src/scss/components/_avatars.scss +35 -3
package/src/scss/components/_dropdown.scss +24 -1
package/src/scss/components/_lang-switch.scss +4 -8
package/src/scss/components/_modals.scss +33 -5
package/.claude/settings.local.json +0 -43
package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
package/.claude/skills/mw-maverick-wave/references/components.md +0 -2169
package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
package/.claude/skills/mw-maverick-wave/references/theming.md +0 -528
package/.github/workflows/ci.yml +0 -41
package/.idea/codeStyles/Project.xml +0 -59
package/.idea/codeStyles/codeStyleConfig.xml +0 -5
package/.idea/maverick-wave.iml +0 -12
package/.idea/modules.xml +0 -8
package/.idea/prettier.xml +0 -6
package/.idea/vcs.xml +0 -6
package/.prettierignore +0 -8
package/.prettierrc.json +0 -7
package/CHANGELOG.md +0 -950
package/CLAUDE.md +0 -60
package/gulpfile.js +0 -167
package/index.html +0 -1730
package/release.sh +0 -31
package/scripts/verify.js +0 -252
package/src/assets/favicon/apple-touch-icon.png +0 -0
package/src/assets/favicon/favicon-96x96.png +0 -0
package/src/assets/favicon/favicon.svg +0 -1
package/src/assets/favicon/site.webmanifest +0 -37
package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
package/src/assets/favicon.ico +0 -0
package/src/assets/header-logo.svg +0 -24
package/src/assets/images/gallery-city.svg +0 -49
package/src/assets/images/gallery-desert.svg +0 -25
package/src/assets/images/gallery-forest.svg +0 -46
package/src/assets/images/gallery-lake.svg +0 -26
package/src/assets/images/gallery-mountain.svg +0 -19
package/src/assets/images/gallery-ocean.svg +0 -26
package/src/assets/images/gallery-oldtown.svg +0 -41
package/src/assets/images/gallery-snow.svg +0 -39
package/src/assets/images/photo-balloon.svg +0 -35
package/src/assets/images/photo-forest-path.svg +0 -31
package/src/assets/images/photo-lighthouse.svg +0 -42
package/src/assets/images/photo-palm.svg +0 -27
package/src/assets/images/photo-peak.svg +0 -27
package/src/assets/images/photo-tower.svg +0 -34
package/src/assets/images/photo-waterfall.svg +0 -32
package/src/assets/images/slider-field.svg +0 -124
package/src/assets/images/slider-forest.svg +0 -33
package/src/assets/images/slider-lake.svg +0 -35
package/src/assets/images/slider-mountains.svg +0 -29
package/src/assets/images/slider-trees.svg +0 -41
package/src/assets/images/story-aurora.svg +0 -36
package/src/assets/images/story-beach.svg +0 -34
package/src/assets/images/story-stars.svg +0 -35
package/src/assets/images/tile-analytics.svg +0 -22
package/src/assets/images/tile-cloud.svg +0 -19
package/src/assets/images/tile-ecommerce.svg +0 -14
package/src/assets/images/tile-enterprise.svg +0 -22
package/src/assets/images/tile-marketing.svg +0 -16
package/src/assets/media/demo-chime.wav +0 -0
package/src/assets/media/story-sunrise.jpg +0 -0
package/src/assets/media/story-sunrise.mp4 +0 -0
package/src/partials/accordions-container.html +0 -179
package/src/partials/alerts-container.html +0 -151
package/src/partials/announcement-container.html +0 -67
package/src/partials/avatars-container.html +0 -229
package/src/partials/badges-container.html +0 -114
package/src/partials/blog-posts-container.html +0 -158
package/src/partials/breadcrumbs-container.html +0 -126
package/src/partials/button-bar-container.html +0 -175
package/src/partials/buttons-container.html +0 -272
package/src/partials/calendar-container.html +0 -203
package/src/partials/cards-container.html +0 -727
package/src/partials/code-container.html +0 -194
package/src/partials/colors-container.html +0 -263
package/src/partials/coming-soon-container.html +0 -10
package/src/partials/contact-container.html +0 -85
package/src/partials/content-slider-container.html +0 -36
package/src/partials/divider-container.html +0 -70
package/src/partials/documentation-container.html +0 -204
package/src/partials/dropdown-container.html +0 -119
package/src/partials/empty-state-container.html +0 -79
package/src/partials/feed-container.html +0 -506
package/src/partials/footer-container.html +0 -113
package/src/partials/form-container.html +0 -262
package/src/partials/form-elements-container.html +0 -616
package/src/partials/form-field-container.html +0 -166
package/src/partials/gallery-container.html +0 -62
package/src/partials/get-started-container.html +0 -423
package/src/partials/grid-container.html +0 -191
package/src/partials/header-container.html +0 -69
package/src/partials/header-utilities-container.html +0 -331
package/src/partials/highlights-container.html +0 -71
package/src/partials/history-container.html +0 -67
package/src/partials/home-container.html +0 -31
package/src/partials/html-lists-container.html +0 -63
package/src/partials/info-container.html +0 -104
package/src/partials/input-group-container.html +0 -299
package/src/partials/item-lists-container.html +0 -368
package/src/partials/kanban-container.html +0 -459
package/src/partials/kbd-container.html +0 -63
package/src/partials/leader-row-container.html +0 -139
package/src/partials/login-container.html +0 -65
package/src/partials/lunch-menu-container.html +0 -341
package/src/partials/media-container.html +0 -27
package/src/partials/meta-info-container.html +0 -21
package/src/partials/modals-container.html +0 -199
package/src/partials/mosaic-container.html +0 -173
package/src/partials/page-header-container.html +0 -78
package/src/partials/pagination-container.html +0 -64
package/src/partials/palette-container.html +0 -480
package/src/partials/panels-container.html +0 -126
package/src/partials/parallax-container.html +0 -147
package/src/partials/portrait-gallery-container.html +0 -175
package/src/partials/preview-container.html +0 -136
package/src/partials/pricing-container.html +0 -523
package/src/partials/progress-container.html +0 -230
package/src/partials/prose-container.html +0 -43
package/src/partials/ratings-container.html +0 -104
package/src/partials/section-head-container.html +0 -77
package/src/partials/segmented-container.html +0 -66
package/src/partials/skeleton-container.html +0 -87
package/src/partials/spinners-container.html +0 -96
package/src/partials/stepper-container.html +0 -111
package/src/partials/stories-container.html +0 -182
package/src/partials/tables-container.html +0 -309
package/src/partials/tabs-container.html +0 -290
package/src/partials/tags-container.html +0 -242
package/src/partials/techstack-bucket-container.html +0 -187
package/src/partials/testimonials-container.html +0 -88
package/src/partials/tiles-container.html +0 -247
package/src/partials/timelines-container.html +0 -196
package/src/partials/typography-container.html +0 -74
package/src/partials/utilities-container.html +0 -553

package/src/partials/form-elements-container.html DELETED Viewed

@@ -1,616 +0,0 @@
-<h3 class="mw-section-subtitle">Form Elements</h3>
-<p class="mw-text-muted mw-text-measure">
-  Every control the framework styles. They stay light in both themes on purpose,
-  and they share one height per size step - a field, a select and the button
-  beside them line up by construction.
-</p>
-<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>
-      <!-- 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>
-      <!-- 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">
-        <h4 class="mw-mb-2">Default</h4>
-        <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">
-        <h4 class="mw-mb-2">Small & Inline</h4>
-        <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">
-        <h4 class="mw-mb-2">Large &amp; Colored</h4>
-        <div class="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>
-      <!-- Error -->
-      <div class="mw-mb-6">
-        <h4 class="mw-mb-2">Error</h4>
-        <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">
-        <h4 class="mw-mb-2">Default</h4>
-        <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">
-        <h4 class="mw-mb-2">Small & Inline</h4>
-        <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">
-        <h4 class="mw-mb-2">Large &amp; Colored</h4>
-        <div class="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>
-      <!-- Error -->
-      <div class="mw-mb-6">
-        <h4 class="mw-mb-2">Error</h4>
-        <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>
-  </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>
-      <!-- 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">Prefilled Values</h3>
-    <p class="mw-text-muted mw-text-sm mw-mt-3">
-      Add <code>mw-prefilled</code> to any control whose value was not typed in
-      this session - loaded from an existing record, restored from a draft,
-      filled with a default. The corner triangle scales with the control size
-      and stays visible on readonly and disabled controls. It is decoration
-      only, so repeat the information in a <code>mw-field-hint</code> for screen
-      readers.
-    </p>
-    <div class="mw-grid-4 mw-mt-4">
-      <!-- Small -->
-      <label for="prefilled-input-sm">
-        <span>Small</span>
-        <input
-          id="prefilled-input-sm"
-          type="text"
-          class="mw-input mw-input-sm mw-prefilled"
-          value="Max Mustermann"
-        />
-      </label>
-      <!-- Default -->
-      <label for="prefilled-input">
-        <span>Default</span>
-        <input
-          id="prefilled-input"
-          type="text"
-          class="mw-input mw-prefilled"
-          value="Max Mustermann"
-        />
-      </label>
-      <!-- Large -->
-      <label for="prefilled-input-lg">
-        <span>Large</span>
-        <input
-          id="prefilled-input-lg"
-          type="text"
-          class="mw-input mw-input-lg mw-prefilled"
-          value="Max Mustermann"
-        />
-      </label>
-      <!-- Readonly -->
-      <label for="prefilled-input-readonly">
-        <span>Readonly</span>
-        <input
-          id="prefilled-input-readonly"
-          type="text"
-          class="mw-input mw-prefilled"
-          readonly
-          value="USR-00042"
-        />
-      </label>
-    </div>
-    <div class="mw-grid-4 mw-mt-4">
-      <!-- Select small -->
-      <label for="prefilled-select-sm">
-        <span>Select small</span>
-        <select
-          id="prefilled-select-sm"
-          class="mw-select mw-select-sm mw-prefilled"
-        >
-          <option selected>Germany</option>
-          <option>Austria</option>
-        </select>
-      </label>
-      <!-- Select default -->
-      <label for="prefilled-select">
-        <span>Select default</span>
-        <select id="prefilled-select" class="mw-select mw-prefilled">
-          <option selected>Germany</option>
-          <option>Austria</option>
-        </select>
-      </label>
-      <!-- Select large -->
-      <label for="prefilled-select-lg">
-        <span>Select large</span>
-        <select
-          id="prefilled-select-lg"
-          class="mw-select mw-select-lg mw-prefilled"
-        >
-          <option selected>Germany</option>
-          <option>Austria</option>
-        </select>
-      </label>
-      <!-- Textarea -->
-      <label for="prefilled-textarea">
-        <span>Textarea</span>
-        <textarea
-          id="prefilled-textarea"
-          class="mw-textarea mw-prefilled"
-          rows="3"
-        >
-Imported from the previous application.</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">
-        <h4 class="mw-mb-2">Default</h4>
-        <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">
-        <h4 class="mw-mb-2">Small & Inline</h4>
-        <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">
-        <h4 class="mw-mb-2">Large &amp; Colored</h4>
-        <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>
-        <h4 class="mw-mb-2">Disabled</h4>
-        <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>