@ulu/frontend 0.1.0-beta.35 → 0.1.0-beta.37

package/docs-dev/changelog/index.html

@@ -5240,12 +5240,51 @@
 <h1 id="change-log" tabindex="-1">Change Log</h1>
 <h2 id="version-0.1.0-beta.35" tabindex="-1">Version 0.1.0-beta.35</h2>
 <ul>
-<li>js/ui/scroll-slider
+<li><strong>scss/</strong>
+<ul>
+<li><strong>components/card</strong>
+<ul>
+<li>add <em>card__aside</em> styling to enable sidebars
+<ul>
+<li>added <em>card__main</em> wrapper to <em>card__title</em> and <em>card__content</em> to separate it from the <em>card__aside</em></li>
+<li>added config options for <em>card__aside</em>
+<ul>
+<li>toggle-aside-rule : toggles rule separating aside from main,</li>
+<li>aside-rule-width</li>
+<li>aside-background-color</li>
+<li>aside-rule-color</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>remove padding from <em>card__image--icon</em>
+<ul>
+<li>This was adding additional space on bottom of horizontal card. Most noticeably when using an aside background color and no footer.</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><strong>elements/rule</strong>
+<ul>
+<li>Added &quot;display: inline-block;&quot; to short rule
+<ul>
+<li>Note: user can use the old style by adding utility class &quot;display-block&quot;</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><strong>js/</strong>
+<ul>
+<li>ui/scroll-slider
 <ul>
 <li>Fix typo that introduced error in last update controls-context to control-context</li>
 </ul>
 </li>
 </ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.34" tabindex="-1">Version 0.1.0-beta.34</h2>
 <ul>
 <li><strong>scss/</strong>

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

@@ -5078,6 +5078,12 @@
                     
                     <li><a href="#active-state">Active State</a>
             		</li>
+
+                    <li><a href="#transparent-button">Transparent Button</a>
+            		</li>
+
+                    <li><a href="#outline-button">Outline Button</a>
+            		</li>
                 </ol>
             </div>
 			</div>
@@ -5097,6 +5103,10 @@
       <h2 id="active-state" tabindex="-1">Active State</h2>
 <p><a href="#" class="button">Default Button</a>
 <a href="#" class="button is-active">Active Button</a></p>
+<h2 id="transparent-button" tabindex="-1">Transparent Button</h2>
+<p><a href="#" class="button button--transparent">Transparent Button</a></p>
+<h2 id="outline-button" tabindex="-1">Outline Button</h2>
+<p><a href="#" class="button button--outline">Outline Button</a></p>
 
     </div>
   </div>

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

@@ -5094,60 +5094,66 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-36" name="title" checked="">
-<label for="live-demo-id-36">
+  <input type="checkbox" id="live-demo-id-33" name="title" checked="">
+<label for="live-demo-id-33">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-37" name="body" checked="">
-<label for="live-demo-id-37">
+  <input type="checkbox" id="live-demo-id-34" name="body" checked="">
+<label for="live-demo-id-34">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-38" name="content" checked="">
-<label for="live-demo-id-38">
+  <input type="checkbox" id="live-demo-id-35" name="content" checked="">
+<label for="live-demo-id-35">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-39" name="footer" checked="">
-<label for="live-demo-id-39">
+  <input type="checkbox" id="live-demo-id-36" name="aside" checked="">
+<label for="live-demo-id-36">
+  Aside
+</label>  
+</div>
+<div class="form-theme__item form-theme__item--checkbox">
+  <input type="checkbox" id="live-demo-id-37" name="footer" checked="">
+<label for="live-demo-id-37">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-40">
+<label for="live-demo-id-38">
   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-40" name="action">
+  <select id="live-demo-id-38" 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-41">
+<label for="live-demo-id-39">
   Media
 </label>  
-  <select id="live-demo-id-41" name="media">
+  <select id="live-demo-id-39" 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-42">
+<label for="live-demo-id-40">
   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-42" name="layout">
+  <select id="live-demo-id-40" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
   </select>
 </div>
   </form>
   <script type="application/json" data-live-demo-options="">
-    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n{% set classes = [\n  \"card\",\n  layout ? \"card--\" ~ layout : \"\",\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      {% if title %}\n        <h5 class=\"card__title\">\n          {# If link don't nest link (no link title) #}\n          {% if isLink %}\n            Card Title\n          {% else %}\n            <a \n              class=\"card__title-link\" \n              href=\"https://www.google.com\" \n              {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n            >\n              Card Title\n            </a>\n          {% endif %}\n        </h5>\n      {% endif %}\n      {% if content %}\n        <div>\n          This is the card content. It can contain around 2-3 sentences.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>"}
+    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n{% set classes = [\n  \"card\",\n  layout ? \"card--\" ~ layout : \"\",\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      <div class=\"card__main\">\n        {% if title %}\n          <h5 class=\"card__title\">\n            {# If link don't nest link (no link title) #}\n            {% if isLink %}\n              Card Title\n            {% else %}\n              <a \n                class=\"card__title-link\" \n                href=\"https://www.google.com\" \n                {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n              >\n                Card Title\n              </a>\n            {% endif %}\n          </h5>\n        {% endif %}\n        {% if content %}\n          <div>\n            This is the card content. It can contain around 2-3 sentences.\n          </div>\n        {% endif %}\n      </div>\n      {% if aside %}\n        <div class=\"card__aside\">\n          This is the aside. attach the rule to this element.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>\n\n"}
   </script>
 </div>
 

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

@@ -5072,14 +5072,7 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				<h2>Jump To:</h2>
-<div class="toc">
-                <ol>
-                    
-                    <li><a href="#card-grid-compact">Card Grid Compact</a>
-            		</li>
-                </ol>
-            </div>
+				
 			</div>
 		
 		<main id="main" class="page__body">
@@ -5099,27 +5092,27 @@
 
     <h2 class="h2">Card Grid Defaults</h2>
 <ul class="card-grid ">
-      <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
@@ -5129,11 +5122,13 @@
   <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>li</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card-grid__item<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
     <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>article</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">data-ulu-proxy-click</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span><span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
       <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__body<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
-        <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>h5</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__title<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
-          <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>a</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__title-link<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">href</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>https://www.google.com<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">data-ulu-proxy-click-source</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span><span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>Card 1<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>a</span><span class="pjs-token pjs-punctuation">></span></span>
-        <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>h5</span><span class="pjs-token pjs-punctuation">></span></span>
-        <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
-          This is a card with an upper image using a containing div with the "card__image" class.
+        <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__main<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
+          <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>h5</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__title<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
+            <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>a</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__title-link<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">href</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>https://www.google.com<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">data-ulu-proxy-click-source</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span><span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>Card 1<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>a</span><span class="pjs-token pjs-punctuation">></span></span>
+          <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>h5</span><span class="pjs-token pjs-punctuation">></span></span>
+          <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
+            This is a card with an upper image using a containing div with the "card__image" class.
+          <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
         <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
       <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
       <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>card__image<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
@@ -5154,56 +5149,57 @@
     // Second Card Content
   <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>li</span><span class="pjs-token pjs-punctuation">></span></span>
 <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>ul</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
-<h2 id="card-grid-compact" tabindex="-1">Card Grid Compact</h2>
+<h2 class="h2">Card Grid Compact</h2>
 <ul class="card-grid card-grid--compact">
-      <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li>
     </ul>
+<h2 class="h2">Horizontal Card Grid</h2>
 <ul class="card-grid ">
-      <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
@@ -5228,27 +5224,27 @@
 </div><p></p>
   </header>
   <ul class="card-grid list-grid__rows">
-      <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+      <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+    </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
       <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
     </h5><div>
       This is the card content. It can contain around 2-3 sentences.
-    </div></div><div class="card__image ">
+    </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>

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

@@ -5131,46 +5131,179 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-6">
+<h2 class="h2">Striped Table</h2>
+<table class="data-table data-table--striped" id="dt-17">
   <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-17-type" rowspan="2">Type</th>
+      <th id="dt-17-group" colspan="2">Group</th>
+      <th id="dt-17-details" colspan="2">Details</th>
+      <th id="dt-17-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-17-group" id="dt-17-primary">Primary</th>
+      <th headers="dt-17-group" id="dt-17-secondary">Secondary</th>
+      <th headers="dt-17-details" id="dt-17-before">Before Task</th>
+      <th headers="dt-17-details" id="dt-17-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-17-type dt-17-r1" id="dt-17-r1">Default</th>
+      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-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-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-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-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-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-18">
+  <caption>
+    This Is The Table's Caption
+  </caption>
+  <thead>
+    <tr>
+      <th id="dt-18-type" rowspan="2">Type</th>
+      <th id="dt-18-group" colspan="2">Group</th>
+      <th id="dt-18-details" colspan="2">Details</th>
+      <th id="dt-18-id" rowspan="2">Id</th>
+    </tr>
+    <tr>
+      <th headers="dt-18-group" id="dt-18-primary">Primary</th>
+      <th headers="dt-18-group" id="dt-18-secondary">Secondary</th>
+      <th headers="dt-18-details" id="dt-18-before">Before Task</th>
+      <th headers="dt-18-details" id="dt-18-after">After Task</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th rowspan="3" headers="dt-18-type dt-18-r1" id="dt-18-r1">Default</th>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-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-19">
+  <caption>
+    This Is The Table's Caption
+  </caption>
+  <thead>
+    <tr>
+      <th id="dt-19-type" rowspan="2">Type</th>
+      <th id="dt-19-group" colspan="2">Group</th>
+      <th id="dt-19-details" colspan="2">Details</th>
+      <th id="dt-19-id" rowspan="2">Id</th>
+    </tr>
+    <tr>
+      <th headers="dt-19-group" id="dt-19-primary">Primary</th>
+      <th headers="dt-19-group" id="dt-19-secondary">Secondary</th>
+      <th headers="dt-19-details" id="dt-19-before">Before Task</th>
+      <th headers="dt-19-details" id="dt-19-after">After Task</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th rowspan="3" headers="dt-19-type dt-19-r1" id="dt-19-r1">Default</th>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-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-20">
+  <caption>
+    This Is The Table's Caption
+  </caption>
+  <thead>
+    <tr>
+      <th id="dt-20-type" rowspan="2">Type</th>
+      <th id="dt-20-group" colspan="2">Group</th>
+      <th id="dt-20-details" colspan="2">Details</th>
+      <th id="dt-20-id" rowspan="2">Id</th>
+    </tr>
+    <tr>
+      <th headers="dt-20-group" id="dt-20-primary">Primary</th>
+      <th headers="dt-20-group" id="dt-20-secondary">Secondary</th>
+      <th headers="dt-20-details" id="dt-20-before">Before Task</th>
+      <th headers="dt-20-details" id="dt-20-after">After Task</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th rowspan="3" headers="dt-20-type dt-20-r1" id="dt-20-r1">Default</th>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
+    </tr>
+    <tr>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5105,6 +5105,21 @@
     </li>
   </ul>
 </div>
+<h2 class="h2">Compact Example</h2>
+<div class="menu-stack menu-stack--compact">
+  <h3 class="menu-stack__label">Example Label</h3>
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <a class="menu-stack__link" href="#">This is Example Menu Item</a>
+    </li>
+    <li class="menu-stack__item">
+      <a class="menu-stack__link is-active" href="#">This is Example Menu Item with a really long title. It even has another sentence for checking line wrapping</a>
+    </li>
+    <li class="menu-stack__item menu-stack__item--separator-before">
+      <a class="menu-stack__link" href="#">This is Example Menu Item</a>
+    </li>
+  </ul>
+</div>
 <h2 class="h2">Hanging with aria-current test</h2>
 <div class="menu-stack menu-stack--hanging">
   <h3 class="menu-stack__label">Example Label</h3>