@ulu/frontend 0.1.0-beta.32 → 0.1.0-beta.34

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 (214) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/dist/ulu-frontend.min.js +23 -23
  4. package/docs-dev/changelog/index.html +161 -8
  5. package/docs-dev/demos/accordion/index.html +38 -8
  6. package/docs-dev/demos/button/index.html +38 -8
  7. package/docs-dev/demos/button-verbose/index.html +38 -8
  8. package/docs-dev/demos/callout/index.html +65 -8
  9. package/docs-dev/demos/captioned-figure/index.html +38 -8
  10. package/docs-dev/demos/card/index.html +59 -33
  11. package/docs-dev/demos/card-grid/index.html +42 -12
  12. package/docs-dev/demos/css-icons/index.html +38 -8
  13. package/docs-dev/demos/data-grid/index.html +38 -8
  14. package/docs-dev/demos/data-table/index.html +63 -33
  15. package/docs-dev/demos/details-group/index.html +71 -8
  16. package/docs-dev/demos/file-save/index.html +38 -8
  17. package/docs-dev/demos/flipcard/index.html +38 -8
  18. package/docs-dev/demos/form-theme/index.html +38 -8
  19. package/docs-dev/demos/index.html +38 -8
  20. package/docs-dev/demos/list-inline/index.html +38 -8
  21. package/docs-dev/demos/list-lines/index.html +38 -8
  22. package/docs-dev/demos/menu-stack/index.html +38 -8
  23. package/docs-dev/demos/modals/index.html +51 -10
  24. package/docs-dev/demos/nav-strip/index.html +38 -8
  25. package/docs-dev/demos/overlay-section/index.html +38 -8
  26. package/docs-dev/demos/popovers/index.html +38 -8
  27. package/docs-dev/demos/print/index.html +38 -8
  28. package/docs-dev/demos/pull-quote/index.html +38 -8
  29. package/docs-dev/demos/rule/index.html +38 -8
  30. package/docs-dev/demos/scrollpoints/index.html +39 -9
  31. package/docs-dev/demos/spoke-spinner/index.html +38 -8
  32. package/docs-dev/demos/sticky-list/index.html +38 -8
  33. package/docs-dev/demos/tabs/index.html +74 -8
  34. package/docs-dev/demos/tag/index.html +38 -8
  35. package/docs-dev/demos/theme-toggle/index.html +38 -8
  36. package/docs-dev/demos/tiles/index.html +38 -8
  37. package/docs-dev/demos/tooltip/index.html +38 -8
  38. package/docs-dev/guide/building-stylesheet/index.html +38 -8
  39. package/docs-dev/guide/developing-ulu-scss-module/index.html +38 -8
  40. package/docs-dev/guide/index.html +38 -8
  41. package/docs-dev/index.html +38 -8
  42. package/docs-dev/javascript/events/index.html +38 -8
  43. package/docs-dev/javascript/index.html +38 -8
  44. package/docs-dev/javascript/settings/index.html +38 -8
  45. package/docs-dev/javascript/ui-breakpoints/index.html +38 -8
  46. package/docs-dev/javascript/ui-collapsible/index.html +38 -8
  47. package/docs-dev/javascript/ui-details-group/index.html +56 -38
  48. package/docs-dev/javascript/ui-dialog/index.html +70 -25
  49. package/docs-dev/javascript/ui-flipcard/index.html +99 -13
  50. package/docs-dev/javascript/ui-grid/index.html +48 -44
  51. package/docs-dev/javascript/ui-modal-builder/index.html +49 -40
  52. package/docs-dev/javascript/ui-overflow-scroller/index.html +38 -8
  53. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +38 -8
  54. package/docs-dev/javascript/ui-page/index.html +38 -8
  55. package/docs-dev/javascript/ui-popover/index.html +46 -20
  56. package/docs-dev/javascript/ui-print/index.html +38 -16
  57. package/docs-dev/javascript/ui-print-details/index.html +38 -8
  58. package/docs-dev/javascript/ui-programmatic-modal/index.html +38 -8
  59. package/docs-dev/javascript/ui-proxy-click/index.html +125 -10
  60. package/docs-dev/javascript/ui-resizer/index.html +38 -8
  61. package/docs-dev/javascript/ui-scroll-slider/index.html +76 -14
  62. package/docs-dev/javascript/ui-scrollpoint/index.html +44 -21
  63. package/docs-dev/javascript/ui-slider/index.html +234 -13
  64. package/docs-dev/javascript/ui-tabs/index.html +49 -56
  65. package/docs-dev/javascript/ui-theme-toggle/index.html +43 -21
  66. package/docs-dev/javascript/ui-tooltip/index.html +45 -19
  67. package/docs-dev/javascript/utils-class-logger/index.html +38 -8
  68. package/docs-dev/javascript/utils-dom/index.html +63 -8
  69. package/docs-dev/javascript/utils-file-save/index.html +38 -8
  70. package/docs-dev/javascript/utils-floating-ui/index.html +38 -8
  71. package/docs-dev/javascript/utils-id/index.html +38 -8
  72. package/docs-dev/javascript/utils-pause-youtube-video/index.html +38 -8
  73. package/docs-dev/javascript/utils-system/index.html +5437 -0
  74. package/docs-dev/sass/base/color/index.html +38 -8
  75. package/docs-dev/sass/base/elements/index.html +38 -8
  76. package/docs-dev/sass/base/index/index.html +38 -8
  77. package/docs-dev/sass/base/index.html +38 -8
  78. package/docs-dev/sass/base/keyframes/index.html +38 -8
  79. package/docs-dev/sass/base/layout/index.html +38 -8
  80. package/docs-dev/sass/base/normalize/index.html +38 -8
  81. package/docs-dev/sass/base/print/index.html +38 -8
  82. package/docs-dev/sass/base/root/index.html +38 -8
  83. package/docs-dev/sass/base/typography/index.html +38 -8
  84. package/docs-dev/sass/components/accordion/index.html +39 -9
  85. package/docs-dev/sass/components/adaptive-spacing/index.html +38 -8
  86. package/docs-dev/sass/components/badge/index.html +38 -8
  87. package/docs-dev/sass/components/basic-hero/index.html +38 -8
  88. package/docs-dev/sass/components/button/index.html +38 -8
  89. package/docs-dev/sass/components/button-verbose/index.html +72 -37
  90. package/docs-dev/sass/components/callout/index.html +124 -35
  91. package/docs-dev/sass/components/captioned-figure/index.html +38 -8
  92. package/docs-dev/sass/components/card/index.html +38 -8
  93. package/docs-dev/sass/components/card-grid/index.html +38 -8
  94. package/docs-dev/sass/components/css-icon/index.html +38 -8
  95. package/docs-dev/sass/components/data-grid/index.html +38 -8
  96. package/docs-dev/sass/components/data-table/index.html +53 -16
  97. package/docs-dev/sass/components/fill-context/index.html +38 -8
  98. package/docs-dev/sass/components/flipcard/index.html +38 -8
  99. package/docs-dev/sass/components/flipcard-grid/index.html +38 -8
  100. package/docs-dev/sass/components/form-theme/index.html +84 -60
  101. package/docs-dev/sass/components/hero/index.html +38 -8
  102. package/docs-dev/sass/components/horizontal-rule/index.html +38 -8
  103. package/docs-dev/sass/components/image-grid/index.html +38 -8
  104. package/docs-dev/sass/components/index/index.html +38 -8
  105. package/docs-dev/sass/components/index.html +38 -8
  106. package/docs-dev/sass/components/links/index.html +38 -8
  107. package/docs-dev/sass/components/list-inline/index.html +38 -8
  108. package/docs-dev/sass/components/list-lines/index.html +38 -8
  109. package/docs-dev/sass/components/list-ordered/index.html +38 -8
  110. package/docs-dev/sass/components/list-unordered/index.html +38 -8
  111. package/docs-dev/sass/components/menu-stack/index.html +38 -8
  112. package/docs-dev/sass/components/modal/index.html +38 -8
  113. package/docs-dev/sass/components/nav-strip/index.html +38 -8
  114. package/docs-dev/sass/components/overlay-section/index.html +38 -8
  115. package/docs-dev/sass/components/pager/index.html +38 -8
  116. package/docs-dev/sass/components/placeholder-block/index.html +38 -8
  117. package/docs-dev/sass/components/popover/index.html +38 -8
  118. package/docs-dev/sass/components/pull-quote/index.html +38 -8
  119. package/docs-dev/sass/components/ratio-box/index.html +38 -8
  120. package/docs-dev/sass/components/rule/index.html +38 -8
  121. package/docs-dev/sass/components/scroll-slider/index.html +46 -28
  122. package/docs-dev/sass/components/skip-link/index.html +38 -8
  123. package/docs-dev/sass/components/slider/index.html +38 -8
  124. package/docs-dev/sass/components/spoke-spinner/index.html +40 -10
  125. package/docs-dev/sass/components/sticky-list/index.html +38 -8
  126. package/docs-dev/sass/components/tabs/index.html +38 -8
  127. package/docs-dev/sass/components/tag/index.html +40 -10
  128. package/docs-dev/sass/components/tile-button/index.html +38 -8
  129. package/docs-dev/sass/components/tile-grid/index.html +38 -8
  130. package/docs-dev/sass/components/tile-grid-overlay/index.html +38 -8
  131. package/docs-dev/sass/components/vignette/index.html +38 -8
  132. package/docs-dev/sass/components/wysiwyg/index.html +38 -8
  133. package/docs-dev/sass/core/breakpoint/index.html +38 -8
  134. package/docs-dev/sass/core/button/index.html +38 -8
  135. package/docs-dev/sass/core/color/index.html +38 -8
  136. package/docs-dev/sass/core/cssvar/index.html +38 -8
  137. package/docs-dev/sass/core/element/index.html +218 -47
  138. package/docs-dev/sass/core/index.html +38 -8
  139. package/docs-dev/sass/core/layout/index.html +94 -45
  140. package/docs-dev/sass/core/path/index.html +38 -8
  141. package/docs-dev/sass/core/selector/index.html +38 -8
  142. package/docs-dev/sass/core/typography/index.html +38 -8
  143. package/docs-dev/sass/core/units/index.html +38 -8
  144. package/docs-dev/sass/core/utils/index.html +302 -68
  145. package/docs-dev/sass/helpers/color/index.html +38 -8
  146. package/docs-dev/sass/helpers/display/index.html +38 -8
  147. package/docs-dev/sass/helpers/index/index.html +38 -8
  148. package/docs-dev/sass/helpers/index.html +38 -8
  149. package/docs-dev/sass/helpers/print/index.html +38 -8
  150. package/docs-dev/sass/helpers/typography/index.html +38 -8
  151. package/docs-dev/sass/helpers/units/index.html +38 -8
  152. package/docs-dev/sass/helpers/utilities/index.html +38 -8
  153. package/docs-dev/sass/index.html +38 -8
  154. package/js/ui/breakpoints.js +1 -2
  155. package/js/ui/details-group.js +33 -42
  156. package/js/ui/dialog.js +64 -41
  157. package/js/ui/dialog.todo +2 -36
  158. package/js/ui/flipcard.js +37 -57
  159. package/js/ui/grid.js +15 -13
  160. package/js/ui/modal-builder.js +24 -38
  161. package/js/ui/popover.js +38 -39
  162. package/js/ui/print.js +16 -25
  163. package/js/ui/proxy-click.js +50 -36
  164. package/js/ui/scroll-slider.js +24 -30
  165. package/js/ui/scrollpoint.js +27 -63
  166. package/js/ui/slider.js +53 -55
  167. package/js/ui/tabs.js +23 -36
  168. package/js/ui/theme-toggle.js +37 -41
  169. package/js/ui/tooltip.js +27 -32
  170. package/js/utils/dom.js +12 -0
  171. package/js/utils/system.js +154 -0
  172. package/package.json +1 -1
  173. package/scss/_element.scss +91 -0
  174. package/scss/_layout.scss +3 -1
  175. package/scss/_utils.scss +42 -0
  176. package/scss/components/_accordion.scss +1 -2
  177. package/scss/components/_button-verbose.scss +41 -36
  178. package/scss/components/_callout.scss +113 -53
  179. package/scss/components/_data-table.scss +3 -0
  180. package/scss/components/_form-theme.scss +24 -25
  181. package/scss/components/_scroll-slider.scss +0 -4
  182. package/types/ui/breakpoints.d.ts.map +1 -1
  183. package/types/ui/details-group.d.ts +7 -12
  184. package/types/ui/details-group.d.ts.map +1 -1
  185. package/types/ui/dialog.d.ts +19 -14
  186. package/types/ui/dialog.d.ts.map +1 -1
  187. package/types/ui/flipcard.d.ts +16 -10
  188. package/types/ui/flipcard.d.ts.map +1 -1
  189. package/types/ui/grid.d.ts +4 -6
  190. package/types/ui/grid.d.ts.map +1 -1
  191. package/types/ui/modal-builder.d.ts +5 -9
  192. package/types/ui/modal-builder.d.ts.map +1 -1
  193. package/types/ui/popover.d.ts +6 -7
  194. package/types/ui/popover.d.ts.map +1 -1
  195. package/types/ui/print.d.ts +0 -4
  196. package/types/ui/print.d.ts.map +1 -1
  197. package/types/ui/proxy-click.d.ts +19 -3
  198. package/types/ui/proxy-click.d.ts.map +1 -1
  199. package/types/ui/scroll-slider.d.ts +5 -7
  200. package/types/ui/scroll-slider.d.ts.map +1 -1
  201. package/types/ui/scrollpoint.d.ts +3 -8
  202. package/types/ui/scrollpoint.d.ts.map +1 -1
  203. package/types/ui/slider.d.ts +22 -12
  204. package/types/ui/slider.d.ts.map +1 -1
  205. package/types/ui/tabs.d.ts +6 -8
  206. package/types/ui/tabs.d.ts.map +1 -1
  207. package/types/ui/theme-toggle.d.ts +6 -13
  208. package/types/ui/theme-toggle.d.ts.map +1 -1
  209. package/types/ui/tooltip.d.ts +3 -5
  210. package/types/ui/tooltip.d.ts.map +1 -1
  211. package/types/utils/dom.d.ts +6 -0
  212. package/types/utils/dom.d.ts.map +1 -1
  213. package/types/utils/system.d.ts +113 -0
  214. package/types/utils/system.d.ts.map +1 -0
@@ -243,11 +243,11 @@
243
243
 
244
244
  <li class="nav-tree__item ">
245
245
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
247
 
248
248
 
249
249
  <span class="nav-tree__text">
250
- Card Grid
250
+ Card
251
251
  </span>
252
252
 
253
253
  </a>
@@ -258,11 +258,11 @@
258
258
 
259
259
  <li class="nav-tree__item ">
260
260
 
261
- <a class="nav-tree__link " href="/frontend/demos/card/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
262
262
 
263
263
 
264
264
  <span class="nav-tree__text">
265
- Card New
265
+ Card Grid
266
266
  </span>
267
267
 
268
268
  </a>
@@ -2527,6 +2527,21 @@
2527
2527
 
2528
2528
  </li>
2529
2529
 
2530
+
2531
+ <li class="nav-tree__item ">
2532
+
2533
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
2534
+
2535
+
2536
+ <span class="nav-tree__text">
2537
+ utils/system
2538
+ </span>
2539
+
2540
+ </a>
2541
+
2542
+
2543
+ </li>
2544
+
2530
2545
  </ul>
2531
2546
 
2532
2547
  </details>
@@ -2729,11 +2744,11 @@
2729
2744
 
2730
2745
  <li class="nav-tree__item ">
2731
2746
 
2732
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2733
2748
 
2734
2749
 
2735
2750
  <span class="nav-tree__text">
2736
- Card Grid
2751
+ Card
2737
2752
  </span>
2738
2753
 
2739
2754
  </a>
@@ -2744,11 +2759,11 @@
2744
2759
 
2745
2760
  <li class="nav-tree__item ">
2746
2761
 
2747
- <a class="nav-tree__link " href="/frontend/demos/card/">
2762
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2748
2763
 
2749
2764
 
2750
2765
  <span class="nav-tree__text">
2751
- Card New
2766
+ Card Grid
2752
2767
  </span>
2753
2768
 
2754
2769
  </a>
@@ -5013,6 +5028,21 @@
5013
5028
 
5014
5029
  </li>
5015
5030
 
5031
+
5032
+ <li class="nav-tree__item ">
5033
+
5034
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
5035
+
5036
+
5037
+ <span class="nav-tree__text">
5038
+ utils/system
5039
+ </span>
5040
+
5041
+ </a>
5042
+
5043
+
5044
+ </li>
5045
+
5016
5046
  </ul>
5017
5047
 
5018
5048
  </details>
@@ -243,11 +243,11 @@
243
243
 
244
244
  <li class="nav-tree__item ">
245
245
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
247
 
248
248
 
249
249
  <span class="nav-tree__text">
250
- Card Grid
250
+ Card
251
251
  </span>
252
252
 
253
253
  </a>
@@ -258,11 +258,11 @@
258
258
 
259
259
  <li class="nav-tree__item ">
260
260
 
261
- <a class="nav-tree__link " href="/frontend/demos/card/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
262
262
 
263
263
 
264
264
  <span class="nav-tree__text">
265
- Card New
265
+ Card Grid
266
266
  </span>
267
267
 
268
268
  </a>
@@ -2527,6 +2527,21 @@
2527
2527
 
2528
2528
  </li>
2529
2529
 
2530
+
2531
+ <li class="nav-tree__item ">
2532
+
2533
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
2534
+
2535
+
2536
+ <span class="nav-tree__text">
2537
+ utils/system
2538
+ </span>
2539
+
2540
+ </a>
2541
+
2542
+
2543
+ </li>
2544
+
2530
2545
  </ul>
2531
2546
 
2532
2547
  </details>
@@ -2729,11 +2744,11 @@
2729
2744
 
2730
2745
  <li class="nav-tree__item ">
2731
2746
 
2732
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2733
2748
 
2734
2749
 
2735
2750
  <span class="nav-tree__text">
2736
- Card Grid
2751
+ Card
2737
2752
  </span>
2738
2753
 
2739
2754
  </a>
@@ -2744,11 +2759,11 @@
2744
2759
 
2745
2760
  <li class="nav-tree__item ">
2746
2761
 
2747
- <a class="nav-tree__link " href="/frontend/demos/card/">
2762
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2748
2763
 
2749
2764
 
2750
2765
  <span class="nav-tree__text">
2751
- Card New
2766
+ Card Grid
2752
2767
  </span>
2753
2768
 
2754
2769
  </a>
@@ -5013,6 +5028,21 @@
5013
5028
 
5014
5029
  </li>
5015
5030
 
5031
+
5032
+ <li class="nav-tree__item ">
5033
+
5034
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
5035
+
5036
+
5037
+ <span class="nav-tree__text">
5038
+ utils/system
5039
+ </span>
5040
+
5041
+ </a>
5042
+
5043
+
5044
+ </li>
5045
+
5016
5046
  </ul>
5017
5047
 
5018
5048
  </details>
@@ -5113,16 +5143,21 @@
5113
5143
  <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
5114
5144
  <span class="pjs-token pjs-string">"margin-inline"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
5115
5145
  <span class="pjs-token pjs-string">"min-width"</span><span class="pjs-token pjs-punctuation">:</span> 20rem<span class="pjs-token pjs-punctuation">,</span>
5116
- <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.65em<span class="pjs-token pjs-punctuation">,</span>
5146
+ <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
5117
5147
  <span class="pjs-token pjs-string">"padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
5118
5148
  <span class="pjs-token pjs-string">"title-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5119
5149
  <span class="pjs-token pjs-string">"title-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
5120
5150
  <span class="pjs-token pjs-string">"title-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
5121
- <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
5122
- <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5123
- <span class="pjs-token pjs-string">"left-cap-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
5124
- <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
5125
- <span class="pjs-token pjs-string">"left-cap-match-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span>
5151
+ <span class="pjs-token pjs-string">"cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
5152
+ <span class="pjs-token pjs-string">"cap-side"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"left"</span><span class="pjs-token pjs-punctuation">,</span>
5153
+ <span class="pjs-token pjs-string">"cap-match-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5154
+ <span class="pjs-token pjs-string">"cap-options"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5155
+ <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
5156
+ <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
5157
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5158
+ <span class="pjs-token pjs-string">"cap-options-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5159
+ <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span>
5160
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5126
5161
  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5127
5162
  <details>
5128
5163
  <summary>File Information</summary>
@@ -5131,7 +5166,7 @@
5131
5166
  <li><strong>Group:</strong> button-verbose</li>
5132
5167
  <li><strong>Type:</strong> variable</li>
5133
5168
  <li><strong>Lines (comments):</strong> 30-55</li>
5134
- <li><strong>Lines (code):</strong> 57-82</li>
5169
+ <li><strong>Lines (code):</strong> 57-87</li>
5135
5170
  </ul>
5136
5171
  </details>
5137
5172
  <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5260,34 +5295,34 @@
5260
5295
  <td style="text-align:left">Margin for the button's title.</td>
5261
5296
  </tr>
5262
5297
  <tr>
5263
- <td style="text-align:left">left-cap</td>
5298
+ <td style="text-align:left">cap</td>
5264
5299
  <td style="text-align:left">Boolean</td>
5265
5300
  <td style="text-align:left">false</td>
5266
5301
  <td style="text-align:left">Enable left cap style</td>
5267
5302
  </tr>
5268
5303
  <tr>
5269
- <td style="text-align:left">left-cap-color</td>
5304
+ <td style="text-align:left">cap-side</td>
5270
5305
  <td style="text-align:left">Color</td>
5271
- <td style="text-align:left">&quot;link&quot;</td>
5272
- <td style="text-align:left">The color for the left cap</td>
5306
+ <td style="text-align:left">&quot;left&quot;</td>
5307
+ <td style="text-align:left">The side that gets the cap</td>
5273
5308
  </tr>
5274
5309
  <tr>
5275
- <td style="text-align:left">left-cap-color-hover</td>
5276
- <td style="text-align:left">color</td>
5277
- <td style="text-align:left">&quot;link-hover&quot;</td>
5278
- <td style="text-align:left">The color for the left cap when the button is hovered</td>
5310
+ <td style="text-align:left">cap-match-radius</td>
5311
+ <td style="text-align:left">Number</td>
5312
+ <td style="text-align:left">true</td>
5313
+ <td style="text-align:left">The cap should have be rounded to match the parent's border radius</td>
5279
5314
  </tr>
5280
5315
  <tr>
5281
- <td style="text-align:left">left-cap-color-hover</td>
5282
- <td style="text-align:left">Number</td>
5283
- <td style="text-align:left">0.5rem</td>
5284
- <td style="text-align:left">Width of the cap</td>
5316
+ <td style="text-align:left">cap-options</td>
5317
+ <td style="text-align:left">Map</td>
5318
+ <td style="text-align:left"></td>
5319
+ <td style="text-align:left">The options for cap (see element.cap for options)</td>
5285
5320
  </tr>
5286
5321
  <tr>
5287
- <td style="text-align:left">left-cap-match-radius</td>
5288
- <td style="text-align:left">Number</td>
5289
- <td style="text-align:left">true</td>
5290
- <td style="text-align:left">The cap should have be rounded to match the parent's border radius</td>
5322
+ <td style="text-align:left">cap-options-hover</td>
5323
+ <td style="text-align:left">Map</td>
5324
+ <td style="text-align:left"></td>
5325
+ <td style="text-align:left">The options for cap when hovered</td>
5291
5326
  </tr>
5292
5327
  </tbody>
5293
5328
  </table>
@@ -5305,8 +5340,8 @@
5305
5340
  <li><strong>File:</strong> _button-verbose.scss</li>
5306
5341
  <li><strong>Group:</strong> button-verbose</li>
5307
5342
  <li><strong>Type:</strong> mixin</li>
5308
- <li><strong>Lines (comments):</strong> 84-87</li>
5309
- <li><strong>Lines (code):</strong> 89-91</li>
5343
+ <li><strong>Lines (comments):</strong> 89-92</li>
5344
+ <li><strong>Lines (code):</strong> 94-96</li>
5310
5345
  </ul>
5311
5346
  </details>
5312
5347
  <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5345,8 +5380,8 @@
5345
5380
  <li><strong>File:</strong> _button-verbose.scss</li>
5346
5381
  <li><strong>Group:</strong> button-verbose</li>
5347
5382
  <li><strong>Type:</strong> mixin</li>
5348
- <li><strong>Lines (comments):</strong> 103-111</li>
5349
- <li><strong>Lines (code):</strong> 113-198</li>
5383
+ <li><strong>Lines (comments):</strong> 108-116</li>
5384
+ <li><strong>Lines (code):</strong> 118-203</li>
5350
5385
  </ul>
5351
5386
  </details>
5352
5387
  <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5383,8 +5418,8 @@
5383
5418
  <li><strong>File:</strong> _button-verbose.scss</li>
5384
5419
  <li><strong>Group:</strong> button-verbose</li>
5385
5420
  <li><strong>Type:</strong> function</li>
5386
- <li><strong>Lines (comments):</strong> 93-96</li>
5387
- <li><strong>Lines (code):</strong> 98-101</li>
5421
+ <li><strong>Lines (comments):</strong> 98-101</li>
5422
+ <li><strong>Lines (code):</strong> 103-106</li>
5388
5423
  </ul>
5389
5424
  </details>
5390
5425
  <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -243,11 +243,11 @@
243
243
 
244
244
  <li class="nav-tree__item ">
245
245
 
246
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
246
+ <a class="nav-tree__link " href="/frontend/demos/card/">
247
247
 
248
248
 
249
249
  <span class="nav-tree__text">
250
- Card Grid
250
+ Card
251
251
  </span>
252
252
 
253
253
  </a>
@@ -258,11 +258,11 @@
258
258
 
259
259
  <li class="nav-tree__item ">
260
260
 
261
- <a class="nav-tree__link " href="/frontend/demos/card/">
261
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
262
262
 
263
263
 
264
264
  <span class="nav-tree__text">
265
- Card New
265
+ Card Grid
266
266
  </span>
267
267
 
268
268
  </a>
@@ -2527,6 +2527,21 @@
2527
2527
 
2528
2528
  </li>
2529
2529
 
2530
+
2531
+ <li class="nav-tree__item ">
2532
+
2533
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
2534
+
2535
+
2536
+ <span class="nav-tree__text">
2537
+ utils/system
2538
+ </span>
2539
+
2540
+ </a>
2541
+
2542
+
2543
+ </li>
2544
+
2530
2545
  </ul>
2531
2546
 
2532
2547
  </details>
@@ -2729,11 +2744,11 @@
2729
2744
 
2730
2745
  <li class="nav-tree__item ">
2731
2746
 
2732
- <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2747
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2733
2748
 
2734
2749
 
2735
2750
  <span class="nav-tree__text">
2736
- Card Grid
2751
+ Card
2737
2752
  </span>
2738
2753
 
2739
2754
  </a>
@@ -2744,11 +2759,11 @@
2744
2759
 
2745
2760
  <li class="nav-tree__item ">
2746
2761
 
2747
- <a class="nav-tree__link " href="/frontend/demos/card/">
2762
+ <a class="nav-tree__link " href="/frontend/demos/card-grid/">
2748
2763
 
2749
2764
 
2750
2765
  <span class="nav-tree__text">
2751
- Card New
2766
+ Card Grid
2752
2767
  </span>
2753
2768
 
2754
2769
  </a>
@@ -5013,6 +5028,21 @@
5013
5028
 
5014
5029
  </li>
5015
5030
 
5031
+
5032
+ <li class="nav-tree__item ">
5033
+
5034
+ <a class="nav-tree__link " href="/frontend/javascript/utils-system/">
5035
+
5036
+
5037
+ <span class="nav-tree__text">
5038
+ utils/system
5039
+ </span>
5040
+
5041
+ </a>
5042
+
5043
+
5044
+ </li>
5045
+
5016
5046
  </ul>
5017
5047
 
5018
5048
  </details>
@@ -5052,6 +5082,9 @@
5052
5082
 
5053
5083
  <li><a href="#variable-config">$config</a>
5054
5084
  </li>
5085
+
5086
+ <li><a href="#variable-styles">$styles</a>
5087
+ </li>
5055
5088
  </ol>
5056
5089
  </li>
5057
5090
 
@@ -5104,12 +5137,17 @@
5104
5137
  <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>
5105
5138
  <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5106
5139
  <span class="pjs-token pjs-string">"border-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">,</span>
5107
- <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5140
+ <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
5108
5141
  <span class="pjs-token pjs-string">"border-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
5109
5142
  <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span> none<span class="pjs-token pjs-punctuation">,</span>
5110
- <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
5111
- <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5112
- <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
5143
+ <span class="pjs-token pjs-string">"caps-disabled"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
5144
+ <span class="pjs-token pjs-string">"cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
5145
+ <span class="pjs-token pjs-string">"cap-side"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"left"</span><span class="pjs-token pjs-punctuation">,</span>
5146
+ <span class="pjs-token pjs-string">"cap-match-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
5147
+ <span class="pjs-token pjs-string">"cap-options"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5148
+ <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">,</span> 160<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5149
+ <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
5150
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5113
5151
  <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
5114
5152
  <span class="pjs-token pjs-string">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> 1.5rem<span class="pjs-token pjs-punctuation">,</span>
5115
5153
  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
@@ -5119,8 +5157,8 @@
5119
5157
  <li><strong>File:</strong> _callout.scss</li>
5120
5158
  <li><strong>Group:</strong> callout</li>
5121
5159
  <li><strong>Type:</strong> variable</li>
5122
- <li><strong>Lines (comments):</strong> 23-34</li>
5123
- <li><strong>Lines (code):</strong> 36-47</li>
5160
+ <li><strong>Lines (comments):</strong> 23-36</li>
5161
+ <li><strong>Lines (code):</strong> 38-54</li>
5124
5162
  </ul>
5125
5163
  </details>
5126
5164
  <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5165,22 +5203,34 @@
5165
5203
  <td style="text-align:left">The box-shadow of the Callout.</td>
5166
5204
  </tr>
5167
5205
  <tr>
5168
- <td style="text-align:left">left-cap</td>
5206
+ <td style="text-align:left">caps-disabled</td>
5169
5207
  <td style="text-align:left">Boolean</td>
5170
5208
  <td style="text-align:left">false</td>
5171
- <td style="text-align:left">Toggles the use of left caps in styled callouts.</td>
5209
+ <td style="text-align:left">If set will not output any cap styles for both base and styles</td>
5172
5210
  </tr>
5173
5211
  <tr>
5174
- <td style="text-align:left">left-cap-color</td>
5175
- <td style="text-align:left">Color</td>
5176
- <td style="text-align:left">green</td>
5177
- <td style="text-align:left">Color of the left cap.</td>
5212
+ <td style="text-align:left">cap</td>
5213
+ <td style="text-align:left">Boolean</td>
5214
+ <td style="text-align:left">false</td>
5215
+ <td style="text-align:left">Toggles the use of caps on default callout</td>
5178
5216
  </tr>
5179
5217
  <tr>
5180
- <td style="text-align:left">left-cap-width</td>
5181
- <td style="text-align:left">Dimension</td>
5182
- <td style="text-align:left">0.5rem</td>
5183
- <td style="text-align:left">Width of the left cap.</td>
5218
+ <td style="text-align:left">cap-side</td>
5219
+ <td style="text-align:left">Boolean</td>
5220
+ <td style="text-align:left">&quot;left&quot;</td>
5221
+ <td style="text-align:left">The side that gets the cap</td>
5222
+ </tr>
5223
+ <tr>
5224
+ <td style="text-align:left">cap-match-radius</td>
5225
+ <td style="text-align:left">Number</td>
5226
+ <td style="text-align:left">true</td>
5227
+ <td style="text-align:left">The cap should have be rounded to match the parent's border radius</td>
5228
+ </tr>
5229
+ <tr>
5230
+ <td style="text-align:left">cap-options</td>
5231
+ <td style="text-align:left">Map</td>
5232
+ <td style="text-align:left"></td>
5233
+ <td style="text-align:left">The options for cap (see element.cap for options)</td>
5184
5234
  </tr>
5185
5235
  <tr>
5186
5236
  <td style="text-align:left">margin</td>
@@ -5196,6 +5246,43 @@
5196
5246
  </tr>
5197
5247
  </tbody>
5198
5248
  </table>
5249
+ <div class="sassdoc-item-header">
5250
+ <h3 id="variable-styles" tabindex="-1">$styles</h3>
5251
+ <div class="sassdoc-item-header__labels">
5252
+ <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
5253
+ </div>
5254
+ </div>
5255
+ <p>Styles Map (for unique variations/modifiers)</p>
5256
+ <ul>
5257
+ <li>Adjust this with set-styles</li>
5258
+ </ul>
5259
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$styles</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5260
+ <span class="pjs-token pjs-string">"outline"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5261
+ <span class="pjs-token pjs-string">"background-color"</span><span class="pjs-token pjs-punctuation">:</span> transparent
5262
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5263
+ <span class="pjs-token pjs-string">"info"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5264
+ <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"info-background"</span><span class="pjs-token pjs-punctuation">,</span>
5265
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5266
+ <span class="pjs-token pjs-string">"warning"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5267
+ <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"info-background"</span><span class="pjs-token pjs-punctuation">,</span>
5268
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5269
+ <span class="pjs-token pjs-string">"success"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5270
+ <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"success-background"</span><span class="pjs-token pjs-punctuation">,</span>
5271
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5272
+ <span class="pjs-token pjs-string">"danger"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
5273
+ <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"danger-background"</span><span class="pjs-token pjs-punctuation">,</span>
5274
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
5275
+ <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
5276
+ <details>
5277
+ <summary>File Information</summary>
5278
+ <ul>
5279
+ <li><strong>File:</strong> _callout.scss</li>
5280
+ <li><strong>Group:</strong> callout</li>
5281
+ <li><strong>Type:</strong> variable</li>
5282
+ <li><strong>Lines (comments):</strong> 56-58</li>
5283
+ <li><strong>Lines (code):</strong> 60-76</li>
5284
+ </ul>
5285
+ </details>
5199
5286
  <h2 id="mixins" tabindex="-1">Mixins</h2>
5200
5287
  <div class="sassdoc-item-header">
5201
5288
  <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5210,8 +5297,8 @@
5210
5297
  <li><strong>File:</strong> _callout.scss</li>
5211
5298
  <li><strong>Group:</strong> callout</li>
5212
5299
  <li><strong>Type:</strong> mixin</li>
5213
- <li><strong>Lines (comments):</strong> 75-78</li>
5214
- <li><strong>Lines (code):</strong> 80-82</li>
5300
+ <li><strong>Lines (comments):</strong> 78-81</li>
5301
+ <li><strong>Lines (code):</strong> 83-85</li>
5215
5302
  </ul>
5216
5303
  </details>
5217
5304
  <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5244,14 +5331,17 @@
5244
5331
  </div>
5245
5332
  </div>
5246
5333
  <p>Set callout style variations</p>
5334
+ <ul>
5335
+ <li>Styles that modify padding when using mix-match caps on/off should be included last</li>
5336
+ </ul>
5247
5337
  <details>
5248
5338
  <summary>File Information</summary>
5249
5339
  <ul>
5250
5340
  <li><strong>File:</strong> _callout.scss</li>
5251
5341
  <li><strong>Group:</strong> callout</li>
5252
5342
  <li><strong>Type:</strong> mixin</li>
5253
- <li><strong>Lines (comments):</strong> 94-96</li>
5254
- <li><strong>Lines (code):</strong> 98-100</li>
5343
+ <li><strong>Lines (comments):</strong> 97-100</li>
5344
+ <li><strong>Lines (code):</strong> 102-104</li>
5255
5345
  </ul>
5256
5346
  </details>
5257
5347
  <h4 id="parameters-1" tabindex="-1">Parameters</h4>
@@ -5267,7 +5357,7 @@
5267
5357
  <tr>
5268
5358
  <td style="text-align:left">$changes</td>
5269
5359
  <td style="text-align:left"><code>Map</code></td>
5270
- <td style="text-align:left">Map of changes (options for style include [background-color, color, border, border-radius, border-color, box-shadow, padding, left-cap, left-cap-width, left-cap-color]</td>
5360
+ <td style="text-align:left">Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]</td>
5271
5361
  </tr>
5272
5362
  <tr>
5273
5363
  <td style="text-align:left">$merge-mode</td>
@@ -5278,7 +5368,7 @@
5278
5368
  </table>
5279
5369
  <h4 id="require-1" tabindex="-1">Require</h4>
5280
5370
  <ul>
5281
- <li>$styles</li>
5371
+ <li><a href="/frontend/sass/components/callout/#variable-styles">$styles</a></li>
5282
5372
  </ul>
5283
5373
  <div class="sassdoc-item-header">
5284
5374
  <h3 id="mixin-styles" tabindex="-1">styles()</h3>
@@ -5293,8 +5383,8 @@
5293
5383
  <li><strong>File:</strong> _callout.scss</li>
5294
5384
  <li><strong>Group:</strong> callout</li>
5295
5385
  <li><strong>Type:</strong> mixin</li>
5296
- <li><strong>Lines (comments):</strong> 102-104</li>
5297
- <li><strong>Lines (code):</strong> 106-152</li>
5386
+ <li><strong>Lines (comments):</strong> 106-108</li>
5387
+ <li><strong>Lines (code):</strong> 110-158</li>
5298
5388
  </ul>
5299
5389
  </details>
5300
5390
  <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5302,7 +5392,6 @@
5302
5392
  <h4 id="require-2" tabindex="-1">Require</h4>
5303
5393
  <ul>
5304
5394
  <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
5305
- <li>$styles</li>
5306
5395
  </ul>
5307
5396
  <h2 id="functions" tabindex="-1">Functions</h2>
5308
5397
  <div class="sassdoc-item-header">
@@ -5318,8 +5407,8 @@
5318
5407
  <li><strong>File:</strong> _callout.scss</li>
5319
5408
  <li><strong>Group:</strong> callout</li>
5320
5409
  <li><strong>Type:</strong> function</li>
5321
- <li><strong>Lines (comments):</strong> 84-87</li>
5322
- <li><strong>Lines (code):</strong> 89-92</li>
5410
+ <li><strong>Lines (comments):</strong> 87-90</li>
5411
+ <li><strong>Lines (code):</strong> 92-95</li>
5323
5412
  </ul>
5324
5413
  </details>
5325
5414
  <h4 id="examples-2" tabindex="-1">Examples</h4>