@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/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>