@ulu/frontend 0.1.0-beta.35 → 0.1.0-beta.36

package/docs-dev/demos/overlay-section/index.html

@@ -5090,7 +5090,8 @@
 
   <hr class="rule rule--light rule--margin-large">
 
-    <div class="overlay-section  overlay-section--left overlay-section--center">
+    <h2 class="h2">Default Overlay Section (Center)</h2>
+<div class="overlay-section">
   <div class="overlay-section__content crop-margins wysiwyg">
     <h2 class="h2">
       Featured Insight
@@ -5104,11 +5105,80 @@
   </div>
   <div class="overlay-section__background">
     <img src="/frontend/assets/placeholder/image-1.jpg" alt="Paris Street">
-  
+  </div>
+</div>
+<h2 class="h2">Top Overlay Section</h2>
+<div class="overlay-section overlay-section--top">
+  <div class="overlay-section__content crop-margins wysiwyg">
+    <h2 class="h2">
+      Featured Insight
+    </h2>
+    <p class="type-large">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur ullamcorper lobortis. Donec sollicitudin ligula lacus, sed tempor sapien rhoncus at. Ut sodales urna ex, quis efficitur risus porttitor nec. Mauris pulvinar eu sapien a euismod. Aliquam mattis dui augue, at venenatis elit porta ac.
+    </p>
+    <p>
+      <a class="button" href="#" rel="nofollow">Read More</a>
+    </p>
+  </div>
+  <div class="overlay-section__background">
+    <img src="/frontend/assets/placeholder/image-1.jpg" alt="Paris Street">
+  </div>
+</div>
+<h2 class="h2">Bottom Overlay Section</h2>
+<div class="overlay-section overlay-section--bottom">
+  <div class="overlay-section__content crop-margins wysiwyg">
+    <h2 class="h2">
+      Featured Insight
+    </h2>
+    <p class="type-large">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur ullamcorper lobortis. Donec sollicitudin ligula lacus, sed tempor sapien rhoncus at. Ut sodales urna ex, quis efficitur risus porttitor nec. Mauris pulvinar eu sapien a euismod. Aliquam mattis dui augue, at venenatis elit porta ac.
+    </p>
+    <p>
+      <a class="button" href="#" rel="nofollow">Read More</a>
+    </p>
+  </div>
+  <div class="overlay-section__background">
+    <img src="/frontend/assets/placeholder/image-1.jpg" alt="Paris Street">
+  </div>
 </div>
+<h2 class="h2">Left Overlay Section</h2>
+<div class="overlay-section overlay-section--left">
+  <div class="overlay-section__content crop-margins wysiwyg">
+    <h2 class="h2">
+      Featured Insight
+    </h2>
+    <p class="type-large">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur ullamcorper lobortis. Donec sollicitudin ligula lacus, sed tempor sapien rhoncus at. Ut sodales urna ex, quis efficitur risus porttitor nec. Mauris pulvinar eu sapien a euismod. Aliquam mattis dui augue, at venenatis elit porta ac.
+    </p>
+    <p>
+      <a class="button" href="#" rel="nofollow">Read More</a>
+    </p>
+  </div>
+  <div class="overlay-section__background">
+    <img src="/frontend/assets/placeholder/image-1.jpg" alt="Paris Street">
+  </div>
+</div>
+<h2 class="h2">Right Overlay Section</h2>
+<div class="overlay-section overlay-section--right">
+  <div class="overlay-section__content crop-margins wysiwyg">
+    <h2 class="h2">
+      Featured Insight
+    </h2>
+    <p class="type-large">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur ullamcorper lobortis. Donec sollicitudin ligula lacus, sed tempor sapien rhoncus at. Ut sodales urna ex, quis efficitur risus porttitor nec. Mauris pulvinar eu sapien a euismod. Aliquam mattis dui augue, at venenatis elit porta ac.
+    </p>
+    <p>
+      <a class="button" href="#" rel="nofollow">Read More</a>
+    </p>
+  </div>
+  <div class="overlay-section__background">
+    <img src="/frontend/assets/placeholder/image-1.jpg" alt="Paris Street">
+  </div>
+</div>
+
   </div>
 
-		</div></main>
+		</main>
 		<footer></footer>
 		
 

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

@@ -5204,6 +5204,94 @@
     </div>
   </div>
 </div>
+
+<h2 class="h2">Modifiers</h2>
+
+
+  <button class="button" type="button" data-ulu-popover-trigger="">
+    <span>Show Fixed Popover</span>
+    <span class="button__icon">
+      <span data-feather="fas fa-chevron-down"></span>
+    </span>
+  </button> 
+  <div class="popover popover--fixed" data-ulu-popover-content="">
+    <div class="popover__inner">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
+    </div>
+    <div class="popover__footer">Popover Footer</div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+  
+
+
+  <button class="button" type="button" data-ulu-popover-trigger="">
+    <span>Show No-padding Popover</span>
+    <span class="button__icon">
+      <span data-feather="fas fa-chevron-down"></span>
+    </span>
+  </button> 
+  <div class="popover popover--no-padding" data-ulu-popover-content="">
+    <div class="popover__inner">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
+    </div>
+    <div class="popover__footer">Popover Footer</div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+  
+
+
+  <button class="button" type="button" data-ulu-popover-trigger="">
+    <span>Show Large Popover</span>
+    <span class="button__icon">
+      <span data-feather="fas fa-chevron-down"></span>
+    </span>
+  </button> 
+  <div class="popover popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
+    </div>
+    <div class="popover__footer">Popover Footer</div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+  
+
+
+  <button class="button" type="button" data-ulu-popover-trigger="">
+    <span>Show Large-x Popover</span>
+    <span class="button__icon">
+      <span data-feather="fas fa-chevron-down"></span>
+    </span>
+  </button> 
+  <div class="popover popover--large-x" data-ulu-popover-content="">
+    <div class="popover__inner">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
+    </div>
+    <div class="popover__footer">Popover Footer</div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+  
+
+<h3 class="h3 margin-top">Prints Modifier</h3>
+
+<p>Note that the print modifier will show the hidden popover content when printing the page.</p>
+
+
+  <button class="button" type="button" data-ulu-popover-trigger="">
+    <span>Show Prints Popover</span>
+    <span class="button__icon">
+      <span data-feather="fas fa-chevron-down"></span>
+    </span>
+  </button> 
+  <div class="popover popover--prints" data-ulu-popover-content="">
+    <div class="popover__inner">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.
+    </div>
+    <div class="popover__footer">Popover Footer</div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+  
+
+
   </div>
 
 		</main>

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

@@ -5144,17 +5144,29 @@
 <li>For the rule styles mixin, the class will be &quot;rule--$key&quot;. For example, &quot;rule--light&quot;. For the rule margins mixin, the class will be &quot;rule--margin-$key&quot;. For example, &quot;rule--margin-large&quot;. &quot;Default&quot; refers to the base &quot;rule&quot; class, <strong>not</strong> the &quot;rule-default&quot; class.</li>
 </ul>
 <h3 id="examples" tabindex="-1">Examples</h3>
-<p>Base rule</p>
+<div>
+Base rule
+</div>
 <div class="rule"></div>
+<div>
 Short rule
+</div>
 <div class="rule rule--short"></div>
+<div>
 Large Rule
+</div>
 <div class="rule rule--large"></div>
+<div>
 Small Margin Rule
+</div>
 <div class="rule rule--margin-small"></div>
+<div>
 Large Margin Rule
+</div>
 <div class="rule rule--margin-large"></div>
+<div>
 Light Rule
+</div>
 <div class="rule rule--light"></div>
     </div>
   </div>

package/docs-dev/demos/scroll-slider/index.html

@@ -82,66 +82,66 @@ Scroll-Slider
  
 </li><p></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
 </div></article>
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
 </div></article>
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
 </div></article>
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 4 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
 </div></article>
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 5 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
 </div></article>
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
-<article class="card " data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
+<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
 <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 6 Title</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
-</div></div><div class="card__image ">
+</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
 <a class="button button--small" href="https://www.yahoo.com/">Footer</a>

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

@@ -5186,6 +5186,12 @@
   <span class="pjs-token pjs-string">"overlay-background-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0.6<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"overlay-shading"</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">"overlay-body-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-comment">// new below</span>
+  <span class="pjs-token pjs-string">"toggle-aside-rule"</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">"aside-rule-width"</span> <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"aside-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>197<span class="pjs-token pjs-punctuation">,</span> 197<span class="pjs-token pjs-punctuation">,</span> 197<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"aside-rule-color"</span><span class="pjs-token pjs-punctuation">:</span> green<span class="pjs-token pjs-punctuation">,</span>
+
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5194,7 +5200,7 @@
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 18-68</li>
-<li><strong>Lines (code):</strong> 70-125</li>
+<li><strong>Lines (code):</strong> 70-131</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5518,8 +5524,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 127-130</li>
-<li><strong>Lines (code):</strong> 132-134</li>
+<li><strong>Lines (comments):</strong> 133-136</li>
+<li><strong>Lines (code):</strong> 138-140</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5558,8 +5564,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 145-149</li>
-<li><strong>Lines (code):</strong> 151-181</li>
+<li><strong>Lines (comments):</strong> 151-155</li>
+<li><strong>Lines (code):</strong> 157-187</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5606,8 +5612,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 188-192</li>
-<li><strong>Lines (code):</strong> 194-453</li>
+<li><strong>Lines (comments):</strong> 194-198</li>
+<li><strong>Lines (code):</strong> 200-481</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5636,8 +5642,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 136-139</li>
-<li><strong>Lines (code):</strong> 141-143</li>
+<li><strong>Lines (comments):</strong> 142-145</li>
+<li><strong>Lines (code):</strong> 147-149</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/form-theme/index.html

@@ -5625,7 +5625,7 @@
 <td style="text-align:left">fieldset-background</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">transparent</td>
-<td style="text-align:left">Background color of fieldset.</td>
+<td style="text-align:left">Background color of fieldset element.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-border</td>
@@ -5637,19 +5637,19 @@
 <td style="text-align:left">fieldset-margin-bottom</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1rem</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Bottom margin for the fieldset element.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-margin-top</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1rem</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Bottom margin for the fieldset element.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-padding</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Padding for the fieldset element.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-margin-compact</td>
@@ -5661,79 +5661,79 @@
 <td style="text-align:left">fieldset-border-radius</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Border radius of the fieldset element.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-legend-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">inherit</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Text color for the fieldset's label.</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-legend-border-bottom</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Bottom border color for the fieldset's label</td>
 </tr>
 <tr>
 <td style="text-align:left">fieldset-legend-padding-bottom</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Bottom padding for the fieldset's label</td>
 </tr>
 <tr>
 <td style="text-align:left">select-border-radius</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">4px</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Border radius for the select element.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Background color for the select element.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-border</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">The border for the select element. Fallback to input border.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-padding-x</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Horizontal padding for the select element. Fallback to input-padding-x.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-padding-y</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Vertical padding for the select element. Fallback to input-padding-y.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-image</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Url for select element's background image.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-image-size</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.9em</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Background size for the select image.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-image-offset</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.7em</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">Offset for the select image.</td>
 </tr>
 <tr>
 <td style="text-align:left">select-image-margin</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.65em</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">select image margin.</td>
 </tr>
 <tr>
 <td style="text-align:left">inline-gap</td>

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

@@ -5228,7 +5228,7 @@
 <li><strong>Group:</strong> rule</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 40-42</li>
-<li><strong>Lines (code):</strong> 44-95</li>
+<li><strong>Lines (code):</strong> 44-96</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/js/settings.js

@@ -3,12 +3,25 @@
  * @description Manages shared configuration for the library.
  */
 
-// Default configuration settings
+/**
+ * Default settings
+ * @typedef {object} Defaults
+ * @property {string} iconClassClose - The CSS class string for the close icon
+ * @property {string} iconClassDragX - The CSS class string for the drag X icon
+ * @property {string} iconClassPrevious - The CSS class string for the previous icon
+ * @property {string} iconClassNext - The CSS class string for the next icon
+ * @property {string} cssvarPrefix - The prefix to use for CSS custom properties
+ */
+
+/**
+ * @type {Defaults}
+ */
 const defaults = {
   iconClassClose: "css-icon css-icon--close",
   iconClassDragX: "css-icon css-icon--drag-x",
   iconClassPrevious: "css-icon  css-icon--angle-left",
-  iconClassNext: "css-icon  css-icon--angle-right"
+  iconClassNext: "css-icon  css-icon--angle-right",
+  cssvarPrefix: "",
 };
 
 // Current configuration, initialized with defaults
@@ -66,13 +79,17 @@ export function updateSetting(key, value) {
  * retrieves the current value of the specified setting. This allows the setting
  * to be used as a string literal, dynamically retrieving its value.
  *
- * @param {string} key The key of the setting to wrap.
- * @returns {object} An object with a `toString()` method that returns the setting value.
+ * @param {String} key The key of the setting to wrap.
+ * @param {Function} transform Optional function to transform the setting's
+ * value when its string representation is requested.
+ * @returns {Object} An object with a `toString()` method that returns the
+ * (optionally transformed) setting value as a string.
  */
-export function wrapSettingString(key) {
+export function wrapSettingString(key, transform) {
   return {
     toString() {
-      return getSetting(key);
+      const value = getSetting(key);
+      return transform ? transform(value) : value;
     }
   };
 }

package/js/ui/breakpoints.js

@@ -5,8 +5,11 @@
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
 import { removeArrayElement } from "@ulu/utils/array.js";
 import { getName } from "../events/index.js";
+import { wrapSettingString } from "../settings.js";
+import { getCustomProperty } from "../utils/css.js";
 import { log, logError } from "../utils/class-logger.js";
 
+const getDefaultCustomProperty = prefix => getCustomProperty(prefix, "breakpoint");
 
 // Resize Handler to update breakpoints for all instances (Called after resize finished)
 window.addEventListener(getName("pageResized"), () => {
@@ -16,25 +19,26 @@ window.addEventListener(getName("pageResized"), () => {
 /**
  * @class
  * Class that provides method for retrieving and acting on breakpoints passed
- * from CSS (using element psuedo content prop)
+ * from CSS (using element pseudo content prop)
  */
 export class BreakpointManager {
   static instances = [];
   static defaults = {
     element: document?.documentElement,
-    valueFromPsuedo: false,
+    valueFromPseudo: false,
     customProperty: "--breakpoint",
-    psuedoSelector: ':before',
+    customProperty: wrapSettingString("cssvarPrefix", getDefaultCustomProperty),
+    pseudoSelector: ':before',
     order: ["none", "small", "medium", "large"],
     debug: false
   }
   /**
-   * @param {Object} config Configruation object
+   * @param {Object} config Configuration object
    * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
    * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
-   * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
-   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
-   * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
+   * @param {Array} config.valueFromPseudo Use the legacy method of grabbing breakpoint from pseudo element, default uses custom property
+   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old pseudo method, adjust this to document.body
+   * @param {String} config.pseudoSelector Change pseudo selector used to get the breakpoint from the pseudo's content property
    */
   constructor(config) {
     Object.assign(this, BreakpointManager.defaults, config);
@@ -51,9 +55,9 @@ export class BreakpointManager {
     BreakpointManager.instances.push(this);
   }
   /**
-   * Add a callback for everytime a breakpoint changes
+   * Add a callback for every time a breakpoint changes
    * - Not recommended, possibly use to watch for changes, etc
-   * - For more control use intance.at(name) with breakpoint methods
+   * - For more control use instance.at(name) with breakpoint methods
    * @param {Function} callback Function to call, passed one argument current instance which can be used to get information about breakpoints
    */
   onChange(callback) {
@@ -67,10 +71,10 @@ export class BreakpointManager {
     removeArrayElement(this.onChangeCallbacks, callback);
   }
   /**
-   * Get breakpoint from a psuedo element
+   * Get breakpoint from a pseudo element
    */
-  getBreakpointInPsuedo() {
-    return window.getComputedStyle(this.element, this.psuedoSelector).content.replace(/^"|"$/g, '');
+  getBreakpointInPseudo() {
+    return window.getComputedStyle(this.element, this.pseudoSelector).content.replace(/^"|"$/g, '');
   }
   /**
    * Get breakpoint from a custom property
@@ -82,8 +86,8 @@ export class BreakpointManager {
    * Get breakpoint from element (design note: user could override prototype)
    */
   getBreakpoint() {
-    if (this.valueFromPsuedo) {
-      return this.getBreakpointInPsuedo();
+    if (this.valueFromPseudo) {
+      return this.getBreakpointInPseudo();
     } else {
       return this.getBreakpointInProperty();
     }