@ulu/frontend 0.1.0-beta.64 → 0.1.0-beta.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/docs-dev/changelog/index.html +105 -0
  4. package/docs-dev/demos/card/index.html +16 -16
  5. package/docs-dev/demos/data-table/index.html +100 -100
  6. package/docs-dev/sass/components/counter-list/index.html +19 -17
  7. package/docs-dev/sass/core/element/index.html +42 -3
  8. package/package.json +1 -1
  9. package/scss/_element.scss +7 -0
  10. package/scss/components/_data-grid.scss +17 -0
package/docs-dev/changelog/index.html CHANGED
@@ -5166,6 +5166,33 @@
5166
5166
  <div class="toc">
5167
5167
  <ol>
5168
5168
 
5169
+ <li><a href="#0.1.0-beta.65">0.1.0-beta.65</a>
5170
+ </li>
5171
+
5172
+ <li><a href="#0.1.0-beta.64">0.1.0-beta.64</a>
5173
+ </li>
5174
+
5175
+ <li><a href="#0.1.0-beta.63">0.1.0-beta.63</a>
5176
+ </li>
5177
+
5178
+ <li><a href="#versions-0.1.0-beta.59%2C-0.1.0-beta.60%2C-0.1.0-beta.61%2C-0.1.0-beta.62">Versions 0.1.0-beta.59, 0.1.0-beta.60, 0.1.0-beta.61, 0.1.0-beta.62</a>
5179
+ </li>
5180
+
5181
+ <li><a href="#version-0.1.0-beta.58">Version 0.1.0-beta.58</a>
5182
+ </li>
5183
+
5184
+ <li><a href="#version-0.1.0-beta.57">Version 0.1.0-beta.57</a>
5185
+ </li>
5186
+
5187
+ <li><a href="#version-0.1.0-beta.56">Version 0.1.0-beta.56</a>
5188
+ </li>
5189
+
5190
+ <li><a href="#version-0.1.0-beta.55">Version 0.1.0-beta.55</a>
5191
+ </li>
5192
+
5193
+ <li><a href="#version-0.1.0-beta.54">Version 0.1.0-beta.54</a>
5194
+ </li>
5195
+
5169
5196
  <li><a href="#version-0.1.0-beta.53">Version 0.1.0-beta.53</a>
5170
5197
  </li>
5171
5198
 
@@ -5382,6 +5409,84 @@
5382
5409
 
5383
5410
  <div class="changelog">
5384
5411
  <h1 id="change-log" tabindex="-1">Change Log</h1>
5412
+ <h2 id="0.1.0-beta.65" tabindex="-1">0.1.0-beta.65</h2>
5413
+ <ul>
5414
+ <li><strong>scss/element</strong>
5415
+ <ul>
5416
+ <li>Add backdrop-filter-blur mixin</li>
5417
+ </ul>
5418
+ </li>
5419
+ </ul>
5420
+ <h2 id="0.1.0-beta.64" tabindex="-1">0.1.0-beta.64</h2>
5421
+ <ul>
5422
+ <li><strong>scss/components/counter-list</strong>
5423
+ <ul>
5424
+ <li>Fix mistake in &quot;item-margin&quot; property default value
5425
+ <ul>
5426
+ <li>(should be space separated list or single number was comma separated)</li>
5427
+ </ul>
5428
+ </li>
5429
+ </ul>
5430
+ </li>
5431
+ </ul>
5432
+ <h2 id="0.1.0-beta.63" tabindex="-1">0.1.0-beta.63</h2>
5433
+ <ul>
5434
+ <li><strong>js/ui/scrollpoints</strong>
5435
+ <ul>
5436
+ <li>Fixed error using for syncedElements option (Missing getElement, was moved to utils)</li>
5437
+ </ul>
5438
+ </li>
5439
+ </ul>
5440
+ <h2 id="versions-0.1.0-beta.59%2C-0.1.0-beta.60%2C-0.1.0-beta.61%2C-0.1.0-beta.62" tabindex="-1">Versions 0.1.0-beta.59, 0.1.0-beta.60, 0.1.0-beta.61, 0.1.0-beta.62</h2>
5441
+ <ul>
5442
+ <li>Update @ulu/utils dependency to latest</li>
5443
+ </ul>
5444
+ <h2 id="version-0.1.0-beta.58" tabindex="-1">Version 0.1.0-beta.58</h2>
5445
+ <ul>
5446
+ <li><strong>js/ui/slider</strong>
5447
+ <ul>
5448
+ <li>Change slider swipe to be on slides</li>
5449
+ <li>Add options for swipeOptions to configure <a href="https://www.npmjs.com/package/swipe-listener">&quot;swipe-listener&quot;</a> library (see it's documentation for options)
5450
+ <ul>
5451
+ <li>Adding preventScroll by default</li>
5452
+ </ul>
5453
+ </li>
5454
+ </ul>
5455
+ </li>
5456
+ </ul>
5457
+ <h2 id="version-0.1.0-beta.57" tabindex="-1">Version 0.1.0-beta.57</h2>
5458
+ <ul>
5459
+ <li><strong>js/ui/slider</strong>
5460
+ <ul>
5461
+ <li>Setup swipe listener and add option for swipeEnabled (true by default)</li>
5462
+ </ul>
5463
+ </li>
5464
+ </ul>
5465
+ <h2 id="version-0.1.0-beta.56" tabindex="-1">Version 0.1.0-beta.56</h2>
5466
+ <ul>
5467
+ <li><strong>scss/components/counter-list</strong>
5468
+ <ul>
5469
+ <li>Add counter (font-family, font-weight)</li>
5470
+ </ul>
5471
+ </li>
5472
+ </ul>
5473
+ <h2 id="version-0.1.0-beta.55" tabindex="-1">Version 0.1.0-beta.55</h2>
5474
+ <ul>
5475
+ <li><strong>scss/components/counter-list</strong>
5476
+ <ul>
5477
+ <li>Fix selector (was nested if using .counter-list__item), Updates for API for $config</li>
5478
+ </ul>
5479
+ </li>
5480
+ </ul>
5481
+ <h2 id="version-0.1.0-beta.54" tabindex="-1">Version 0.1.0-beta.54</h2>
5482
+ <ul>
5483
+ <li><strong>js/ui/modal-builder</strong>
5484
+ <ul>
5485
+ <li>Add option for titleClass</li>
5486
+ <li>Fill in jsdoc documentation for defaults</li>
5487
+ </ul>
5488
+ </li>
5489
+ </ul>
5385
5490
  <h2 id="version-0.1.0-beta.53" tabindex="-1">Version 0.1.0-beta.53</h2>
5386
5491
  <ul>
5387
5492
  <li><strong>scss/components/slider</strong>
package/docs-dev/demos/card/index.html CHANGED
@@ -5184,60 +5184,60 @@
5184
5184
  <legend>Elements Visible</legend>
5185
5185
  <div>
5186
5186
  <div class="form-theme__item form-theme__item--checkbox">
5187
- <input type="checkbox" id="live-demo-id-25" name="title" checked="">
5188
- <label for="live-demo-id-25">
5187
+ <input type="checkbox" id="live-demo-id-9" name="title" checked="">
5188
+ <label for="live-demo-id-9">
5189
5189
  Title
5190
5190
  </label>
5191
5191
  </div>
5192
5192
  <div class="form-theme__item form-theme__item--checkbox">
5193
- <input type="checkbox" id="live-demo-id-26" name="body" checked="">
5194
- <label for="live-demo-id-26">
5193
+ <input type="checkbox" id="live-demo-id-10" name="body" checked="">
5194
+ <label for="live-demo-id-10">
5195
5195
  Body
5196
5196
  </label>
5197
5197
  </div>
5198
5198
  <div class="form-theme__item form-theme__item--checkbox">
5199
- <input type="checkbox" id="live-demo-id-27" name="content" checked="">
5200
- <label for="live-demo-id-27">
5199
+ <input type="checkbox" id="live-demo-id-11" name="content" checked="">
5200
+ <label for="live-demo-id-11">
5201
5201
  Content
5202
5202
  </label>
5203
5203
  </div>
5204
5204
  <div class="form-theme__item form-theme__item--checkbox">
5205
- <input type="checkbox" id="live-demo-id-28" name="aside" checked="">
5206
- <label for="live-demo-id-28">
5205
+ <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
5206
+ <label for="live-demo-id-12">
5207
5207
  Aside
5208
5208
  </label>
5209
5209
  </div>
5210
5210
  <div class="form-theme__item form-theme__item--checkbox">
5211
- <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
5212
- <label for="live-demo-id-29">
5211
+ <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
5212
+ <label for="live-demo-id-13">
5213
5213
  Footer
5214
5214
  </label>
5215
5215
  </div>
5216
5216
  </div>
5217
5217
  </fieldset>
5218
5218
  <div class="form-theme__item form-theme__item--select">
5219
- <label for="live-demo-id-30">
5219
+ <label for="live-demo-id-14">
5220
5220
  Action
5221
5221
  <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
5222
5222
  </label>
5223
- <select id="live-demo-id-30" name="action">
5223
+ <select id="live-demo-id-14" name="action">
5224
5224
  <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
5225
5225
  </select>
5226
5226
  </div>
5227
5227
  <div class="form-theme__item form-theme__item--select">
5228
- <label for="live-demo-id-31">
5228
+ <label for="live-demo-id-15">
5229
5229
  Media
5230
5230
  </label>
5231
- <select id="live-demo-id-31" name="media">
5231
+ <select id="live-demo-id-15" name="media">
5232
5232
  <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
5233
5233
  </select>
5234
5234
  </div>
5235
5235
  <div class="form-theme__item form-theme__item--select">
5236
- <label for="live-demo-id-32">
5236
+ <label for="live-demo-id-16">
5237
5237
  Layout
5238
5238
  <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
5239
5239
  </label>
5240
- <select id="live-demo-id-32" name="layout">
5240
+ <select id="live-demo-id-16" name="layout">
5241
5241
  <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
5242
5242
  </select>
5243
5243
  </div>
package/docs-dev/demos/data-table/index.html CHANGED
@@ -5222,178 +5222,178 @@
5222
5222
  </table>
5223
5223
  <h2 class="h2">Complex Table</h2>
5224
5224
  <h2 class="h2">Striped Table</h2>
5225
- <table class="data-table data-table--striped" id="dt-13">
5225
+ <table class="data-table data-table--striped" id="dt-5">
5226
5226
  <caption>
5227
5227
  This Is The Table's Caption
5228
5228
  </caption>
5229
5229
  <thead>
5230
5230
  <tr>
5231
- <th id="dt-13-type" rowspan="2">Type</th>
5232
- <th id="dt-13-group" colspan="2">Group</th>
5233
- <th id="dt-13-details" colspan="2">Details</th>
5234
- <th id="dt-13-id" rowspan="2">Id</th>
5231
+ <th id="dt-5-type" rowspan="2">Type</th>
5232
+ <th id="dt-5-group" colspan="2">Group</th>
5233
+ <th id="dt-5-details" colspan="2">Details</th>
5234
+ <th id="dt-5-id" rowspan="2">Id</th>
5235
5235
  </tr>
5236
5236
  <tr>
5237
- <th headers="dt-13-group" id="dt-13-primary">Primary</th>
5238
- <th headers="dt-13-group" id="dt-13-secondary">Secondary</th>
5239
- <th headers="dt-13-details" id="dt-13-before">Before Task</th>
5240
- <th headers="dt-13-details" id="dt-13-after">After Task</th>
5237
+ <th headers="dt-5-group" id="dt-5-primary">Primary</th>
5238
+ <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
5239
+ <th headers="dt-5-details" id="dt-5-before">Before Task</th>
5240
+ <th headers="dt-5-details" id="dt-5-after">After Task</th>
5241
5241
  </tr>
5242
5242
  </thead>
5243
5243
  <tbody>
5244
5244
  <tr>
5245
- <th rowspan="3" headers="dt-13-type dt-13-r1" id="dt-13-r1">Default</th>
5246
- <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
5247
- <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
5248
- <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
5249
- <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
5250
- <td headers="dt-13-id">OL-53-GHSLE</td>
5245
+ <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
5246
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5247
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5248
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5249
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5250
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5251
5251
  </tr>
5252
5252
  <tr>
5253
- <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
5254
- <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
5255
- <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
5256
- <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
5257
- <td headers="dt-13-id">OL-53-GHSLE</td>
5253
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5254
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5255
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5256
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5257
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5258
5258
  </tr>
5259
5259
  <tr>
5260
- <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
5261
- <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
5262
- <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
5263
- <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
5264
- <td headers="dt-13-id">OL-53-GHSLE</td>
5260
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5261
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5262
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5263
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5264
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5265
5265
  </tr>
5266
5266
  </tbody>
5267
5267
  </table>
5268
5268
  <h2 class="h2">Large-first Table</h2>
5269
- <table class="data-table data-table--large-first" id="dt-14">
5269
+ <table class="data-table data-table--large-first" id="dt-6">
5270
5270
  <caption>
5271
5271
  This Is The Table's Caption
5272
5272
  </caption>
5273
5273
  <thead>
5274
5274
  <tr>
5275
- <th id="dt-14-type" rowspan="2">Type</th>
5276
- <th id="dt-14-group" colspan="2">Group</th>
5277
- <th id="dt-14-details" colspan="2">Details</th>
5278
- <th id="dt-14-id" rowspan="2">Id</th>
5275
+ <th id="dt-6-type" rowspan="2">Type</th>
5276
+ <th id="dt-6-group" colspan="2">Group</th>
5277
+ <th id="dt-6-details" colspan="2">Details</th>
5278
+ <th id="dt-6-id" rowspan="2">Id</th>
5279
5279
  </tr>
5280
5280
  <tr>
5281
- <th headers="dt-14-group" id="dt-14-primary">Primary</th>
5282
- <th headers="dt-14-group" id="dt-14-secondary">Secondary</th>
5283
- <th headers="dt-14-details" id="dt-14-before">Before Task</th>
5284
- <th headers="dt-14-details" id="dt-14-after">After Task</th>
5281
+ <th headers="dt-6-group" id="dt-6-primary">Primary</th>
5282
+ <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
5283
+ <th headers="dt-6-details" id="dt-6-before">Before Task</th>
5284
+ <th headers="dt-6-details" id="dt-6-after">After Task</th>
5285
5285
  </tr>
5286
5286
  </thead>
5287
5287
  <tbody>
5288
5288
  <tr>
5289
- <th rowspan="3" headers="dt-14-type dt-14-r1" id="dt-14-r1">Default</th>
5290
- <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
5291
- <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
5292
- <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
5293
- <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
5294
- <td headers="dt-14-id">OL-53-GHSLE</td>
5289
+ <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
5290
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5291
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5292
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5293
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5294
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5295
5295
  </tr>
5296
5296
  <tr>
5297
- <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
5298
- <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
5299
- <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
5300
- <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
5301
- <td headers="dt-14-id">OL-53-GHSLE</td>
5297
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5298
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5299
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5300
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5301
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5302
5302
  </tr>
5303
5303
  <tr>
5304
- <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
5305
- <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
5306
- <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
5307
- <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
5308
- <td headers="dt-14-id">OL-53-GHSLE</td>
5304
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5305
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5306
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5307
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5308
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5309
5309
  </tr>
5310
5310
  </tbody>
5311
5311
  </table>
5312
5312
  <h2 class="h2">Large-header Table</h2>
5313
- <table class="data-table data-table--large-header" id="dt-15">
5313
+ <table class="data-table data-table--large-header" id="dt-7">
5314
5314
  <caption>
5315
5315
  This Is The Table's Caption
5316
5316
  </caption>
5317
5317
  <thead>
5318
5318
  <tr>
5319
- <th id="dt-15-type" rowspan="2">Type</th>
5320
- <th id="dt-15-group" colspan="2">Group</th>
5321
- <th id="dt-15-details" colspan="2">Details</th>
5322
- <th id="dt-15-id" rowspan="2">Id</th>
5319
+ <th id="dt-7-type" rowspan="2">Type</th>
5320
+ <th id="dt-7-group" colspan="2">Group</th>
5321
+ <th id="dt-7-details" colspan="2">Details</th>
5322
+ <th id="dt-7-id" rowspan="2">Id</th>
5323
5323
  </tr>
5324
5324
  <tr>
5325
- <th headers="dt-15-group" id="dt-15-primary">Primary</th>
5326
- <th headers="dt-15-group" id="dt-15-secondary">Secondary</th>
5327
- <th headers="dt-15-details" id="dt-15-before">Before Task</th>
5328
- <th headers="dt-15-details" id="dt-15-after">After Task</th>
5325
+ <th headers="dt-7-group" id="dt-7-primary">Primary</th>
5326
+ <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
5327
+ <th headers="dt-7-details" id="dt-7-before">Before Task</th>
5328
+ <th headers="dt-7-details" id="dt-7-after">After Task</th>
5329
5329
  </tr>
5330
5330
  </thead>
5331
5331
  <tbody>
5332
5332
  <tr>
5333
- <th rowspan="3" headers="dt-15-type dt-15-r1" id="dt-15-r1">Default</th>
5334
- <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
5335
- <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
5336
- <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
5337
- <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
5338
- <td headers="dt-15-id">OL-53-GHSLE</td>
5333
+ <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
5334
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5335
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5336
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5337
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5338
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5339
5339
  </tr>
5340
5340
  <tr>
5341
- <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
5342
- <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
5343
- <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
5344
- <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
5345
- <td headers="dt-15-id">OL-53-GHSLE</td>
5341
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5342
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5343
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5344
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5345
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5346
5346
  </tr>
5347
5347
  <tr>
5348
- <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
5349
- <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
5350
- <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
5351
- <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
5352
- <td headers="dt-15-id">OL-53-GHSLE</td>
5348
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5349
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5350
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5351
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5352
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5353
5353
  </tr>
5354
5354
  </tbody>
5355
5355
  </table>
5356
5356
  <h2 class="h2">No-border Table</h2>
5357
- <table class="data-table data-table--no-border" id="dt-16">
5357
+ <table class="data-table data-table--no-border" id="dt-8">
5358
5358
  <caption>
5359
5359
  This Is The Table's Caption
5360
5360
  </caption>
5361
5361
  <thead>
5362
5362
  <tr>
5363
- <th id="dt-16-type" rowspan="2">Type</th>
5364
- <th id="dt-16-group" colspan="2">Group</th>
5365
- <th id="dt-16-details" colspan="2">Details</th>
5366
- <th id="dt-16-id" rowspan="2">Id</th>
5363
+ <th id="dt-8-type" rowspan="2">Type</th>
5364
+ <th id="dt-8-group" colspan="2">Group</th>
5365
+ <th id="dt-8-details" colspan="2">Details</th>
5366
+ <th id="dt-8-id" rowspan="2">Id</th>
5367
5367
  </tr>
5368
5368
  <tr>
5369
- <th headers="dt-16-group" id="dt-16-primary">Primary</th>
5370
- <th headers="dt-16-group" id="dt-16-secondary">Secondary</th>
5371
- <th headers="dt-16-details" id="dt-16-before">Before Task</th>
5372
- <th headers="dt-16-details" id="dt-16-after">After Task</th>
5369
+ <th headers="dt-8-group" id="dt-8-primary">Primary</th>
5370
+ <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
5371
+ <th headers="dt-8-details" id="dt-8-before">Before Task</th>
5372
+ <th headers="dt-8-details" id="dt-8-after">After Task</th>
5373
5373
  </tr>
5374
5374
  </thead>
5375
5375
  <tbody>
5376
5376
  <tr>
5377
- <th rowspan="3" headers="dt-16-type dt-16-r1" id="dt-16-r1">Default</th>
5378
- <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
5379
- <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
5380
- <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
5381
- <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
5382
- <td headers="dt-16-id">OL-53-GHSLE</td>
5377
+ <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
5378
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5379
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5380
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5381
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5382
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5383
5383
  </tr>
5384
5384
  <tr>
5385
- <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
5386
- <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
5387
- <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
5388
- <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
5389
- <td headers="dt-16-id">OL-53-GHSLE</td>
5385
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5386
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5387
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5388
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5389
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5390
5390
  </tr>
5391
5391
  <tr>
5392
- <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
5393
- <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
5394
- <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
5395
- <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
5396
- <td headers="dt-16-id">OL-53-GHSLE</td>
5392
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5393
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5394
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5395
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5396
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5397
5397
  </tr>
5398
5398
  </tbody>
5399
5399
  </table>
package/docs-dev/sass/components/counter-list/index.html CHANGED
@@ -5220,7 +5220,7 @@
5220
5220
  <p>Module Settings</p>
5221
5221
  <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>
5222
5222
  <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>2rem 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5223
- <span class="pjs-token pjs-string">"item-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 1rem<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5223
+ <span class="pjs-token pjs-string">"item-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0 0 1rem 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5224
5224
  <span class="pjs-token pjs-string">"align-items"</span> <span class="pjs-token pjs-punctuation">:</span> baseline<span class="pjs-token pjs-punctuation">,</span>
5225
5225
  <span class="pjs-token pjs-string">"counter-width"</span> <span class="pjs-token pjs-punctuation">:</span> 2.4em<span class="pjs-token pjs-punctuation">,</span>
5226
5226
  <span class="pjs-token pjs-string">"counter-height"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5228,6 +5228,8 @@
5228
5228
  <span class="pjs-token pjs-string">"counter-style"</span> <span class="pjs-token pjs-punctuation">:</span> numeric<span class="pjs-token pjs-punctuation">,</span>
5229
5229
  <span class="pjs-token pjs-string">"counter-border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 50%<span class="pjs-token pjs-punctuation">,</span>
5230
5230
  <span class="pjs-token pjs-string">"counter-font-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.2em<span class="pjs-token pjs-punctuation">,</span>
5231
+ <span class="pjs-token pjs-string">"counter-font-weight"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
5232
+ <span class="pjs-token pjs-string">"counter-font-family"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
5231
5233
  <span class="pjs-token pjs-string">"counter-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
5232
5234
  <span class="pjs-token pjs-string">"counter-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
5233
5235
  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
@@ -5238,7 +5240,7 @@
5238
5240
  <li><strong>Group:</strong> counter-list</li>
5239
5241
  <li><strong>Type:</strong> variable</li>
5240
5242
  <li><strong>Lines (comments):</strong> 11-23</li>
5241
- <li><strong>Lines (code):</strong> 25-37</li>
5243
+ <li><strong>Lines (code):</strong> 25-39</li>
5242
5244
  </ul>
5243
5245
  </details>
5244
5246
  <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5255,14 +5257,14 @@
5255
5257
  <tr>
5256
5258
  <td style="text-align:left">margin</td>
5257
5259
  <td style="text-align:left">List</td>
5260
+ <td style="text-align:left">CssUnit</td>
5258
5261
  <td style="text-align:left">(2rem 0)</td>
5259
- <td style="text-align:left">The top and bottom margin of the list.</td>
5260
5262
  </tr>
5261
5263
  <tr>
5262
5264
  <td style="text-align:left">item-margin</td>
5263
5265
  <td style="text-align:left">List</td>
5264
- <td style="text-align:left">(0, 0, 1rem, 0)</td>
5265
- <td style="text-align:left">The margin applied to each list item.</td>
5266
+ <td style="text-align:left">CssUnit</td>
5267
+ <td style="text-align:left">((0 0 1rem 0))</td>
5266
5268
  </tr>
5267
5269
  <tr>
5268
5270
  <td style="text-align:left">align-items</td>
@@ -5272,19 +5274,19 @@
5272
5274
  </tr>
5273
5275
  <tr>
5274
5276
  <td style="text-align:left">counter-width</td>
5275
- <td style="text-align:left">Length</td>
5277
+ <td style="text-align:left">CssUnit</td>
5276
5278
  <td style="text-align:left">2.4em</td>
5277
5279
  <td style="text-align:left">The width and height (if height is falsy)</td>
5278
5280
  </tr>
5279
5281
  <tr>
5280
5282
  <td style="text-align:left">counter-height</td>
5281
- <td style="text-align:left">Length</td>
5283
+ <td style="text-align:left">CssUnit</td>
5282
5284
  <td style="text-align:left">null</td>
5283
5285
  <td style="text-align:left">The height (optional)</td>
5284
5286
  </tr>
5285
5287
  <tr>
5286
5288
  <td style="text-align:left">counter-gap</td>
5287
- <td style="text-align:left">Length</td>
5289
+ <td style="text-align:left">CssUnit</td>
5288
5290
  <td style="text-align:left">1em</td>
5289
5291
  <td style="text-align:left">The gap between the counter and the list item content.</td>
5290
5292
  </tr>
@@ -5302,21 +5304,21 @@
5302
5304
  </tr>
5303
5305
  <tr>
5304
5306
  <td style="text-align:left">counter-font-size</td>
5305
- <td style="text-align:left">Length</td>
5307
+ <td style="text-align:left">CssUnit</td>
5306
5308
  <td style="text-align:left">1.2em</td>
5307
5309
  <td style="text-align:left">The font-size of the counter text.</td>
5308
5310
  </tr>
5309
5311
  <tr>
5310
5312
  <td style="text-align:left">counter-color</td>
5313
+ <td style="text-align:left">Color</td>
5311
5314
  <td style="text-align:left">String</td>
5312
5315
  <td style="text-align:left">white</td>
5313
- <td style="text-align:left">The text color of the counter. Accepts color names or hex codes.</td>
5314
5316
  </tr>
5315
5317
  <tr>
5316
5318
  <td style="text-align:left">counter-background-color</td>
5319
+ <td style="text-align:left">Color</td>
5317
5320
  <td style="text-align:left">String</td>
5318
5321
  <td style="text-align:left">&quot;accent&quot;</td>
5319
- <td style="text-align:left">The background color of the counter. Refers to a color in the color module.</td>
5320
5322
  </tr>
5321
5323
  </tbody>
5322
5324
  </table>
@@ -5334,8 +5336,8 @@
5334
5336
  <li><strong>File:</strong> _counter-list.scss</li>
5335
5337
  <li><strong>Group:</strong> counter-list</li>
5336
5338
  <li><strong>Type:</strong> mixin</li>
5337
- <li><strong>Lines (comments):</strong> 39-42</li>
5338
- <li><strong>Lines (code):</strong> 44-46</li>
5339
+ <li><strong>Lines (comments):</strong> 41-44</li>
5340
+ <li><strong>Lines (code):</strong> 46-48</li>
5339
5341
  </ul>
5340
5342
  </details>
5341
5343
  <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5374,8 +5376,8 @@
5374
5376
  <li><strong>File:</strong> _counter-list.scss</li>
5375
5377
  <li><strong>Group:</strong> counter-list</li>
5376
5378
  <li><strong>Type:</strong> mixin</li>
5377
- <li><strong>Lines (comments):</strong> 57-64</li>
5378
- <li><strong>Lines (code):</strong> 66-133</li>
5379
+ <li><strong>Lines (comments):</strong> 59-66</li>
5380
+ <li><strong>Lines (code):</strong> 68-137</li>
5379
5381
  </ul>
5380
5382
  </details>
5381
5383
  <div class="callout callout--demo crop-margins">
@@ -5414,8 +5416,8 @@
5414
5416
  <li><strong>File:</strong> _counter-list.scss</li>
5415
5417
  <li><strong>Group:</strong> counter-list</li>
5416
5418
  <li><strong>Type:</strong> function</li>
5417
- <li><strong>Lines (comments):</strong> 48-51</li>
5418
- <li><strong>Lines (code):</strong> 53-55</li>
5419
+ <li><strong>Lines (comments):</strong> 50-53</li>
5420
+ <li><strong>Lines (code):</strong> 55-57</li>
5419
5421
  </ul>
5420
5422
  </details>
5421
5423
  <h4 id="examples-2" tabindex="-1">Examples</h4>