@ulu/frontend 0.1.0-beta.68 → 0.1.0-beta.69

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.69">0.1.0-beta.69</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.68">0.1.0-beta.68</a>
             		</li>
 
@@ -5448,6 +5451,14 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.69" tabindex="-1">0.1.0-beta.69</h2>
+<ul>
+<li><strong>scss/components/accordion</strong>
+<ul>
+<li>Set width on .accordion__summary so it works when using button element (when not details)</li>
+</ul>
+</li>
+</ul>
 <h2 id="0.1.0-beta.68" tabindex="-1">0.1.0-beta.68</h2>
 <ul>
 <li><strong>scss/components/badge</strong>

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

@@ -5405,7 +5405,6 @@
     <p>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.</p>
   </div>
 </details>
-
     </div>
   </div>
 

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

@@ -5214,60 +5214,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-129" name="title" checked="">
-<label for="live-demo-id-129">
+  <input type="checkbox" id="live-demo-id-145" name="title" checked="">
+<label for="live-demo-id-145">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-130" name="body" checked="">
-<label for="live-demo-id-130">
+  <input type="checkbox" id="live-demo-id-146" name="body" checked="">
+<label for="live-demo-id-146">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-131" name="content" checked="">
-<label for="live-demo-id-131">
+  <input type="checkbox" id="live-demo-id-147" name="content" checked="">
+<label for="live-demo-id-147">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-132" name="aside" checked="">
-<label for="live-demo-id-132">
+  <input type="checkbox" id="live-demo-id-148" name="aside" checked="">
+<label for="live-demo-id-148">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-133" name="footer" checked="">
-<label for="live-demo-id-133">
+  <input type="checkbox" id="live-demo-id-149" name="footer" checked="">
+<label for="live-demo-id-149">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-134">
+<label for="live-demo-id-150">
   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-134" name="action">
+  <select id="live-demo-id-150" 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-135">
+<label for="live-demo-id-151">
   Media
 </label>  
-  <select id="live-demo-id-135" name="media">
+  <select id="live-demo-id-151" 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-136">
+<label for="live-demo-id-152">
   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-136" name="layout">
+  <select id="live-demo-id-152" 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

@@ -5252,178 +5252,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-65">
+<table class="data-table data-table--striped" id="dt-73">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-65-type" rowspan="2">Type</th>
-      <th id="dt-65-group" colspan="2">Group</th>
-      <th id="dt-65-details" colspan="2">Details</th>
-      <th id="dt-65-id" rowspan="2">Id</th>
+      <th id="dt-73-type" rowspan="2">Type</th>
+      <th id="dt-73-group" colspan="2">Group</th>
+      <th id="dt-73-details" colspan="2">Details</th>
+      <th id="dt-73-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-65-group" id="dt-65-primary">Primary</th>
-      <th headers="dt-65-group" id="dt-65-secondary">Secondary</th>
-      <th headers="dt-65-details" id="dt-65-before">Before Task</th>
-      <th headers="dt-65-details" id="dt-65-after">After Task</th>
+      <th headers="dt-73-group" id="dt-73-primary">Primary</th>
+      <th headers="dt-73-group" id="dt-73-secondary">Secondary</th>
+      <th headers="dt-73-details" id="dt-73-before">Before Task</th>
+      <th headers="dt-73-details" id="dt-73-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-65-type dt-65-r1" id="dt-65-r1">Default</th>
-      <td headers="dt-65-group dt-65-primary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-group dt-65-secondary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-before dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-after dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-73-type dt-73-r1" id="dt-73-r1">Default</th>
+      <td headers="dt-73-group dt-73-primary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-group dt-73-secondary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-before dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-after dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-65-group dt-65-primary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-group dt-65-secondary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-before dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-after dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-id">OL-53-GHSLE</td>
+      <td headers="dt-73-group dt-73-primary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-group dt-73-secondary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-before dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-after dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-65-group dt-65-primary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-group dt-65-secondary dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-before dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-details dt-65-after dt-65-r1">Lorem Ipsum</td>
-      <td headers="dt-65-id">OL-53-GHSLE</td>
+      <td headers="dt-73-group dt-73-primary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-group dt-73-secondary dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-before dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-details dt-73-after dt-73-r1">Lorem Ipsum</td>
+      <td headers="dt-73-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-66">
+<table class="data-table data-table--large-first" id="dt-74">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-66-type" rowspan="2">Type</th>
-      <th id="dt-66-group" colspan="2">Group</th>
-      <th id="dt-66-details" colspan="2">Details</th>
-      <th id="dt-66-id" rowspan="2">Id</th>
+      <th id="dt-74-type" rowspan="2">Type</th>
+      <th id="dt-74-group" colspan="2">Group</th>
+      <th id="dt-74-details" colspan="2">Details</th>
+      <th id="dt-74-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-66-group" id="dt-66-primary">Primary</th>
-      <th headers="dt-66-group" id="dt-66-secondary">Secondary</th>
-      <th headers="dt-66-details" id="dt-66-before">Before Task</th>
-      <th headers="dt-66-details" id="dt-66-after">After Task</th>
+      <th headers="dt-74-group" id="dt-74-primary">Primary</th>
+      <th headers="dt-74-group" id="dt-74-secondary">Secondary</th>
+      <th headers="dt-74-details" id="dt-74-before">Before Task</th>
+      <th headers="dt-74-details" id="dt-74-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-66-type dt-66-r1" id="dt-66-r1">Default</th>
-      <td headers="dt-66-group dt-66-primary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-group dt-66-secondary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-before dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-after dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-74-type dt-74-r1" id="dt-74-r1">Default</th>
+      <td headers="dt-74-group dt-74-primary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-group dt-74-secondary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-before dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-after dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-66-group dt-66-primary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-group dt-66-secondary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-before dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-after dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-id">OL-53-GHSLE</td>
+      <td headers="dt-74-group dt-74-primary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-group dt-74-secondary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-before dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-after dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-66-group dt-66-primary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-group dt-66-secondary dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-before dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-details dt-66-after dt-66-r1">Lorem Ipsum</td>
-      <td headers="dt-66-id">OL-53-GHSLE</td>
+      <td headers="dt-74-group dt-74-primary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-group dt-74-secondary dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-before dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-details dt-74-after dt-74-r1">Lorem Ipsum</td>
+      <td headers="dt-74-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-67">
+<table class="data-table data-table--large-header" id="dt-75">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-67-type" rowspan="2">Type</th>
-      <th id="dt-67-group" colspan="2">Group</th>
-      <th id="dt-67-details" colspan="2">Details</th>
-      <th id="dt-67-id" rowspan="2">Id</th>
+      <th id="dt-75-type" rowspan="2">Type</th>
+      <th id="dt-75-group" colspan="2">Group</th>
+      <th id="dt-75-details" colspan="2">Details</th>
+      <th id="dt-75-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-67-group" id="dt-67-primary">Primary</th>
-      <th headers="dt-67-group" id="dt-67-secondary">Secondary</th>
-      <th headers="dt-67-details" id="dt-67-before">Before Task</th>
-      <th headers="dt-67-details" id="dt-67-after">After Task</th>
+      <th headers="dt-75-group" id="dt-75-primary">Primary</th>
+      <th headers="dt-75-group" id="dt-75-secondary">Secondary</th>
+      <th headers="dt-75-details" id="dt-75-before">Before Task</th>
+      <th headers="dt-75-details" id="dt-75-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-67-type dt-67-r1" id="dt-67-r1">Default</th>
-      <td headers="dt-67-group dt-67-primary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-group dt-67-secondary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-before dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-after dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-75-type dt-75-r1" id="dt-75-r1">Default</th>
+      <td headers="dt-75-group dt-75-primary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-group dt-75-secondary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-before dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-after dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-67-group dt-67-primary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-group dt-67-secondary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-before dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-after dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-id">OL-53-GHSLE</td>
+      <td headers="dt-75-group dt-75-primary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-group dt-75-secondary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-before dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-after dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-67-group dt-67-primary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-group dt-67-secondary dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-before dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-details dt-67-after dt-67-r1">Lorem Ipsum</td>
-      <td headers="dt-67-id">OL-53-GHSLE</td>
+      <td headers="dt-75-group dt-75-primary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-group dt-75-secondary dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-before dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-details dt-75-after dt-75-r1">Lorem Ipsum</td>
+      <td headers="dt-75-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-68">
+<table class="data-table data-table--no-border" id="dt-76">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-68-type" rowspan="2">Type</th>
-      <th id="dt-68-group" colspan="2">Group</th>
-      <th id="dt-68-details" colspan="2">Details</th>
-      <th id="dt-68-id" rowspan="2">Id</th>
+      <th id="dt-76-type" rowspan="2">Type</th>
+      <th id="dt-76-group" colspan="2">Group</th>
+      <th id="dt-76-details" colspan="2">Details</th>
+      <th id="dt-76-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-68-group" id="dt-68-primary">Primary</th>
-      <th headers="dt-68-group" id="dt-68-secondary">Secondary</th>
-      <th headers="dt-68-details" id="dt-68-before">Before Task</th>
-      <th headers="dt-68-details" id="dt-68-after">After Task</th>
+      <th headers="dt-76-group" id="dt-76-primary">Primary</th>
+      <th headers="dt-76-group" id="dt-76-secondary">Secondary</th>
+      <th headers="dt-76-details" id="dt-76-before">Before Task</th>
+      <th headers="dt-76-details" id="dt-76-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-68-type dt-68-r1" id="dt-68-r1">Default</th>
-      <td headers="dt-68-group dt-68-primary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-group dt-68-secondary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-before dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-after dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-76-type dt-76-r1" id="dt-76-r1">Default</th>
+      <td headers="dt-76-group dt-76-primary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-group dt-76-secondary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-before dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-after dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-68-group dt-68-primary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-group dt-68-secondary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-before dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-after dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-id">OL-53-GHSLE</td>
+      <td headers="dt-76-group dt-76-primary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-group dt-76-secondary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-before dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-after dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-68-group dt-68-primary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-group dt-68-secondary dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-before dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-details dt-68-after dt-68-r1">Lorem Ipsum</td>
-      <td headers="dt-68-id">OL-53-GHSLE</td>
+      <td headers="dt-76-group dt-76-primary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-group dt-76-secondary dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-before dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-details dt-76-after dt-76-r1">Lorem Ipsum</td>
+      <td headers="dt-76-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5283,8 +5283,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 14-41</li>
-<li><strong>Lines (code):</strong> 43-71</li>
+<li><strong>Lines (comments):</strong> 16-43</li>
+<li><strong>Lines (code):</strong> 45-73</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5470,8 +5470,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 73-76</li>
-<li><strong>Lines (code):</strong> 78-80</li>
+<li><strong>Lines (comments):</strong> 75-78</li>
+<li><strong>Lines (code):</strong> 80-82</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5510,8 +5510,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 91-94</li>
-<li><strong>Lines (code):</strong> 96-215</li>
+<li><strong>Lines (comments):</strong> 93-96</li>
+<li><strong>Lines (code):</strong> 98-224</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5538,8 +5538,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 82-85</li>
-<li><strong>Lines (code):</strong> 87-89</li>
+<li><strong>Lines (comments):</strong> 84-87</li>
+<li><strong>Lines (code):</strong> 89-91</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/package.json

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

@@ -3,6 +3,8 @@
 /// Outputs accordion component stylesheet, which can be used with <details> or custom disclosure components
 ////
 
+// Internal note: We don't require the content to be wrapped, this is so that this can be used on details elements outside of our control. So we use negative margins
+
 @use "sass:map";
 @use "sass:math";
 
@@ -95,15 +97,16 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("accordion");
-
+  $padding-x: get("padding-x");
+  $padding-x-double: get("padding-x") * 2;
   $border: get("border-width") solid color.get(get("border-color"));
 
   // When not one of our custom classed details components
   #{ $prefix } {
     position: relative; // For active border
     border-radius: 0;
-    padding-left: get("padding-x");
-    padding-right: get("padding-x");
+    padding-left: $padding-x;
+    padding-right: $padding-x;
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
@@ -138,16 +141,18 @@ $config: (
   #{ $prefix }__summary {
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
-    margin-left: -(get("padding-x"));
-    margin-right: -(get("padding-x"));
+    margin-left: -($padding-x);
+    margin-right: -($padding-x);
     line-height: get("summary-line-height");
-    padding: get("summary-padding-y") get("padding-x");
+    padding: get("summary-padding-y") $padding-x;
     vertical-align: top;
     font-weight: bold;
     cursor: pointer;
-    display: flex; // For icon
     align-items: center;
+    width: calc(100% + $padding-x-double); // To fix if using <button>
+ 
     &:has(#{ $prefix }__icon) {
+      display: flex;
       list-style: none; // Remove the default arrow (old safari?)
       &::-webkit-details-marker,
       &::marker {
@@ -193,6 +198,7 @@ $config: (
     > #{ $prefix }__summary {
       margin-left: -(get("transparent-padding-x"));
       margin-right: -(get("transparent-padding-x"));
+      width: 100%;
       padding: get("transparent-padding-y") get("transparent-padding-x");
       background-color: transparent;
       border: none;
@@ -208,8 +214,11 @@ $config: (
   }
   #{ $prefix }--no-borders {
     border: none;
-    &[open] > .accordion__summary {
-      border-bottom: none;
+    &[open],
+    &.is-active {
+      & > .accordion__summary {
+        border-bottom: none;
+      }
     }
   }
 }

package/types/ui/index.d.ts

@@ -20,5 +20,5 @@ export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
 export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts

@@ -6,5 +6,5 @@ export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
 export * as fontAwesome from "./font-awesome.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map