@ulu/frontend 0.1.0-beta.32 → 0.1.0-beta.33

package/docs-dev/sass/helpers/display/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/index/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/print/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/typography/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/units/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/helpers/utilities/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/docs-dev/sass/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2729,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>

package/js/ui/tooltip.js

@@ -11,7 +11,7 @@ import { newId, ensureId } from "../utils/id.js";
 
 const attrs = {
   trigger: "data-ulu-tooltip",
-  init: "data-ulu-init",
+  init: "data-ulu-tooltip-init",
   body: "data-ulu-tooltip-display-body",
   arrow: "data-ulu-tooltip-arrow"
 };
@@ -41,6 +41,7 @@ export function setupTrigger(trigger) {
   if (typeof passed === "string") {
     options.content = passed;
   }
+  trigger.setAttribute(attrs.init, "");
   return new Tooltip({ trigger }, options);
 }
 

package/package.json

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

package/scss/_element.scss

@@ -69,6 +69,8 @@ $config: (
   "ul-list-style-type":               disc,
   "ul-list-style-type-2":             circle,
   "ul-list-style-type-3":             square,
+  "cap-color" :                       "accent",
+  "cap-size" :                        5px
 ) !default;
 
 /// Rule style map, redefine defaults or add to
@@ -290,4 +292,93 @@ $rule-margins: (
     white-space: normal;
     width: auto;
   }
+}
+
+
+/// Layout utility to add a colored bar (cap) to an element's edge, positioned over the element and its border
+/// - You need to set position (relative, fixed) on parent
+/// @param {String} $side The side to place the cap (top, bottom, left, right)
+/// @param {Map} $options Options for the appearance of the cap
+/// @param {Color} $options.color [$config.cap-color] The color for the end cap
+/// @param {Number} $options.size [$config.cap-size] The width/height of the cap
+/// @param {Number} $options.offset [0] A positive number of the amount the cap should extend outside the box (to account for border-width) 
+/// @param {Number} $options.border-radius [null] An optional border-radius to apply to the outward-facing edges of the cap (used to match parent)
+/// @param {Boolean} $before [true] Whether or not to use the ::before element (if not uses :after)
+
+@mixin cap(
+  $side,
+  $options: (),
+  $before: true,
+) {
+  $defaults: (
+    "color" : get("cap-color"), 
+    "size" : get("cap-size"), 
+    "offset" : 0, 
+    "color-hover" : null,
+    "border-radius" : null,
+    "padding-adjust" : null,
+  );
+  $config: map.merge($defaults, $options);
+  $element: if($before, "::before", "::after");
+
+  &#{ $element } {
+    content: "";
+    position: absolute;
+    display: block;
+  }
+
+  @include cap-appearance($side, $config, $before);
+}
+
+
+
+/// Provides the appearance styles for a given cap
+/// - If an option is not provided it won't be output
+/// - This is used to update the caps styling (states, modifiers, etc)
+/// @param {String} $side The side to place the cap (top, bottom, left, right)
+/// @param {Map} $options Options for the appearance of the cap (see options from element.cap)
+/// @param {Boolean} $before Whether or not to use the ::before element (if not uses :after)
+
+@mixin cap-appearance(
+  $side,
+  $options: (),
+  $before: true
+) {
+  $element: if($before, "::before", "::after");
+  $size: map.get($options, "size");
+  $offset: map.get($options, "offset");
+  $border-radius: map.get($options, "border-radius");
+  $padding-adjust: map.get($options, "padding-adjust");
+  
+  $end: $side == "top" or $side == "bottom";
+  $position: if($offset, 0 - $offset, null);
+
+  @if ($padding-adjust and $size) {
+    padding-#{ $side }: calc($padding-adjust + $size);
+  }
+
+  &#{ $element } {
+    background-color: color.get(map.get($options, "color"));
+    #{ $side }: $position;
+
+    @if $end {
+      left: $position;
+      right: $position;
+      height: $size;
+    } @else {
+      top: $position;
+      bottom: $position;
+      width: $size;
+    }
+    
+    @if $border-radius {
+      @if $end {
+        border-#{ $side }-left-radius: $border-radius;
+        border-#{ $side }-right-radius: $border-radius;
+      } @else {
+        border-top-#{ $side }-radius: $border-radius;
+        border-bottom-#{ $side }-radius: $border-radius;
+      }
+    }
+  }
 }

package/scss/_layout.scss

@@ -7,6 +7,7 @@
 @use "sass:meta";
 @use "utils";
 @use "breakpoint";
+@use "color";
 
 /// Module Settings
 /// @type Map
@@ -264,6 +265,7 @@ $containers: (
 /// Layout utility for absolute (zero on all sides)
 /// - Probably helpful for gzip if we use this when these exact styles are needed
 ///   so they are identical for compression
+/// @param {Boolean} $set-size [false] Whether or not to use sizes to fill the space (height/width 100%) versus setting bottom and right to 0)
 @mixin absolute-fill($set-size: false) {
   position: absolute;
   top: 0;
@@ -275,4 +277,4 @@ $containers: (
     width: 100%;
     height: 100%;
   }
-}
+}

package/scss/_utils.scss

@@ -161,6 +161,16 @@ $config: (
   @return $number + string.unquote($unit);
 }
 
+/// Checks if two numbers are the same unit
+/// @param {Number} $number 
+/// @param {String} $other-number 
+/// @return {Boolean} Whether they have the same unit type
+// Could be made into multiple arguments in future if needed 
+
+@function units-match($number, $other-number) {
+  @return math.unit($number) == math.unit($other-number);
+}
+
 /// Reusable merge method 
 /// @param {Map} $original Source map 
 /// @param {Map} $changes Changes to merge into source map
@@ -661,4 +671,36 @@ $config: (
 
 @function is-odd($number) {
   @return not is-even($number);
+}
+
+/// Always returns a map
+/// @param {*} $value The value to check if is map
+/// @return {Map} The $value if it was a map, else empty map
+
+@function ensure-map($value) {
+  @return if(is-map($value), $value, ());
+}
+
+/// Returns true if edge passed is an end (top/bottom)
+/// @param {String} $edge The edge string to test
+/// @return {Boolean} Whether the edge was an end (versus side/x-axis)
+/// @throw If $edge is not a valid value (not top/bottom/left/right)
+
+@function is-end($edge) {
+  @if ($edge == "top" or $edge == "bottom") {
+    @return true;
+  } @else if ($edge == "left" or $edge == "right") {
+    @return false;
+  } @else {
+    @error "Expected side to be top/bottom/left/right, got #{ $edge }";
+  }
+}
+
+/// Returns true if edge passed is an side (left/right)
+/// @param {String} $edge The edge string to test
+/// @return {Boolean} Whether the edge was an side (versus end/y-axis)
+/// @throw If $edge is not a valid value (not top/bottom/left/right)
+
+@function is-side($edge) {
+  @return not is-end($edge);
 }