@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/docs/pages/components/form.html DELETED
@@ -1,427 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components ></title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Form</h1>
14
- <p>The form is using the native <code>&lt;label&gt;</code>, <code>&lt;input&gt;</code> and co. tags.</p>
15
- <doc-demo>
16
- <label for="inputText">Input</label>
17
- <input type="text" id="inputText" name="input" placeholder="My input" aria-describedby="myInputDescription">
18
- <small id="myInputDescription">
19
- Must be at least 8 characters.
20
- </small>
21
- </doc-demo>
22
-
23
- <div class="code-group">
24
- <div role="tablist">
25
- <button role="tab" aria-controls="html">HTML</button>
26
- <button role="tab" aria-controls="scss">SCSS</button>
27
- <button role="tab" aria-controls="css">CSS</button>
28
- </div>
29
- <doc-code id="html" data-type="html" role="tabpanel">
30
- <label for="inputText">Input</label>
31
- <input type="text" id="inputText" name="input" placeholder="My input" aria-describedby="myInputDescription">
32
- <small id="myInputDescription">
33
- Must be at least 8 characters.
34
- </small>
35
- </doc-code>
36
- <doc-code id="scss" data-type="scss" role="tabpanel">
37
- @use '@natachah/vanilla-frontend/scss/components/form';
38
- </doc-code>
39
- <doc-code id="css" data-type="css" role="tabpanel">
40
- --form-color
41
- --form-background
42
- --form-border-size
43
- --form-border-style
44
- --form-border-color
45
- --form-border-radius
46
- --form-padding-inline
47
- --form-padding-block
48
- --form-transition
49
- --form-decoration
50
- --form-outline-size
51
- --form-outline-style
52
- --form-outline-color
53
- --form-outline-offset
54
- --form-disabled-opacity
55
- </doc-code>
56
- </div>
57
-
58
- <blockquote class="tip">
59
- <p>To display some information about a field use the <code>aria-describedby=&quot;IdOfMyDescription&quot;</code> that refer to a <code>&lt;small&gt;</code> element with the information. </p>
60
- </blockquote>
61
-
62
- <h2>Fields</h2>
63
- <h3>Inputs</h3>
64
- <p>All <code>&lt;input&gt;</code> types are consistently styled and come with default states.</p>
65
- <doc-demo>
66
- <input type="text" name="text" placeholder="Some text">
67
- <input type="search" name="search" placeholder="Enter some keyword">
68
- <input type="email" name="email" placeholder="info@something.com">
69
- <input type="url" name="url" placeholder="http://www.google.com">
70
- <input type="tel" name="tel" placeholder="021 922 00 00">
71
- <input type="number" name="number" placeholder="42">
72
- <input type="password" name="password" placeholder="123456">
73
- </doc-demo>
74
-
75
- <p>The type <b>file</b> come with a default icon and no button.</p>
76
- <doc-demo>
77
- <input type="file" name="file" accept="image/png, image/jpeg">
78
- </doc-demo>
79
-
80
- <blockquote class="info">
81
- <p>You can change the icon via <code>var(--icon-file)</code>.</p>
82
- </blockquote>
83
-
84
- <p>The type <b>date</b>, <b>time</b> and <b>datetime-local</b> come with default icon.</p>
85
- <doc-demo>
86
- <input type="date" name="date">
87
- <input type="time" name="time">
88
- <input type="datetime-local" name="datetime">
89
- </doc-demo>
90
-
91
- <blockquote class="info">
92
- <p>You can change the icon via <code>var(--icon-date)</code> and <code>var(--icon-time)</code>.</p>
93
- </blockquote>
94
-
95
- <blockquote class="warning">
96
- <p>Hard to make it 100% similar on all browser.</p>
97
- </blockquote>
98
-
99
- <p>The type <b>color</b> is also consistent with the other input types.</p>
100
-
101
- <doc-demo>
102
- <input type="color" name="color">
103
- </doc-demo>
104
-
105
- <h3>Textarea</h3>
106
- <p>The native <code>&lt;textarea&gt;</code> is styled like the input for consistency.</p>
107
- <p>By default you only can resize the height.</p>
108
- <doc-demo>
109
- <textarea name="textarea" rows="5" cols="33">It was a dark and stormy night...</textarea>
110
- </doc-demo>
111
-
112
-
113
- <h3>Select</h3>
114
- <p>The native <code>&lt;select&gt;</code> is styled like the input for consistency.</p>
115
- <doc-demo>
116
- <select name="select">
117
- <option value="1">One</option>
118
- <option value="2">Two</option>
119
- <option value="3">Three</option>
120
- <option value="4">Four</option>
121
- </select>
122
- </doc-demo>
123
-
124
- <blockquote class="info">
125
- <p>You can change the icon via <code>var(--icon-select)</code>.</p>
126
- </blockquote>
127
-
128
- <h3>Range</h3>
129
- <p>The <b>range</b> field look more like a progress bar.</p>
130
- <doc-demo>
131
- <input type="range" name="range" min="0" max="10">
132
- </doc-demo>
133
-
134
- <h3>Radio</h3>
135
- <p>The <b>radio</b> field must be inside a <code>&lt;fieldset&gt;</code>.</p>
136
- <p>By default the radio are displayed inline.</p>
137
- <doc-demo>
138
- <fieldset>
139
- <legend>Radio</legend>
140
- <input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label>
141
- <input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label>
142
- <input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label>
143
- </fieldset>
144
- </doc-demo>
145
-
146
- <doc-code>
147
- <fieldset>
148
- <legend>Radio</legend>
149
- <input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label>
150
- <input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label>
151
- <input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label>
152
- </fieldset>
153
- </doc-code>
154
-
155
- <p>To display the element into the vertical, surround the <code>&lt;input&gt;</code> and the <code>&lt;label&gt;</code> by a <code>&lt;div&gt;</code> tag.</p>
156
- <doc-demo>
157
- <fieldset>
158
- <legend>Radio</legend>
159
- <div>
160
- <input type="radio" id="radioD" name="radio" checked> <label for="radioD">Option D</label>
161
- </div>
162
- <div>
163
- <input type="radio" id="radioE" name="radio"> <label for="radioE">Option E</label>
164
- </div>
165
- <div>
166
- <input type="radio" id="radioF" name="radio"> <label for="radioF">Option F</label>
167
- </div>
168
- </fieldset>
169
- </doc-demo>
170
-
171
- <doc-code>
172
- <fieldset>
173
- <legend>Radio</legend>
174
- <div>
175
- <input type="radio" id="radioD" name="radio" checked>
176
- <label for="radioD">Option D</label>
177
- </div>
178
- <div>
179
- <input type="radio" id="radioE" name="radio">
180
- <label for="radioE">Option E</label>
181
- </div>
182
- <div>
183
- <input type="radio" id="radioF" name="radio">
184
- <label for="radioF">Option F</label>
185
- </div>
186
- </fieldset>
187
- </doc-code>
188
-
189
- <blockquote class="info">
190
- <p>You can change the icon via <code>var(--icon-radio)</code>.</p>
191
- </blockquote>
192
-
193
- <h3>Checkbox</h3>
194
- <p>The <b>checkbox</b> field must be inside a <code>&lt;fieldset&gt;</code>.</p>
195
- <p>By default the checkboxes are displayed inline.</p>
196
- <doc-demo>
197
- <fieldset>
198
- <legend>Checkbox</legend>
199
- <input type="checkbox" id="checkboxA" name="checkboxA" checked>
200
- <label for="checkboxA">Option A</label>
201
- <input type="checkbox" id="checkboxB" name="checkboxB">
202
- <label for="checkboxB">Option B</label>
203
- <input type="checkbox" id="checkboxC" name="checkboxC">
204
- <label for="checkboxC">Option C</label>
205
- </fieldset>
206
- </doc-demo>
207
-
208
- <doc-code>
209
- <fieldset>
210
- <legend>Checkbox</legend>
211
- <input type="checkbox" id="checkboxA" name="checkboxA" checked>
212
- <label for="checkboxA">Option A</label>
213
- <input type="checkbox" id="checkboxB" name="checkboxB">
214
- <label for="checkboxB">Option B</label>
215
- <input type="checkbox" id="checkboxC" name="checkboxC">
216
- <label for="checkboxC">Option C</label>
217
- </fieldset>
218
- </doc-code>
219
-
220
- <p>To display the element into the vertical, surround the <code>&lt;input&gt;</code> and the <code>&lt;label&gt;</code> by a <code>&lt;div&gt;</code> tag.</p>
221
- <doc-demo>
222
- <fieldset>
223
- <legend>Radio</legend>
224
- <div>
225
- <input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label>
226
- </div>
227
- <div>
228
- <input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label>
229
- </div>
230
- <div>
231
- <input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label>
232
- </div>
233
- </fieldset>
234
- </doc-demo>
235
- <doc-code>
236
- <fieldset>
237
- <legend>Radio</legend>
238
- <div>
239
- <input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label>
240
- </div>
241
- <div>
242
- <input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label>
243
- </div>
244
- <div>
245
- <input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label>
246
- </div>
247
- </fieldset>
248
- </doc-code>
249
-
250
- <blockquote class="info">
251
- <p>You can change the icon via <code>var(--icon-check)</code>.</p>
252
- </blockquote>
253
-
254
- <h3>Switch</h3>
255
- <p>The <b>checkbox</b> with the <code>role=&quot;switch&quot;</code> attribute will render a switch component.</p>
256
- <doc-demo>
257
- <input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
258
- </doc-demo>
259
- <doc-code>
260
- <input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
261
- </doc-code>
262
-
263
- <blockquote class="info">
264
- <p>You can change the icon via <code>var(--icon-switch)</code>.</p>
265
- </blockquote>
266
-
267
- <h2>States</h2>
268
- <p>The form fields can have multiple states as <code>:focus</code>, <code>:disabled</code>, <code>:readonly</code> and <code>:validation</code>.</p>
269
-
270
- <h3>Disabled</h3>
271
- <p>Apply the <code>disabled</code> attribute on <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code> or <code>&lt;select&gt;</code> tag to display the disabled style.</p>
272
- <doc-demo>
273
- <input type="text" value="My value" disabled>
274
- <select type="text" disabled>
275
- <option value="--">--</option>
276
- </select>
277
- <textarea disabled>It was a dark and stormy night...</textarea>
278
- <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>
279
- </doc-demo>
280
-
281
- <h3>Readonly</h3>
282
- <p>Apply the <code>readonly</code> attribute on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> tag to display the readonly style.</p>
283
- <doc-demo>
284
- <input type="text" value="My value" readonly>
285
- <textarea readonly>It was a dark and stormy night...</textarea>
286
- </doc-demo>
287
-
288
- <h3>Validation</h3>
289
- <p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code>&lt;small&gt;</code> tag to display the information.</p>
290
- <blockquote class="warning">
291
- <p>As every design is different, there is not too much default style for in/valid elements. But for accessibility don't forget to add icons to show the errors.</p>
292
- </blockquote>
293
-
294
- <doc-demo>
295
- <form action="#">
296
- <div>
297
- <label for="invalidInput">Invalid input</label>
298
- <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
299
- <small id="invalidMsg">
300
- <span aria-live="assertive">
301
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
302
- <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" />
303
- <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" />
304
- </svg>
305
- Incorrect value !
306
- </span>
307
- </small>
308
- </div>
309
- <div>
310
- <label for="validInput">Valid input</label>
311
- <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
312
- <small id="validMsg">
313
- <span aria-live="assertive">
314
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
315
- <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" />
316
- <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" />
317
- </svg>
318
- All good !
319
- </span>
320
- </small>
321
- </div>
322
- </form>
323
- </doc-demo>
324
-
325
- <div class="code-group">
326
- <div role="tablist">
327
- <button role="tab" aria-controls="html">HTML</button>
328
- <button role="tab" aria-controls="scss">SCSS</button>
329
- </div>
330
- <doc-code id="html" data-type="html" role="tabpanel">
331
- <div>
332
- <label for="invalidInput">Invalid input</label>
333
- <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
334
- <small id="invalidMsg">
335
- <span aria-live="assertive">
336
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
337
- <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" />
338
- <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" />
339
- </svg>
340
- Incorrect value !
341
- </span>
342
- </small>
343
- </div>
344
- <div>
345
- <label for="validInput">Valid input</label>
346
- <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
347
- <small id="validMsg">
348
- <span aria-live="assertive">
349
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
350
- <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" />
351
- <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" />
352
- </svg>
353
- All good !
354
- </span>
355
- </small>
356
- </div>
357
- </doc-code>
358
- <doc-code id="scss" data-type="scss" role="tabpanel">
359
- form div {
360
- &:has([aria-invalid=true]) {
361
- [aria-live] {
362
- color: var(--color-error);
363
- }
364
- }
365
-
366
- &:has([aria-invalid=false]) {
367
- [aria-live] {
368
- color: var(--color-success);
369
- }
370
- }
371
- }
372
- </doc-code>
373
- </div>
374
-
375
-
376
-
377
- <h2>Variants</h2>
378
- <h3>Group</h3>
379
- <p>You can group some form fields by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>
380
- <doc-demo>
381
- <fieldset>
382
- <legend>Price</legend>
383
- <div class="group">
384
- <label>Before</label>
385
- <select>
386
- <option value="A">CHF</option>
387
- <option value="B">€</option>
388
- <option value="C">$</option>
389
- </select>
390
- <input type="number" value="110">
391
- <label>After</label>
392
- <button>Send</button>
393
- </div>
394
- </fieldset>
395
- </doc-demo>
396
-
397
- <div class="code-group">
398
- <div role="tablist">
399
- <button role="tab" aria-controls="html">HTML</button>
400
- <button role="tab" aria-controls="scss">SCSS</button>
401
- </div>
402
- <doc-code id="html" data-type="html" role="tabpanel">
403
- <fieldset>
404
- <legend>Price</legend>
405
- <div class="group">
406
- <label>Before</label>
407
- <select>
408
- <option value="A">CHF</option>
409
- <option value="B">€</option>
410
- <option value="C">$</option>
411
- </select>
412
- <input type="number" value="110">
413
- <label>After</label>
414
- <button>Send</button>
415
- </div>
416
- </fieldset>
417
- </doc-code>
418
- <doc-code id="scss" data-type="scss" role="tabpanel">
419
- @use '@natachah/vanilla-frontend/scss/components/group';
420
- </doc-code>
421
- </div>
422
-
423
- </doc-layout>
424
- <script type="module" src="/main.js"></script>
425
- </body>
426
-
427
- </html>
package/docs/pages/components/loading.html DELETED
@@ -1,58 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components ></title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Loading</h1>
14
- <p>The loading is using the native <code>aria-busy</code> attribute.</p>
15
- <doc-demo>
16
- <div aria-busy="true"></div>
17
- </doc-demo>
18
-
19
- <div class="code-group">
20
- <div role="tablist">
21
- <button role="tab" aria-controls="html">HTML</button>
22
- <button role="tab" aria-controls="scss">SCSS</button>
23
- </div>
24
- <doc-code id="html" data-type="html" role="tabpanel">
25
- <div aria-busy="true"></div>
26
- </doc-code>
27
- <doc-code id="scss" data-type="scss" role="tabpanel">
28
- @use '@natachah/vanilla-frontend/scss/components/loading';
29
- </doc-code>
30
- </div>
31
-
32
- <p>The loading is avaible also for links:</p>
33
- <doc-demo>
34
- <a href="#" aria-busy="true">My link</a>
35
- </doc-demo>
36
- <doc-code>
37
- <a href="#" aria-busy="true">My link</a>
38
- </doc-code>
39
-
40
- <p>And for buttons:</p>
41
- <doc-demo>
42
- <button aria-busy="true"></button>
43
- <button class="outline" aria-busy="true">Button</button>
44
- <button class="primary" aria-busy="true">Button</button>
45
- <button class="primary outline" aria-busy="true">Button</button>
46
- </doc-demo>
47
- <doc-code>
48
- <button aria-busy="true"></button>
49
- <button class="outline" aria-busy="true">Button</button>
50
- <button class="primary" aria-busy="true">Button</button>
51
- <button class="primary outline" aria-busy="true">Button</button>
52
- </doc-code>
53
-
54
- </doc-layout>
55
- <script type="module" src="/main.js"></script>
56
- </body>
57
-
58
- </html>
package/docs/pages/components/progress.html DELETED
@@ -1,47 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components ></title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Progress</h1>
14
- <p>The progress is using the native <code>&lt;progress&gt;</code> tag.</p>
15
- <doc-demo>
16
- <label for="download">Download progress:</label>
17
- <progress id="download" value="50" max="100">50%</progress>
18
- </doc-demo>
19
- <div class="code-group">
20
- <div role="tablist">
21
- <button role="tab" aria-controls="html">HTML</button>
22
- <button role="tab" aria-controls="scss">SCSS</button>
23
-
24
- <button role="tab" aria-controls="css">CSS</button>
25
- </div>
26
- <doc-code id="html" data-type="html" role="tabpanel">
27
- <label for="download">Download progress:</label>
28
- <progress id="download" value="50" max="100">50%</progress>
29
- </doc-code>
30
- <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @use '@natachah/vanilla-frontend/scss/components/progress';
32
- </doc-code>
33
- <doc-code id="css" data-type="css" role="tabpanel">
34
- --progress-width
35
- --progress-height
36
- --progress-background
37
- --progress-color
38
- --progress-border-radius
39
- </doc-code>
40
- </div>
41
-
42
-
43
- </doc-layout>
44
- <script type="module" src="/main.js"></script>
45
- </body>
46
-
47
- </html>