@ulu/frontend 0.1.0-beta.111 → 0.1.0-beta.112

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 (8) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/docs-dev/demos/card/index.html +16 -16
  4. package/docs-dev/demos/data-table/index.html +100 -100
  5. package/docs-dev/demos/progress-bar/index.html +14 -8
  6. package/docs-dev/demos/progress-circle/index.html +44 -44
  7. package/package.json +1 -1
  8. package/scss/components/_progress-bar.scss +13 -7
package/docs-dev/demos/card/index.html CHANGED
@@ -5784,60 +5784,60 @@
5784
5784
  <legend>Elements Visible</legend>
5785
5785
  <div>
5786
5786
  <div class="form-theme__item form-theme__item--checkbox">
5787
- <input type="checkbox" id="live-demo-id-1" name="title" checked="">
5788
- <label for="live-demo-id-1">
5787
+ <input type="checkbox" id="live-demo-id-9" name="title" checked="">
5788
+ <label for="live-demo-id-9">
5789
5789
  Title
5790
5790
  </label>
5791
5791
  </div>
5792
5792
  <div class="form-theme__item form-theme__item--checkbox">
5793
- <input type="checkbox" id="live-demo-id-2" name="body" checked="">
5794
- <label for="live-demo-id-2">
5793
+ <input type="checkbox" id="live-demo-id-10" name="body" checked="">
5794
+ <label for="live-demo-id-10">
5795
5795
  Body
5796
5796
  </label>
5797
5797
  </div>
5798
5798
  <div class="form-theme__item form-theme__item--checkbox">
5799
- <input type="checkbox" id="live-demo-id-3" name="content" checked="">
5800
- <label for="live-demo-id-3">
5799
+ <input type="checkbox" id="live-demo-id-11" name="content" checked="">
5800
+ <label for="live-demo-id-11">
5801
5801
  Content
5802
5802
  </label>
5803
5803
  </div>
5804
5804
  <div class="form-theme__item form-theme__item--checkbox">
5805
- <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
5806
- <label for="live-demo-id-4">
5805
+ <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
5806
+ <label for="live-demo-id-12">
5807
5807
  Aside
5808
5808
  </label>
5809
5809
  </div>
5810
5810
  <div class="form-theme__item form-theme__item--checkbox">
5811
- <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
5812
- <label for="live-demo-id-5">
5811
+ <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
5812
+ <label for="live-demo-id-13">
5813
5813
  Footer
5814
5814
  </label>
5815
5815
  </div>
5816
5816
  </div>
5817
5817
  </fieldset>
5818
5818
  <div class="form-theme__item form-theme__item--select">
5819
- <label for="live-demo-id-6">
5819
+ <label for="live-demo-id-14">
5820
5820
  Action
5821
5821
  <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
5822
5822
  </label>
5823
- <select id="live-demo-id-6" name="action">
5823
+ <select id="live-demo-id-14" name="action">
5824
5824
  <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
5825
5825
  </select>
5826
5826
  </div>
5827
5827
  <div class="form-theme__item form-theme__item--select">
5828
- <label for="live-demo-id-7">
5828
+ <label for="live-demo-id-15">
5829
5829
  Media
5830
5830
  </label>
5831
- <select id="live-demo-id-7" name="media">
5831
+ <select id="live-demo-id-15" name="media">
5832
5832
  <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
5833
5833
  </select>
5834
5834
  </div>
5835
5835
  <div class="form-theme__item form-theme__item--select">
5836
- <label for="live-demo-id-8">
5836
+ <label for="live-demo-id-16">
5837
5837
  Layout
5838
5838
  <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
5839
5839
  </label>
5840
- <select id="live-demo-id-8" name="layout">
5840
+ <select id="live-demo-id-16" name="layout">
5841
5841
  <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
5842
5842
  </select>
5843
5843
  </div>
package/docs-dev/demos/data-table/index.html CHANGED
@@ -5822,178 +5822,178 @@
5822
5822
  </table>
5823
5823
  <h2 class="h2">Complex Table</h2>
5824
5824
  <h2 class="h2">Striped Table</h2>
5825
- <table class="data-table data-table--striped" id="dt-1">
5825
+ <table class="data-table data-table--striped" id="dt-5">
5826
5826
  <caption>
5827
5827
  This Is The Table's Caption
5828
5828
  </caption>
5829
5829
  <thead>
5830
5830
  <tr>
5831
- <th id="dt-1-type" rowspan="2">Type</th>
5832
- <th id="dt-1-group" colspan="2">Group</th>
5833
- <th id="dt-1-details" colspan="2">Details</th>
5834
- <th id="dt-1-id" rowspan="2">Id</th>
5831
+ <th id="dt-5-type" rowspan="2">Type</th>
5832
+ <th id="dt-5-group" colspan="2">Group</th>
5833
+ <th id="dt-5-details" colspan="2">Details</th>
5834
+ <th id="dt-5-id" rowspan="2">Id</th>
5835
5835
  </tr>
5836
5836
  <tr>
5837
- <th headers="dt-1-group" id="dt-1-primary">Primary</th>
5838
- <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
5839
- <th headers="dt-1-details" id="dt-1-before">Before Task</th>
5840
- <th headers="dt-1-details" id="dt-1-after">After Task</th>
5837
+ <th headers="dt-5-group" id="dt-5-primary">Primary</th>
5838
+ <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
5839
+ <th headers="dt-5-details" id="dt-5-before">Before Task</th>
5840
+ <th headers="dt-5-details" id="dt-5-after">After Task</th>
5841
5841
  </tr>
5842
5842
  </thead>
5843
5843
  <tbody>
5844
5844
  <tr>
5845
- <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
5846
- <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
5847
- <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
5848
- <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
5849
- <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
5850
- <td headers="dt-1-id">OL-53-GHSLE</td>
5845
+ <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
5846
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5847
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5848
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5849
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5850
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5851
5851
  </tr>
5852
5852
  <tr>
5853
- <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
5854
- <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
5855
- <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
5856
- <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
5857
- <td headers="dt-1-id">OL-53-GHSLE</td>
5853
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5854
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5855
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5856
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5857
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5858
5858
  </tr>
5859
5859
  <tr>
5860
- <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
5861
- <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
5862
- <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
5863
- <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
5864
- <td headers="dt-1-id">OL-53-GHSLE</td>
5860
+ <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
5861
+ <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
5862
+ <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
5863
+ <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
5864
+ <td headers="dt-5-id">OL-53-GHSLE</td>
5865
5865
  </tr>
5866
5866
  </tbody>
5867
5867
  </table>
5868
5868
  <h2 class="h2">Large-first Table</h2>
5869
- <table class="data-table data-table--large-first" id="dt-2">
5869
+ <table class="data-table data-table--large-first" id="dt-6">
5870
5870
  <caption>
5871
5871
  This Is The Table's Caption
5872
5872
  </caption>
5873
5873
  <thead>
5874
5874
  <tr>
5875
- <th id="dt-2-type" rowspan="2">Type</th>
5876
- <th id="dt-2-group" colspan="2">Group</th>
5877
- <th id="dt-2-details" colspan="2">Details</th>
5878
- <th id="dt-2-id" rowspan="2">Id</th>
5875
+ <th id="dt-6-type" rowspan="2">Type</th>
5876
+ <th id="dt-6-group" colspan="2">Group</th>
5877
+ <th id="dt-6-details" colspan="2">Details</th>
5878
+ <th id="dt-6-id" rowspan="2">Id</th>
5879
5879
  </tr>
5880
5880
  <tr>
5881
- <th headers="dt-2-group" id="dt-2-primary">Primary</th>
5882
- <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
5883
- <th headers="dt-2-details" id="dt-2-before">Before Task</th>
5884
- <th headers="dt-2-details" id="dt-2-after">After Task</th>
5881
+ <th headers="dt-6-group" id="dt-6-primary">Primary</th>
5882
+ <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
5883
+ <th headers="dt-6-details" id="dt-6-before">Before Task</th>
5884
+ <th headers="dt-6-details" id="dt-6-after">After Task</th>
5885
5885
  </tr>
5886
5886
  </thead>
5887
5887
  <tbody>
5888
5888
  <tr>
5889
- <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
5890
- <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
5891
- <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
5892
- <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
5893
- <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
5894
- <td headers="dt-2-id">OL-53-GHSLE</td>
5889
+ <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
5890
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5891
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5892
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5893
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5894
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5895
5895
  </tr>
5896
5896
  <tr>
5897
- <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
5898
- <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
5899
- <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
5900
- <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
5901
- <td headers="dt-2-id">OL-53-GHSLE</td>
5897
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5898
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5899
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5900
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5901
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5902
5902
  </tr>
5903
5903
  <tr>
5904
- <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
5905
- <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
5906
- <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
5907
- <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
5908
- <td headers="dt-2-id">OL-53-GHSLE</td>
5904
+ <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
5905
+ <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
5906
+ <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
5907
+ <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
5908
+ <td headers="dt-6-id">OL-53-GHSLE</td>
5909
5909
  </tr>
5910
5910
  </tbody>
5911
5911
  </table>
5912
5912
  <h2 class="h2">Large-header Table</h2>
5913
- <table class="data-table data-table--large-header" id="dt-3">
5913
+ <table class="data-table data-table--large-header" id="dt-7">
5914
5914
  <caption>
5915
5915
  This Is The Table's Caption
5916
5916
  </caption>
5917
5917
  <thead>
5918
5918
  <tr>
5919
- <th id="dt-3-type" rowspan="2">Type</th>
5920
- <th id="dt-3-group" colspan="2">Group</th>
5921
- <th id="dt-3-details" colspan="2">Details</th>
5922
- <th id="dt-3-id" rowspan="2">Id</th>
5919
+ <th id="dt-7-type" rowspan="2">Type</th>
5920
+ <th id="dt-7-group" colspan="2">Group</th>
5921
+ <th id="dt-7-details" colspan="2">Details</th>
5922
+ <th id="dt-7-id" rowspan="2">Id</th>
5923
5923
  </tr>
5924
5924
  <tr>
5925
- <th headers="dt-3-group" id="dt-3-primary">Primary</th>
5926
- <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
5927
- <th headers="dt-3-details" id="dt-3-before">Before Task</th>
5928
- <th headers="dt-3-details" id="dt-3-after">After Task</th>
5925
+ <th headers="dt-7-group" id="dt-7-primary">Primary</th>
5926
+ <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
5927
+ <th headers="dt-7-details" id="dt-7-before">Before Task</th>
5928
+ <th headers="dt-7-details" id="dt-7-after">After Task</th>
5929
5929
  </tr>
5930
5930
  </thead>
5931
5931
  <tbody>
5932
5932
  <tr>
5933
- <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
5934
- <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
5935
- <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
5936
- <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
5937
- <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
5938
- <td headers="dt-3-id">OL-53-GHSLE</td>
5933
+ <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
5934
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5935
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5936
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5937
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5938
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5939
5939
  </tr>
5940
5940
  <tr>
5941
- <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
5942
- <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
5943
- <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
5944
- <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
5945
- <td headers="dt-3-id">OL-53-GHSLE</td>
5941
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5942
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5943
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5944
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5945
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5946
5946
  </tr>
5947
5947
  <tr>
5948
- <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
5949
- <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
5950
- <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
5951
- <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
5952
- <td headers="dt-3-id">OL-53-GHSLE</td>
5948
+ <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
5949
+ <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
5950
+ <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
5951
+ <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
5952
+ <td headers="dt-7-id">OL-53-GHSLE</td>
5953
5953
  </tr>
5954
5954
  </tbody>
5955
5955
  </table>
5956
5956
  <h2 class="h2">No-border Table</h2>
5957
- <table class="data-table data-table--no-border" id="dt-4">
5957
+ <table class="data-table data-table--no-border" id="dt-8">
5958
5958
  <caption>
5959
5959
  This Is The Table's Caption
5960
5960
  </caption>
5961
5961
  <thead>
5962
5962
  <tr>
5963
- <th id="dt-4-type" rowspan="2">Type</th>
5964
- <th id="dt-4-group" colspan="2">Group</th>
5965
- <th id="dt-4-details" colspan="2">Details</th>
5966
- <th id="dt-4-id" rowspan="2">Id</th>
5963
+ <th id="dt-8-type" rowspan="2">Type</th>
5964
+ <th id="dt-8-group" colspan="2">Group</th>
5965
+ <th id="dt-8-details" colspan="2">Details</th>
5966
+ <th id="dt-8-id" rowspan="2">Id</th>
5967
5967
  </tr>
5968
5968
  <tr>
5969
- <th headers="dt-4-group" id="dt-4-primary">Primary</th>
5970
- <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
5971
- <th headers="dt-4-details" id="dt-4-before">Before Task</th>
5972
- <th headers="dt-4-details" id="dt-4-after">After Task</th>
5969
+ <th headers="dt-8-group" id="dt-8-primary">Primary</th>
5970
+ <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
5971
+ <th headers="dt-8-details" id="dt-8-before">Before Task</th>
5972
+ <th headers="dt-8-details" id="dt-8-after">After Task</th>
5973
5973
  </tr>
5974
5974
  </thead>
5975
5975
  <tbody>
5976
5976
  <tr>
5977
- <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
5978
- <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
5979
- <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
5980
- <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
5981
- <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
5982
- <td headers="dt-4-id">OL-53-GHSLE</td>
5977
+ <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
5978
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5979
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5980
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5981
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5982
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5983
5983
  </tr>
5984
5984
  <tr>
5985
- <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
5986
- <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
5987
- <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
5988
- <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
5989
- <td headers="dt-4-id">OL-53-GHSLE</td>
5985
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5986
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5987
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5988
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5989
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5990
5990
  </tr>
5991
5991
  <tr>
5992
- <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
5993
- <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
5994
- <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
5995
- <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
5996
- <td headers="dt-4-id">OL-53-GHSLE</td>
5992
+ <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
5993
+ <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
5994
+ <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
5995
+ <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
5996
+ <td headers="dt-8-id">OL-53-GHSLE</td>
5997
5997
  </tr>
5998
5998
  </tbody>
5999
5999
  </table>
package/docs-dev/demos/progress-bar/index.html CHANGED
@@ -5779,6 +5779,7 @@
5779
5779
 
5780
5780
  <h2 class="h2">Basic Example</h2>
5781
5781
  <p>The default progress bar has no modifiers.</p>
5782
+
5782
5783
  <div class="progress-bar">
5783
5784
  <div class="progress-bar__header"><strong class="progress-bar__label">Label that is long test</strong>
5784
5785
  </div>
@@ -5793,7 +5794,19 @@
5793
5794
  </div>
5794
5795
  </div>
5795
5796
 
5796
- <div class="rule rule--light"></div>
5797
+
5798
+ <h2 class="h2">Simple Example</h2>
5799
+
5800
+ <div class="progress-bar">
5801
+ <div class="progress-bar__header">
5802
+ <strong class="progress-bar__label">Label that is long test</strong>
5803
+ <span class="progress-bar__value">40%</span>
5804
+ </div>
5805
+ <div class="progress-bar__track">
5806
+ <div class="progress-bar__bar" style="width: 40%;"></div>
5807
+ </div>
5808
+ </div>
5809
+
5797
5810
 
5798
5811
  <h2 class="h2">Indeterminate Modifier</h2>
5799
5812
  <p>Uses the <code>.progress-bar--indeterminate</code> modifier for an animated loading state when the progress is unknown.</p>
@@ -5803,7 +5816,6 @@
5803
5816
  </div>
5804
5817
  </div>
5805
5818
 
5806
- <div class="rule rule--light"></div>
5807
5819
 
5808
5820
  <h2 class="h2">Loader Style</h2>
5809
5821
  <p>Uses the <code>.progress-bar--loader</code> modifier for a thin loading bar.</p>
@@ -5814,7 +5826,6 @@
5814
5826
  </div>
5815
5827
 
5816
5828
 
5817
- <div class="rule rule--light"></div>
5818
5829
 
5819
5830
  <h2 class="h2">Completed Example</h2>
5820
5831
  <p>An example of a completed progress bar with an icon.</p>
@@ -5836,7 +5847,6 @@
5836
5847
  </div>
5837
5848
  </div>
5838
5849
 
5839
- <div class="rule rule--light"></div>
5840
5850
 
5841
5851
  <h2 class="h2">Deficit Example</h2>
5842
5852
  <p>An example of a progress bar with a deficit.</p>
@@ -5857,7 +5867,6 @@
5857
5867
  </div>
5858
5868
  </div>
5859
5869
 
5860
- <div class="rule rule--light"></div>
5861
5870
 
5862
5871
  <h2 class="h2">Positive Style</h2>
5863
5872
  <p>Uses the <code>.progress-bar--positive</code> modifier.</p>
@@ -5868,7 +5877,6 @@
5868
5877
  </div>
5869
5878
  </div>
5870
5879
 
5871
- <div class="rule rule--light"></div>
5872
5880
 
5873
5881
  <h2 class="h2">Negative Style</h2>
5874
5882
  <p>Uses the <code>.progress-bar--negative</code> modifier.</p>
@@ -5879,7 +5887,6 @@
5879
5887
  </div>
5880
5888
  </div>
5881
5889
 
5882
- <div class="rule rule--light"></div>
5883
5890
 
5884
5891
  <h2 class="h2">Small Modifier</h2>
5885
5892
  <p>Uses the <code>.progress-bar--small</code> modifier. Font sizing is controlled by the parent element.</p>
@@ -5918,7 +5925,6 @@
5918
5925
  </div>
5919
5926
  </div>
5920
5927
 
5921
- <div class="rule rule--light"></div>
5922
5928
 
5923
5929
  <h2 class="h2">Icon left with rail</h2>
5924
5930
  <p>Combining with rail component for icon on left</p>