@natachah/vanilla-frontend 0.4.1 → 1.0.1

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.js → vanilla-frontend-doc.js} +30 -33
  47. package/natachah-vanilla-frontend-1.0.1.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.zYBRMlen.js +1 -0
  51. package/public/assets/base_layout.md.DPVON1Hq.js +13 -0
  52. package/public/assets/base_layout.md.DPVON1Hq.lean.js +1 -0
  53. package/public/assets/base_media.md.DHSlU0g6.js +24 -0
  54. package/public/assets/base_media.md.DHSlU0g6.lean.js +1 -0
  55. package/public/assets/base_reset.md.DD9AA1li.js +3 -0
  56. package/public/assets/base_reset.md.DD9AA1li.lean.js +1 -0
  57. package/public/assets/base_typography.md.C9BVN1Re.js +87 -0
  58. package/public/assets/base_typography.md.C9BVN1Re.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.Cw4G3qNN.js +27 -0
  60. package/public/assets/chunks/framework.26dFs73Q.js +4 -0
  61. package/public/assets/chunks/theme.D1Tljxds.js +1 -0
  62. package/public/assets/classes_badge.md.EznZXXqT.js +24 -0
  63. package/public/assets/classes_badge.md.EznZXXqT.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.DrzF9h9m.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.DrzF9h9m.lean.js +1 -0
  66. package/public/assets/classes_card.md.BzNZEHe9.js +41 -0
  67. package/public/assets/classes_card.md.BzNZEHe9.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.CKZ2tv7T.js +70 -0
  69. package/public/assets/classes_dropdown.md.CKZ2tv7T.lean.js +1 -0
  70. package/public/assets/classes_grid.md.CKCvlWAg.js +45 -0
  71. package/public/assets/classes_grid.md.CKCvlWAg.lean.js +1 -0
  72. package/public/assets/classes_list.md.CjyB8PFK.js +36 -0
  73. package/public/assets/classes_list.md.CjyB8PFK.lean.js +1 -0
  74. package/public/assets/components_button.md.CX41PJBd.js +45 -0
  75. package/public/assets/components_button.md.CX41PJBd.lean.js +1 -0
  76. package/public/assets/components_dialog.md.JMjidrIE.js +76 -0
  77. package/public/assets/components_dialog.md.JMjidrIE.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.BwvLkFL_.js +53 -0
  79. package/public/assets/components_disclosure.md.BwvLkFL_.lean.js +1 -0
  80. package/public/assets/components_form.md.C6B5z_6G.js +122 -0
  81. package/public/assets/components_form.md.C6B5z_6G.lean.js +1 -0
  82. package/public/assets/components_loading.md.51ktm2_l.js +4 -0
  83. package/public/assets/components_loading.md.51ktm2_l.lean.js +1 -0
  84. package/public/assets/components_popover.md.DpbAjVUj.js +102 -0
  85. package/public/assets/components_popover.md.DpbAjVUj.lean.js +1 -0
  86. package/public/assets/components_progress.md.H7v6t9h-.js +6 -0
  87. package/public/assets/components_progress.md.H7v6t9h-.lean.js +1 -0
  88. package/public/assets/components_table.md.BPrpvUDy.js +75 -0
  89. package/public/assets/components_table.md.BPrpvUDy.lean.js +1 -0
  90. package/public/assets/index.md.DNiLOsZD.js +1 -0
  91. package/public/assets/index.md.DNiLOsZD.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.COaG5lWR.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.HyVx8c7W.js +49 -0
  107. package/public/assets/javascript_autofill.md.HyVx8c7W.lean.js +1 -0
  108. package/public/assets/javascript_check.md.BCbZtUBE.js +13 -0
  109. package/public/assets/javascript_check.md.BCbZtUBE.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.CQm191VA.js +20 -0
  111. package/public/assets/javascript_comfort.md.CQm191VA.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.CbDzabMd.js +29 -0
  113. package/public/assets/javascript_consent.md.CbDzabMd.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.CFVe2JRe.js +2 -0
  115. package/public/assets/javascript_cookie.md.CFVe2JRe.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.D_pT0mrZ.js +32 -0
  117. package/public/assets/javascript_drawer.md.D_pT0mrZ.lean.js +1 -0
  118. package/public/assets/javascript_form.md.sGYh1L4I.js +40 -0
  119. package/public/assets/javascript_form.md.sGYh1L4I.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.DeOZ4grw.js +30 -0
  121. package/public/assets/javascript_scroll.md.DeOZ4grw.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.CIa7pHr9.js +27 -0
  123. package/public/assets/javascript_slider.md.CIa7pHr9.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.CThHVTgW.js +35 -0
  125. package/public/assets/javascript_sortable.md.CThHVTgW.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.CxAFdAGU.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C66hpUWF.js +46 -0
  129. package/public/assets/javascript_toggle.md.C66hpUWF.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Dt2Rt__e.js +2 -0
  131. package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.COR-Pj1y.js +72 -0
  133. package/public/assets/javascript_tree.md.COR-Pj1y.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.wCplqeKt.js +34 -0
  135. package/public/assets/prologue_conventions.md.wCplqeKt.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CBJGKY_Y.js +1 -0
  137. package/public/assets/prologue_release.md.CBJGKY_Y.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.E_0GNNE2.js +1 -0
  139. package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js +1 -0
  140. package/public/assets/start_customization.md.C4fmzVYD.js +141 -0
  141. package/public/assets/start_customization.md.C4fmzVYD.lean.js +1 -0
  142. package/public/assets/start_install.md.vqLh01mm.js +46 -0
  143. package/public/assets/start_install.md.vqLh01mm.lean.js +1 -0
  144. package/public/assets/start_mixin.md.B5VMlbiN.js +85 -0
  145. package/public/assets/start_mixin.md.B5VMlbiN.lean.js +1 -0
  146. package/public/assets/style.Dl6gCPEE.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 +112 -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 +51 -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/_layout.scss +1 -0
  226. package/scss/base/_reset.scss +5 -0
  227. package/scss/components/_badge.scss +2 -1
  228. package/scss/components/_dropdown.scss +2 -2
  229. package/scss/components/_group.scss +8 -4
  230. package/scss/components/_popover.scss +74 -0
  231. package/scss/components/index.scss +1 -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 -187
  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.1.tgz +0 -0
  283. package/vitest.config.js +0 -8
package/public/start/customization.html ADDED
@@ -0,0 +1,165 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="ltr">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Customization | Vanilla Frontend</title>
7
+ <meta name="description" content="Documentation of my package">
8
+ <meta name="generator" content="VitePress v2.0.0-alpha.17">
9
+ <link rel="preload stylesheet" href="/assets/style.Dl6gCPEE.css" as="style">
10
+ <link rel="preload stylesheet" href="/vp-icons.css" as="style">
11
+
12
+ <script type="module" src="/assets/app.zYBRMlen.js"></script>
13
+ <link rel="preload" href="/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
14
+ <link rel="modulepreload" href="/assets/chunks/theme.D1Tljxds.js">
15
+ <link rel="modulepreload" href="/assets/chunks/framework.26dFs73Q.js">
16
+ <link rel="modulepreload" href="/assets/start_customization.md.C4fmzVYD.lean.js">
17
+ <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
18
+ <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
+ </head>
20
+ <body>
21
+ <div id="app"><div class="Layout" data-v-0cf61682><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0cf61682 data-v-9f75dce3><div class="VPNavBar has-sidebar top" data-v-9f75dce3 data-v-9ca1369d><div class="wrapper" data-v-9ca1369d><div class="container" data-v-9ca1369d><div class="title" data-v-9ca1369d><div class="VPNavBarTitle has-sidebar" data-v-9ca1369d data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!----><span data-v-1e38c6bc>Vanilla Frontend</span><!--[--><!--]--></a></div></div><div class="content" data-v-9ca1369d><div class="content-body" data-v-9ca1369d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9ca1369d data-v-2fc7f2c6><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9ca1369d data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-39714824 data-v-6dd25bb8><!--[--><span data-v-6dd25bb8>Home</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9ca1369d data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9ca1369d data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9ca1369d data-v-562c832a data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-562c832a><div class="item appearance" data-v-562c832a><p class="label" data-v-562c832a>Appearance</p><div class="appearance-action" data-v-562c832a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-562c832a data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-562c832a><div class="item social-links" data-v-562c832a><div class="VPSocialLinks social-links-list" data-v-562c832a data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9ca1369d data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-9ca1369d><div class="divider-line" data-v-9ca1369d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0cf61682 data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0cf61682 data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Prologue</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/release.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Release Notes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/upgrade.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Upgrade guide</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/conventions.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Quick start</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/install.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/customization.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Customization</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/mixin.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>SCSS mixin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Base</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/reset.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Reset</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/layout.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/typography.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Typography</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/media.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Media</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/button.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/dialog.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/disclosure.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Disclosure</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/loading.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Loading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/popover.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Popover</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/progress.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/table.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Table</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Class components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/badge.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/breadcrumb.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/card.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/dropdown.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/grid.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/list.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>List</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Javascript</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/autofill.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Autofill</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/check.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Check all</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/comfort.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Comfort</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/consent.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Consent</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/cookie.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Cookie</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/drawer.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form helper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/scroll.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Scroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/slider.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/sortable.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Sortable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tabpanel.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tabpanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/toggle.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Toggle</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/trap.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Trap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tree.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tree</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0cf61682 data-v-9dc86fcc><div class="VPDoc has-sidebar has-aside" data-v-9dc86fcc data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _start_customization" data-v-7011f0d8><div><h1 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to “Customization”">​</a></h1><p>The framework make you able to customize almost everything. But keep in mind that most of the work will be to create you own components per website !</p><h2 id="css-custom-properties" tabindex="-1">CSS custom properties <a class="header-anchor" href="#css-custom-properties" aria-label="Permalink to “CSS custom properties”">​</a></h2><p>There is a bunch of default CSS custom properties, and (almost) each component have their own properties if needed.</p><h3 id="root" tabindex="-1">Root <a class="header-anchor" href="#root" aria-label="Permalink to “Root”">​</a></h3><p>In the <code>:root</code> set the default CSS properties that are global to all your website.</p><p>You also can split in multiple files, e.g.: <code>root.scss</code> and <code>color.scss</code>..</p><p>You can use the default file <code>@natachah/vanilla-frontend/scss/themes/_root.scss</code>, or copy this code in your own file:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">////</span></span>
22
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// ------------------------------------------------------------------</span></span>
23
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// Root</span></span>
24
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// ------------------------------------------------------------------</span></span>
25
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// Regroup all the default CSS custom properties</span></span>
26
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">///</span></span>
27
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @group themes</span></span>
28
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/// @author Natacha Herth</span></span>
29
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">///</span></span>
30
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">////</span></span>
31
+ <span class="line"></span>
32
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
33
+ <span class="line"></span>
34
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Typography</span></span>
35
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
36
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
37
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-family</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Arial</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
38
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-weight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
39
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-weight-light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-weight-medium</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
41
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-weight-bold</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
42
+ <span class="line"></span>
43
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 36px</span></span>
44
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.00</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 32px</span></span>
45
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.75</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 28px</span></span>
46
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 24px</span></span>
47
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 20px</span></span>
48
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-h6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.125</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 18px</span></span>
49
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-large</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
50
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-medium</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.125</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
51
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --font-size-small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.875</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
52
+ <span class="line"></span>
53
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --word-spacing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
54
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --letter-spacing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
55
+ <span class="line"></span>
56
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Anchor</span></span>
57
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --decoration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
58
+ <span class="line"></span>
59
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Layouts</span></span>
60
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --padding-inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.75</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
61
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --padding-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
62
+ <span class="line"></span>
63
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Border</span></span>
64
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --border-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
65
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --border-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">solid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
66
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
67
+ <span class="line"></span>
68
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Outline (:focus)</span></span>
69
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --outline-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
70
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --outline-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">solid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
71
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --outline-offset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
72
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // --outline-color: var(--color-primary);</span></span>
73
+ <span class="line"></span>
74
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Backdrop</span></span>
75
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --backdrop-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
76
+ <span class="line"></span>
77
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Hover (color-mix)</span></span>
78
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hover-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
79
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hover-percent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
80
+ <span class="line"></span>
81
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Active (color-mix)</span></span>
82
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --active-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
83
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --active-percent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
84
+ <span class="line"></span>
85
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Focus (color-mix)</span></span>
86
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --focus-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">currentColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
87
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --focus-percent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
88
+ <span class="line"></span>
89
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Disabled</span></span>
90
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --disabled-opacity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
91
+ <span class="line"></span>
92
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Colors</span></span>
93
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
94
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
95
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-primary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#B790E5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
96
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#DC3030</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
97
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#008A00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
98
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#FFA500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
99
+ <span class="line"></span>
100
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Contrasts</span></span>
101
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-warning-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
102
+ <span class="line"></span>
103
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Form</span></span>
104
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --form-border-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">currentColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
105
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --form-active-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">color-mix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">in</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> srgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--form-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transparent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--active-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">currentColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
106
+ <span class="line"></span>
107
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Icons</span></span>
108
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-external</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data: image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 16 16&quot; &gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5&quot; /&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z&quot; /&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
109
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;black&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
110
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z&quot;/&gt;&lt;path d=&quot;M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
111
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-file</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z&quot;/&gt;&lt;path d=&quot;M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
112
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
113
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;white&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;8&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
114
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-check</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;white&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z&quot;/&gt;&lt;/svg&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
115
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --icon-switch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--icon-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
116
+ <span class="line"></span>
117
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Layout</span></span>
118
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1280</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
119
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
120
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
121
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
122
+ <span class="line"></span>
123
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">720</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
124
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
125
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
126
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
127
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
128
+ <span class="line"></span>
129
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1024</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
130
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
131
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
132
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
133
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
134
+ <span class="line"></span>
135
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1440</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
136
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
137
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
138
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --layout-gap-inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
139
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
140
+ <span class="line"></span>
141
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-label="Permalink to “Themes”">​</a></h3><p>You can define some CSS properties per theme with the attribute <code>[data-theme=MYTHEME]</code>:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This is the light theme (or if there is none)</span></span>
142
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
143
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:not</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) {</span></span>
144
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
145
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
146
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
147
+ <span class="line"></span>
148
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This is for the dark theme</span></span>
149
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
150
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
151
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
152
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
153
+ <span class="line"></span>
154
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This is for the dark theme</span></span>
155
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">my-custom-theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
156
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
157
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --color-font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">orange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
158
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>In best practive it will be better to have a file per theme.</p></div><h3 id="scss-options" tabindex="-1">SCSS options <a class="header-anchor" href="#scss-options" aria-label="Permalink to “SCSS options”">​</a></h3><p>You can set custom settings with <code>@use &quot;@natachah/vanilla-frontend/scss/components/...&quot; with ( ... );</code>. These custom values will override the default variables.</p><p>There is also a <code>$default-item-properties</code> to define the default properties to use for items <em>(see mixins)</em></p><p>There is 4 components that use this syntax, and that you can pass the <code>$colors</code> and if there is the <code>$outline</code> style enable:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./components/badge&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> with</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$outline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: true);</span></span>
159
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./components/button&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> with</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$outline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: true);</span></span>
160
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./components/card&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> with</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$outline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: true);</span></span>
161
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./components/popover&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> with</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;primary&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/start/install.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Install</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/start/mixin.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>SCSS mixin</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0cf61682 data-v-c3855bb3><div class="container" data-v-c3855bb3><p class="message" data-v-c3855bb3>Released under the MIT License.</p><p class="copyright" data-v-c3855bb3>Copyright © 2024-present <a href="https://natachaherth.ch">Natacha Herth</a></p></div></footer><!--[--><!--]--></div></div>
162
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"base_layout.md\":\"DPVON1Hq\",\"base_media.md\":\"DHSlU0g6\",\"base_reset.md\":\"DD9AA1li\",\"base_typography.md\":\"C9BVN1Re\",\"classes_badge.md\":\"EznZXXqT\",\"classes_breadcrumb.md\":\"DrzF9h9m\",\"classes_card.md\":\"BzNZEHe9\",\"classes_dropdown.md\":\"CKZ2tv7T\",\"classes_grid.md\":\"CKCvlWAg\",\"classes_list.md\":\"CjyB8PFK\",\"components_button.md\":\"CX41PJBd\",\"components_dialog.md\":\"JMjidrIE\",\"components_disclosure.md\":\"BwvLkFL_\",\"components_form.md\":\"C6B5z_6G\",\"components_loading.md\":\"51ktm2_l\",\"components_popover.md\":\"DpbAjVUj\",\"components_progress.md\":\"H7v6t9h-\",\"components_table.md\":\"BPrpvUDy\",\"index.md\":\"DNiLOsZD\",\"javascript_autofill.md\":\"HyVx8c7W\",\"javascript_check.md\":\"BCbZtUBE\",\"javascript_comfort.md\":\"CQm191VA\",\"javascript_consent.md\":\"CbDzabMd\",\"javascript_cookie.md\":\"CFVe2JRe\",\"javascript_drawer.md\":\"D_pT0mrZ\",\"javascript_form.md\":\"sGYh1L4I\",\"javascript_scroll.md\":\"DeOZ4grw\",\"javascript_slider.md\":\"CIa7pHr9\",\"javascript_sortable.md\":\"CThHVTgW\",\"javascript_tabpanel.md\":\"CxAFdAGU\",\"javascript_toggle.md\":\"C66hpUWF\",\"javascript_trap.md\":\"Dt2Rt__e\",\"javascript_tree.md\":\"COR-Pj1y\",\"prologue_conventions.md\":\"wCplqeKt\",\"prologue_release.md\":\"CBJGKY_Y\",\"prologue_upgrade.md\":\"E_0GNNE2\",\"start_customization.md\":\"C4fmzVYD\",\"start_install.md\":\"vqLh01mm\",\"start_mixin.md\":\"B5VMlbiN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vanilla Frontend\",\"description\":\"Documentation of my package\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"}],\"sidebar\":[{\"text\":\"Prologue\",\"items\":[{\"text\":\"Release Notes\",\"link\":\"/prologue/release\"},{\"text\":\"Upgrade guide\",\"link\":\"/prologue/upgrade\"},{\"text\":\"Conventions\",\"link\":\"/prologue/conventions\"}]},{\"text\":\"Quick start\",\"items\":[{\"text\":\"Install\",\"link\":\"/start/install\"},{\"text\":\"Customization\",\"link\":\"/start/customization\"},{\"text\":\"SCSS mixin\",\"link\":\"/start/mixin\"}]},{\"text\":\"Base\",\"items\":[{\"text\":\"Reset\",\"link\":\"/base/reset\"},{\"text\":\"Layout\",\"link\":\"/base/layout\"},{\"text\":\"Typography\",\"link\":\"/base/typography\"},{\"text\":\"Media\",\"link\":\"/base/media\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Dialog\",\"link\":\"/components/dialog\"},{\"text\":\"Disclosure\",\"link\":\"/components/disclosure\"},{\"text\":\"Form\",\"link\":\"/components/form\"},{\"text\":\"Loading\",\"link\":\"/components/loading\"},{\"text\":\"Popover\",\"link\":\"/components/popover\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Table\",\"link\":\"/components/table\"}]},{\"text\":\"Class components\",\"items\":[{\"text\":\"Badge\",\"link\":\"/classes/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/classes/breadcrumb\"},{\"text\":\"Card\",\"link\":\"/classes/card\"},{\"text\":\"Dropdown\",\"link\":\"/classes/dropdown\"},{\"text\":\"Grid\",\"link\":\"/classes/grid\"},{\"text\":\"List\",\"link\":\"/classes/list\"}]},{\"text\":\"Javascript\",\"items\":[{\"text\":\"Autofill\",\"link\":\"/javascript/autofill\"},{\"text\":\"Check all\",\"link\":\"/javascript/check\"},{\"text\":\"Comfort\",\"link\":\"/javascript/comfort\"},{\"text\":\"Consent\",\"link\":\"/javascript/consent\"},{\"text\":\"Cookie\",\"link\":\"/javascript/cookie\"},{\"text\":\"Drawer\",\"link\":\"/javascript/drawer\"},{\"text\":\"Form helper\",\"link\":\"/javascript/form\"},{\"text\":\"Scroll\",\"link\":\"/javascript/scroll\"},{\"text\":\"Slider\",\"link\":\"/javascript/slider\"},{\"text\":\"Sortable\",\"link\":\"/javascript/sortable\"},{\"text\":\"Tabpanel\",\"link\":\"/javascript/tabpanel\"},{\"text\":\"Toggle\",\"link\":\"/javascript/toggle\"},{\"text\":\"Trap\",\"link\":\"/javascript/trap\"},{\"text\":\"Tree\",\"link\":\"/javascript/tree\"}]}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present <a href=\\\"https://natachaherth.ch\\\">Natacha Herth</a>\"},\"socialLinks\":[{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"16\\\" height=\\\"16\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-gitlab\\\" viewBox=\\\"0 0 16 16\\\"><path d=\\\"m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z\\\" /></svg>\"},\"link\":\"https://gitlab.com/packages4913705/vanilla-frontend\",\"ariaLabel\":\"Gitlab\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
163
+
164
+ </body>
165
+ </html>
package/public/start/install.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="ltr">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Installation | Vanilla Frontend</title>
7
+ <meta name="description" content="Documentation of my package">
8
+ <meta name="generator" content="VitePress v2.0.0-alpha.17">
9
+ <link rel="preload stylesheet" href="/assets/style.Dl6gCPEE.css" as="style">
10
+ <link rel="preload stylesheet" href="/vp-icons.css" as="style">
11
+
12
+ <script type="module" src="/assets/app.zYBRMlen.js"></script>
13
+ <link rel="preload" href="/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
14
+ <link rel="modulepreload" href="/assets/chunks/theme.D1Tljxds.js">
15
+ <link rel="modulepreload" href="/assets/chunks/framework.26dFs73Q.js">
16
+ <link rel="modulepreload" href="/assets/start_install.md.vqLh01mm.lean.js">
17
+ <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
18
+ <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
+ </head>
20
+ <body>
21
+ <div id="app"><div class="Layout" data-v-0cf61682><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0cf61682 data-v-9f75dce3><div class="VPNavBar has-sidebar top" data-v-9f75dce3 data-v-9ca1369d><div class="wrapper" data-v-9ca1369d><div class="container" data-v-9ca1369d><div class="title" data-v-9ca1369d><div class="VPNavBarTitle has-sidebar" data-v-9ca1369d data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!----><span data-v-1e38c6bc>Vanilla Frontend</span><!--[--><!--]--></a></div></div><div class="content" data-v-9ca1369d><div class="content-body" data-v-9ca1369d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9ca1369d data-v-2fc7f2c6><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9ca1369d data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-39714824 data-v-6dd25bb8><!--[--><span data-v-6dd25bb8>Home</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9ca1369d data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9ca1369d data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9ca1369d data-v-562c832a data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-562c832a><div class="item appearance" data-v-562c832a><p class="label" data-v-562c832a>Appearance</p><div class="appearance-action" data-v-562c832a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-562c832a data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-562c832a><div class="item social-links" data-v-562c832a><div class="VPSocialLinks social-links-list" data-v-562c832a data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Gitlab" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16"><path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z" /></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9ca1369d data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-9ca1369d><div class="divider-line" data-v-9ca1369d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0cf61682 data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0cf61682 data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Prologue</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/release.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Release Notes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/upgrade.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Upgrade guide</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/prologue/conventions.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Quick start</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/install.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/customization.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Customization</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/start/mixin.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>SCSS mixin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Base</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/reset.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Reset</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/layout.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/typography.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Typography</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/base/media.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Media</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/button.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/dialog.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/disclosure.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Disclosure</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/loading.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Loading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/popover.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Popover</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/progress.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/components/table.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Table</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Class components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/badge.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/breadcrumb.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/card.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/dropdown.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/grid.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/classes/list.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>List</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Javascript</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/autofill.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Autofill</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/check.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Check all</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/comfort.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Comfort</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/consent.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Consent</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/cookie.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Cookie</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/drawer.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/form.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Form helper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/scroll.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Scroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/slider.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/sortable.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Sortable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tabpanel.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tabpanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/toggle.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Toggle</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/trap.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Trap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/javascript/tree.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Tree</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0cf61682 data-v-9dc86fcc><div class="VPDoc has-sidebar has-aside" data-v-9dc86fcc data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _start_install" data-v-7011f0d8><div><h1 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to “Installation”">​</a></h1><h2 id="npm" tabindex="-1">NPM <a class="header-anchor" href="#npm" aria-label="Permalink to “NPM”">​</a></h2><p>Install the latest package via NPM</p><div class="language-ssh"><button title="Copy Code" class="copy"></button><span class="lang">ssh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>npm i @natachah/vanilla-frontend</span></span></code></pre></div><h2 id="scss" tabindex="-1">SCSS <a class="header-anchor" href="#scss" aria-label="Permalink to “SCSS”">​</a></h2><p>You can import the global SCSS file:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/vanilla-frontend.scss&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Or better, include <strong>only the files that you need</strong>, here the template with all files:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Should be overide by your own files</span></span>
22
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/themes/_root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
23
+ <span class="line"></span>
24
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If you need to use the mixin</span></span>
25
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/abstracts/_mixins&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
26
+ <span class="line"></span>
27
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Base files (reset, typography and media)</span></span>
28
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/scss/base&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
29
+ <span class="line"></span>
30
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Components files (or: @use &quot;@natachah/vanilla-frontend/scss/components&quot;;)</span></span>
31
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_badge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
32
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_breadcrumb&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
33
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
34
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_card&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
35
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_dialog&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
36
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_disclosure&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
37
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
38
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_dropdown&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
39
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_form&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_grid&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
41
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_group&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
42
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_list&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
43
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_loading&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
44
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_progress&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
45
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_slider&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
46
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/_table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>There is no required files, but it&#39;s recommanded to have at least the base/* and the themes/root</p></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”">​</a></h2><p>Import the Javascript files that you need, here the template:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If you need to create some component, you can use this</span></span>
47
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> BaseComponent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_base-component&quot;</span></span>
48
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorMessage </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_error&quot;</span></span>
49
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cookie </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_cookie&quot;</span></span>
50
+ <span class="line"></span>
51
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Here the helpers</span></span>
52
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> FormHelper </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_form-helper&quot;</span></span>
53
+ <span class="line"></span>
54
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Here the components</span></span>
55
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Autofill </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_autofill&quot;</span></span>
56
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> CheckAll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_check-all&quot;</span></span>
57
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Comfort </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_comfort&quot;</span></span>
58
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Consent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_consent&quot;</span></span>
59
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Dialog </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_dialog&quot;</span></span>
60
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Dropdown </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_dropdown&quot;</span></span>
61
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Drawer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_drawer&quot;</span></span>
62
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_scroll&quot;</span></span>
63
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Slider </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_slider&quot;</span></span>
64
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Sortable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_sortable&quot;</span></span>
65
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span>
66
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tree&quot;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/prologue/conventions.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Conventions</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/start/customization.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Customization</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0cf61682 data-v-c3855bb3><div class="container" data-v-c3855bb3><p class="message" data-v-c3855bb3>Released under the MIT License.</p><p class="copyright" data-v-c3855bb3>Copyright © 2024-present <a href="https://natachaherth.ch">Natacha Herth</a></p></div></footer><!--[--><!--]--></div></div>
67
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"base_layout.md\":\"DPVON1Hq\",\"base_media.md\":\"DHSlU0g6\",\"base_reset.md\":\"DD9AA1li\",\"base_typography.md\":\"C9BVN1Re\",\"classes_badge.md\":\"EznZXXqT\",\"classes_breadcrumb.md\":\"DrzF9h9m\",\"classes_card.md\":\"BzNZEHe9\",\"classes_dropdown.md\":\"CKZ2tv7T\",\"classes_grid.md\":\"CKCvlWAg\",\"classes_list.md\":\"CjyB8PFK\",\"components_button.md\":\"CX41PJBd\",\"components_dialog.md\":\"JMjidrIE\",\"components_disclosure.md\":\"BwvLkFL_\",\"components_form.md\":\"C6B5z_6G\",\"components_loading.md\":\"51ktm2_l\",\"components_popover.md\":\"DpbAjVUj\",\"components_progress.md\":\"H7v6t9h-\",\"components_table.md\":\"BPrpvUDy\",\"index.md\":\"DNiLOsZD\",\"javascript_autofill.md\":\"HyVx8c7W\",\"javascript_check.md\":\"BCbZtUBE\",\"javascript_comfort.md\":\"CQm191VA\",\"javascript_consent.md\":\"CbDzabMd\",\"javascript_cookie.md\":\"CFVe2JRe\",\"javascript_drawer.md\":\"D_pT0mrZ\",\"javascript_form.md\":\"sGYh1L4I\",\"javascript_scroll.md\":\"DeOZ4grw\",\"javascript_slider.md\":\"CIa7pHr9\",\"javascript_sortable.md\":\"CThHVTgW\",\"javascript_tabpanel.md\":\"CxAFdAGU\",\"javascript_toggle.md\":\"C66hpUWF\",\"javascript_trap.md\":\"Dt2Rt__e\",\"javascript_tree.md\":\"COR-Pj1y\",\"prologue_conventions.md\":\"wCplqeKt\",\"prologue_release.md\":\"CBJGKY_Y\",\"prologue_upgrade.md\":\"E_0GNNE2\",\"start_customization.md\":\"C4fmzVYD\",\"start_install.md\":\"vqLh01mm\",\"start_mixin.md\":\"B5VMlbiN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vanilla Frontend\",\"description\":\"Documentation of my package\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"}],\"sidebar\":[{\"text\":\"Prologue\",\"items\":[{\"text\":\"Release Notes\",\"link\":\"/prologue/release\"},{\"text\":\"Upgrade guide\",\"link\":\"/prologue/upgrade\"},{\"text\":\"Conventions\",\"link\":\"/prologue/conventions\"}]},{\"text\":\"Quick start\",\"items\":[{\"text\":\"Install\",\"link\":\"/start/install\"},{\"text\":\"Customization\",\"link\":\"/start/customization\"},{\"text\":\"SCSS mixin\",\"link\":\"/start/mixin\"}]},{\"text\":\"Base\",\"items\":[{\"text\":\"Reset\",\"link\":\"/base/reset\"},{\"text\":\"Layout\",\"link\":\"/base/layout\"},{\"text\":\"Typography\",\"link\":\"/base/typography\"},{\"text\":\"Media\",\"link\":\"/base/media\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Dialog\",\"link\":\"/components/dialog\"},{\"text\":\"Disclosure\",\"link\":\"/components/disclosure\"},{\"text\":\"Form\",\"link\":\"/components/form\"},{\"text\":\"Loading\",\"link\":\"/components/loading\"},{\"text\":\"Popover\",\"link\":\"/components/popover\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Table\",\"link\":\"/components/table\"}]},{\"text\":\"Class components\",\"items\":[{\"text\":\"Badge\",\"link\":\"/classes/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/classes/breadcrumb\"},{\"text\":\"Card\",\"link\":\"/classes/card\"},{\"text\":\"Dropdown\",\"link\":\"/classes/dropdown\"},{\"text\":\"Grid\",\"link\":\"/classes/grid\"},{\"text\":\"List\",\"link\":\"/classes/list\"}]},{\"text\":\"Javascript\",\"items\":[{\"text\":\"Autofill\",\"link\":\"/javascript/autofill\"},{\"text\":\"Check all\",\"link\":\"/javascript/check\"},{\"text\":\"Comfort\",\"link\":\"/javascript/comfort\"},{\"text\":\"Consent\",\"link\":\"/javascript/consent\"},{\"text\":\"Cookie\",\"link\":\"/javascript/cookie\"},{\"text\":\"Drawer\",\"link\":\"/javascript/drawer\"},{\"text\":\"Form helper\",\"link\":\"/javascript/form\"},{\"text\":\"Scroll\",\"link\":\"/javascript/scroll\"},{\"text\":\"Slider\",\"link\":\"/javascript/slider\"},{\"text\":\"Sortable\",\"link\":\"/javascript/sortable\"},{\"text\":\"Tabpanel\",\"link\":\"/javascript/tabpanel\"},{\"text\":\"Toggle\",\"link\":\"/javascript/toggle\"},{\"text\":\"Trap\",\"link\":\"/javascript/trap\"},{\"text\":\"Tree\",\"link\":\"/javascript/tree\"}]}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present <a href=\\\"https://natachaherth.ch\\\">Natacha Herth</a>\"},\"socialLinks\":[{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"16\\\" height=\\\"16\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-gitlab\\\" viewBox=\\\"0 0 16 16\\\"><path d=\\\"m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z\\\" /></svg>\"},\"link\":\"https://gitlab.com/packages4913705/vanilla-frontend\",\"ariaLabel\":\"Gitlab\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
68
+
69
+ </body>
70
+ </html>