@natachah/vanilla-frontend 0.4.1 → 1.0.1

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 (283) 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.1.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.zYBRMlen.js +1 -0
  51. package/public/assets/base_layout.md.DPVON1Hq.js +13 -0
  52. package/public/assets/base_layout.md.DPVON1Hq.lean.js +1 -0
  53. package/public/assets/base_media.md.DHSlU0g6.js +24 -0
  54. package/public/assets/base_media.md.DHSlU0g6.lean.js +1 -0
  55. package/public/assets/base_reset.md.DD9AA1li.js +3 -0
  56. package/public/assets/base_reset.md.DD9AA1li.lean.js +1 -0
  57. package/public/assets/base_typography.md.C9BVN1Re.js +87 -0
  58. package/public/assets/base_typography.md.C9BVN1Re.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.Cw4G3qNN.js +27 -0
  60. package/public/assets/chunks/framework.26dFs73Q.js +4 -0
  61. package/public/assets/chunks/theme.D1Tljxds.js +1 -0
  62. package/public/assets/classes_badge.md.EznZXXqT.js +24 -0
  63. package/public/assets/classes_badge.md.EznZXXqT.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.DrzF9h9m.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.DrzF9h9m.lean.js +1 -0
  66. package/public/assets/classes_card.md.BzNZEHe9.js +41 -0
  67. package/public/assets/classes_card.md.BzNZEHe9.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.CKZ2tv7T.js +70 -0
  69. package/public/assets/classes_dropdown.md.CKZ2tv7T.lean.js +1 -0
  70. package/public/assets/classes_grid.md.CKCvlWAg.js +45 -0
  71. package/public/assets/classes_grid.md.CKCvlWAg.lean.js +1 -0
  72. package/public/assets/classes_list.md.CjyB8PFK.js +36 -0
  73. package/public/assets/classes_list.md.CjyB8PFK.lean.js +1 -0
  74. package/public/assets/components_button.md.CX41PJBd.js +45 -0
  75. package/public/assets/components_button.md.CX41PJBd.lean.js +1 -0
  76. package/public/assets/components_dialog.md.JMjidrIE.js +76 -0
  77. package/public/assets/components_dialog.md.JMjidrIE.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.BwvLkFL_.js +53 -0
  79. package/public/assets/components_disclosure.md.BwvLkFL_.lean.js +1 -0
  80. package/public/assets/components_form.md.C6B5z_6G.js +122 -0
  81. package/public/assets/components_form.md.C6B5z_6G.lean.js +1 -0
  82. package/public/assets/components_loading.md.51ktm2_l.js +4 -0
  83. package/public/assets/components_loading.md.51ktm2_l.lean.js +1 -0
  84. package/public/assets/components_popover.md.DpbAjVUj.js +102 -0
  85. package/public/assets/components_popover.md.DpbAjVUj.lean.js +1 -0
  86. package/public/assets/components_progress.md.H7v6t9h-.js +6 -0
  87. package/public/assets/components_progress.md.H7v6t9h-.lean.js +1 -0
  88. package/public/assets/components_table.md.BPrpvUDy.js +75 -0
  89. package/public/assets/components_table.md.BPrpvUDy.lean.js +1 -0
  90. package/public/assets/index.md.DNiLOsZD.js +1 -0
  91. package/public/assets/index.md.DNiLOsZD.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.COaG5lWR.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.HyVx8c7W.js +49 -0
  107. package/public/assets/javascript_autofill.md.HyVx8c7W.lean.js +1 -0
  108. package/public/assets/javascript_check.md.BCbZtUBE.js +13 -0
  109. package/public/assets/javascript_check.md.BCbZtUBE.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.CQm191VA.js +20 -0
  111. package/public/assets/javascript_comfort.md.CQm191VA.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.CbDzabMd.js +29 -0
  113. package/public/assets/javascript_consent.md.CbDzabMd.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.CFVe2JRe.js +2 -0
  115. package/public/assets/javascript_cookie.md.CFVe2JRe.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.D_pT0mrZ.js +32 -0
  117. package/public/assets/javascript_drawer.md.D_pT0mrZ.lean.js +1 -0
  118. package/public/assets/javascript_form.md.sGYh1L4I.js +40 -0
  119. package/public/assets/javascript_form.md.sGYh1L4I.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.DeOZ4grw.js +30 -0
  121. package/public/assets/javascript_scroll.md.DeOZ4grw.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.CIa7pHr9.js +27 -0
  123. package/public/assets/javascript_slider.md.CIa7pHr9.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.CThHVTgW.js +35 -0
  125. package/public/assets/javascript_sortable.md.CThHVTgW.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.CxAFdAGU.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C66hpUWF.js +46 -0
  129. package/public/assets/javascript_toggle.md.C66hpUWF.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Dt2Rt__e.js +2 -0
  131. package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.COR-Pj1y.js +72 -0
  133. package/public/assets/javascript_tree.md.COR-Pj1y.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.wCplqeKt.js +34 -0
  135. package/public/assets/prologue_conventions.md.wCplqeKt.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CBJGKY_Y.js +1 -0
  137. package/public/assets/prologue_release.md.CBJGKY_Y.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.E_0GNNE2.js +1 -0
  139. package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js +1 -0
  140. package/public/assets/start_customization.md.C4fmzVYD.js +141 -0
  141. package/public/assets/start_customization.md.C4fmzVYD.lean.js +1 -0
  142. package/public/assets/start_install.md.vqLh01mm.js +46 -0
  143. package/public/assets/start_install.md.vqLh01mm.lean.js +1 -0
  144. package/public/assets/start_mixin.md.B5VMlbiN.js +85 -0
  145. package/public/assets/start_mixin.md.B5VMlbiN.lean.js +1 -0
  146. package/public/assets/style.Dl6gCPEE.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 +112 -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 +51 -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/base/_layout.scss +1 -0
  226. package/scss/base/_reset.scss +5 -0
  227. package/scss/components/_badge.scss +2 -1
  228. package/scss/components/_dropdown.scss +2 -2
  229. package/scss/components/_group.scss +8 -4
  230. package/scss/components/_popover.scss +74 -0
  231. package/scss/components/index.scss +1 -0
  232. package/scss/vanilla-frontend-doc.scss +46 -1
  233. package/scss/vanilla-frontend-sandbox.scss +34 -0
  234. package/vite.config.js +30 -0
  235. package/docs/index.html +0 -36
  236. package/docs/main-demo.js +0 -2
  237. package/docs/main.js +0 -34
  238. package/docs/pages/base/layout.html +0 -131
  239. package/docs/pages/base/media.html +0 -142
  240. package/docs/pages/base/reset.html +0 -53
  241. package/docs/pages/base/typography.html +0 -334
  242. package/docs/pages/components/button.html +0 -202
  243. package/docs/pages/components/dialog.html +0 -336
  244. package/docs/pages/components/disclosure.html +0 -174
  245. package/docs/pages/components/form.html +0 -427
  246. package/docs/pages/components/loading.html +0 -58
  247. package/docs/pages/components/progress.html +0 -47
  248. package/docs/pages/components/table.html +0 -168
  249. package/docs/pages/customs/badge.html +0 -150
  250. package/docs/pages/customs/breadcrumb.html +0 -67
  251. package/docs/pages/customs/card.html +0 -185
  252. package/docs/pages/customs/drawer.html +0 -149
  253. package/docs/pages/customs/dropdown.html +0 -270
  254. package/docs/pages/customs/grid.html +0 -185
  255. package/docs/pages/customs/list.html +0 -112
  256. package/docs/pages/customs/slider.html +0 -273
  257. package/docs/pages/javascript/autofill.html +0 -170
  258. package/docs/pages/javascript/checkall.html +0 -59
  259. package/docs/pages/javascript/comfort.html +0 -146
  260. package/docs/pages/javascript/consent.html +0 -112
  261. package/docs/pages/javascript/cookie.html +0 -81
  262. package/docs/pages/javascript/form.html +0 -199
  263. package/docs/pages/javascript/scroll.html +0 -209
  264. package/docs/pages/javascript/sortable.html +0 -167
  265. package/docs/pages/javascript/tabpanel.html +0 -89
  266. package/docs/pages/javascript/toggle.html +0 -193
  267. package/docs/pages/javascript/trap.html +0 -89
  268. package/docs/pages/javascript/tree.html +0 -256
  269. package/docs/pages/quick-start/conventions.html +0 -112
  270. package/docs/pages/quick-start/customization.html +0 -187
  271. package/docs/pages/quick-start/installation.html +0 -97
  272. package/docs/pages/quick-start/mixins.html +0 -214
  273. package/docs/src/js/demo.js +0 -110
  274. package/docs/src/js/doc-code.js +0 -102
  275. package/docs/src/js/doc-demo.js +0 -14
  276. package/docs/src/js/doc-layout.js +0 -117
  277. package/docs/src/scss/demo.scss +0 -77
  278. package/docs/src/scss/layout.scss +0 -83
  279. package/docs/src/scss/style.scss +0 -278
  280. package/docs/vite.config.mjs +0 -23
  281. package/esbuild.mjs +0 -25
  282. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  283. 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,51 @@
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
+ <input name="test2" type="text" value="Some other input" required>
34
+ <textarea> Some textarea
35
+ </textarea>
36
+ <select>
37
+ <option value="null">--</option>
38
+ <option value="1" selected>Lorem</option>
39
+ <option value="2">Perferendis</option>
40
+ <option value="3">Officiis</option>
41
+ </select>
42
+ <input type="checkbox" checked>
43
+ </div>
44
+ </section>
45
+
46
+ </main>
47
+
48
+ <script type="module" src="/sandbox.js"></script>
49
+ </body>
50
+
51
+ </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/base/_layout.scss CHANGED
@@ -22,6 +22,7 @@ body {
22
22
  --layout-content-width: minmax(0, calc((var(--layout-width, 1280) - ((var(--layout-columns, 12) - 1) * var(--layout-gap-inline, 1rem))) / var(--layout-columns, 12)));
23
23
 
24
24
  min-height: 100vh;
25
+ min-block-size: 100svh;
25
26
  display: grid;
26
27
  grid-template-columns: [full-start] minmax(var(--layout-gap-inline, 1rem), 1fr) [content-start] repeat(var(--layout-columns, 12), var(--layout-content-width)) [content-end] minmax(var(--layout-gap-inline, 1rem), 1fr) [full-end];
27
28
  grid-template-rows: auto 1fr auto;