@natachah/vanilla-frontend 0.4.1 → 1.0.0

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 (281) hide show
  1. package/.gitlab-ci.yml +22 -13
  2. package/LICENSE.md +1 -1
  3. package/docs/.vitepress/config.mts +101 -0
  4. package/docs/base/layout.md +77 -0
  5. package/docs/base/media.md +146 -0
  6. package/docs/base/reset.md +33 -0
  7. package/docs/base/typography.md +296 -0
  8. package/docs/classes/badge.md +146 -0
  9. package/docs/classes/breadcrumb.md +54 -0
  10. package/docs/classes/card.md +171 -0
  11. package/docs/classes/dropdown.md +180 -0
  12. package/docs/classes/grid.md +230 -0
  13. package/docs/classes/list.md +90 -0
  14. package/docs/components/button.md +254 -0
  15. package/docs/components/dialog.md +223 -0
  16. package/docs/components/disclosure.md +169 -0
  17. package/docs/components/form.md +514 -0
  18. package/docs/components/loading.md +53 -0
  19. package/docs/components/popover.md +270 -0
  20. package/docs/components/progress.md +33 -0
  21. package/docs/components/table.md +175 -0
  22. package/docs/index.md +27 -0
  23. package/docs/javascript/autofill.md +155 -0
  24. package/docs/javascript/check.md +53 -0
  25. package/docs/javascript/comfort.md +125 -0
  26. package/docs/javascript/consent.md +89 -0
  27. package/docs/javascript/cookie.md +33 -0
  28. package/docs/javascript/drawer.md +99 -0
  29. package/docs/javascript/form.md +130 -0
  30. package/docs/javascript/scroll.md +104 -0
  31. package/docs/javascript/slider.md +130 -0
  32. package/docs/javascript/sortable.md +127 -0
  33. package/docs/javascript/tabpanel.md +72 -0
  34. package/docs/javascript/toggle.md +182 -0
  35. package/docs/javascript/trap.md +33 -0
  36. package/docs/javascript/tree.md +220 -0
  37. package/docs/prologue/conventions.md +92 -0
  38. package/docs/prologue/release.md +44 -0
  39. package/docs/prologue/upgrade.md +21 -0
  40. package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
  41. package/docs/start/customization.md +184 -0
  42. package/docs/start/install.md +80 -0
  43. package/docs/start/mixin.md +203 -0
  44. package/docs/vuejs/ComponentPreview.vue +99 -0
  45. package/js/_slider.js +17 -1
  46. package/js/{vanilla-frontend.js → vanilla-frontend-doc.js} +30 -33
  47. package/natachah-vanilla-frontend-1.0.0.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.DsgDPRSA.js +1 -0
  51. package/public/assets/base_layout.md.CTGv6rTn.js +13 -0
  52. package/public/assets/base_layout.md.CTGv6rTn.lean.js +1 -0
  53. package/public/assets/base_media.md.CcuDUcF-.js +24 -0
  54. package/public/assets/base_media.md.CcuDUcF-.lean.js +1 -0
  55. package/public/assets/base_reset.md.DqIdqFRJ.js +3 -0
  56. package/public/assets/base_reset.md.DqIdqFRJ.lean.js +1 -0
  57. package/public/assets/base_typography.md.DV-ikqGZ.js +87 -0
  58. package/public/assets/base_typography.md.DV-ikqGZ.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.BW2s4ay5.js +27 -0
  60. package/public/assets/chunks/framework.CaiDwmc7.js +4 -0
  61. package/public/assets/chunks/theme.DL_11MHV.js +1 -0
  62. package/public/assets/classes_badge.md.BCGzPr6f.js +24 -0
  63. package/public/assets/classes_badge.md.BCGzPr6f.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.vU6jlo36.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.vU6jlo36.lean.js +1 -0
  66. package/public/assets/classes_card.md.BZEh2l_B.js +41 -0
  67. package/public/assets/classes_card.md.BZEh2l_B.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.BLVw_xQY.js +70 -0
  69. package/public/assets/classes_dropdown.md.BLVw_xQY.lean.js +1 -0
  70. package/public/assets/classes_grid.md.47v-Ybqe.js +45 -0
  71. package/public/assets/classes_grid.md.47v-Ybqe.lean.js +1 -0
  72. package/public/assets/classes_list.md.BW9PWZV1.js +36 -0
  73. package/public/assets/classes_list.md.BW9PWZV1.lean.js +1 -0
  74. package/public/assets/components_button.md.vx3HzdpN.js +45 -0
  75. package/public/assets/components_button.md.vx3HzdpN.lean.js +1 -0
  76. package/public/assets/components_dialog.md.C-0gJGus.js +76 -0
  77. package/public/assets/components_dialog.md.C-0gJGus.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.DeSRu9_P.js +53 -0
  79. package/public/assets/components_disclosure.md.DeSRu9_P.lean.js +1 -0
  80. package/public/assets/components_form.md.Be8d5WFv.js +122 -0
  81. package/public/assets/components_form.md.Be8d5WFv.lean.js +1 -0
  82. package/public/assets/components_loading.md.CKDG7z5x.js +4 -0
  83. package/public/assets/components_loading.md.CKDG7z5x.lean.js +1 -0
  84. package/public/assets/components_popover.md.CwgNttNc.js +102 -0
  85. package/public/assets/components_popover.md.CwgNttNc.lean.js +1 -0
  86. package/public/assets/components_progress.md.CNC7rJiC.js +6 -0
  87. package/public/assets/components_progress.md.CNC7rJiC.lean.js +1 -0
  88. package/public/assets/components_table.md.LyBkIDkF.js +75 -0
  89. package/public/assets/components_table.md.LyBkIDkF.lean.js +1 -0
  90. package/public/assets/index.md.CJiHmjB7.js +1 -0
  91. package/public/assets/index.md.CJiHmjB7.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.BewVUo4H.js +49 -0
  107. package/public/assets/javascript_autofill.md.BewVUo4H.lean.js +1 -0
  108. package/public/assets/javascript_check.md.B6ajE66i.js +13 -0
  109. package/public/assets/javascript_check.md.B6ajE66i.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.BRci3j7V.js +20 -0
  111. package/public/assets/javascript_comfort.md.BRci3j7V.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.Bjv8ZDS6.js +29 -0
  113. package/public/assets/javascript_consent.md.Bjv8ZDS6.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.Dlhyk4Ha.js +2 -0
  115. package/public/assets/javascript_cookie.md.Dlhyk4Ha.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.BCJX3fL-.js +32 -0
  117. package/public/assets/javascript_drawer.md.BCJX3fL-.lean.js +1 -0
  118. package/public/assets/javascript_form.md.Cwf_gxLI.js +40 -0
  119. package/public/assets/javascript_form.md.Cwf_gxLI.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.BrJijWbF.js +30 -0
  121. package/public/assets/javascript_scroll.md.BrJijWbF.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.DDO8wC4u.js +27 -0
  123. package/public/assets/javascript_slider.md.DDO8wC4u.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.BKyem7yw.js +35 -0
  125. package/public/assets/javascript_sortable.md.BKyem7yw.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.D9M-_xE0.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.D9M-_xE0.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C8582WNC.js +46 -0
  129. package/public/assets/javascript_toggle.md.C8582WNC.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Bc59YUng.js +2 -0
  131. package/public/assets/javascript_trap.md.Bc59YUng.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.uc1UUsFV.js +72 -0
  133. package/public/assets/javascript_tree.md.uc1UUsFV.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.D8nVwlRS.js +34 -0
  135. package/public/assets/prologue_conventions.md.D8nVwlRS.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CG6nuFnt.js +1 -0
  137. package/public/assets/prologue_release.md.CG6nuFnt.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.CFxokaBG.js +1 -0
  139. package/public/assets/prologue_upgrade.md.CFxokaBG.lean.js +1 -0
  140. package/public/assets/start_customization.md.t-ze_NoQ.js +141 -0
  141. package/public/assets/start_customization.md.t-ze_NoQ.lean.js +1 -0
  142. package/public/assets/start_install.md.OluH7l11.js +46 -0
  143. package/public/assets/start_install.md.OluH7l11.lean.js +1 -0
  144. package/public/assets/start_mixin.md.D76cLRSX.js +85 -0
  145. package/public/assets/start_mixin.md.D76cLRSX.lean.js +1 -0
  146. package/public/assets/style.zIeGMibA.css +1 -0
  147. package/public/base/layout.html +37 -0
  148. package/public/base/media.html +179 -0
  149. package/public/base/reset.html +27 -0
  150. package/public/base/typography.html +320 -0
  151. package/public/bundles/vanilla-frontend-doc.css +1 -0
  152. package/public/bundles/vanilla-frontend-doc.js +1 -0
  153. package/public/bundles/vanilla-frontend.css +1 -0
  154. package/public/classes/badge.html +205 -0
  155. package/public/classes/breadcrumb.html +66 -0
  156. package/public/classes/card.html +222 -0
  157. package/public/classes/dropdown.html +147 -0
  158. package/public/classes/grid.html +278 -0
  159. package/public/classes/list.html +113 -0
  160. package/public/components/button.html +304 -0
  161. package/public/components/dialog.html +205 -0
  162. package/public/components/disclosure.html +130 -0
  163. package/public/components/form.html +589 -0
  164. package/public/components/loading.html +107 -0
  165. package/public/components/popover.html +257 -0
  166. package/public/components/progress.html +57 -0
  167. package/public/components/table.html +152 -0
  168. package/public/demo/demo.html +84 -0
  169. package/public/hashmap.json +1 -0
  170. package/public/index.html +25 -0
  171. package/public/javascript/autofill.html +152 -0
  172. package/public/javascript/check.html +64 -0
  173. package/public/javascript/comfort.html +123 -0
  174. package/public/javascript/consent.html +80 -0
  175. package/public/javascript/cookie.html +26 -0
  176. package/public/javascript/drawer.html +83 -0
  177. package/public/javascript/form.html +117 -0
  178. package/public/javascript/scroll.html +81 -0
  179. package/public/javascript/slider.html +78 -0
  180. package/public/javascript/sortable.html +112 -0
  181. package/public/javascript/tabpanel.html +70 -0
  182. package/public/javascript/toggle.html +201 -0
  183. package/public/javascript/trap.html +26 -0
  184. package/public/javascript/tree.html +175 -0
  185. package/public/prologue/conventions.html +58 -0
  186. package/public/prologue/release.html +25 -0
  187. package/public/prologue/upgrade.html +25 -0
  188. package/public/start/customization.html +165 -0
  189. package/public/start/install.html +70 -0
  190. package/public/start/mixin.html +109 -0
  191. package/public/vp-icons.css +0 -0
  192. package/sandbox/index.html +27 -0
  193. package/sandbox/js/sandbox-header.js +57 -0
  194. package/sandbox/js/sandbox-test.js +91 -0
  195. package/sandbox/pages/base/layout.html +80 -0
  196. package/sandbox/pages/base/media.html +52 -0
  197. package/sandbox/pages/base/typography.html +132 -0
  198. package/sandbox/pages/components/button.html +70 -0
  199. package/sandbox/pages/components/dialog.html +72 -0
  200. package/sandbox/pages/components/disclosure.html +77 -0
  201. package/sandbox/pages/components/form.html +164 -0
  202. package/sandbox/pages/components/loading.html +32 -0
  203. package/sandbox/pages/components/popover.html +119 -0
  204. package/sandbox/pages/components/progress.html +28 -0
  205. package/sandbox/pages/components/table.html +80 -0
  206. package/sandbox/pages/customs/badge.html +59 -0
  207. package/sandbox/pages/customs/breadcrumb.html +34 -0
  208. package/sandbox/pages/customs/card.html +71 -0
  209. package/sandbox/pages/customs/dropdown.html +70 -0
  210. package/sandbox/pages/customs/grid.html +109 -0
  211. package/sandbox/pages/customs/list.html +43 -0
  212. package/sandbox/pages/javascript/autofill.html +39 -0
  213. package/sandbox/pages/javascript/checkall.html +37 -0
  214. package/sandbox/pages/javascript/comfort.html +41 -0
  215. package/sandbox/pages/javascript/consent.html +45 -0
  216. package/sandbox/pages/javascript/form.html +50 -0
  217. package/sandbox/pages/javascript/scroll.html +44 -0
  218. package/sandbox/pages/javascript/slider.html +44 -0
  219. package/sandbox/pages/javascript/sortable.html +56 -0
  220. package/sandbox/pages/javascript/tabpanel.html +39 -0
  221. package/sandbox/pages/javascript/toggle.html +72 -0
  222. package/sandbox/pages/javascript/tree.html +96 -0
  223. package/sandbox/sandbox.js +26 -0
  224. package/sandbox/scss/sandbox-header.scss +93 -0
  225. package/scss/components/_badge.scss +2 -1
  226. package/scss/components/_dropdown.scss +2 -2
  227. package/scss/components/_group.scss +8 -4
  228. package/scss/components/_popover.scss +74 -0
  229. package/scss/components/index.scss +1 -0
  230. package/scss/vanilla-frontend-doc.scss +46 -1
  231. package/scss/vanilla-frontend-sandbox.scss +34 -0
  232. package/vite.config.js +30 -0
  233. package/docs/index.html +0 -36
  234. package/docs/main-demo.js +0 -2
  235. package/docs/main.js +0 -34
  236. package/docs/pages/base/layout.html +0 -131
  237. package/docs/pages/base/media.html +0 -142
  238. package/docs/pages/base/reset.html +0 -53
  239. package/docs/pages/base/typography.html +0 -334
  240. package/docs/pages/components/button.html +0 -202
  241. package/docs/pages/components/dialog.html +0 -336
  242. package/docs/pages/components/disclosure.html +0 -174
  243. package/docs/pages/components/form.html +0 -427
  244. package/docs/pages/components/loading.html +0 -58
  245. package/docs/pages/components/progress.html +0 -47
  246. package/docs/pages/components/table.html +0 -168
  247. package/docs/pages/customs/badge.html +0 -150
  248. package/docs/pages/customs/breadcrumb.html +0 -67
  249. package/docs/pages/customs/card.html +0 -185
  250. package/docs/pages/customs/drawer.html +0 -149
  251. package/docs/pages/customs/dropdown.html +0 -270
  252. package/docs/pages/customs/grid.html +0 -185
  253. package/docs/pages/customs/list.html +0 -112
  254. package/docs/pages/customs/slider.html +0 -273
  255. package/docs/pages/javascript/autofill.html +0 -170
  256. package/docs/pages/javascript/checkall.html +0 -59
  257. package/docs/pages/javascript/comfort.html +0 -146
  258. package/docs/pages/javascript/consent.html +0 -112
  259. package/docs/pages/javascript/cookie.html +0 -81
  260. package/docs/pages/javascript/form.html +0 -199
  261. package/docs/pages/javascript/scroll.html +0 -209
  262. package/docs/pages/javascript/sortable.html +0 -167
  263. package/docs/pages/javascript/tabpanel.html +0 -89
  264. package/docs/pages/javascript/toggle.html +0 -193
  265. package/docs/pages/javascript/trap.html +0 -89
  266. package/docs/pages/javascript/tree.html +0 -256
  267. package/docs/pages/quick-start/conventions.html +0 -112
  268. package/docs/pages/quick-start/customization.html +0 -187
  269. package/docs/pages/quick-start/installation.html +0 -97
  270. package/docs/pages/quick-start/mixins.html +0 -214
  271. package/docs/src/js/demo.js +0 -110
  272. package/docs/src/js/doc-code.js +0 -102
  273. package/docs/src/js/doc-demo.js +0 -14
  274. package/docs/src/js/doc-layout.js +0 -117
  275. package/docs/src/scss/demo.scss +0 -77
  276. package/docs/src/scss/layout.scss +0 -83
  277. package/docs/src/scss/style.scss +0 -278
  278. package/docs/vite.config.mjs +0 -23
  279. package/esbuild.mjs +0 -25
  280. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  281. package/vitest.config.js +0 -8
package/sandbox/pages/javascript/checkall.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Check all - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Check all</h2>
19
+ <input type="checkbox" id="checkboxAll" name="all" value="checkbox[]">
20
+ <label for="checkboxAll">Check all</label>
21
+ <fieldset>
22
+ <legend>Choice</legend>
23
+ <input type="checkbox" id="checkboxA" name="checkbox[]" value="a">
24
+ <label for="checkboxA">A</label>
25
+ <input type="checkbox" id="checkboxB" name="checkbox[]" value="b">
26
+ <label for="checkboxB">B</label>
27
+ <input type="checkbox" id="checkboxC" name="checkbox[]" value="c">
28
+ <label for="checkboxC">B</label>
29
+ </fieldset>
30
+ </section>
31
+
32
+ </main>
33
+
34
+ <script type="module" src="/sandbox.js"></script>
35
+ </body>
36
+
37
+ </html>
package/sandbox/pages/javascript/comfort.html ADDED
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Comfort - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Theme</h2>
19
+ <button data-theme value="light">Light theme</button>
20
+ <button data-theme value="dark">Dark theme</button>
21
+
22
+ <h2>Style</h2>
23
+ <button data-style="--font-size" value="1rem">1 rem</button>
24
+ <button data-style="--font-size" value="1.5rem">1.5 rem</button>
25
+ <button data-style="--font-size" value="2rem">2 rem</button>
26
+
27
+ <h2>Custom</h2>
28
+ <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
29
+ <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
30
+
31
+ <h2>Reset</h2>
32
+ <button id="resetComfort">Reset</button>
33
+
34
+ </section>
35
+
36
+ </main>
37
+
38
+ <script type="module" src="/sandbox.js"></script>
39
+ </body>
40
+
41
+ </html>
package/sandbox/pages/javascript/consent.html ADDED
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Consent - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Consent cookie</h2>
19
+ <dialog id="demoCookies" aria-labelledby="cookiesTitle" aria-modal="true">
20
+ <div id="cookiesTitle">
21
+ <h1>Cookies Consent</h1>
22
+ <p><b>Accept:</b> will save the checkboxes</p>
23
+ <p><b>Decline:</b> will ONLY save the necessary</p>
24
+ <form method="dialog">
25
+ <fieldset style="margin-block:1rem;">
26
+ <input type="checkbox" id="cookieConsentNecessary" name="cookies_consent[]" value="necessary" checked disabled>
27
+ <label for="cookieConsentNecessary">Strictly necessary</label>
28
+ <input type="checkbox" id="cookieConsentAnalytic" name="cookies_consent[]" value="analytic">
29
+ <label for="cookieConsentAnalytic">Analytic</label>
30
+ <input type="checkbox" id="cookieConsentMarketing" name="cookies_consent[]" value="marketing">
31
+ <label for="cookieConsentMarketing">Marketing</label>
32
+ </fieldset>
33
+ <button class="primary" type="submit">Accept</button>
34
+ <button class="outline" data-dialog-close>Decline</button>
35
+ </form>
36
+ </div>
37
+ </dialog>
38
+ </section>
39
+
40
+ </main>
41
+
42
+ <script type="module" src="/sandbox.js"></script>
43
+ </body>
44
+
45
+ </html>
package/sandbox/pages/javascript/form.html ADDED
@@ -0,0 +1,50 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Form helper - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Password visibility</h2>
19
+ <fieldset>
20
+ <legend>Password</legend>
21
+ <div class="group">
22
+ <input id="myPassword" type="password" name="password" value="123456">
23
+ <button id="demoPassword" aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
24
+ Show
25
+ </button>
26
+ </div>
27
+ </fieldset>
28
+
29
+ <h2>Toggle form</h2>
30
+ <button id="demoToggleFormButton" aria-controls="demoToggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
31
+ <div id="demoToggleFormContent">
32
+ <input name="test" type="text" value="Some input" required>
33
+ <textarea> Some textarea
34
+ </textarea>
35
+ <select>
36
+ <option value="null">--</option>
37
+ <option value="1" selected>Lorem</option>
38
+ <option value="2">Perferendis</option>
39
+ <option value="3">Officiis</option>
40
+ </select>
41
+ <input type="checkbox" checked>
42
+ </div>
43
+ </section>
44
+
45
+ </main>
46
+
47
+ <script type="module" src="/sandbox.js"></script>
48
+ </body>
49
+
50
+ </html>
package/sandbox/pages/javascript/scroll.html ADDED
@@ -0,0 +1,44 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Scroll - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Scroll</h2>
19
+
20
+ <nav id="demoScrollNav">
21
+ <ul class="list">
22
+ <li><a role="button" href="#target1" aria-current="location">One</a></li>
23
+ <li><a role="button" href="#target2">Two</a></li>
24
+ <li><a role="button" href="#target3">Three</a></li>
25
+ <li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
26
+ <li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
27
+ </ul>
28
+ </nav>
29
+ <div id="demoScrollSpy" style="height: 150px; overflow-y: scroll; position: relative">
30
+ <div>
31
+ <p id="target1">1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?</p>
32
+ <p id="target2">2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
33
+ <p id="target3">3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
34
+ </div>
35
+ </div>
36
+
37
+ </section>
38
+
39
+ </main>
40
+
41
+ <script type="module" src="/sandbox.js"></script>
42
+ </body>
43
+
44
+ </html>
package/sandbox/pages/javascript/slider.html ADDED
@@ -0,0 +1,44 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Slider - Customs - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Slider</h2>
19
+
20
+ <div>
21
+ <div id="sliderFull" class="slider demo-slider">
22
+ <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
23
+ <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
24
+ <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
25
+ </div>
26
+ <button aria-controls="sliderFull" data-slider-prev>previous</button>
27
+ <div aria-controls="sliderFull" role="tablist">
28
+ <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
29
+ <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
30
+ <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
31
+ </div>
32
+ <button aria-controls="sliderFull" data-slider-next>next</button>
33
+ <button aria-controls="sliderFull" data-slider-play>play</button>
34
+ <button aria-controls="sliderFull" data-slider-pause>pause</button>
35
+ </div>
36
+
37
+ </section>
38
+
39
+ </main>
40
+
41
+ <script type="module" src="/sandbox.js"></script>
42
+ </body>
43
+
44
+ </html>
package/sandbox/pages/javascript/sortable.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Sortable - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Sortable</h2>
19
+ <ul class="demo-sortable">
20
+ <li draggable="false">Lorem, ipsum.</li>
21
+ <li draggable="false">Impedit, quod!</li>
22
+ <li draggable="false">Repudiandae, rerum.</li>
23
+ <li draggable="false">Ab, doloremque!</li>
24
+ <li draggable="false">Totam, consectetur.</li>
25
+ <li draggable="false">Laborum, cum!</li>
26
+ </ul>
27
+
28
+ <h2>Handle</h2>
29
+ <ul class="demo-sortable">
30
+ <li draggable=" false">
31
+ <span data-handle="sortable">
32
+ HANDLE
33
+ </span>
34
+ Lorem, ipsum.
35
+ </li>
36
+ <li draggable="false">
37
+ <span data-handle="sortable">
38
+ HANDLE
39
+ </span>
40
+ Impedit, quod!
41
+ </li>
42
+ <li draggable="false">
43
+ <span data-handle="sortable">
44
+ HANDLE
45
+ </span>
46
+ Repudiandae, rerum.
47
+ </li>
48
+ </ul>
49
+ </section>
50
+
51
+ </main>
52
+
53
+ <script type="module" src="/sandbox.js"></script>
54
+ </body>
55
+
56
+ </html>
package/sandbox/pages/javascript/tabpanel.html ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Tabpanel - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Tabpanel</h2>
19
+
20
+ <div id="myPanel">
21
+ <div role="tablist" aria-label="My demo tabpanel">
22
+ <button id="tab-1" role="tab" aria-controls="one">One</button>
23
+ <button id="tab-2" role="tab" aria-controls="two">Two</button>
24
+ </div>
25
+ <div id="one" role="tabpanel" aria-labelledby="tab-1">
26
+ This is the first panel
27
+ </div>
28
+ <div id="two" role="tabpanel" aria-labelledby="tab-2">
29
+ This is the seconde panel
30
+ </div>
31
+ </div>
32
+ </section>
33
+
34
+ </main>
35
+
36
+ <script type="module" src="/sandbox.js"></script>
37
+ </body>
38
+
39
+ </html>
package/sandbox/pages/javascript/toggle.html ADDED
@@ -0,0 +1,72 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Toggle - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Button</h2>
19
+ <button class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
20
+ <div id="collapse" tabindex="0" hidden>
21
+ Hello there !
22
+ </div>
23
+
24
+ <h2>By form</h2>
25
+ <fieldset>
26
+ <legend>Checkboxes</legend>
27
+ <input class="demo-toggle" id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
28
+ <label for="cA">Toggle A</label>
29
+ <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
30
+ <label for="cB">Toggle B</label>
31
+ </fieldset>
32
+ <div id="checkboxA" hidden>Hello there, I&#39;m A !</div>
33
+ <div id="checkboxB" hidden>Hello there, I&#39;m B !</div>
34
+ <hr style="margin-block:1rem">
35
+ <fieldset>
36
+ <legend>radios</legend>
37
+ <input class="demo-toggle" id="rA" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
38
+ <label for="rA">Toggle A</label>
39
+ <input class="demo-toggle" id="rB" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
40
+ <label for="rB">Toggle B</label>
41
+ <input class="demo-toggle" id="rC" type="radio" name="radio" value="c">
42
+ <label for="rC">Toggle C</label>
43
+ </fieldset>
44
+ <div id="radioA" hidden>Hello there, I&#39;m A !</div>
45
+ <div id="radioB" hidden>Hello there, I&#39;m B !</div>
46
+
47
+ <input id="switch" class="demo-toggle" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
48
+ <label for="switch">Switch</label>
49
+ <div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
50
+ <div id="switchB" data-toggle-when="false">This is FALSE</div>
51
+
52
+ <select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
53
+ <option value="null">--</option>
54
+ <option value="A">aaa</option>
55
+ <option value="B">bbb</option>
56
+ <optgroup label="group">
57
+ <option value="C">ccc</option>
58
+ <option value="D">ddd</option>
59
+ </optgroup>
60
+ </select>
61
+ <div id="selectA" data-toggle-when="A" hidden>Hello there, I&#39;m A !</div>
62
+ <div id="selectB" data-toggle-when="B" hidden>Hello there, I&#39;m B !</div>
63
+ <div id="selectG" data-toggle-when="group" hidden>Hello there, I&#39;m GROUP for C or D !</div>
64
+ <div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I&#39;m present if not A !</div>
65
+ </section>
66
+
67
+ </main>
68
+
69
+ <script type="module" src="/sandbox.js"></script>
70
+ </body>
71
+
72
+ </html>
package/sandbox/pages/javascript/tree.html ADDED
@@ -0,0 +1,96 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Tree - Javascript - Sandbox</title>
7
+ </head>
8
+
9
+ <body>
10
+
11
+ <header>
12
+ <sandbox-header class="container" />
13
+ </header>
14
+
15
+ <main id="content">
16
+
17
+ <section class="container">
18
+ <h2>Tree</h2>
19
+ <ul class="demo-tree">
20
+ <li>1: Lorem, ipsum</li>
21
+ <li>
22
+ <button role="link" aria-controls="treelist" aria-expanded="false">
23
+ 1: Inventore, perspiciatis (Open)
24
+ </button>
25
+ <ul id="treelist" tabindex="0" hidden>
26
+ <li>2: Lorem</li>
27
+ <li>
28
+ <button role="link" aria-controls="subtreelist" aria-expanded="false">
29
+ 2: Adipisci (Open)
30
+ </button>
31
+ <ul id="subtreelist" tabindex="0" hidden>
32
+ <li>3: Lorem</li>
33
+ <li>3: Adipisci</li>
34
+ <li>3: Facilis</li>
35
+ </ul>
36
+ </li>
37
+ <li>1: Facilis</li>
38
+ </ul>
39
+ </li>
40
+ <li>Dolor, quis</li>
41
+ </ul>
42
+
43
+ <h2>Table</h2>
44
+ <table class="demo-tree">
45
+ <tbody>
46
+ <tr aria-level="1">
47
+ <td>1: Lorem, ipsum</td>
48
+ </tr>
49
+ <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
50
+ <td>1: Cum, dolorum (open me)</td>
51
+ </tr>
52
+ <tr id="row1" aria-level="2" tabindex="0" hidden>
53
+ <td>2: Lorem</td>
54
+ </tr>
55
+ <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
56
+ <td>2: Quo (open me)</td>
57
+ </tr>
58
+ <tr id="row2-1" aria-level="3" tabindex="0" hidden>
59
+ <td>2.1: Quo</td>
60
+ </tr>
61
+ <tr id="row2-2" aria-level="3" hidden>
62
+ <td>2.2: Quo</td>
63
+ </tr>
64
+ <tr id="row3" aria-level="2" hidden>
65
+ <td>2: Odio</td>
66
+ </tr>
67
+ <tr aria-level="1">
68
+ <td>1: Perspiciatis, tenetur</td>
69
+ </tr>
70
+ </tbody>
71
+ </table>
72
+
73
+ <h2>Handle</h2>
74
+ <table class="demo-tree">
75
+ <tbody>
76
+ <tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
77
+ <td>
78
+ <span data-handle="tree">
79
+ (open me)
80
+ </span>
81
+ </td>
82
+ <td>1: Cum, dolorum</td>
83
+ </tr>
84
+ <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
85
+ <td></td>
86
+ <td>1.1: Lorem</td>
87
+ </tr>
88
+ </table>
89
+ </section>
90
+
91
+ </main>
92
+
93
+ <script type="module" src="/sandbox.js"></script>
94
+ </body>
95
+
96
+ </html>
package/sandbox/sandbox.js ADDED
@@ -0,0 +1,26 @@
1
+ // * Import Package SCSS
2
+ import '../scss/vanilla-frontend-sandbox.scss'
3
+
4
+ // * Import Sandbox style:
5
+ import './scss/sandbox-header.scss'
6
+
7
+ // * Import Sandbox JS:
8
+ import './js/sandbox-header.js'
9
+ import './js/sandbox-test.js'
10
+
11
+ // * SANDBOX
12
+
13
+ // Prevent first animation
14
+ setTimeout(() => { document.body.removeAttribute('data-preload') }, 10)
15
+
16
+ // Set the current navigation
17
+ const current = window.location.pathname
18
+
19
+ if (current.startsWith('/pages/')) document.querySelectorAll(`#menu a[href*="${current}"]`).forEach(elem => {
20
+ elem.setAttribute('aria-current', 'page')
21
+ })
22
+
23
+ // Drawer
24
+ import Drawer from "../js/_drawer.js"
25
+ const menu = document.getElementById('menu')
26
+ if (menu) new Drawer(menu, { breakpoint: 960, cookie: '_sandbox-drawer' })
package/sandbox/scss/sandbox-header.scss ADDED
@@ -0,0 +1,93 @@
1
+ body > header {
2
+
3
+ background-color: white;
4
+
5
+ // Sticky on top only in bigger screen
6
+ @media (min-width: 720px) {
7
+ position: sticky;
8
+ top: 0;
9
+ z-index: 2;
10
+ }
11
+
12
+ > sandbox-header {
13
+
14
+ display: flex;
15
+ align-items: center;
16
+
17
+ h1 {
18
+ display: inline-block;
19
+ margin-inline-end: auto;
20
+ }
21
+
22
+ nav {
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 1rem;
26
+ }
27
+
28
+ #menu {
29
+
30
+ --drawer-display: flex;
31
+ --drawer-position: 0 0 auto auto;
32
+ --drawer-height: 100dvh;
33
+ --drawer-width: 100dvw;
34
+ --drawer-max-width: 100dvw;
35
+
36
+ // Set a max drawer size
37
+ @media (min-width: 520px) {
38
+ --drawer-width: 320px;
39
+ }
40
+
41
+ padding: 2rem;
42
+ flex-direction: column;
43
+
44
+ > ul {
45
+
46
+ margin: 0;
47
+ padding: 0;
48
+ list-style: none;
49
+ overflow-y: auto;
50
+
51
+ li > h2 {
52
+ font-size: 1.25rem;
53
+ font-weight: bold;
54
+ }
55
+
56
+ li > a {
57
+
58
+ --anchor-hover-color: var(--color-primary);
59
+ --anchor-active-color: var(--color-primary);
60
+
61
+ display: block;
62
+
63
+ }
64
+
65
+ li:has(a) {
66
+ margin-block: .5rem;
67
+
68
+ & + li:has(h2) {
69
+ margin-block-start: 1.5rem;
70
+ }
71
+ }
72
+
73
+
74
+
75
+ }
76
+
77
+ .drawer-button {
78
+ height: fit-content;
79
+ width: 100%;
80
+ margin-inline-start: auto;
81
+ margin-block-end: 1rem;
82
+ }
83
+
84
+ }
85
+ }
86
+
87
+ }
88
+
89
+ @media (max-width: 960px) {
90
+ body:has(#menu:not([hidden])) {
91
+ overflow: hidden;
92
+ }
93
+ }
package/scss/components/_badge.scss CHANGED
@@ -16,7 +16,8 @@
16
16
  @use "../abstracts/default";
17
17
  @use "../abstracts/mixins" as *;
18
18
 
19
- $colors: () !default;
19
+ $colors: (
20
+ ) !default;
20
21
 
21
22
  $outline: false !default;
22
23