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

package/docs-dev/javascript/utils-dom/index.html

@@ -5190,7 +5190,7 @@
                     <li><a href="#utils%2Fdom.resolveclasses(input)-%E2%87%92-array.%3Cstring%3E">utils/dom.resolveClasses(input) ⇒ Array.<string></string></a>
             		</li>
 
-                    <li><a href="#utils%2Fdom.addscrollbarproperty(%5Belement%5D%2C-%5Bcontainer%5D%2C-propname)">utils/dom.addScrollbarProperty([element], [container], propName)</a>
+                    <li><a href="#utils%2Fdom.addscrollbarproperty(options)">utils/dom.addScrollbarProperty(options)</a>
             		</li>
 
                     <li><a href="#utils%2Fdom.getscrollbarwidth(%5Belement%5D%2C-%5Bcontainer%5D)-%E2%87%92-number">utils/dom.getScrollbarWidth([element], [container]) ⇒ number</a>
@@ -5219,7 +5219,7 @@
 <li><a href="#module_utils/dom.getElement">.getElement(target, context)</a> ⇒ <code>HTMLElement</code></li>
 <li><a href="#module_utils/dom.getElements">.getElements(target, context)</a> ⇒ <code>Array</code></li>
 <li><a href="#module_utils/dom.resolveClasses">.resolveClasses(input)</a> ⇒ <code>Array.&lt;string&gt;</code></li>
-<li><a href="#module_utils/dom.addScrollbarProperty">.addScrollbarProperty([element], [container], propName)</a></li>
+<li><a href="#module_utils/dom.addScrollbarProperty">.addScrollbarProperty(options)</a></li>
 <li><a href="#module_utils/dom.getScrollbarWidth">.getScrollbarWidth([element], [container])</a> ⇒ <code>number</code></li>
 </ul>
 </li>
@@ -5414,8 +5414,8 @@ or new instances are added to the screen</p>
 <span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">[</span><span class="pjs-token pjs-string">"another-class"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"yet-another-class"</span><span class="pjs-token pjs-punctuation">]</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["another-class", "yet-another-class"]</span>
 <span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"single-class"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["single-class"]</span></code></pre>
 <p><a name="module_utils/dom.addScrollbarProperty"></a></p>
-<h2 id="utils%2Fdom.addscrollbarproperty(%5Belement%5D%2C-%5Bcontainer%5D%2C-propname)" tabindex="-1">utils/dom.addScrollbarProperty([element], [container], propName)</h2>
-<p>Sets a CSS custom property equal to the scrollbar width</p>
+<h2 id="utils%2Fdom.addscrollbarproperty(options)" tabindex="-1">utils/dom.addScrollbarProperty(options)</h2>
+<p>Sets a CSS custom property equal to the scrollbar width.</p>
 <p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a></p>
 <table>
 <thead>
@@ -5428,22 +5428,34 @@ or new instances are added to the screen</p>
 </thead>
 <tbody>
 <tr>
-<td>[element]</td>
+<td>options</td>
+<td><code>object</code></td>
+<td></td>
+<td>Configuration options.</td>
+</tr>
+<tr>
+<td>[options.scrollableChild]</td>
 <td><code>HTMLElement</code></td>
 <td><code>document.body</code></td>
-<td>The element that is the child of a scrollable container</td>
+<td>An element that is a child of a scrollable container (used for width calculation).</td>
 </tr>
 <tr>
-<td>[container]</td>
+<td>[options.container]</td>
 <td><code>Window</code> | <code>HTMLElement</code></td>
 <td><code>window</code></td>
-<td>The container that can be scrolled</td>
+<td>The container that can be scrolled (used for width calculation).</td>
 </tr>
 <tr>
-<td>propName</td>
-<td><code>Stirng</code></td>
-<td></td>
-<td>Custom property to set</td>
+<td>[options.propertyElement]</td>
+<td><code>HTMLElement</code></td>
+<td><code>document.documentElement</code></td>
+<td>The element to which the custom property will be added. Defaults to document.documentElement for :root access.</td>
+</tr>
+<tr>
+<td>[options.propName]</td>
+<td><code>string</code></td>
+<td><code>&quot;&amp;quot;--ulu-scrollbar-width&amp;quot;&quot;</code></td>
+<td>The name of the custom property to set.</td>
 </tr>
 </tbody>
 </table>

package/js/utils/dom.js

@@ -165,14 +165,26 @@ export function resolveClasses(classes) {
 }
 
 /**
- * Sets a CSS custom property equal to the scrollbar width
- * @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
+ * Sets a CSS custom property equal to the scrollbar width.
+ * @param {object} options - Configuration options.
+ * @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
+ * @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
+ * @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
+ * @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
  */
-export function addScrollbarProperty(element = document.body, container = window, propName = "--ulu-scrollbar-width") {
-  const scrollbarWidth = getScrollbarWidth(element, container);
-  element.style.setProperty(propName, `${ scrollbarWidth }px`);
+export function addScrollbarProperty(options) {
+  const defaults = {
+    scrollableChild: document.body,
+    container: window,
+    propertyElement: document.documentElement,
+    propName: "--ulu-scrollbar-width",
+  };
+
+  const config = { ...defaults, ...options };
+  const { scrollableChild, container, propertyElement, propName } = config;
+
+  const scrollbarWidth = getScrollbarWidth(scrollableChild, container);
+  propertyElement.style.setProperty(propName, `${ scrollbarWidth }px`);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.40",
+  "version": "0.1.0-beta.42",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_card.scss

@@ -125,8 +125,8 @@ $config: (
   // new below
   "toggle-aside-rule" : true,
   "aside-rule-width" : 6px,
-  "aside-background-color" : rgb(197, 197, 197),
-  "aside-rule-color": green,
+  "aside-background-color" : transparent,
+  "aside-rule-color": "rule",
 
 ) !default;
   

package/types/utils/dom.d.ts

@@ -59,12 +59,19 @@ export function getElements(target: string | Node, context?: any): any[];
  */
 export function resolveClasses(classes: any): string[];
 /**
- * Sets a CSS custom property equal to the scrollbar width
- * @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
+ * Sets a CSS custom property equal to the scrollbar width.
+ * @param {object} options - Configuration options.
+ * @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
+ * @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
+ * @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
+ * @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
  */
-export function addScrollbarProperty(element?: HTMLElement, container?: Window | HTMLElement, propName?: Stirng): void;
+export function addScrollbarProperty(options: {
+    scrollableChild?: HTMLElement;
+    container?: Window | HTMLElement;
+    propertyElement?: HTMLElement;
+    propName?: string;
+}): void;
 /**
  * Calculates the width of the scrollbar.
  *

package/types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,2DAFa,MAAM,CAOlB;AAED;;;;;GAKG;AACH,wCAJW,IAAI,oBAYd;AAED;;;;;;GAMG;AACH,gDAJW,IAAI,gBAEF,YAAa,CASzB;AAED;;GAEG;AACH,mEAMC;AAGD;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;GAKG;AACH,mCAJW,SAAO,IAAI,kBAEV,WAAW,CAWtB;AAED;;;;;GAKG;AACH,oCAJW,SAAO,IAAI,wBAerB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB;AAED;;;;;GAKG;AACH,+CAJW,WAAW,cACX,MAAM,GAAC,WAAW,2BAM5B;AAED;;;;;;GAMG;AACH,4CAJW,WAAW,cACX,MAAM,GAAC,WAAW,GAChB,MAAM,CAIlB;AA1LD;;GAEG;AAGH,qCAAqD"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,2DAFa,MAAM,CAOlB;AAED;;;;;GAKG;AACH,wCAJW,IAAI,oBAYd;AAED;;;;;;GAMG;AACH,gDAJW,IAAI,gBAEF,YAAa,CASzB;AAED;;GAEG;AACH,mEAMC;AAGD;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;GAKG;AACH,mCAJW,SAAO,IAAI,kBAEV,WAAW,CAWtB;AAED;;;;;GAKG;AACH,oCAJW,SAAO,IAAI,wBAerB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB;AAED;;;;;;;GAOG;AACH;IALiC,eAAe,GAArC,WAAW;IACkB,SAAS,GAAtC,MAAM,GAAC,WAAW;IACI,eAAe,GAArC,WAAW;IACM,QAAQ,GAAzB,MAAM;SAehB;AAED;;;;;;GAMG;AACH,4CAJW,WAAW,cACX,MAAM,GAAC,WAAW,GAChB,MAAM,CAIlB;AAtMD;;GAEG;AAGH,qCAAqD"}