@ulu/frontend 0.1.0-beta.112 → 0.1.0-beta.113

package/docs-dev/changelog/index.html

@@ -5766,6 +5766,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.113">0.1.0-beta.113</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.112">0.1.0-beta.112</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.111">0.1.0-beta.111</a>
             		</li>
 
@@ -6147,6 +6153,14 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.113" tabindex="-1">0.1.0-beta.113</h2>
+<ul>
+<li><strong>scss/components/menu-stack</strong> - Make sure <code>.menu-stack__selectable</code> is included in <code>.menu-stack--compact</code> modifier</li>
+</ul>
+<h2 id="0.1.0-beta.112" tabindex="-1">0.1.0-beta.112</h2>
+<ul>
+<li><strong>scss/components/progress-bar</strong> - Add demo for using value in header, adjust styles slightly for this</li>
+</ul>
 <h2 id="0.1.0-beta.111" tabindex="-1">0.1.0-beta.111</h2>
 <ul>
 <li><strong>scss/components/accordion</strong>

package/docs-dev/demos/card/index.html

@@ -5784,60 +5784,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-9" name="title" checked="">
-<label for="live-demo-id-9">
+  <input type="checkbox" id="live-demo-id-1" name="title" checked="">
+<label for="live-demo-id-1">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-10" name="body" checked="">
-<label for="live-demo-id-10">
+  <input type="checkbox" id="live-demo-id-2" name="body" checked="">
+<label for="live-demo-id-2">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-11" name="content" checked="">
-<label for="live-demo-id-11">
+  <input type="checkbox" id="live-demo-id-3" name="content" checked="">
+<label for="live-demo-id-3">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
-<label for="live-demo-id-12">
+  <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
+<label for="live-demo-id-4">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
-<label for="live-demo-id-13">
+  <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
+<label for="live-demo-id-5">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-14">
+<label for="live-demo-id-6">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-14" name="action">
+  <select id="live-demo-id-6" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-15">
+<label for="live-demo-id-7">
   Media
 </label>  
-  <select id="live-demo-id-15" name="media">
+  <select id="live-demo-id-7" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-16">
+<label for="live-demo-id-8">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-16" name="layout">
+  <select id="live-demo-id-8" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

package/docs-dev/demos/data-table/index.html

@@ -5822,178 +5822,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-5">
+<table class="data-table data-table--striped" id="dt-1">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-5-type" rowspan="2">Type</th>
-      <th id="dt-5-group" colspan="2">Group</th>
-      <th id="dt-5-details" colspan="2">Details</th>
-      <th id="dt-5-id" rowspan="2">Id</th>
+      <th id="dt-1-type" rowspan="2">Type</th>
+      <th id="dt-1-group" colspan="2">Group</th>
+      <th id="dt-1-details" colspan="2">Details</th>
+      <th id="dt-1-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-5-group" id="dt-5-primary">Primary</th>
-      <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
-      <th headers="dt-5-details" id="dt-5-before">Before Task</th>
-      <th headers="dt-5-details" id="dt-5-after">After Task</th>
+      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
+      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
+      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
+      <th headers="dt-1-details" id="dt-1-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-6">
+<table class="data-table data-table--large-first" id="dt-2">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-6-type" rowspan="2">Type</th>
-      <th id="dt-6-group" colspan="2">Group</th>
-      <th id="dt-6-details" colspan="2">Details</th>
-      <th id="dt-6-id" rowspan="2">Id</th>
+      <th id="dt-2-type" rowspan="2">Type</th>
+      <th id="dt-2-group" colspan="2">Group</th>
+      <th id="dt-2-details" colspan="2">Details</th>
+      <th id="dt-2-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-6-group" id="dt-6-primary">Primary</th>
-      <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
-      <th headers="dt-6-details" id="dt-6-before">Before Task</th>
-      <th headers="dt-6-details" id="dt-6-after">After Task</th>
+      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
+      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
+      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
+      <th headers="dt-2-details" id="dt-2-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-7">
+<table class="data-table data-table--large-header" id="dt-3">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-7-type" rowspan="2">Type</th>
-      <th id="dt-7-group" colspan="2">Group</th>
-      <th id="dt-7-details" colspan="2">Details</th>
-      <th id="dt-7-id" rowspan="2">Id</th>
+      <th id="dt-3-type" rowspan="2">Type</th>
+      <th id="dt-3-group" colspan="2">Group</th>
+      <th id="dt-3-details" colspan="2">Details</th>
+      <th id="dt-3-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-7-group" id="dt-7-primary">Primary</th>
-      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
-      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
-      <th headers="dt-7-details" id="dt-7-after">After Task</th>
+      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
+      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
+      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
+      <th headers="dt-3-details" id="dt-3-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-8">
+<table class="data-table data-table--no-border" id="dt-4">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-8-type" rowspan="2">Type</th>
-      <th id="dt-8-group" colspan="2">Group</th>
-      <th id="dt-8-details" colspan="2">Details</th>
-      <th id="dt-8-id" rowspan="2">Id</th>
+      <th id="dt-4-type" rowspan="2">Type</th>
+      <th id="dt-4-group" colspan="2">Group</th>
+      <th id="dt-4-details" colspan="2">Details</th>
+      <th id="dt-4-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-8-group" id="dt-8-primary">Primary</th>
-      <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
-      <th headers="dt-8-details" id="dt-8-before">Before Task</th>
-      <th headers="dt-8-details" id="dt-8-after">After Task</th>
+      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
+      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
+      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
+      <th headers="dt-4-details" id="dt-4-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/menu-stack/index.html

@@ -5863,7 +5863,7 @@
     <li class="menu-stack__item">
       <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-1">
-        <label for="cb-1"> Example Item that is very long and will wrap in menu </label>
+        <label for="cb-1">Example Item that is very long and will wrap in menu. Example Item that is very long and will wrap in menu. Example Item that is very long and will wrap in menu</label>
       </div>
     </li>
     <li class="menu-stack__item">
@@ -5910,6 +5910,59 @@
     </li>
   </ul>
 </div>
+<h2 class="h2">Checkbox Menu (compact modifier)</h2>
+<div class="menu-stack menu-stack--compact form-theme">
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-1">
+        <label for="cb-c-1">Example Item that is very long and will wrap in menu. Example Item that is very long and will wrap in menu. Example Item that is very long and will wrap in menu</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-2">
+        <label for="cb-c-2">Example Item 2</label>
+      </div>
+    </li>
+    <li class="menu-stack__item menu-stack__item--separator-before">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-3">
+        <label for="cb-c-3">Example Item 3</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-4">
+        <label for="cb-c-4">Example Item 4</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-5">
+        <label for="cb-c-5">Example Item 5</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-6">
+        <label for="cb-c-6">Example Item 6</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-7">
+        <label for="cb-c-7">Example Item 7</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-c-8">
+        <label for="cb-c-8">Example Item 8</label>
+      </div>
+    </li>
+  </ul>
+</div>
 <h2 class="h2">Checkbox Menu (hide-inputs)</h2>
 <div class="menu-stack form-theme menu-stack--hide-inputs">
   <ul class="menu-stack__list">