@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/docs/pages/base/typography.html DELETED
@@ -1,334 +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: Base > Typography</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Typography</h1>
14
-
15
- <p>All website have some typographic elements, here some basic styling.</p>
16
-
17
- <p>To use it, import this file:</p>
18
-
19
- <doc-code data-type="scss">
20
- @use '@natachah/vanilla-frontend/scss/base/typography'
21
- </doc-code>
22
-
23
- <h2>Heading</h2>
24
-
25
- <p>The headings use the default <code>&lt;h*&gt;</code> tags.</p>
26
-
27
- <doc-demo>
28
- <h1>Heading 1</h1>
29
- <h2>Heading 2</h2>
30
- <h3>Heading 3</h3>
31
- <h4>Heading 4</h4>
32
- <h5>Heading 5</h5>
33
- <h6>Heading 6</h6>
34
- </doc-demo>
35
-
36
- <div class="code-group">
37
- <div role="tablist">
38
- <button role="tab" aria-controls="html">HTML</button>
39
- <button role="tab" aria-controls="css">CSS</button>
40
- </div>
41
- <doc-code id="html" data-type="html" role="tabpanel">
42
- <h1>Heading 1</h1>
43
- <h2>Heading 2</h2>
44
- <h3>Heading 3</h3>
45
- <h4>Heading 4</h4>
46
- <h5>Heading 5</h5>
47
- <h6>Heading 6</h6>
48
- </doc-code>
49
- <doc-code id="css" data-type="css" role="tabpanel">
50
- --font-size-h*
51
- --heading-font-weight
52
- --heading-line-height
53
- --heading-color
54
- </doc-code>
55
- </div>
56
-
57
- <h2>Paragraph</h2>
58
-
59
- <p>The paragraph use the default <code>&lt;p&gt;</code> tag.</p>
60
-
61
- <p>As each website is uniq, there is no default <code>margin-block</code> for the paragraph.</p>
62
-
63
- <doc-demo>
64
- <p>Paragraph ! Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
65
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id rem placeat suscipit a consequatur ipsam nam quis eveniet vel nobis sunt praesentium explicabo alias obcaecati, perferendis nostrum ut veritatis mollitia.</p>
66
- <p>Accusamus sit saepe laborum, veniam doloribus aliquid, commodi odio corrupti, repellendus pariatur modi. Saepe recusandae, natus fuga quidem ab iusto beatae molestias tempore rem esse aspernatur aut quasi deserunt atque.</p>
67
- </doc-demo>
68
-
69
- <h2>Anchor</h2>
70
-
71
- <p>Use the default <code>&lt;a&gt;</code> tag to create links.</p>
72
-
73
- <p>You can add the <code>aria-current</code> or <code>aria-selected</code> attribute to make the link with an active state.</p>
74
-
75
- <p>By default if there is no <code>href</code> attribute, it will render as disabled state.</p>
76
-
77
- <doc-demo>
78
- <a href="#">Anchor</a>
79
- <a href="#" aria-current="page">Active</a>
80
- <a>Disabled</a>
81
- </doc-demo>
82
-
83
- <div class="code-group">
84
- <div role="tablist">
85
- <button role="tab" aria-controls="html">HTML</button>
86
- <button role="tab" aria-controls="css">CSS</button>
87
- </div>
88
- <doc-code id="html" data-type="html" role="tabpanel">
89
- <a href="#">Anchor</a>
90
- <a href="#" aria-current="page">Active</a>
91
- <a>Disabled</a>
92
- </doc-code>
93
- <doc-code id="css" data-type="css" role="tabpanel">
94
- --anchor-decoration
95
- --anchor-color
96
- --anchor-hover-color
97
- --anchor-focus-color
98
- --anchor-active-color
99
- --anchor-disabled-opacity
100
- --anchor-outline-size
101
- --anchor-outline-style
102
- --anchor-outline-color
103
- --anchor-outline-offset
104
- </doc-code>
105
- </div>
106
-
107
- <p>By default the external link with <code>target="_blank"</code> attribute, will have an icon for accessibility.</p>
108
-
109
- <doc-demo>
110
- <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
111
- </doc-demo>
112
-
113
- <div class="code-group">
114
- <div role="tablist">
115
- <button role="tab" aria-controls="html">HTML</button>
116
- <button role="tab" aria-controls="css">CSS</button>
117
- </div>
118
- <doc-code id="html" data-type="html" role="tabpanel">
119
- <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
120
- </doc-code>
121
- <doc-code id="css" data-type="css" role="tabpanel">
122
- --icon-external
123
- </doc-code>
124
- </div>
125
-
126
- <h2>Inline</h2>
127
-
128
- <doc-demo>
129
- <div class="grid demo-inline">
130
- <p><abbr title="Abbreviation">Abbr.</abbr></p>
131
- <p><small>Small</small></p>
132
- <p><q>An inline quote</q></p>
133
- <p><b>Bold</b></p>
134
- <p><strong>Strong</strong></p>
135
- <p><em>Emphasis</em></p>
136
- <p><i>Idiomatic</i></p>
137
- <p><s>Strikethrough</s></p>
138
- <p><u>Underline</u></p>
139
- <p><span>Text <sub>Sub</sub></span></p>
140
- <p><span>Text <sup>Sup</sup></span></p>
141
- <p><cite>Citation</cite></p>
142
- <p><mark>Highlight</mark></p>
143
- <p><kbd>Ctrl + S</kbd></p>
144
- <p><code>&lt;Code&gt;</code></p>
145
- <p><ins>Inserted</ins></p>
146
- <p><del>Deleted</del></p>
147
- </div>
148
- </doc-demo>
149
-
150
- <div class="code-group">
151
- <div role="tablist">
152
- <button role="tab" aria-controls="html">HTML</button>
153
- <button role="tab" aria-controls="css">CSS</button>
154
- </div>
155
- <doc-code id="html" data-type="html" role="tabpanel">
156
- <p><abbr title="Abbreviation">Abbr.</abbr></p>
157
- <p><small>Small</small></p>
158
- <p><q>An inline quote</q></p>
159
- <p><b>Bold</b></p>
160
- <p><b>b</b></p>
161
- <p><em>Emphasis</em></p>
162
- <p><i>Idiomatic</i></p>
163
- <p><s>Strikethrough</s></p>
164
- <p><u>Underline</u></p>
165
- <p><span>Text <sub>Sub</sub></span></p>
166
- <p><span>Text <sup>Sup</sup></span></p>
167
- <p><cite>Citation</cite></p>
168
- <p><mark>Highlight</mark></p>
169
- <p><kbd>Ctrl + S</kbd></p>
170
- <p><code>&lt;Code&gt;</code></p>
171
- <p><ins>Inserted</ins></p>
172
- <p><del>Deleted</del></p>
173
- </doc-code>
174
- <doc-code id="css" data-type="css" role="tabpanel">
175
- --mark-padding-block
176
- --mark-padding-inline
177
- --mark-background
178
- --kbd-padding-block
179
- --kbd-padding-inline
180
- --kbd-font-family
181
- --kbd-color
182
- --kbd-background
183
- --kbd-border-radius
184
- --code-padding-block
185
- --code-padding-inline
186
- --code-font-family
187
- --code-color
188
- --code-background
189
- --code-border-radius
190
- </doc-code>
191
- </div>
192
-
193
- <h2>Blockquote</h2>
194
-
195
- <p>The quotes use the default <code>&lt;blockquote&gt;</code> tag.
196
- Because the blockquote is usully design per website, their is no custom properties for them.</p>
197
-
198
- <doc-demo>
199
- <blockquote>
200
- <p>
201
- “It's only after we've lost everything that we're free to do anything.”
202
- </p>
203
- <footer>
204
- - Chuck Palahniuk, <cite>Fight Club</cite>
205
- </footer>
206
- </blockquote>
207
- </doc-demo>
208
-
209
- <doc-code>
210
- <blockquote>
211
- It was a bright cold day in April, and the clocks were striking thirteen.
212
- </blockquote>
213
-
214
- <blockquote>
215
- <p>
216
- “It's only after we've lost everything that we're free to do anything.”
217
- </p>
218
- <footer>
219
- - Chuck Palahniuk, <cite>Fight Club</cite>
220
- </footer>
221
- </blockquote>
222
- </doc-code>
223
-
224
- <h2>Code</h2>
225
- <p>Use the <code>&lt;pre&gt;</code> tag with a <code>&lt;code&gt;</code> tag inside.
226
- The design of a block of code is not the same as the inline element.</p>
227
-
228
- <doc-demo>
229
- <pre><code><!--
230
- -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
231
- -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
232
- </doc-demo>
233
-
234
- <div class="code-group">
235
- <div role="tablist">
236
- <button role="tab" aria-controls="html">HTML</button>
237
- <button role="tab" aria-controls="css">CSS</button>
238
- </div>
239
- <doc-code id="html" data-type="html" role="tabpanel">
240
- <pre><code><!--
241
- -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
242
- -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
243
- </doc-code>
244
- <doc-code id="css" data-type="css" role="tabpanel">
245
- --pre-padding-block
246
- --pre-padding-inline
247
- --pre-font-family
248
- --pre-color
249
- --pre-background
250
- --pre-border-radius
251
- </doc-code>
252
- </div>
253
-
254
- <h2>List</h2>
255
- <p>The lists use the default <code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> and <code>&lt;dl&gt;</code> tags.
256
- Because the lists are usully design per website/situation, their is not too much custom properties for them.</p>
257
-
258
- <doc-demo>
259
- <ul>
260
- <li>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?</li>
261
- <li>Velit ipsam blanditiis ducimus?</li>
262
- <li>Porro impedit provident at!</li>
263
- </ul>
264
- <ol>
265
- <li>Lorem, ipsum dolor.</li>
266
- <li>Obcaecati, a impedit!</li>
267
- <li>Quo, eligendi veritatis?</li>
268
- </ol>
269
- <dl>
270
- <dt>Coffee</dt>
271
- <dd>Black hot drink</dd>
272
- <dt>Milk</dt>
273
- <dd>White cold drink</dd>
274
- </dl>
275
- </doc-demo>
276
-
277
- <div class="code-group">
278
- <div role="tablist">
279
- <button role="tab" aria-controls="html">HTML</button>
280
- <button role="tab" aria-controls="css">CSS</button>
281
- </div>
282
- <doc-code id="html" data-type="html" role="tabpanel">
283
- <ul>
284
- <li>Coffee</li>
285
- <li>Milk</li>
286
- <li>...</li>
287
- </ul>
288
-
289
- <ol>
290
- <li>Make coffee</li>
291
- <li>Add the milk</li>
292
- <li>Drink it !</li>
293
- </ol>
294
-
295
- <dl>
296
- <dt>Coffee</dt>
297
- <dd>Black hot drink</dd>
298
- <dt>Milk</dt>
299
- <dd>White cold drink</dd>
300
- </dl>
301
- </doc-code>
302
- <doc-code id="css" data-type="css" role="tabpanel">
303
- --list-bullet
304
- --list-offset
305
- </doc-code>
306
- </div>
307
-
308
- <h2>Line</h2>
309
- <p>Use the default <code>&lt;hr&gt;</code> tag render a horizontal line.</p>
310
-
311
- <doc-demo>
312
- <hr>
313
- </doc-demo>
314
-
315
- <div class="code-group">
316
- <div role="tablist">
317
- <button role="tab" aria-controls="html">HTML</button>
318
- <button role="tab" aria-controls="css">CSS</button>
319
- </div>
320
- <doc-code id="html" data-type="html" role="tabpanel">
321
- <hr>
322
- </doc-code>
323
- <doc-code id="css" data-type="css" role="tabpanel">
324
- --hr-border-size
325
- --hr-border-style
326
- --hr-border-color
327
- </doc-code>
328
- </div>
329
-
330
- </doc-layout>
331
- <script type="module" src="/main.js"></script>
332
- </body>
333
-
334
- </html>
package/docs/pages/components/button.html DELETED
@@ -1,202 +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 > Button</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Button</h1>
14
- <p>The button is using the native <code>&lt;button&gt;</code> tag, or an <code>&lt;a&gt;</code> tag with the attribute <code>role=&quot;button&quot;</code>.</p>
15
-
16
- <doc-demo>
17
- <button>Button</button>
18
- <a href="#" role="button">Link as button</a>
19
- </doc-demo>
20
-
21
- <div class="code-group">
22
- <div role="tablist">
23
- <button role="tab" aria-controls="html">HTML</button>
24
- <button role="tab" aria-controls="scss">SCSS</button>
25
- <button role="tab" aria-controls="css">CSS</button>
26
- </div>
27
- <doc-code id="html" data-type="html" role="tabpanel">
28
- <button>Button</button>
29
- <a href="#" role="button">Link as button</a>
30
- </doc-code>
31
- <doc-code id="scss" data-type="scss" role="tabpanel">
32
- @use '@natachah/vanilla-frontend/scss/components/button';
33
- </doc-code>
34
- <doc-code id="css" data-type="css" role="tabpanel">
35
- --button-color
36
- --button-background
37
- --button-border-size
38
- --button-border-style
39
- --button-border-color
40
- --button-border-radius
41
- --button-padding-inline
42
- --button-padding-block
43
- --button-transition
44
- --button-decoration
45
- --button-outline-size
46
- --button-outline-style
47
- --button-outline-color
48
- --button-outline-offset
49
- --button-hover-color
50
- --button-hover-background
51
- --button-hover-border-color
52
- --button-focus-color
53
- --button-focus-background
54
- --button-focus-border-color
55
- --button-active-color
56
- --button-active-background
57
- --button-active-border-color
58
- --button-disabled-opacity
59
- </doc-code>
60
- </div>
61
-
62
- <h2>Icon and size</h2>
63
- <p>You can add an <code>&lt;svg&gt;</code> icon inside the button.</p>
64
-
65
- <doc-demo>
66
- <button>
67
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
68
- <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" />
69
- <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" />
70
- <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" />
71
- </svg>
72
- Button
73
- </button>
74
- </doc-demo>
75
-
76
- <p>You can adapte the size of the button by changing their <code>font-size</code>.</p>
77
-
78
- <doc-demo>
79
- <button style="font-size: var(--font-size-small)">Small</button>
80
- <button>Normal</button>
81
- <button style="font-size: var(--font-size-large)">Large</button>
82
- </doc-demo>
83
-
84
- <h2>States</h2>
85
- <p>The button can have multiple states as <code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code></p>
86
-
87
- <h3>Active</h3>
88
- <p>Apply the <code>aria-pressed</code>, <code>aria-current</code>, or <code>aria-selected</code> attribute on the <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> tag to display the active style.</p>
89
- <doc-demo>
90
- <button aria-pressed="true">Button</button>
91
- <a href="#" role="button" aria-current="true">Link as button</a>
92
- </doc-demo>
93
-
94
- <h3>Disabled</h3>
95
- <p>Apply the <code>disabled</code> attribute on <code>&lt;button&gt;</code> or remove the <code>href</code> attribute on <code>&lt;a&gt;</code> to display the disabled style.</p>
96
- <doc-demo>
97
- <button disabled>Button</button>
98
- <a role="button">Link as button</a>
99
- </doc-demo>
100
-
101
- <h2>Variants</h2>
102
-
103
- <h3>Outline</h3>
104
-
105
- <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
106
-
107
- <doc-demo>
108
- <button class="outline">Button</button>
109
- <button class="outline" disabled>Disabled</button>
110
- <button class="outline" aria-pressed="true">Active</button>
111
- </doc-demo>
112
-
113
- <div class="code-group">
114
- <div role="tablist">
115
- <button role="tab" aria-controls="html">HTML</button>
116
- <button role="tab" aria-controls="scss">SCSS</button>
117
- </div>
118
- <doc-code id="html" data-type="html" role="tabpanel">
119
- <button class="outline">Button</button>
120
- <button class="outline" disabled>Disabled</button>
121
- <button class="outline" aria-pressed="true">Active</button>
122
- </doc-code>
123
- <doc-code id="scss" data-type="scss" role="tabpanel">
124
- @use "@natachah/vanilla-frontend/scss/components/button" with ($outline: true);
125
- </doc-code>
126
- </div>
127
-
128
- <h3>Color</h3>
129
-
130
- <p>You can create a color variation by adding the class <code>.{COLOR}</code>.</p>
131
-
132
- <doc-demo>
133
- <button class="primary">Primary</button> <button class="primary" disabled>Disabled</button> <button class="primary" aria-pressed="true">Active</button>
134
- <button class="primary outline">Primary</button> <button class="primary outline" disabled>Disabled</button> <button class="primary outline" aria-pressed="true">Active</button>
135
- </doc-demo>
136
-
137
- <div class="code-group">
138
- <div role="tablist">
139
- <button role="tab" aria-controls="html">HTML</button>
140
- <button role="tab" aria-controls="scss">SCSS</button>
141
- </div>
142
- <doc-code id="html" data-type="html" role="tabpanel">
143
- <button class="primary">Primary</button>
144
- <button class="primary" disabled>Disabled</button>
145
- <button class="primary" aria-pressed="true">Active</button>
146
- <button class="primary outline">Primary</button>
147
- <button class="primary outline" disabled>Disabled</button>
148
- <button class="primary outline" aria-pressed="true">Active</button>
149
- </doc-code>
150
- <doc-code id="scss" data-type="scss" role="tabpanel">
151
- @use "@natachah/vanilla-frontend/scss/components/button" with ($colors: ('primary'),$outline: true);
152
- </doc-code>
153
- </div>
154
-
155
- <h3>As link</h3>
156
-
157
- <p>You can create a button that look as a simple link with the attribute <code>role="link"</code>.</p>
158
-
159
- <doc-demo>
160
- <button role="link">As link</button>
161
- <button role="link" disabled>As disabled link</button>
162
- </doc-demo>
163
-
164
- <doc-code data-typ="html">
165
- <button role="link">As link</button>
166
- <button role="link" disabled>As disabled link</button>
167
- </doc-code>
168
-
169
- <h3>Group</h3>
170
- <p>You can group some badge by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>
171
-
172
- <doc-demo>
173
- <div class="group">
174
- <button>Button A</button>
175
- <button>Button B</button>
176
- <button>Button C</button>
177
- </div>
178
- </doc-demo>
179
-
180
- <div class="code-group">
181
- <div role="tablist">
182
- <button role="tab" aria-controls="html">HTML</button>
183
- <button role="tab" aria-controls="scss">SCSS</button>
184
- </div>
185
- <doc-code id="html" data-type="html" role="tabpanel">
186
- <div class="group">
187
- <button>Button A</button>
188
- <button>Button B</button>
189
- <button>Button C</button>
190
- </div>
191
- </doc-code>
192
- <doc-code id="scss" data-type="scss" role="tabpanel">
193
- @use '@natachah/vanilla-frontend/scss/components/group';
194
- </doc-code>
195
- </div>
196
-
197
-
198
- </doc-layout>
199
- <script type="module" src="/main.js"></script>
200
- </body>
201
-
202
- </html>