@ulu/frontend 0.1.0-beta.97 → 0.1.0-beta.98

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 0.1.0-beta.98
+
+- **scss/components/skeleton** - Make all child components (ie. .skeleton__text) to independent related components (.skeleton-text)
+
 ## 0.1.0-beta.97
 
 - **scss/components/skeleton** - Tweak how selectors are formed (no change really)

package/docs-dev/changelog/index.html

@@ -5586,6 +5586,15 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.98">0.1.0-beta.98</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.97">0.1.0-beta.97</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.96">0.1.0-beta.96</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.95">0.1.0-beta.95</a>
             		</li>
 
@@ -5919,6 +5928,18 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.98" tabindex="-1">0.1.0-beta.98</h2>
+<ul>
+<li><strong>scss/components/skeleton</strong> - Make all child components (ie. .skeleton__text) to independent related components (.skeleton-text)</li>
+</ul>
+<h2 id="0.1.0-beta.97" tabindex="-1">0.1.0-beta.97</h2>
+<ul>
+<li><strong>scss/components/skeleton</strong> - Tweak how selectors are formed (no change really)</li>
+</ul>
+<h2 id="0.1.0-beta.96" tabindex="-1">0.1.0-beta.96</h2>
+<ul>
+<li><strong>scss/components/skeleton</strong> - Change alt background color default</li>
+</ul>
 <h2 id="0.1.0-beta.95" tabindex="-1">0.1.0-beta.95</h2>
 <ul>
 <li><strong>scss/components/skeleton</strong> - Add new skeleton component and demo page (<code>docs-src/content/demos/skeleton.html</code>)</li>

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

@@ -5604,60 +5604,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-89" name="title" checked="">
-<label for="live-demo-id-89">
+  <input type="checkbox" id="live-demo-id-17" name="title" checked="">
+<label for="live-demo-id-17">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-90" name="body" checked="">
-<label for="live-demo-id-90">
+  <input type="checkbox" id="live-demo-id-18" name="body" checked="">
+<label for="live-demo-id-18">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-91" name="content" checked="">
-<label for="live-demo-id-91">
+  <input type="checkbox" id="live-demo-id-19" name="content" checked="">
+<label for="live-demo-id-19">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-92" name="aside" checked="">
-<label for="live-demo-id-92">
+  <input type="checkbox" id="live-demo-id-20" name="aside" checked="">
+<label for="live-demo-id-20">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-93" name="footer" checked="">
-<label for="live-demo-id-93">
+  <input type="checkbox" id="live-demo-id-21" name="footer" checked="">
+<label for="live-demo-id-21">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-94">
+<label for="live-demo-id-22">
   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-94" name="action">
+  <select id="live-demo-id-22" 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-95">
+<label for="live-demo-id-23">
   Media
 </label>  
-  <select id="live-demo-id-95" name="media">
+  <select id="live-demo-id-23" 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-96">
+<label for="live-demo-id-24">
   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-96" name="layout">
+  <select id="live-demo-id-24" 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

@@ -5642,178 +5642,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-45">
+<table class="data-table data-table--striped" id="dt-9">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-45-type" rowspan="2">Type</th>
-      <th id="dt-45-group" colspan="2">Group</th>
-      <th id="dt-45-details" colspan="2">Details</th>
-      <th id="dt-45-id" rowspan="2">Id</th>
+      <th id="dt-9-type" rowspan="2">Type</th>
+      <th id="dt-9-group" colspan="2">Group</th>
+      <th id="dt-9-details" colspan="2">Details</th>
+      <th id="dt-9-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-45-group" id="dt-45-primary">Primary</th>
-      <th headers="dt-45-group" id="dt-45-secondary">Secondary</th>
-      <th headers="dt-45-details" id="dt-45-before">Before Task</th>
-      <th headers="dt-45-details" id="dt-45-after">After Task</th>
+      <th headers="dt-9-group" id="dt-9-primary">Primary</th>
+      <th headers="dt-9-group" id="dt-9-secondary">Secondary</th>
+      <th headers="dt-9-details" id="dt-9-before">Before Task</th>
+      <th headers="dt-9-details" id="dt-9-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-45-type dt-45-r1" id="dt-45-r1">Default</th>
-      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-9-type dt-9-r1" id="dt-9-r1">Default</th>
+      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-id">OL-53-GHSLE</td>
+      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
-      <td headers="dt-45-id">OL-53-GHSLE</td>
+      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
+      <td headers="dt-9-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-46">
+<table class="data-table data-table--large-first" id="dt-10">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-46-type" rowspan="2">Type</th>
-      <th id="dt-46-group" colspan="2">Group</th>
-      <th id="dt-46-details" colspan="2">Details</th>
-      <th id="dt-46-id" rowspan="2">Id</th>
+      <th id="dt-10-type" rowspan="2">Type</th>
+      <th id="dt-10-group" colspan="2">Group</th>
+      <th id="dt-10-details" colspan="2">Details</th>
+      <th id="dt-10-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-46-group" id="dt-46-primary">Primary</th>
-      <th headers="dt-46-group" id="dt-46-secondary">Secondary</th>
-      <th headers="dt-46-details" id="dt-46-before">Before Task</th>
-      <th headers="dt-46-details" id="dt-46-after">After Task</th>
+      <th headers="dt-10-group" id="dt-10-primary">Primary</th>
+      <th headers="dt-10-group" id="dt-10-secondary">Secondary</th>
+      <th headers="dt-10-details" id="dt-10-before">Before Task</th>
+      <th headers="dt-10-details" id="dt-10-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-46-type dt-46-r1" id="dt-46-r1">Default</th>
-      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-10-type dt-10-r1" id="dt-10-r1">Default</th>
+      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-id">OL-53-GHSLE</td>
+      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
-      <td headers="dt-46-id">OL-53-GHSLE</td>
+      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
+      <td headers="dt-10-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-47">
+<table class="data-table data-table--large-header" id="dt-11">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-47-type" rowspan="2">Type</th>
-      <th id="dt-47-group" colspan="2">Group</th>
-      <th id="dt-47-details" colspan="2">Details</th>
-      <th id="dt-47-id" rowspan="2">Id</th>
+      <th id="dt-11-type" rowspan="2">Type</th>
+      <th id="dt-11-group" colspan="2">Group</th>
+      <th id="dt-11-details" colspan="2">Details</th>
+      <th id="dt-11-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-47-group" id="dt-47-primary">Primary</th>
-      <th headers="dt-47-group" id="dt-47-secondary">Secondary</th>
-      <th headers="dt-47-details" id="dt-47-before">Before Task</th>
-      <th headers="dt-47-details" id="dt-47-after">After Task</th>
+      <th headers="dt-11-group" id="dt-11-primary">Primary</th>
+      <th headers="dt-11-group" id="dt-11-secondary">Secondary</th>
+      <th headers="dt-11-details" id="dt-11-before">Before Task</th>
+      <th headers="dt-11-details" id="dt-11-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-47-type dt-47-r1" id="dt-47-r1">Default</th>
-      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-11-type dt-11-r1" id="dt-11-r1">Default</th>
+      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-id">OL-53-GHSLE</td>
+      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
-      <td headers="dt-47-id">OL-53-GHSLE</td>
+      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
+      <td headers="dt-11-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-48">
+<table class="data-table data-table--no-border" id="dt-12">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-48-type" rowspan="2">Type</th>
-      <th id="dt-48-group" colspan="2">Group</th>
-      <th id="dt-48-details" colspan="2">Details</th>
-      <th id="dt-48-id" rowspan="2">Id</th>
+      <th id="dt-12-type" rowspan="2">Type</th>
+      <th id="dt-12-group" colspan="2">Group</th>
+      <th id="dt-12-details" colspan="2">Details</th>
+      <th id="dt-12-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-48-group" id="dt-48-primary">Primary</th>
-      <th headers="dt-48-group" id="dt-48-secondary">Secondary</th>
-      <th headers="dt-48-details" id="dt-48-before">Before Task</th>
-      <th headers="dt-48-details" id="dt-48-after">After Task</th>
+      <th headers="dt-12-group" id="dt-12-primary">Primary</th>
+      <th headers="dt-12-group" id="dt-12-secondary">Secondary</th>
+      <th headers="dt-12-details" id="dt-12-before">Before Task</th>
+      <th headers="dt-12-details" id="dt-12-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-48-type dt-48-r1" id="dt-48-r1">Default</th>
-      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-12-type dt-12-r1" id="dt-12-r1">Default</th>
+      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-id">OL-53-GHSLE</td>
+      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
-      <td headers="dt-48-id">OL-53-GHSLE</td>
+      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
+      <td headers="dt-12-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5599,64 +5599,64 @@
     
 <h2 class="h2">Media Block</h2>
 
-<div class="skeleton" style="max-width: 350px;">
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
+<div style="max-width: 350px;">
+  <div class="skeleton-block skeleton-block--media layout-flex-center-all">
     <span class="fas fa-image type-large-xx" aria-hidden="true"></span>
   </div>
 </div>
 
 <h2 class="h2">Lines of Content/Text</h2>
 
-<div class="skeleton">
-  <p class="skeleton__text"></p>
-  <p class="skeleton__text"></p>
-  <p class="skeleton__text skeleton__text--small"></p>
-  <p class="skeleton__text"></p>
+<div>
+  <p class="skeleton-text"></p>
+  <p class="skeleton-text"></p>
+  <p class="skeleton-text skeleton-text--small"></p>
+  <p class="skeleton-text"></p>
 </div>
 
 <h2 class="h2">Paragraph</h2>
 
-<div class="skeleton">
+<div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-xx"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-xx"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-xx"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-xx"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large-x"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--small-x"></span>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--small-x"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__alt skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-alt skeleton-text--large"></span>
   </div>
   <div>
-    <span class="skeleton__text skeleton__text--inline skeleton__text--large"></span>
+    <span class="skeleton-text skeleton-text--inline skeleton-text--large"></span>
   </div>
 </div>
 
 <h2 class="h2">Card</h2>
 
-<article class="card skeleton">
+<article class="card">
   <div class="card__body">
     <div class="card__main">
       <div class="card__title">
-        <div class="skeleton__text skeleton__text--large skeleton__alt"></div>
+        <div class="skeleton-text skeleton-text--large skeleton-alt"></div>
       </div>
       <div class="card__content">
-        <span class="skeleton__text skeleton__text--inline skeleton__text--small-xxx"></span>
-        <span class="skeleton__text skeleton__text--inline skeleton__text--small-xxx"></span>
+        <span class="skeleton-text skeleton-text--inline skeleton-text--small-xxx"></span>
+        <span class="skeleton-text skeleton-text--inline skeleton-text--small-xxx"></span>
       </div>
     </div>
   </div>
   <div class="card__image">
-    <div class="skeleton__block skeleton__block--media card__image-media layout-flex-center-all">
+    <div class="skeleton-block skeleton-block--media card__image-media layout-flex-center-all">
       <span class="fas fa-image type-large-xx" aria-hidden="true"></span>
     </div>
   </div>

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

@@ -5789,7 +5789,7 @@
 <li><strong>Group:</strong> skeleton</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 75-78</li>
-<li><strong>Lines (code):</strong> 80-117</li>
+<li><strong>Lines (code):</strong> 80-115</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

package/package.json

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

@@ -80,37 +80,35 @@ $config: (
 @mixin styles {
   $prefix: selector.class("skeleton");
 
-  #{ $prefix } {
-    animation: get("animation") ;
-    color: color.get(get("color"));
-  }
-  #{ $prefix }__background-color {
+  #{ $prefix }-background-color {
     background-color: color.get(get("background-color")) !important;
   }
-  #{ $prefix }__block,
-  #{ $prefix }__text {
+  #{ $prefix }-block,
+  #{ $prefix }-text {
+    animation: get("animation");
+    color: color.get(get("color"));
     background-color: color.get(get("background-color")) !important;
     border-radius: get("border-radius");
   }
-  #{ $prefix }__alt {
+  #{ $prefix }-alt {
     background-color: color.get(get("background-color-alt"));
   }
-  #{ $prefix }__block--media {
+  #{ $prefix }-block--media {
     aspect-ratio: 4/3;
   }
-  #{ $prefix }__text {
+  #{ $prefix }-text {
     height: 1em;
     width: 60%;
     border-radius: get("text-border-radius");
   }
-  #{ $prefix }__text--inline {
+  #{ $prefix }-text--inline {
     display: inline-block;
   }
-  #{ $prefix }__text--inline + #{ $prefix }__text--inline {
+  #{ $prefix }-text--inline + #{ $prefix }-text--inline {
     margin-left: get("inline-margin");
   }
   @each $name, $value in get("text-sizes") {
-    #{ $prefix }__text--#{ $name } {
+    #{ $prefix }-text--#{ $name } {
       width: $value;
     }
   }