@ulu/frontend 0.1.0-beta.3 → 0.1.0-beta.5

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 
-## Version 0.1.0-beta.3
+## Version 0.1.0-beta.5
+
+- scss/components/nav-strip - Adjust rule style so the rule is not a border on parent (so child can overlap if desired), Adjust all colors to run through color.get(), Convert to gap instead of margins
+
+## Version 0.1.0-beta.3 - 0.1.0-beta.4
 
 - scss/components/tabs - Add breakpoint to vertical tabs (to go to horizontal)
 

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

@@ -4638,46 +4638,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-18">
+<table class="data-table" id="dt-62">
   <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>
+      <th id="dt-62-type" rowspan="2">Type</th>
+      <th id="dt-62-group" colspan="2">Group</th>
+      <th id="dt-62-details" colspan="2">Details</th>
+      <th id="dt-62-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>
+      <th headers="dt-62-group" id="dt-62-primary">Primary</th>
+      <th headers="dt-62-group" id="dt-62-secondary">Secondary</th>
+      <th headers="dt-62-details" id="dt-62-before">Before Task</th>
+      <th headers="dt-62-details" id="dt-62-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>
+      <th rowspan="3" headers="dt-62-type dt-62-r1" id="dt-62-r1">Default</th>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-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>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-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>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/nav-strip/index.html

@@ -4601,27 +4601,19 @@
 <div class="nav-strip">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4631,23 +4623,19 @@
 <div class="nav-strip nav-strip--auto">
   <ul>
   <li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 1
         </a>
       </li><li>
-        <a href="#" class="
-          is-active">
+        <a href="#" class="is-active">
           Link Number 2
         </a>
       </li><li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 3
         </a>
       </li><li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 4
         </a>
       </li>
@@ -4657,27 +4645,19 @@
 <div class="nav-strip nav-strip--center">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4687,27 +4667,19 @@
 <div class="nav-strip nav-strip--right">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4717,27 +4689,19 @@
 <div class="nav-strip nav-strip--rule">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>

package/docs-dev/sass/components/nav-strip/index.html

@@ -4650,11 +4650,11 @@ current page or section, is visually emphasized with an underline.</p>
   <span class="pjs-token pjs-string">"padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 0.3em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"padding-y-ruled"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"nowrap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"rule-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"rule-offset"</span> <span class="pjs-token pjs-punctuation">:</span> -3px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-offset"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"underline-color"</span> <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"underline-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> gray<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"underline-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"selected"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"underline-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"underline-size"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
@@ -4831,7 +4831,7 @@ current page or section, is visually emphasized with an underline.</p>
 <li><strong>Group:</strong> nav-strip</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 72-74</li>
-<li><strong>Lines (code):</strong> 76-148</li>
+<li><strong>Lines (code):</strong> 76-153</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/tabs/index.html

@@ -4871,7 +4871,7 @@
 <li><strong>Group:</strong> tabs</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 101-103</li>
-<li><strong>Lines (code):</strong> 105-244</li>
+<li><strong>Lines (code):</strong> 105-245</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.3", 
+  "version": "0.1.0-beta.5", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_nav-strip.scss

@@ -42,11 +42,11 @@ $config: (
   "padding-y" : 0.3em,
   "padding-y-ruled" : null,
   "nowrap" : true,
-  "rule-color" : "rule",
-  "rule-offset" : -3px,
+  "rule-color" : "rule-light",
+  "rule-offset" : 0,
   "rule-size" : 3px,
-  "underline-color" : orange,
-  "underline-color-hover" : gray,
+  "underline-color" : "selected",
+  "underline-color-hover" : "rule",
   "underline-size" : 3px,
 ) !default;
 
@@ -83,24 +83,22 @@ $config: (
   #{ $prefix }__list,
   #{ $prefix }--auto ul {
     display: flex;
+    overflow-x: auto;
     line-height: typography.get("line-height-dense");
+    gap: get("margin-between");
   }
   #{ $prefix }__item,
   #{ $prefix }--auto li {
-    margin-right: get("margin-between");
     // layout flex since items inside may not be the same height
     display: flex;
     align-items: flex-end;
-    &:last-child {
-      margin-right: 0;
-    }
   }
   
   #{ $prefix }__link,
   #{ $prefix }--auto li > a,
   #{ $prefix }--auto li > button {
     display: block;
-    color: get("color");
+    color: color.get(get("color"));
     padding: get("padding-y") get("padding-x");
     border-top: get("underline-size") solid transparent;
     border-bottom: get("underline-size") solid transparent;
@@ -110,12 +108,12 @@ $config: (
     }
     &:hover,
     &:focus {
-      border-bottom-color: get("underline-color-hover");
-      color: get("color-hover");
+      border-bottom-color: color.get(get("underline-color-hover"));
+      color: color.get(get("color-hover"));
     }
     #{ get("activeSelector") } {
-      border-bottom-color: get("underline-color");
-      color: get("color-active");
+      border-bottom-color: color.get(get("underline-color"));
+      color: color.get(get("color-active"));
     }
   }
   
@@ -133,13 +131,20 @@ $config: (
     }
   }
   #{ $prefix }--rule {
-    #{ $prefix }__list,
-    &#{ $prefix }--auto ul {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
       border-bottom: get("rule-size") solid color.get(get("rule-color"));
     }
     #{ $prefix }__link,
     &#{ $prefix }--auto li > a,
     &#{ $prefix }--auto li > button {
+      position: relative;
+      z-index: 2;
       margin-bottom: get("rule-offset");
       padding-top: get("padding-y-ruled");
       padding-bottom: get("padding-y-ruled");

package/scss/components/_tabs.scss

@@ -183,6 +183,7 @@ $config: (
         gap: get("vertical-tab-gap");
         border-right: get("tablist-divider");
         border-right-width: get("vertical-divider-width");
+        border-bottom: none;
         grid-column: 1;
       }
       [role="tab"] {