@natachah/vanilla-frontend 0.4.0 → 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 (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-doc.js +105 -0
  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/base/_reset.scss +2 -0
  226. package/scss/components/_badge.scss +2 -1
  227. package/scss/components/_dropdown.scss +2 -2
  228. package/scss/components/_group.scss +8 -4
  229. package/scss/components/_popover.scss +74 -0
  230. package/scss/components/index.scss +1 -0
  231. package/scss/themes/_root.scss +3 -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 -184
  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.0.tgz +0 -0
  283. package/vitest.config.js +0 -8
package/sandbox/pages/components/popover.html ADDED
@@ -0,0 +1,119 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Popover - Components - 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
+
19
+ <h2>Popover as classic flyout box</h2>
20
+
21
+ <div class="popover">
22
+ <button popovertarget="myPopover">⚓︎ Open the popover</button>
23
+ <div popover id="myPopover">
24
+ <p>Hello world</p>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="popover">
29
+ <button popovertarget="myPopoverPrimary">⚓︎ Open the popover</button>
30
+ <div popover id="myPopoverPrimary" class="primary">
31
+ <p>Hello world</p>
32
+ </div>
33
+ </div>
34
+
35
+ <h2>Popover as tooltip (little box with text content)</h2>
36
+
37
+ <p>
38
+ Anchor in a text with a span
39
+ <span class="popover">
40
+ <button popovertarget="myTooltip">⚓︎</button>
41
+ <span popover id="myTooltip">
42
+ Hello world
43
+ </span>
44
+ </span>
45
+ <span class="popover">
46
+ <button popovertarget="myTooltipPrimary">⚓︎</button>
47
+ <span popover id="myTooltipPrimary" class="primary">
48
+ Hello world
49
+ </span>
50
+ </span>
51
+ </p>
52
+
53
+ <h2>Popover as dropdown menu</h2>
54
+
55
+ <div class="dropdown">
56
+ <button popovertarget="myDropdown">
57
+ Open my dropdown
58
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
59
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
60
+ </svg>
61
+ </button>
62
+ <ul popover id="myDropdown" style="--dropdown-border-color: #ccc;">
63
+ <li><a href="#">Subitem</a></li>
64
+ <li><a href="#">Subitem</a></li>
65
+ <li><a href="#">Subitem</a></li>
66
+ </ul>
67
+ </div>
68
+
69
+ <h3>Group</h3>
70
+ <div class="group">
71
+ <div class="dropdown">
72
+ <button popovertarget="dropdownA">
73
+ Dropdown A
74
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
75
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
76
+ </svg>
77
+ </button>
78
+ <ul popover id="dropdownA">
79
+ <li><a href="#">Subitem A</a></li>
80
+ <li><a href="#">Subitem A</a></li>
81
+ <li><a href="#">Subitem A</a></li>
82
+ </ul>
83
+ </div>
84
+ <div class="dropdown">
85
+ <button popovertarget="dropdownB">
86
+ Dropdown B
87
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
88
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
89
+ </svg>
90
+ </button>
91
+ <ul popover id="dropdownB">
92
+ <li><a href="#">Subitem B</a></li>
93
+ <li><a href="#">Subitem B</a></li>
94
+ <li><a href="#">Subitem B</a></li>
95
+ </ul>
96
+ </div>
97
+ <div class="dropdown">
98
+ <button popovertarget="dropdownC">
99
+ Dropdown C
100
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
101
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
102
+ </svg>
103
+ </button>
104
+ <ul popover id="dropdownC">
105
+ <li><a href="#">Subitem C </a></li>
106
+ <li><a href="#">Subitem C </a></li>
107
+ <li><a href="#">Subitem C </a></li>
108
+ </ul>
109
+ </div>
110
+ </div>
111
+
112
+ </section>
113
+
114
+ </main>
115
+
116
+ <script type="module" src="/sandbox.js"></script>
117
+ </body>
118
+
119
+ </html>
package/sandbox/pages/components/progress.html ADDED
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Progress - Components - 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>Progress</h2>
19
+ <label for="download">Download progress:</label>
20
+ <progress id="download" value="50" max="100">50%</progress>
21
+ </section>
22
+
23
+ </main>
24
+
25
+ <script type="module" src="/sandbox.js"></script>
26
+ </body>
27
+
28
+ </html>
package/sandbox/pages/components/table.html ADDED
@@ -0,0 +1,80 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Table - Components - 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>Table</h2>
19
+ <table>
20
+ <caption>Caption of the table</caption>
21
+ <thead>
22
+ <tr>
23
+ <th>Head A</th>
24
+ <th>Head B</th>
25
+ <th>Head C</th>
26
+ </tr>
27
+ </thead>
28
+ <tbody>
29
+ <tr>
30
+ <td>Cell</td>
31
+ <td>Cell</td>
32
+ <td>Cell</td>
33
+ </tr>
34
+ <tr>
35
+ <td>Cell</td>
36
+ <td>Cell</td>
37
+ <td>Cell</td>
38
+ </tr>
39
+ <tr>
40
+ <td>Cell</td>
41
+ <td>Cell</td>
42
+ <td>Cell</td>
43
+ </tr>
44
+ </tbody>
45
+ <tfoot>
46
+ <tr>
47
+ <th>Foot A</th>
48
+ <th>Foot B</th>
49
+ <th>Foot C</th>
50
+ </tr>
51
+ </tfoot>
52
+ </table>
53
+
54
+ <h2>Responsive</h2>
55
+ <div class="as-container">
56
+ <table id="demoTable">
57
+ <thead>
58
+ <tr>
59
+ <th>Header A</th>
60
+ <th>Header B</th>
61
+ <th>Header C</th>
62
+ </tr>
63
+ </thead>
64
+ <tbody>
65
+ <tr>
66
+ <td data-label="Header A">Cell</td>
67
+ <td data-label="Header B">Cell</td>
68
+ <td data-label="Header C">Cell</td>
69
+ </tr>
70
+ </tbody>
71
+ </table>
72
+ </div>
73
+ </section>
74
+
75
+ </main>
76
+
77
+ <script type="module" src="/sandbox.js"></script>
78
+ </body>
79
+
80
+ </html>
package/sandbox/pages/customs/badge.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Badge - 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
+
19
+ <h2>Badge</h2>
20
+ <span class="badge">Badge</span>
21
+
22
+ <h2>Icon</h2>
23
+ <span class="badge">
24
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
25
+ <path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" />
26
+ <path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z" />
27
+ <path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" />
28
+ </svg>
29
+ Badge
30
+ </span>
31
+
32
+ <h2>Size</h2>
33
+ <span class="badge" style="font-size: .75em">Small</span>
34
+ <span class="badge">Normal</span>
35
+ <span class="badge" style="font-size: var(--font-size-large)">Large</span>
36
+
37
+ <h2>Variants</h2>
38
+
39
+ <h3>Outline</h3>
40
+ <span class="badge outline">Badge</span>
41
+
42
+ <h3>Color</h3>
43
+ <span class="badge primary">Primary</span> <span class="badge outline primary">Outline</span>
44
+
45
+ <h3>Group</h3>
46
+ <div class="group">
47
+ <span class="badge">Badge A</span>
48
+ <span class="badge">Badge B</span>
49
+ <span class="badge">Badge C</span>
50
+ </div>
51
+
52
+ </section>
53
+
54
+ </main>
55
+
56
+ <script type="module" src="/sandbox.js"></script>
57
+ </body>
58
+
59
+ </html>
package/sandbox/pages/customs/breadcrumb.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Breadcrumb - 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>Breadcrumb</h2>
19
+ <nav aria-label="Breadcrumb navigaton">
20
+ <ol class="breadcrumb">
21
+ <li><a href="#">One</a></li>
22
+ <li><a href="#">Two</a></li>
23
+ <li><a href="#">Three</a></li>
24
+ <li aria-current="location">Four</li>
25
+ </ol>
26
+ </nav>
27
+ </section>
28
+
29
+ </main>
30
+
31
+ <script type="module" src="/sandbox.js"></script>
32
+ </body>
33
+
34
+ </html>
package/sandbox/pages/customs/card.html ADDED
@@ -0,0 +1,71 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Card - 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>Card</h2>
19
+ <div class="card">Hello there !</div>
20
+
21
+ <h2>Layout</h2>
22
+ <article class="card">
23
+ <header>Header</header>
24
+ <p>Content</p>
25
+ <footer>Footer</footer>
26
+ </article>
27
+
28
+ <h2>Picture</h2>
29
+ <div class="card">
30
+ <picture class="flush">
31
+ <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
32
+ </picture>
33
+ <h3>Title of the card</h3>
34
+ <p>Content of the card</p>
35
+ </div>
36
+
37
+ <h2>Group</h2>
38
+ <div class="card" style="--card-border-color:#000;">
39
+ <h3>Mycard</h3>
40
+ <p>Content of the card</p>
41
+ <div class="group flush">
42
+ <button>Button A</button>
43
+ <button>Button B</button>
44
+ </div>
45
+ <p>Content of the card</p>
46
+ <ul class="list flush">
47
+ <li><a href="#" role="button">List F</a></li>
48
+ <li>List D</li>
49
+ <li><a>List E</a></li>
50
+ <li><span>List F</span><button>Button</button></li>
51
+ <li><a href="#" role="button">List F</a></li>
52
+ </ul>
53
+ </div>
54
+
55
+ <h2>Variants</h2>
56
+
57
+ <h3>Outline</h3>
58
+ <div class="card outline">Hello there !</div>
59
+
60
+ <h3>Color</h3>
61
+ <div class="card primary">Hello there !</div>
62
+ <div class="card outline primary" style="margin-top:1rem">Hello there !</div>
63
+
64
+ </section>
65
+
66
+ </main>
67
+
68
+ <script type="module" src="/sandbox.js"></script>
69
+ </body>
70
+
71
+ </html>
package/sandbox/pages/customs/dropdown.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Dropdown - 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>Dropdown</h2>
19
+ <div class="dropdown-js demo-dropdown">
20
+ <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
21
+ Dropdown
22
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
23
+ <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
24
+ </svg>
25
+ </button>
26
+ <ul id="myDropdown" tabindex="0" hidden>
27
+ <li><a href="#">Subitem</a></li>
28
+ <li><a href="#">Subitem</a></li>
29
+ <li><a href="#">Subitem</a></li>
30
+ </ul>
31
+ </div>
32
+
33
+ <h2>Variants</h2>
34
+
35
+ <h3>Group</h3>
36
+ <div class="group">
37
+ <div class="dropdown-js demo-dropdown">
38
+ <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
39
+ Dropdown A
40
+ </button>
41
+ <div id="myDropdownA" tabindex="0" hidden>
42
+ <p>AAA</p>
43
+ </div>
44
+ </div>
45
+ <div class="dropdown-js demo-dropdown">
46
+ <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
47
+ Dropdown B
48
+ </button>
49
+ <div id="myDropdownB" tabindex="0" hidden>
50
+ <p>BBB</p>
51
+ </div>
52
+ </div>
53
+ <div class="dropdown-js demo-dropdown">
54
+ <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
55
+ Dropdown C
56
+ </button>
57
+ <div id="myDropdownC" tabindex="0" hidden>
58
+ <p>CCC</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ </section>
64
+
65
+ </main>
66
+
67
+ <script type="module" src="/sandbox.js"></script>
68
+ </body>
69
+
70
+ </html>
package/sandbox/pages/customs/grid.html ADDED
@@ -0,0 +1,109 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Grid - 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>Grid</h2>
19
+ <div class="grid" style="--grid-columns:8">
20
+ <div>1</div>
21
+ <div>2</div>
22
+ <div>3</div>
23
+ <div>4</div>
24
+ <div>5</div>
25
+ <div>6</div>
26
+ <div>7</div>
27
+ <div>8</div>
28
+ <div>9</div>
29
+ <div>10</div>
30
+ <div>11</div>
31
+ <div>12</div>
32
+ </div>
33
+
34
+ <h3>Responsive</h3>
35
+ <div class="grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
36
+ <div>1</div>
37
+ <div>2</div>
38
+ <div>3</div>
39
+ <div>4</div>
40
+ <div>5</div>
41
+ <div>6</div>
42
+ <div>7</div>
43
+ <div>8</div>
44
+ </div>
45
+
46
+ <h3>Offset</h3>
47
+ <div class="grid" style="--grid-min-columns:4">
48
+ <div>Grid 1</div>
49
+ <div>Grid 2</div>
50
+ <div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
51
+ </div>
52
+
53
+ <h3>Width</h3>
54
+ <div class="grid" style="--grid-columns:4">
55
+ <div>Grid 1</div>
56
+ <div>Grid 2</div>
57
+ <div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
58
+ </div>
59
+
60
+ <h2>Flex grid</h2>
61
+ <div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
62
+ <div>1</div>
63
+ <div>2</div>
64
+ <div>3</div>
65
+ <div>4</div>
66
+ <div>5</div>
67
+ <div>6</div>
68
+ <div>7</div>
69
+ <div>8</div>
70
+ <div>9</div>
71
+ <div>10</div>
72
+ <div>11</div>
73
+ <div>12</div>
74
+ </div>
75
+
76
+ <h3>Responsive</h3>
77
+ <div class="flex-grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
78
+ <div>1</div>
79
+ <div>2</div>
80
+ <div>3</div>
81
+ <div>4</div>
82
+ <div>5</div>
83
+ <div>6</div>
84
+ <div>7</div>
85
+ <div>8</div>
86
+ </div>
87
+
88
+ <h3>Offset</h3>
89
+ <div class="flex-grid" style="--grid-columns:4">
90
+ <div>Flex 1</div>
91
+ <div>Flex 2</div>
92
+ <div id="flexGridDemoOffset">Offset</div>
93
+ </div>
94
+
95
+ <h3>Width</h3>
96
+ <div class="flex-grid" style="--grid-columns:4">
97
+ <div>Flex 1</div>
98
+ <div>Flex 2</div>
99
+ <div id="flexGridDemoWider">Wider</div>
100
+ </div>
101
+
102
+ </section>
103
+
104
+ </main>
105
+
106
+ <script type="module" src="/sandbox.js"></script>
107
+ </body>
108
+
109
+ </html>
package/sandbox/pages/customs/list.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>List - 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>List</h2>
19
+ <ul class="list">
20
+ <li>List A</li>
21
+ <li>List B</li>
22
+ <li><a href="#">List C</a></li>
23
+ <li>List D</li>
24
+ <li><span>List E</span> <button>button</button></li>
25
+ </ul>
26
+
27
+ <h2>Action</h2>
28
+ <ul class="list" style="--list-border-color: #ccc;">
29
+ <li><button>List A (button)</button></li>
30
+ <li><button disabled>List B (button disabled)</button></li>
31
+ <li>List C</li>
32
+ <li><a role="button" href="#">List D (link)</a></li>
33
+ <li><span>List E</span><a role="button" href="#">Not only child (link)</a></li>
34
+ <li><a role="button">List F (link disabled)</a></li>
35
+ </ul>
36
+ </section>
37
+
38
+ </main>
39
+
40
+ <script type="module" src="/sandbox.js"></script>
41
+ </body>
42
+
43
+ </html>
package/sandbox/pages/javascript/autofill.html ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Autofill - 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>Autofill</h2>
19
+ <fieldset>
20
+ <legend>Favorite animal</legend>
21
+ <div class="group">
22
+ <select id="autofill" name="select" aria-controls="animalID">
23
+ <option>--</option>
24
+ <option data-id="1">Cat</option>
25
+ <option data-id="2">Dog</option>
26
+ <option data-id="3">Lizzard</option>
27
+ <option data-id="4">Bird</option>
28
+ </select>
29
+ <input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
30
+ </div>
31
+ </fieldset>
32
+ </section>
33
+
34
+ </main>
35
+
36
+ <script type="module" src="/sandbox.js"></script>
37
+ </body>
38
+
39
+ </html>