@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/base/typography.html ADDED
@@ -0,0 +1,132 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Typography - Base - 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>Heading 2</h2>
19
+ <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A repellat repellendus hic quibusdam autem ullam quidem soluta obcaecati. Animi, impedit?</p>
20
+ <p>Dolore dolorum fugiat est quo quae mollitia, fugit, illum unde aliquid tenetur vitae eligendi vero ipsam numquam consectetur ab esse.</p>
21
+ <h3>Heading 3</h3>
22
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem, aliquam?</p>
23
+ <p>Repudiandae et vero voluptate ex neque, eaque eligendi sint aut.</p>
24
+ <p>A provident praesentium architecto quas deserunt repudiandae ut eos adipisci!</p>
25
+ <h4>Heading 4</h4>
26
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero fugiat odio ratione in omnis odit minima neque facilis quidem. Aperiam quod repellendus maxime magnam fuga voluptas, tenetur inventore vitae ipsam atque cum earum cumque cupiditate vel accusantium quasi optio quisquam dolor libero harum dignissimos delectus commodi provident error? Animi, rerum.</p>
27
+ <h5>Heading 5</h5>
28
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia praesentium dolore, veniam libero labore incidunt?</p>
29
+ <p>Quos fugit minus nisi non, vero, deserunt consequatur, praesentium modi labore autem facilis voluptate adipisci?</p>
30
+ <h6>Heading 6</h6>
31
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, nam.</p>
32
+ <p>Deserunt praesentium cupiditate saepe fuga est assumenda esse sunt nobis!</p>
33
+ <p>Est pariatur saepe delectus voluptatum, molestiae officia commodi nam assumenda.</p>
34
+ <p>Quam sunt minus dolorum voluptatum labore quis laudantium illo fuga.</p>
35
+ </section>
36
+
37
+ <section class="container">
38
+ <h2>Anchor</h2>
39
+ <a href="#">Anchor</a>
40
+ <a href="#" aria-current="page">Active</a>
41
+ <a>Disabled</a>
42
+ <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
43
+ </section>
44
+
45
+ <section class="container">
46
+ <h2>Inline</h2>
47
+ <p><abbr title="Abbreviation">Abbr.</abbr></p>
48
+ <p><small>Small</small></p>
49
+ <p><q>An inline quote</q></p>
50
+ <p><b>Bold</b></p>
51
+ <p><strong>Strong</strong></p>
52
+ <p><em>Emphasis</em></p>
53
+ <p><i>Idiomatic</i></p>
54
+ <p><s>Strikethrough</s></p>
55
+ <p><u>Underline</u></p>
56
+ <p><span>Text <sub>Sub</sub></span></p>
57
+ <p><span>Text <sup>Sup</sup></span></p>
58
+ <p><cite>Citation</cite></p>
59
+ <p><mark>Highlight</mark></p>
60
+ <p><kbd>Ctrl + S</kbd></p>
61
+ <p><code>&lt;Code&gt;</code></p>
62
+ <p><ins>Inserted</ins></p>
63
+ <p><del>Deleted</del></p>
64
+ </section>
65
+
66
+ <section class="container">
67
+ <h2>Blockquote</h2>
68
+ <blockquote>
69
+ <p>
70
+ “It's only after we've lost everything that we're free to do anything.”
71
+ </p>
72
+ <footer>
73
+ - Chuck Palahniuk, <cite>Fight Club</cite>
74
+ </footer>
75
+ </blockquote>
76
+ <blockquote>
77
+ It was a bright cold day in April, and the clocks were striking thirteen.
78
+ </blockquote>
79
+ </section>
80
+
81
+ <section class="container">
82
+ <h2>Code</h2>
83
+ <pre><code><!--
84
+ -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
85
+ -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
86
+ </section>
87
+
88
+ <section class="container">
89
+ <h2>List</h2>
90
+ <ul>
91
+ <li>
92
+ <p>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores eligendi assumenda eaque sint nemo non laudantium quidem, voluptate ipsum sapiente accusantium mollitia vitae quia tenetur cupiditate voluptatibus maxime fugiat?</p>
93
+ </li>
94
+ <li>
95
+ <p>Velit ipsam blanditiis ducimus?</p>
96
+ </li>
97
+ <li>
98
+ <p>Porro impedit provident at!</p>
99
+ </li>
100
+ </ul>
101
+ <ol>
102
+ <li>
103
+ <p>Lorem, ipsum dolor.</p>
104
+ </li>
105
+ <li>
106
+ <p>Obcaecati, a impedit!</p>
107
+ </li>
108
+ <li>
109
+ <p>Quo, eligendi veritatis?</p>
110
+ </li>
111
+ </ol>
112
+ <dl>
113
+ <dt>Coffee</dt>
114
+ <dd>Black hot drink</dd>
115
+ <dt>Milk</dt>
116
+ <dd>White cold drink</dd>
117
+ </dl>
118
+ </section>
119
+
120
+ <section class="container">
121
+ <h2>Breakline</h2>
122
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, modi doloremque. Ex enim sed dolores, corporis repudiandae consequatur repellat. Mollitia.</p>
123
+ <hr>
124
+ <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit, praesentium!</p>
125
+ </section>
126
+
127
+ </main>
128
+
129
+ <script type="module" src="/sandbox.js"></script>
130
+ </body>
131
+
132
+ </html>
package/sandbox/pages/components/button.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Button - 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>Buttons</h2>
19
+ <button>Button</button>
20
+ <a href="#" role="button">Link as button</a>
21
+
22
+ <h2>Icon</h2>
23
+ <button>
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
+ Button
30
+ </button>
31
+
32
+ <h2>Size</h2>
33
+ <button style="font-size: var(--font-size-small)">Small</button>
34
+ <button>Normal</button>
35
+ <button style="font-size: var(--font-size-large)">Large</button>
36
+
37
+ <h2>States</h2>
38
+ <button aria-pressed="true">Button</button>
39
+ <a href="#" role="button" aria-current="true">Link as button</a>
40
+ <button disabled>Button</button>
41
+ <a role="button">Link as button</a>
42
+
43
+ <h2>Variants: as-link</h2>
44
+ <button role="link">As link</button>
45
+ <button role="link" disabled>As disabled link</button>
46
+
47
+ <h2>Variants: outline</h2>
48
+ <button class="outline">Button</button>
49
+ <button class="outline" disabled>Disabled</button>
50
+ <button class="outline" aria-pressed="true">Active</button>
51
+
52
+ <h2>Variants: color</h2>
53
+ <button class="primary">Primary</button> <button class="primary" disabled>Disabled</button> <button class="primary" aria-pressed="true">Active</button>
54
+ <button class="primary outline">Primary</button> <button class="primary outline" disabled>Disabled</button> <button class="primary outline" aria-pressed="true">Active</button>
55
+
56
+ <h2>Variants: group</h2>
57
+ <div class="group">
58
+ <button>Button A</button>
59
+ <button>Button B</button>
60
+ <button>Button C</button>
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/components/dialog.html ADDED
@@ -0,0 +1,72 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Dialog - 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>Basic</h2>
20
+ <button aria-controls="demoDialog">Open the dialog</button>
21
+ <dialog id="demoDialog" class="demo-dialog" aria-labelledby="demoDialogTitle">
22
+ <h3 title="demoDialogTitle">Hey this is a dialog as non-modal !</h3>
23
+ <p>Hello there !</p>
24
+ <button data-dialog-close>Close the dialog</button>
25
+ </dialog>
26
+
27
+ <h2>Modal</h2>
28
+ <button aria-controls="demoDialogLayout">Open the dialog</button>
29
+ <dialog id="demoDialogLayout" class="demo-dialog" aria-labelledby="demoDialogLayoutTitle" aria-modal="true">
30
+ <header id="demoDialogLayoutTitle">This is a header</header>
31
+ <div>
32
+ <p>This is the content</p>
33
+ <p>This dialog is a modal</p>
34
+ <button data-dialog-close>Close</button>
35
+ </div>
36
+ <footer>This is a footer</footer>
37
+ </dialog>
38
+
39
+ <h2>Form</h2>
40
+ <button aria-controls="demoDialogForm">Open the dialog</button>
41
+ <dialog id="demoDialogForm" class="demo-dialog" aria-labelledby="demoDialogFormTitle" aria-modal="true">
42
+ <h3 id="demoDialogFormTitle">Dialog with form</h3>
43
+ <form method="POST">
44
+ <label for="animal">What is your favorite animal</label>
45
+ <input id="animal" type="text" name="animal" required>
46
+ <button type="reset" data-dialog-close>Cancel</button>
47
+ <button type="submit">Default submit</button>
48
+ </form>
49
+ </dialog>
50
+
51
+ <h2>Form JS</h2>
52
+ <button aria-controls="demoDialogFormJs">Open the dialog</button>
53
+ <dialog id="demoDialogFormJs" class="demo-dialog" aria-labelledby="demoDialogFormJsTitle" aria-modal="true">
54
+ <h3 id="demoDialogFormJsTitle">Dialog with form</h3>
55
+ <form method="dialog">
56
+ <label for="animal">What is your favorite animal</label>
57
+ <input id="animal" type="text" name="animal" required>
58
+ <button type="reset" data-dialog-close>Cancel</button>
59
+ <button type="submit">Javascript submit</button>
60
+ </form>
61
+ </dialog>
62
+ <p>Your favorite animal is: <span id="favorite">--</span></p>
63
+
64
+
65
+ </section>
66
+
67
+ </main>
68
+
69
+ <script type="module" src="/sandbox.js"></script>
70
+ </body>
71
+
72
+ </html>
package/sandbox/pages/components/disclosure.html ADDED
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Disclosure - 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>Disclosure</h2>
20
+ <details>
21
+ <summary>
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="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
24
+ </svg>
25
+ Some disclosure
26
+ </summary>
27
+ <div>
28
+ <p>
29
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
30
+ reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
31
+ voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
32
+ </p>
33
+ </div>
34
+ </details>
35
+
36
+ <h2>Accordion</h2>
37
+ <div class="accordion">
38
+ <details>
39
+ <summary>
40
+ Disclosure A
41
+ </summary>
42
+ <div>
43
+ <p>
44
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam.
45
+ </p>
46
+ </div>
47
+ </details>
48
+ <details>
49
+ <summary>
50
+ Disclosure B
51
+ </summary>
52
+ <div>
53
+ <p>
54
+ Ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam.
55
+ </p>
56
+ </div>
57
+ </details>
58
+ <details>
59
+ <summary>
60
+ Disclosure C
61
+ </summary>
62
+ <div>
63
+ <p>
64
+ Aliquid nihil sequi beatae architecto ullam quisquam
65
+ voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
66
+ </p>
67
+ </div>
68
+ </details>
69
+ </div>
70
+ </section>
71
+
72
+ </main>
73
+
74
+ <script type="module" src="/sandbox.js"></script>
75
+ </body>
76
+
77
+ </html>
package/sandbox/pages/components/form.html ADDED
@@ -0,0 +1,164 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Form - 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>Layout</h2>
19
+ <label for="inputText">Input</label>
20
+ <input type="text" id="inputText" name="input" placeholder="My input" aria-describedby="myInputDescription">
21
+ <small id="myInputDescription">
22
+ Must be at least 8 characters.
23
+ </small>
24
+
25
+ <h2>Inputs</h2>
26
+ <input type="text" name="text" placeholder="Some text">
27
+ <input type="search" name="search" placeholder="Enter some keyword">
28
+ <input type="email" name="email" placeholder="info@something.com">
29
+ <input type="url" name="url" placeholder="http://www.google.com">
30
+ <input type="tel" name="tel" placeholder="021 922 00 00">
31
+ <input type="number" name="number" placeholder="42">
32
+ <input type="password" name="password" placeholder="123456">
33
+
34
+ <h3>Date & time</h3>
35
+ <input type="date" name="date">
36
+ <input type="time" name="time">
37
+ <input type="datetime-local" name="datetime">
38
+
39
+ <h3>Other</h3>
40
+ <input type="color" name="color">
41
+ <input type="range" name="range" min="0" max="10">
42
+
43
+ <h2>Textarea</h2>
44
+ <textarea name="textarea" rows="5" cols="33">It was a dark and stormy night...</textarea>
45
+
46
+ <h2>Select</h2>
47
+ <select name="select">
48
+ <option value="1">One</option>
49
+ <option value="2">Two</option>
50
+ <option value="3">Three</option>
51
+ <option value="4">Four</option>
52
+ </select>
53
+
54
+ <h2>Radio</h2>
55
+ <fieldset>
56
+ <legend>Radio</legend>
57
+ <input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label>
58
+ <input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label>
59
+ <input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label>
60
+ </fieldset>
61
+ <fieldset>
62
+ <legend>Radio</legend>
63
+ <div>
64
+ <input type="radio" id="radioD" name="radio" checked> <label for="radioD">Option D</label>
65
+ </div>
66
+ <div>
67
+ <input type="radio" id="radioE" name="radio"> <label for="radioE">Option E</label>
68
+ </div>
69
+ <div>
70
+ <input type="radio" id="radioF" name="radio"> <label for="radioF">Option F</label>
71
+ </div>
72
+ </fieldset>
73
+
74
+ <h2>Checkbox</h2>
75
+ <fieldset>
76
+ <legend>Checkbox</legend>
77
+ <input type="checkbox" id="checkboxA" name="checkboxA" checked>
78
+ <label for="checkboxA">Option A</label>
79
+ <input type="checkbox" id="checkboxB" name="checkboxB">
80
+ <label for="checkboxB">Option B</label>
81
+ <input type="checkbox" id="checkboxC" name="checkboxC">
82
+ <label for="checkboxC">Option C</label>
83
+ </fieldset>
84
+ <fieldset>
85
+ <legend>Checkbox</legend>
86
+ <div>
87
+ <input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label>
88
+ </div>
89
+ <div>
90
+ <input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label>
91
+ </div>
92
+ <div>
93
+ <input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label>
94
+ </div>
95
+ </fieldset>
96
+
97
+ <h2>Switch</h2>
98
+ <input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
99
+
100
+ <h2>States</h2>
101
+ <input type="text" value="My value" disabled>
102
+ <select type="text" disabled>
103
+ <option value="--">--</option>
104
+ </select>
105
+ <textarea disabled>It was a dark and stormy night...</textarea>
106
+ <input type="checkbox" disabled> <input type="checkbox" disabled checked> <input type="radio" disabled> <input type="radio" disabled checked> <input type="checkbox" role="switch" disabled> <input type="checkbox" role="switch" disabled checked>
107
+
108
+ <h3>Readonly</h3>
109
+ <input type="text" value="My value" readonly>
110
+ <textarea readonly>It was a dark and stormy night...</textarea>
111
+
112
+ <h3>Validation</h3>
113
+ <form action="#">
114
+ <div>
115
+ <label for="invalidInput">Invalid input</label>
116
+ <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
117
+ <small id="invalidMsg">
118
+ <span aria-live="assertive">
119
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
120
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
121
+ <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
122
+ </svg>
123
+ Incorrect value !
124
+ </span>
125
+ </small>
126
+ </div>
127
+ <div>
128
+ <label for="validInput">Valid input</label>
129
+ <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
130
+ <small id="validMsg">
131
+ <span aria-live="assertive">
132
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
133
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
134
+ <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
135
+ </svg>
136
+ All good !
137
+ </span>
138
+ </small>
139
+ </div>
140
+ </form>
141
+
142
+ <h2>Variant: Group</h2>
143
+ <fieldset>
144
+ <legend>Price</legend>
145
+ <div class="group">
146
+ <label>Before</label>
147
+ <select>
148
+ <option value="A">CHF</option>
149
+ <option value="B">€</option>
150
+ <option value="C">$</option>
151
+ </select>
152
+ <input type="number" value="110">
153
+ <label>After</label>
154
+ <button>Send</button>
155
+ </div>
156
+ </fieldset>
157
+
158
+ </section>
159
+ </main>
160
+
161
+ <script type="module" src="/sandbox.js"></script>
162
+ </body>
163
+
164
+ </html>
package/sandbox/pages/components/loading.html ADDED
@@ -0,0 +1,32 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Loading - 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>Loading</h2>
19
+ <div aria-busy="true"></div>
20
+ <a href="#" aria-busy="true">My link</a>
21
+ <button aria-busy="true"></button>
22
+ <button class="outline" aria-busy="true">Button</button>
23
+ <button class="primary" aria-busy="true">Button</button>
24
+ <button class="primary outline" aria-busy="true">Button</button>
25
+ </section>
26
+
27
+ </main>
28
+
29
+ <script type="module" src="/sandbox.js"></script>
30
+ </body>
31
+
32
+ </html>