@ulu/frontend 0.1.0-beta.113 → 0.1.0-beta.115

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

@@ -5788,11 +5788,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;
             }
@@ -5803,7 +5803,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>
@@ -5819,11 +5819,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;
             }
@@ -5834,7 +5834,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>
         
@@ -5850,11 +5850,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;
             }
@@ -5865,7 +5865,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>
         
@@ -5881,11 +5881,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;
             }
@@ -5896,7 +5896,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>
         
@@ -5912,11 +5912,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;
             }
@@ -5927,7 +5927,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>
@@ -5943,11 +5943,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;
             }
@@ -5958,7 +5958,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>
@@ -5974,11 +5974,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;
             }
@@ -5989,7 +5989,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>
         
@@ -6005,11 +6005,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;
             }
@@ -6020,7 +6020,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>
         
@@ -6038,11 +6038,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;
             }
@@ -6053,7 +6053,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>
@@ -6068,11 +6068,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;
             }
@@ -6083,7 +6083,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>
@@ -6098,11 +6098,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;
             }
@@ -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-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/menu-stack/index.html

@@ -5818,7 +5818,6 @@
 </div>
 <p>Module Settings</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"selectable-input-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"nested-indent"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"rule-style"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"light"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"rule-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
@@ -5847,6 +5846,12 @@
   <span class="pjs-token pjs-string">"link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"compact-link-padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"compact-link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.25em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"compact-selectable-input-width"</span><span class="pjs-token pjs-punctuation">:</span> 2.2em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"compact-selectable-input-top"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"compact-selectable-input-font-size"</span><span class="pjs-token pjs-punctuation">:</span> 0.8em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"selectable-input-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"selectable-input-top"</span> <span class="pjs-token pjs-punctuation">:</span> 0.73em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"selectable-input-font-size"</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-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5854,8 +5859,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 33-63</li>
-<li><strong>Lines (code):</strong> 65-95</li>
+<li><strong>Lines (comments):</strong> 33-68</li>
+<li><strong>Lines (code):</strong> 70-106</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5870,12 +5875,6 @@
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">selectable-input-width</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">3em</td>
-<td style="text-align:left">The width of the checkbox/radio input</td>
-</tr>
-<tr>
 <td style="text-align:left">link-separated-margin</td>
 <td style="text-align:left">Boolean</td>
 <td style="text-align:left">false</td>
@@ -5924,6 +5923,24 @@
 <td style="text-align:left">The links vertical padding when using the compact option.</td>
 </tr>
 <tr>
+<td style="text-align:left">compact-selectable-input-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">2em</td>
+<td style="text-align:left">The width of the checkbox/radio input (when compact modifier)</td>
+</tr>
+<tr>
+<td style="text-align:left">compact-selectable-input-font-size</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Optional compact input font-size</td>
+</tr>
+<tr>
+<td style="text-align:left">compact-selectable-input-top</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Optional y/top for input</td>
+</tr>
+<tr>
 <td style="text-align:left">label-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
@@ -6043,6 +6060,24 @@
 <td style="text-align:left">0.35em</td>
 <td style="text-align:left">Vertical padding for menu-stack toggle.</td>
 </tr>
+<tr>
+<td style="text-align:left">selectable-input-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3em</td>
+<td style="text-align:left">The width of the checkbox/radio input</td>
+</tr>
+<tr>
+<td style="text-align:left">selectable-input-top</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">0.73em</td>
+<td style="text-align:left">To fine tune the y/top value for absolutely positioned input, if you pass null/falsey it will use the padding which isn't always perfect since this is setup to not be centered when wrapping lines in label</td>
+</tr>
+<tr>
+<td style="text-align:left">selectable-input-font-size</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Optional to set a specific font-size on the input</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -6059,8 +6094,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 98-101</li>
-<li><strong>Lines (code):</strong> 103-105</li>
+<li><strong>Lines (comments):</strong> 109-112</li>
+<li><strong>Lines (code):</strong> 114-116</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -6099,8 +6134,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 122-126</li>
-<li><strong>Lines (code):</strong> 128-281</li>
+<li><strong>Lines (comments):</strong> 133-137</li>
+<li><strong>Lines (code):</strong> 139-311</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -6128,8 +6163,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 107-110</li>
-<li><strong>Lines (code):</strong> 112-115</li>
+<li><strong>Lines (comments):</strong> 118-121</li>
+<li><strong>Lines (code):</strong> 123-126</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -5807,7 +5807,7 @@
 <li><strong>Group:</strong> utilities</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 11-14</li>
-<li><strong>Lines (code):</strong> 16-136</li>
+<li><strong>Lines (code):</strong> 16-142</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.113",
+  "version": "0.1.0-beta.115",
   "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/_accordion.scss

@@ -87,7 +87,7 @@ $config: (
   "summary-border-enabled":         true,
   "summary-border-color":           "rule-light",
   "summary-border-width":           1px,
-  "transparent-content-padding":    (0.25em 0),
+  "transparent-content-padding":    (1em 0),
   "borderless-margin-between":      0.5em,
   "active-selector":                ".is-active"
 ) !default;
@@ -231,7 +231,7 @@ $config: (
   #{ $prefix }--transparent {
     border-left: none;
     border-right: none;
-    background-color: transparent;
+    background-color: transparent !important;
     border-radius: 0;
 
     // Transparent always collapses space

package/scss/helpers/_utilities.scss

@@ -39,12 +39,18 @@
   #{ selector.class("full-width") } {
     width: 100%;
   }
+  #{ selector.class("no-min-width") } {
+    min-width: 0;
+  }
   #{ selector.class("flex-basis-full") } {
     flex-basis: 100%;
   }
   #{ selector.class("flex-grow") } {
     flex-grow: 1;
   }
+  #{ selector.class("flex-wrap") } {
+    flex-wrap: wrap;
+  }
   #{ selector.class("flex-shrink") } {
     flex-shrink: 1;
   }