@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

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

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -5106,15 +5166,6 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-                </ol>
-            		</li>
-
                     <li><a href="#mixins">Mixins</a>
             
                 <ol>
@@ -5136,6 +5187,15 @@
                     
                     <li><a href="#function-get">get()</a>
             		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#variables">Variables</a>
+            
+                <ol>
+                    
+                    <li><a href="#variable-config">$config</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5153,44 +5213,6 @@
 <div class="type-large">
 <p>Output unit helper stylesheet</p>
 </div>
-<h2 id="variables" tabindex="-1">Variables</h2>
-<div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</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">"sides"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"top"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"bottom"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"left"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"right"</span><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>
-<ul>
-<li><strong>File:</strong> _units.scss</li>
-<li><strong>Group:</strong> units</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 12-14</li>
-<li><strong>Lines (code):</strong> 16-18</li>
-</ul>
-</details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$config.sides</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Sides to print for helper classes (ie. reduce output of unneeded sides)</td>
-</tr>
-</tbody>
-</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5321,6 +5343,44 @@
 <ul>
 <li><a href="/frontend/sass/helpers/units/#variable-config">$config</a></li>
 </ul>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</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">"sides"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"top"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"bottom"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"left"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"right"</span><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>
+<ul>
+<li><strong>File:</strong> _units.scss</li>
+<li><strong>Group:</strong> units</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 12-14</li>
+<li><strong>Lines (code):</strong> 16-18</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$config.sides</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Sides to print for helper classes (ie. reduce output of unneeded sides)</td>
+</tr>
+</tbody>
+</table>
 
     </div>
   </div>

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

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">

package/docs-dev/sass/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">

package/js/ui/dialog.js

@@ -3,7 +3,7 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
-import { wasClickOutside } from "../utils/dom.js";
+import { wasClickOutside, getScrollbarWidth } from "../utils/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
 /**
@@ -47,6 +47,11 @@ export const defaults = {
    * When open and not non-modal, the body is prevented from scrolling (defaults to true).
    */
   preventScroll: true,
+  /**
+   * Compensate for layout shift when preventing scroll. Which adds padding equal to scrollbars 
+   * width while dialog is open
+   */
+  preventScrollShift: true,
 };
 
 
@@ -95,7 +100,15 @@ export function init() {
 export function setupTrigger(trigger, dialogId) {
   trigger.addEventListener("click", handleTrigger);
 
-  function handleTrigger() {
+  function handleTrigger(event) {
+    
+    // If a link is used (not recommended) we need to prevent 
+    // the page from scrolling
+    const closestLink = event.target.closest("a");
+    if (closestLink) {
+      event.preventDefault();
+    }
+    
     const dialog = document.getElementById(dialogId);
     if (!dialog) {
       console.error("Could not locate dialog (id)", dialogId);
@@ -130,10 +143,22 @@ export function setupDialog(dialog, userOptions) {
   // Allow preventScroll if it is a modal dialog
   // Caching value of overflow before setting so we don't assume what it's initial value is
   if (!options.nonModal && options.preventScroll) {
+    
     let overflowValue = body.style.overflow;
+    let paddingRightValue = body.style.paddingRight;
+    
     dialog.addEventListener("toggle", (event) => {
       const isOpen = event.newState === "open";
-      if (isOpen) overflowValue = body.style.overflow;
+      if (isOpen) {
+        overflowValue = body.style.overflow;
+        paddingRightValue = body.style.paddingRight;
+      }
+      
+      // This will compensate for scrollbar jump (if user has it enabled)
+      if (options.preventScrollShift) {
+        body.style.paddingRight = isOpen ? `${ getScrollbarWidth() }px` : paddingRightValue;
+      }
+
       body.style.overflow = isOpen ? "hidden" : overflowValue;
     });
   }

package/js/utils/dom.js

@@ -166,11 +166,22 @@ export function resolveClasses(classes) {
 
 /**
  * Sets a CSS custom property equal to the scrollbar width
- * @param {Node} element The element that is the child of a scrollabel container
- * @param {Node} container The container that can be scrolled
+ * @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
+ * @param {Window|HTMLElement} [container=window] - The container that can be scrolled
  * @param {Stirng} propName Custom property to set
  */
 export function addScrollbarProperty(element = document.body, container = window, propName = "--ulu-scrollbar-width") {
-  const scrollbarWidth = container.innerWidth - element.clientWidth;
+  const scrollbarWidth = getScrollbarWidth(element, container);
   element.style.setProperty(propName, `${ scrollbarWidth }px`);
+}
+
+/**
+ * Calculates the width of the scrollbar.
+ *
+ * @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
+ * @param {Window|HTMLElement} [container=window] - The container that can be scrolled
+ * @returns {number} The width of the scrollbar in pixels.
+ */
+export function getScrollbarWidth(element = document.body, container = window) {
+  return container.innerWidth - element.clientWidth;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.39",
+  "version": "0.1.0-beta.40",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -63,7 +63,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@ulu/markdown-output-utils": "^0.0.6",
-    "@ulu/sassdoc-to-markdown": "^0.0.15",
+    "@ulu/sassdoc-to-markdown": "^0.0.16",
     "@ulu/vite-config-cms-theme": "^0.0.10",
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.9",

package/scss/components/_counter-list.scss

@@ -0,0 +1,133 @@
+////
+/// @group counter-list
+/// Outputs a styled list with counters
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../breakpoint";
+
+/// Module Settings
+/// @type Map
+/// @prop {List} margin [(2rem 0)] The top and bottom margin of the list.
+/// @prop {List} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
+/// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
+/// @prop {Length} counter-width [2.4em] The width and height (if height is falsy)
+/// @prop {Length} counter-height [null] The height (optional)
+/// @prop {Length} counter-gap [1em] The gap between the counter and the list item content.
+/// @prop {String} counter-style [numeric] The list-style-type used for the counter.
+/// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
+/// @prop {Length} counter-font-size [1.2em] The font-size of the counter text.
+/// @prop {String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
+/// @prop {String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
+
+$config: (
+  "margin" : (2rem 0),
+  "item-margin" : (0, 0, 1rem, 0),
+  "align-items" : baseline, 
+  "counter-width" : 2.4em,
+  "counter-height" : null,
+  "counter-gap" : 1em,
+  "counter-style" : numeric,
+  "counter-border-radius" : 50%,
+  "counter-font-size" : 1.2em,
+  "counter-color" : white,
+  "counter-background-color" : "accent",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-counter-list-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-counter-list-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "counter-list [config]");
+}
+
+/// Output counter-list component styles
+/// @demo counter-list
+/// @example html {preview}
+///   <ol class="counter-list">
+///     <li class="counter-list__item">This is a item that will get counted</li>
+///     <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
+///     <li class="counter-list__item">Small Amount of Text</li>
+///   </ol>
+
+@mixin styles {
+  $prefix: selector.class("counter-list");
+  $width: get("counter-width");
+  $height: utils.fallback(get("counter-height"), $width);
+
+  #{ $prefix } {
+    margin: get("margin");
+    counter-reset: ulu-counter-list;
+
+    & > li,
+    & > #{ $prefix }__item {
+      display: flex;
+      gap: get("counter-gap");
+      align-items: get("align-items");
+      margin: get("item-margin");
+      min-height: $height;
+      &::before {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $width;
+        height: $height;
+        flex: 0 0 $width;
+        counter-increment: ulu-counter-list;
+        content: counter(ulu-counter-list, get("counter-style"));
+        font-size: get("counter-font-size");
+        color: color.get(get("counter-color"));
+        background-color: color.get(get("counter-background-color"));
+        border-radius: get("counter-border-radius");
+      }
+
+      // Keeping this could be useful
+      // but we need to think about how its setup
+      // - Probably should be a modifier (choice)
+      // - May need either option for how align-items is set (flex-start vs center)
+      // - This could be useful when used in grid
+      // - May need to be pervasive and not linked to a breakpoint (alternate style)
+      // - It's also just useful to know you could override the layout like this 
+      //   to get useful variations (maybe we don't need to include it but users 
+      //   can do specific)
+      // @if ( get("counter-mobile-toggle") ) {
+      //   @include breakpoint.max("small") {
+      //     padding-left: 0;
+      //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
+      //     flex-direction: column;
+      //     align-items: center;
+      //   }
+      // }
+    }
+  }
+
+  // Modifiers
+  #{ $prefix }--alphabetical {
+    & > li::before,
+    & > #{ $prefix }__item::before {
+      content: counter(ulu-counter-list, upper-alpha);
+    }
+  }
+  #{ $prefix }--numeric {
+    & > li::before,
+    & > #{ $prefix }__item::before {
+      content: counter(ulu-counter-list, numeric);
+    }
+  }
+  #{ $prefix }--no-reset {
+    counter-reset: none;
+  }
+}

package/scss/components/_index.scss

@@ -12,6 +12,7 @@
 @forward "callout" as callout-*;
 @forward "card" as card-*;
 @forward "card-grid" as card-grid-*;
+@forward "counter-list" as counter-list-*;
 @forward "css-icon" as css-icon-*;
 @forward "data-grid" as data-grid-*;
 @forward "data-table" as data-table-*;
@@ -63,6 +64,7 @@
 @use "callout";
 @use "card";
 @use "card-grid";
+@use "counter-list";
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
@@ -115,6 +117,7 @@ $all-includes: (
   "callout",
   "card",
   "card-grid",
+  "counter-list",
   "css-icon",
   "data-grid",
   "data-table",
@@ -220,6 +223,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "card-grid")) {
     @include card-grid.styles;
   }
+  @if (list.index($includes, "counter-list")) {
+    @include counter-list.styles;
+  }
   @if (list.index($includes, "css-icon")) {
     @include css-icon.styles;
   }

package/types/ui/dialog.d.ts

@@ -42,6 +42,7 @@ export namespace defaults {
     let clickOutsideCloses: boolean;
     let pauseVideos: boolean;
     let preventScroll: boolean;
+    let preventScrollShift: boolean;
 }
 import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=dialog.d.ts.map

package/types/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AAuDA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BAmBd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BAuCd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AA1JD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;qCAjB3B,oBAAoB"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA4DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BAmDd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AAnLD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,oBAAoB"}