@ulu/frontend 0.1.0-beta.27 → 0.1.0-beta.29

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 (164) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/docs-dev/assets/main.js +832 -421
  4. package/docs-dev/assets/placeholder/icon-calendar.svg +1 -0
  5. package/docs-dev/assets/placeholder/icon-check.svg +1 -0
  6. package/docs-dev/assets/style.css +629 -233
  7. package/docs-dev/changelog/index.html +98 -8
  8. package/docs-dev/demos/accordion/index.html +38 -8
  9. package/docs-dev/demos/button/index.html +38 -8
  10. package/docs-dev/demos/button-verbose/index.html +5109 -0
  11. package/docs-dev/demos/callout/index.html +38 -8
  12. package/docs-dev/demos/captioned-figure/index.html +38 -8
  13. package/docs-dev/demos/card/index.html +105 -477
  14. package/docs-dev/demos/card-grid/index.html +88 -12
  15. package/docs-dev/demos/card-new/index.html +5088 -0
  16. package/docs-dev/demos/card-old/index.html +5223 -0
  17. package/docs-dev/demos/card.1/index.html +5223 -0
  18. package/docs-dev/demos/card.TRASH/index.html +5541 -0
  19. package/docs-dev/demos/css-icons/index.html +38 -8
  20. package/docs-dev/demos/data-grid/index.html +38 -8
  21. package/docs-dev/demos/data-table/index.html +63 -33
  22. package/docs-dev/demos/details-group/index.html +38 -8
  23. package/docs-dev/demos/file-save/index.html +38 -8
  24. package/docs-dev/demos/flipcard/index.html +38 -8
  25. package/docs-dev/demos/form-theme/index.html +38 -8
  26. package/docs-dev/demos/index.html +38 -8
  27. package/docs-dev/demos/list-inline/index.html +38 -8
  28. package/docs-dev/demos/list-lines/index.html +38 -8
  29. package/docs-dev/demos/menu-stack/index.html +38 -8
  30. package/docs-dev/demos/modals/index.html +38 -8
  31. package/docs-dev/demos/nav-strip/index.html +38 -8
  32. package/docs-dev/demos/overlay-section/index.html +38 -8
  33. package/docs-dev/demos/popovers/index.html +41 -9
  34. package/docs-dev/demos/print/index.html +38 -8
  35. package/docs-dev/demos/pull-quote/index.html +38 -8
  36. package/docs-dev/demos/rule/index.html +38 -8
  37. package/docs-dev/demos/scrollpoints/index.html +38 -8
  38. package/docs-dev/demos/spoke-spinner/index.html +38 -8
  39. package/docs-dev/demos/sticky-list/index.html +38 -8
  40. package/docs-dev/demos/tabs/index.html +38 -8
  41. package/docs-dev/demos/tag/index.html +38 -8
  42. package/docs-dev/demos/theme-toggle/index.html +38 -8
  43. package/docs-dev/demos/tiles/index.html +38 -8
  44. package/docs-dev/demos/tooltip/index.html +38 -8
  45. package/docs-dev/guide/building-stylesheet/index.html +38 -8
  46. package/docs-dev/guide/developing-ulu-scss-module/index.html +38 -8
  47. package/docs-dev/guide/index.html +38 -8
  48. package/docs-dev/index.html +38 -8
  49. package/docs-dev/javascript/events/index.html +38 -8
  50. package/docs-dev/javascript/index.html +38 -8
  51. package/docs-dev/javascript/settings/index.html +38 -8
  52. package/docs-dev/javascript/ui-breakpoints/index.html +38 -8
  53. package/docs-dev/javascript/ui-collapsible/index.html +38 -8
  54. package/docs-dev/javascript/ui-details-group/index.html +38 -8
  55. package/docs-dev/javascript/ui-dialog/index.html +38 -8
  56. package/docs-dev/javascript/ui-flipcard/index.html +38 -8
  57. package/docs-dev/javascript/ui-grid/index.html +38 -8
  58. package/docs-dev/javascript/ui-modal-builder/index.html +38 -8
  59. package/docs-dev/javascript/ui-overflow-scroller/index.html +38 -8
  60. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +38 -8
  61. package/docs-dev/javascript/ui-page/index.html +38 -8
  62. package/docs-dev/javascript/ui-popover/index.html +38 -8
  63. package/docs-dev/javascript/ui-print/index.html +38 -8
  64. package/docs-dev/javascript/ui-print-details/index.html +38 -8
  65. package/docs-dev/javascript/ui-programmatic-modal/index.html +38 -8
  66. package/docs-dev/javascript/ui-proxy-click/index.html +38 -8
  67. package/docs-dev/javascript/ui-resizer/index.html +38 -8
  68. package/docs-dev/javascript/ui-scroll-slider/index.html +38 -8
  69. package/docs-dev/javascript/ui-scrollpoint/index.html +38 -8
  70. package/docs-dev/javascript/ui-slider/index.html +38 -8
  71. package/docs-dev/javascript/ui-tabs/index.html +38 -8
  72. package/docs-dev/javascript/ui-theme-toggle/index.html +38 -8
  73. package/docs-dev/javascript/ui-tooltip/index.html +38 -8
  74. package/docs-dev/javascript/utils-class-logger/index.html +38 -8
  75. package/docs-dev/javascript/utils-dom/index.html +38 -8
  76. package/docs-dev/javascript/utils-file-save/index.html +38 -8
  77. package/docs-dev/javascript/utils-floating-ui/index.html +38 -8
  78. package/docs-dev/javascript/utils-id/index.html +38 -8
  79. package/docs-dev/javascript/utils-pause-youtube-video/index.html +38 -8
  80. package/docs-dev/sass/base/color/index.html +38 -8
  81. package/docs-dev/sass/base/elements/index.html +38 -8
  82. package/docs-dev/sass/base/index/index.html +38 -8
  83. package/docs-dev/sass/base/index.html +38 -8
  84. package/docs-dev/sass/base/keyframes/index.html +38 -8
  85. package/docs-dev/sass/base/layout/index.html +38 -8
  86. package/docs-dev/sass/base/normalize/index.html +38 -8
  87. package/docs-dev/sass/base/print/index.html +38 -8
  88. package/docs-dev/sass/base/root/index.html +38 -8
  89. package/docs-dev/sass/base/typography/index.html +38 -8
  90. package/docs-dev/sass/components/accordion/index.html +38 -8
  91. package/docs-dev/sass/components/adaptive-spacing/index.html +38 -8
  92. package/docs-dev/sass/components/badge/index.html +38 -8
  93. package/docs-dev/sass/components/basic-hero/index.html +38 -8
  94. package/docs-dev/sass/components/button/index.html +38 -8
  95. package/docs-dev/sass/components/button-verbose/index.html +96 -17
  96. package/docs-dev/sass/components/callout/index.html +38 -8
  97. package/docs-dev/sass/components/captioned-figure/index.html +38 -8
  98. package/docs-dev/sass/components/card/index.html +44 -14
  99. package/docs-dev/sass/components/card-grid/index.html +38 -8
  100. package/docs-dev/sass/components/css-icon/index.html +38 -8
  101. package/docs-dev/sass/components/data-grid/index.html +38 -8
  102. package/docs-dev/sass/components/data-table/index.html +38 -8
  103. package/docs-dev/sass/components/fill-context/index.html +38 -8
  104. package/docs-dev/sass/components/flipcard/index.html +38 -8
  105. package/docs-dev/sass/components/flipcard-grid/index.html +38 -8
  106. package/docs-dev/sass/components/form-theme/index.html +124 -93
  107. package/docs-dev/sass/components/hero/index.html +38 -8
  108. package/docs-dev/sass/components/horizontal-rule/index.html +38 -8
  109. package/docs-dev/sass/components/image-grid/index.html +38 -8
  110. package/docs-dev/sass/components/index/index.html +38 -8
  111. package/docs-dev/sass/components/index.html +38 -8
  112. package/docs-dev/sass/components/links/index.html +38 -8
  113. package/docs-dev/sass/components/list-inline/index.html +38 -8
  114. package/docs-dev/sass/components/list-lines/index.html +38 -8
  115. package/docs-dev/sass/components/list-ordered/index.html +38 -8
  116. package/docs-dev/sass/components/list-unordered/index.html +38 -8
  117. package/docs-dev/sass/components/menu-stack/index.html +38 -8
  118. package/docs-dev/sass/components/modal/index.html +38 -8
  119. package/docs-dev/sass/components/nav-strip/index.html +38 -8
  120. package/docs-dev/sass/components/overlay-section/index.html +38 -8
  121. package/docs-dev/sass/components/pager/index.html +38 -8
  122. package/docs-dev/sass/components/placeholder-block/index.html +38 -8
  123. package/docs-dev/sass/components/popover/index.html +60 -31
  124. package/docs-dev/sass/components/pull-quote/index.html +38 -8
  125. package/docs-dev/sass/components/ratio-box/index.html +38 -8
  126. package/docs-dev/sass/components/rule/index.html +38 -8
  127. package/docs-dev/sass/components/scroll-slider/index.html +38 -8
  128. package/docs-dev/sass/components/skip-link/index.html +38 -8
  129. package/docs-dev/sass/components/slider/index.html +38 -8
  130. package/docs-dev/sass/components/spoke-spinner/index.html +38 -8
  131. package/docs-dev/sass/components/sticky-list/index.html +38 -8
  132. package/docs-dev/sass/components/tabs/index.html +38 -8
  133. package/docs-dev/sass/components/tag/index.html +38 -8
  134. package/docs-dev/sass/components/tile-button/index.html +38 -8
  135. package/docs-dev/sass/components/tile-grid/index.html +38 -8
  136. package/docs-dev/sass/components/tile-grid-overlay/index.html +38 -8
  137. package/docs-dev/sass/components/vignette/index.html +38 -8
  138. package/docs-dev/sass/components/wysiwyg/index.html +38 -8
  139. package/docs-dev/sass/core/breakpoint/index.html +38 -8
  140. package/docs-dev/sass/core/button/index.html +38 -8
  141. package/docs-dev/sass/core/color/index.html +38 -8
  142. package/docs-dev/sass/core/cssvar/index.html +38 -8
  143. package/docs-dev/sass/core/element/index.html +38 -8
  144. package/docs-dev/sass/core/index.html +38 -8
  145. package/docs-dev/sass/core/layout/index.html +38 -8
  146. package/docs-dev/sass/core/path/index.html +38 -8
  147. package/docs-dev/sass/core/selector/index.html +38 -8
  148. package/docs-dev/sass/core/typography/index.html +38 -8
  149. package/docs-dev/sass/core/units/index.html +38 -8
  150. package/docs-dev/sass/core/utils/index.html +248 -93
  151. package/docs-dev/sass/helpers/color/index.html +38 -8
  152. package/docs-dev/sass/helpers/display/index.html +38 -8
  153. package/docs-dev/sass/helpers/index/index.html +38 -8
  154. package/docs-dev/sass/helpers/index.html +38 -8
  155. package/docs-dev/sass/helpers/print/index.html +38 -8
  156. package/docs-dev/sass/helpers/typography/index.html +38 -8
  157. package/docs-dev/sass/helpers/units/index.html +38 -8
  158. package/docs-dev/sass/helpers/utilities/index.html +38 -8
  159. package/docs-dev/sass/index.html +38 -8
  160. package/package.json +8 -6
  161. package/scss/components/_button-verbose.scss +57 -9
  162. package/scss/components/_card.scss +34 -18
  163. package/scss/components/_form-theme.scss +52 -40
  164. package/scss/components/_popover.scss +16 -11
package/docs-dev/demos/card-grid/index.html CHANGED
@@ -198,11 +198,11 @@
198
198
 
199
199
  <li class="nav-tree__item ">
200
200
 
201
- <a class="nav-tree__link " href="/frontend/demos/callout/">
201
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
202
202
 
203
203
 
204
204
  <span class="nav-tree__text">
205
- Callout
205
+ Button Verbose
206
206
  </span>
207
207
 
208
208
  </a>
@@ -213,11 +213,11 @@
213
213
 
214
214
  <li class="nav-tree__item ">
215
215
 
216
- <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
216
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
217
217
 
218
218
 
219
219
  <span class="nav-tree__text">
220
- Captioned Figure
220
+ Callout
221
221
  </span>
222
222
 
223
223
  </a>
@@ -228,11 +228,11 @@
228
228
 
229
229
  <li class="nav-tree__item ">
230
230
 
231
- <a class="nav-tree__link " href="/frontend/demos/card/">
231
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
232
232
 
233
233
 
234
234
  <span class="nav-tree__text">
235
- Card
235
+ Captioned Figure
236
236
  </span>
237
237
 
238
238
  </a>
@@ -256,6 +256,21 @@
256
256
  </li>
257
257
 
258
258
 
259
+ <li class="nav-tree__item ">
260
+
261
+ <a class="nav-tree__link " href="/frontend/demos/card/">
262
+
263
+
264
+ <span class="nav-tree__text">
265
+ Card New
266
+ </span>
267
+
268
+ </a>
269
+
270
+
271
+ </li>
272
+
273
+
259
274
  <li class="nav-tree__item ">
260
275
 
261
276
  <a class="nav-tree__link " href="/frontend/demos/css-icons/">
@@ -2669,11 +2684,11 @@
2669
2684
 
2670
2685
  <li class="nav-tree__item ">
2671
2686
 
2672
- <a class="nav-tree__link " href="/frontend/demos/callout/">
2687
+ <a class="nav-tree__link " href="/frontend/demos/button-verbose/">
2673
2688
 
2674
2689
 
2675
2690
  <span class="nav-tree__text">
2676
- Callout
2691
+ Button Verbose
2677
2692
  </span>
2678
2693
 
2679
2694
  </a>
@@ -2684,11 +2699,11 @@
2684
2699
 
2685
2700
  <li class="nav-tree__item ">
2686
2701
 
2687
- <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
2702
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
2688
2703
 
2689
2704
 
2690
2705
  <span class="nav-tree__text">
2691
- Captioned Figure
2706
+ Callout
2692
2707
  </span>
2693
2708
 
2694
2709
  </a>
@@ -2699,11 +2714,11 @@
2699
2714
 
2700
2715
  <li class="nav-tree__item ">
2701
2716
 
2702
- <a class="nav-tree__link " href="/frontend/demos/card/">
2717
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
2703
2718
 
2704
2719
 
2705
2720
  <span class="nav-tree__text">
2706
- Card
2721
+ Captioned Figure
2707
2722
  </span>
2708
2723
 
2709
2724
  </a>
@@ -2727,6 +2742,21 @@
2727
2742
  </li>
2728
2743
 
2729
2744
 
2745
+ <li class="nav-tree__item ">
2746
+
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2748
+
2749
+
2750
+ <span class="nav-tree__text">
2751
+ Card New
2752
+ </span>
2753
+
2754
+ </a>
2755
+
2756
+
2757
+ </li>
2758
+
2759
+
2730
2760
  <li class="nav-tree__item ">
2731
2761
 
2732
2762
  <a class="nav-tree__link " href="/frontend/demos/css-icons/">
@@ -5149,6 +5179,52 @@
5149
5179
  <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
5150
5180
  </div></article></li>
5151
5181
  </ul>
5182
+ <section class="list-grid" data-list-grid="grid">
5183
+ <header class="list-grid__header">
5184
+ <h3 class="h3">List Grid with Switcher</h3>
5185
+ <div class="list-grid__toolbar site-toolbar">
5186
+ <button class="icon-switch" type="button" data-list-grid-toggle="" aria-label="Toggle List/Grid Mode">
5187
+ <span class="icon-switch__icon fa-solid fa-list" data-list-grid-toggle-list=""></span>
5188
+ <span class="icon-switch__icon is-active" data-list-grid-toggle-grid="">
5189
+ <!-- need svg icon -->
5190
+ <svg class="inline-icon" viewBox="0 0 19 19">
5191
+ <rect fill="currentColor" x="0" y="0" width="8" height="8" rx="1.24" ry="1.24"></rect>
5192
+ <rect fill="currentColor" x="11" y="0" width="8" height="8" rx="1.24" ry="1.24"></rect>
5193
+ <rect fill="currentColor" x="0" y="11" width="8" height="8" rx="1.24" ry="1.24"></rect>
5194
+ <rect fill="currentColor" x="11" y="11" width="8" height="8" rx="1.24" ry="1.24"></rect>
5195
+ </svg>
5196
+ <p></p></span>
5197
+ </button>
5198
+ </div><p></p>
5199
+ </header>
5200
+ <ul class="card-grid list-grid__rows">
5201
+ <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
5202
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
5203
+ </h5><div>
5204
+ This is the card content. It can contain around 2-3 sentences.
5205
+ </div></div><div class="card__image ">
5206
+ <img src="/frontend/assets/placeholder/image-1.jpg">
5207
+ </div><div class="card__footer">
5208
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
5209
+ </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
5210
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
5211
+ </h5><div>
5212
+ This is the card content. It can contain around 2-3 sentences.
5213
+ </div></div><div class="card__image ">
5214
+ <img src="/frontend/assets/placeholder/image-1.jpg">
5215
+ </div><div class="card__footer">
5216
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
5217
+ </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><h5 class="card__title">
5218
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
5219
+ </h5><div>
5220
+ This is the card content. It can contain around 2-3 sentences.
5221
+ </div></div><div class="card__image ">
5222
+ <img src="/frontend/assets/placeholder/image-1.jpg">
5223
+ </div><div class="card__footer">
5224
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
5225
+ </div></article></li>
5226
+ </ul>
5227
+ </section>
5152
5228
 
5153
5229
  </div>
5154
5230