@ulu/frontend 0.1.0-beta.118 → 0.1.0-beta.119

package/docs-dev/demos/progress-circle/index.html

@@ -5848,11 +5848,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-1 {
-            animation-name: ulu-progress-circle-pie-1;
+          #ulu-progress-circle-pie-12 {
+            animation-name: ulu-progress-circle-pie-12;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-1  {
+          @keyframes ulu-progress-circle-pie-12  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -5863,7 +5863,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-1" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-12" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">65%</strong>
@@ -5879,11 +5879,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-2 {
-            animation-name: ulu-progress-circle-pie-2;
+          #ulu-progress-circle-pie-13 {
+            animation-name: ulu-progress-circle-pie-13;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-2  {
+          @keyframes ulu-progress-circle-pie-13  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -5894,7 +5894,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-2" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-13" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         
@@ -5910,11 +5910,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-3 {
-            animation-name: ulu-progress-circle-pie-3;
+          #ulu-progress-circle-pie-14 {
+            animation-name: ulu-progress-circle-pie-14;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-3  {
+          @keyframes ulu-progress-circle-pie-14  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -5925,7 +5925,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-3" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-14" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         
@@ -5941,11 +5941,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-4 {
-            animation-name: ulu-progress-circle-pie-4;
+          #ulu-progress-circle-pie-15 {
+            animation-name: ulu-progress-circle-pie-15;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-4  {
+          @keyframes ulu-progress-circle-pie-15  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -5956,7 +5956,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-4" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-15" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         
@@ -5972,11 +5972,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-5 {
-            animation-name: ulu-progress-circle-pie-5;
+          #ulu-progress-circle-pie-16 {
+            animation-name: ulu-progress-circle-pie-16;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-5  {
+          @keyframes ulu-progress-circle-pie-16  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -5987,7 +5987,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-5" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-16" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">65%</strong>
@@ -6003,11 +6003,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-6 {
-            animation-name: ulu-progress-circle-pie-6;
+          #ulu-progress-circle-pie-17 {
+            animation-name: ulu-progress-circle-pie-17;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-6  {
+          @keyframes ulu-progress-circle-pie-17  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6018,7 +6018,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-6" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-17" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">65%</strong>
@@ -6034,11 +6034,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-7 {
-            animation-name: ulu-progress-circle-pie-7;
+          #ulu-progress-circle-pie-18 {
+            animation-name: ulu-progress-circle-pie-18;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-7  {
+          @keyframes ulu-progress-circle-pie-18  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6049,7 +6049,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-7" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-18" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         
@@ -6065,11 +6065,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-8 {
-            animation-name: ulu-progress-circle-pie-8;
+          #ulu-progress-circle-pie-19 {
+            animation-name: ulu-progress-circle-pie-19;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-8  {
+          @keyframes ulu-progress-circle-pie-19  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6080,7 +6080,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-8" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-19" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         
@@ -6098,11 +6098,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-9 {
-            animation-name: ulu-progress-circle-pie-9;
+          #ulu-progress-circle-pie-20 {
+            animation-name: ulu-progress-circle-pie-20;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-9  {
+          @keyframes ulu-progress-circle-pie-20  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6113,7 +6113,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-9" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-20" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">25%</strong>
@@ -6128,11 +6128,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-10 {
-            animation-name: ulu-progress-circle-pie-10;
+          #ulu-progress-circle-pie-21 {
+            animation-name: ulu-progress-circle-pie-21;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-10  {
+          @keyframes ulu-progress-circle-pie-21  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6143,7 +6143,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-10" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-21" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">75%</strong>
@@ -6158,11 +6158,11 @@
       <strong class="hidden-visually">Course Progress</strong>
       <div class="progress-circle__chart">
         <style type="text/css">
-          #ulu-progress-circle-pie-11 {
-            animation-name: ulu-progress-circle-pie-11;
+          #ulu-progress-circle-pie-22 {
+            animation-name: ulu-progress-circle-pie-22;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-11  {
+          @keyframes ulu-progress-circle-pie-22  {
             from {
               stroke-dasharray: 0 100;
             }
@@ -6173,7 +6173,7 @@
         </style>
         <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
           <circle class="progress-circle__chart-track" r="16" cx="16" cy="16"></circle>
-          <circle id="ulu-progress-circle-pie-11" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
+          <circle id="ulu-progress-circle-pie-22" class="progress-circle__chart-pie" r="16" cx="16" cy="16"></circle>
           <circle class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">100%</strong>

package/docs-dev/sass/components/definition-list/index.html

@@ -6036,7 +6036,7 @@
 <li><strong>Group:</strong> definition-list</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 81-84</li>
-<li><strong>Lines (code):</strong> 86-170</li>
+<li><strong>Lines (code):</strong> 86-178</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.118",
+  "version": "0.1.0-beta.119",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_card.scss

@@ -151,49 +151,6 @@ $config: (
   @return utils.require-map-get($config, $name, "card [config]");
 }
 
-/// Mixin styles for card when it has proxy click enabled and is being interacted with (hover/focus)
-/// @param {Boolean} $hover [false] Apply styles when the card is being hover/focused within, else applies styles to rest state of a clickable card (one who has a proxy click setup)
-/// Prints component styles
-/// @example scss
-///  @include ulu.component-card-styles();
-
-@mixin when-clickable($hover: false) {
-  $prefix: selector.class("card");
-  // When proxy click enabled
-  @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
-    #{ $prefix }#{ get("clickable-card-selector") },
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  // Without proxy click (only if interactive)
-  } @else {
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  } 
-}
-
-
-@mixin shared-transition-styles() {
-  transition-duration: get("transition-duration");
-  transition-timing-function: get("transition-timing-function");
-}
 /// Prints component styles
 /// @demo card
 /// @example scss
@@ -215,8 +172,6 @@ $config: (
     flex-direction: column;
     justify-content: flex-end;
     max-width: get("max-width");
-    // Not absolutely necessary, incase we want to remove in future
-    overflow: hidden; 
 
     // Border is on pseudo so that it's on top of image/etc
     &::after {
@@ -249,7 +204,8 @@ $config: (
     #{ $prefix },
     #{ $prefix }::after,
     #{ $prefix }__title {
-      @include shared-transition-styles();
+      transition-duration: get("transition-duration");
+      transition-timing-function: get("transition-timing-function");
       transition-property: get("transition-properties");
     }
   } 
@@ -558,6 +514,47 @@ $config: (
   }
 }
 
+
+/// Mixin styles for card when it has proxy click enabled and is being interacted with (hover/focus)
+/// @param {Boolean} $hover [false] Apply styles when the card is being hover/focused within, else applies styles to rest state of a clickable card (one who has a proxy click setup)
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-card-styles();
+
+@mixin when-clickable($hover: false) {
+  $prefix: selector.class("card");
+  // When proxy click enabled
+  @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
+    #{ $prefix }#{ get("clickable-card-selector") },
+    a#{ $prefix },
+    button#{ $prefix },
+    #{ $prefix }--clickable {
+      @if ($hover) {
+        #{ get("clickable-card-interact-selector") } {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+  // Without proxy click (only if interactive)
+  } @else {
+    a#{ $prefix },
+    button#{ $prefix },
+    #{ $prefix }--clickable {
+      @if ($hover) {
+        #{ get("clickable-card-interact-selector") } {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+  } 
+}
+
+
+// Internal mixin for DRY
 @mixin -card-horizontal-no-image-styles() {
   $prefix: selector.class("card");
   grid-template-columns: 1fr;
@@ -565,30 +562,4 @@ $config: (
   #{ $prefix }__footer {
     grid-column: 1 / 2;
   }
-}
-
-// OLD CSS FOR HORIZONTAL
-  // #{ $prefix }--horizontal {
-  //   display: flex;
-  //   flex-direction: row;
-  //   justify-content: center;
-  //   align-items: center;
-  //   #{ $prefix }__image {
-  //     align-self: stretch;
-  //     border-top-right-radius: 0;
-  //     border-bottom-left-radius: get("border-radius");
-  //     width: get("horizontal-image-width");
-  //     flex: 0 0 get("horizontal-image-width");
-  //     // max-width: 30rem;
-  //     // min-height: 28rem;
-  //     // padding-top: 0;
-  //   }
-  //   #{ $prefix }__body {
-  //     display: flex;
-  //     flex: 1;
-  //     flex-direction: column;
-  //     justify-content: center;
-  //     max-width: get("horizontal-body-max-width");
-  //   }
-  // }
-
+}