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

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

@@ -5844,60 +5844,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

@@ -5882,178 +5882,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/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-12 {
-            animation-name: ulu-progress-circle-pie-12;
+          #ulu-progress-circle-pie-1 {
+            animation-name: ulu-progress-circle-pie-1;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-12  {
+          @keyframes ulu-progress-circle-pie-1  {
             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-12" class="progress-circle__chart-pie" 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 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-13 {
-            animation-name: ulu-progress-circle-pie-13;
+          #ulu-progress-circle-pie-2 {
+            animation-name: ulu-progress-circle-pie-2;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-13  {
+          @keyframes ulu-progress-circle-pie-2  {
             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-13" class="progress-circle__chart-pie" 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 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-14 {
-            animation-name: ulu-progress-circle-pie-14;
+          #ulu-progress-circle-pie-3 {
+            animation-name: ulu-progress-circle-pie-3;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-14  {
+          @keyframes ulu-progress-circle-pie-3  {
             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-14" class="progress-circle__chart-pie" 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 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-15 {
-            animation-name: ulu-progress-circle-pie-15;
+          #ulu-progress-circle-pie-4 {
+            animation-name: ulu-progress-circle-pie-4;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-15  {
+          @keyframes ulu-progress-circle-pie-4  {
             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-15" class="progress-circle__chart-pie" 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 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-16 {
-            animation-name: ulu-progress-circle-pie-16;
+          #ulu-progress-circle-pie-5 {
+            animation-name: ulu-progress-circle-pie-5;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-16  {
+          @keyframes ulu-progress-circle-pie-5  {
             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-16" class="progress-circle__chart-pie" 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 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-17 {
-            animation-name: ulu-progress-circle-pie-17;
+          #ulu-progress-circle-pie-6 {
+            animation-name: ulu-progress-circle-pie-6;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-17  {
+          @keyframes ulu-progress-circle-pie-6  {
             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-17" class="progress-circle__chart-pie" 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 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-18 {
-            animation-name: ulu-progress-circle-pie-18;
+          #ulu-progress-circle-pie-7 {
+            animation-name: ulu-progress-circle-pie-7;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-18  {
+          @keyframes ulu-progress-circle-pie-7  {
             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-18" class="progress-circle__chart-pie" 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 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-19 {
-            animation-name: ulu-progress-circle-pie-19;
+          #ulu-progress-circle-pie-8 {
+            animation-name: ulu-progress-circle-pie-8;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-19  {
+          @keyframes ulu-progress-circle-pie-8  {
             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-19" class="progress-circle__chart-pie" 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 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-20 {
-            animation-name: ulu-progress-circle-pie-20;
+          #ulu-progress-circle-pie-9 {
+            animation-name: ulu-progress-circle-pie-9;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-20  {
+          @keyframes ulu-progress-circle-pie-9  {
             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-20" class="progress-circle__chart-pie" 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 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-21 {
-            animation-name: ulu-progress-circle-pie-21;
+          #ulu-progress-circle-pie-10 {
+            animation-name: ulu-progress-circle-pie-10;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-21  {
+          @keyframes ulu-progress-circle-pie-10  {
             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-21" class="progress-circle__chart-pie" 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 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-22 {
-            animation-name: ulu-progress-circle-pie-22;
+          #ulu-progress-circle-pie-11 {
+            animation-name: ulu-progress-circle-pie-11;
             animation-fill-mode: forwards;
           }
-          @keyframes ulu-progress-circle-pie-22  {
+          @keyframes ulu-progress-circle-pie-11  {
             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-22" class="progress-circle__chart-pie" 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 class="progress-circle__chart-mask" cx="16" cy="16"></circle>
         </svg>
         <strong class="progress-circle__chart-value">100%</strong>