@bookklik/senangstart-css 0.1.3 → 0.1.4

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 (191) hide show
  1. package/dist/senangstart-css.js +38 -8
  2. package/dist/senangstart-css.min.js +24 -3
  3. package/docs/.vitepress/cache/deps/_metadata.json +7 -28
  4. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +9432 -284
  5. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +4 -4
  6. package/docs/.vitepress/config.js +183 -91
  7. package/docs/.vitepress/dist/404.html +5 -5
  8. package/docs/.vitepress/dist/assets/{app.CwVZm472.js → app.DBXoyO4w.js} +1 -1
  9. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +19 -0
  10. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +1 -0
  11. package/docs/.vitepress/dist/assets/{examples_cards.md.D4i0phvj.js → examples_cards.md.BCzaqSD6.js} +1 -1
  12. package/docs/.vitepress/dist/assets/{examples_cards.md.D4i0phvj.lean.js → examples_cards.md.BCzaqSD6.lean.js} +1 -1
  13. package/docs/.vitepress/dist/assets/{examples_forms.md.BnsjqHST.js → examples_forms.md.DOjr9LrG.js} +1 -1
  14. package/docs/.vitepress/dist/assets/{examples_forms.md.BnsjqHST.lean.js → examples_forms.md.DOjr9LrG.lean.js} +1 -1
  15. package/docs/.vitepress/dist/assets/{examples_hero.md.CCcb2x8Y.js → examples_hero.md.CAorji-Y.js} +1 -1
  16. package/docs/.vitepress/dist/assets/{examples_hero.md.CCcb2x8Y.lean.js → examples_hero.md.CAorji-Y.lean.js} +1 -1
  17. package/docs/.vitepress/dist/assets/{examples_index.md.Dj7lqhZt.js → examples_index.md.BjUNsTob.js} +1 -1
  18. package/docs/.vitepress/dist/assets/{examples_index.md.Dj7lqhZt.lean.js → examples_index.md.BjUNsTob.lean.js} +1 -1
  19. package/docs/.vitepress/dist/assets/{examples_navigation.md.CppyHbnP.js → examples_navigation.md.DvL-Yv_5.js} +1 -1
  20. package/docs/.vitepress/dist/assets/{examples_navigation.md.CppyHbnP.lean.js → examples_navigation.md.DvL-Yv_5.lean.js} +1 -1
  21. package/docs/.vitepress/dist/assets/{guide_cdn.md.BzsOep2E.js → guide_cdn.md.Bbb7-icp.js} +1 -1
  22. package/docs/.vitepress/dist/assets/{guide_cdn.md.BzsOep2E.lean.js → guide_cdn.md.Bbb7-icp.lean.js} +1 -1
  23. package/docs/.vitepress/dist/assets/{guide_cli.md.zXEKk-bu.js → guide_cli.md.yLsOZ7NL.js} +1 -1
  24. package/docs/.vitepress/dist/assets/{guide_cli.md.zXEKk-bu.lean.js → guide_cli.md.yLsOZ7NL.lean.js} +1 -1
  25. package/docs/.vitepress/dist/assets/{guide_configuration.md.D2JZzhKm.js → guide_configuration.md.DN4FfKw4.js} +1 -1
  26. package/docs/.vitepress/dist/assets/{guide_configuration.md.D2JZzhKm.lean.js → guide_configuration.md.DN4FfKw4.lean.js} +1 -1
  27. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +69 -0
  28. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +1 -0
  29. package/docs/.vitepress/dist/assets/{guide_getting-started.md.to1dkMR9.js → guide_getting-started.md.K5nA8wXY.js} +1 -1
  30. package/docs/.vitepress/dist/assets/{guide_getting-started.md.to1dkMR9.lean.js → guide_getting-started.md.K5nA8wXY.lean.js} +1 -1
  31. package/docs/.vitepress/dist/assets/{guide_index.md.C1xk2lBl.js → guide_index.md.B0lRU150.js} +1 -1
  32. package/docs/.vitepress/dist/assets/{guide_index.md.C1xk2lBl.lean.js → guide_index.md.B0lRU150.lean.js} +1 -1
  33. package/docs/.vitepress/dist/assets/{guide_natural-scale.md.D1oVRN5V.js → guide_natural-scale.md.vvauT7U1.js} +1 -1
  34. package/docs/.vitepress/dist/assets/{guide_natural-scale.md.D1oVRN5V.lean.js → guide_natural-scale.md.vvauT7U1.lean.js} +1 -1
  35. package/docs/.vitepress/dist/assets/{guide_philosophy.md.DPyyMH8d.js → guide_philosophy.md.mOb9kp32.js} +1 -1
  36. package/docs/.vitepress/dist/assets/{guide_philosophy.md.DPyyMH8d.lean.js → guide_philosophy.md.mOb9kp32.lean.js} +1 -1
  37. package/docs/.vitepress/dist/assets/{guide_responsive.md.wksOAMT5.js → guide_responsive.md.C7cF-4cR.js} +1 -1
  38. package/docs/.vitepress/dist/assets/{guide_responsive.md.wksOAMT5.lean.js → guide_responsive.md.C7cF-4cR.lean.js} +1 -1
  39. package/docs/.vitepress/dist/assets/{guide_states.md.DRjYOZDJ.js → guide_states.md.CwtGEGHB.js} +1 -1
  40. package/docs/.vitepress/dist/assets/{guide_states.md.DRjYOZDJ.lean.js → guide_states.md.CwtGEGHB.lean.js} +1 -1
  41. package/docs/.vitepress/dist/assets/{guide_tri-attribute.md.CoFqfmPZ.js → guide_tri-attribute.md.CpjJLEMP.js} +1 -1
  42. package/docs/.vitepress/dist/assets/{guide_tri-attribute.md.CoFqfmPZ.lean.js → guide_tri-attribute.md.CpjJLEMP.lean.js} +1 -1
  43. package/docs/.vitepress/dist/assets/{index.md.CUZJzNzP.js → index.md.mYp6_S5X.js} +1 -1
  44. package/docs/.vitepress/dist/assets/{index.md.CUZJzNzP.lean.js → index.md.mYp6_S5X.lean.js} +1 -1
  45. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +84 -0
  46. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +1 -0
  47. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +169 -0
  48. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +1 -0
  49. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +118 -0
  50. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +1 -0
  51. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +52 -0
  52. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +1 -0
  53. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +106 -0
  54. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +1 -0
  55. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +30 -0
  56. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +1 -0
  57. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +44 -0
  58. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +1 -0
  59. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +79 -0
  60. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +1 -0
  61. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +69 -0
  62. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +1 -0
  63. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +47 -0
  64. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +1 -0
  65. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +3 -0
  66. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +1 -0
  67. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +22 -0
  68. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +1 -0
  69. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +7 -0
  70. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +1 -0
  71. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +57 -0
  72. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +1 -0
  73. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +77 -0
  74. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +1 -0
  75. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +45 -0
  76. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +1 -0
  77. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +7 -0
  78. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +1 -0
  79. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +48 -0
  80. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +1 -0
  81. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +17 -0
  82. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +1 -0
  83. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +13 -0
  84. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +1 -0
  85. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +24 -0
  86. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +1 -0
  87. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +32 -0
  88. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +1 -0
  89. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +22 -0
  90. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +1 -0
  91. package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.js → reference_breakpoints.md.BRbG8Fzi.js} +1 -1
  92. package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.lean.js → reference_breakpoints.md.BRbG8Fzi.lean.js} +1 -1
  93. package/docs/.vitepress/dist/assets/{reference_colors.md.o5ltImYJ.js → reference_colors.md.C7j7dSO1.js} +1 -1
  94. package/docs/.vitepress/dist/assets/{reference_colors.md.o5ltImYJ.lean.js → reference_colors.md.C7j7dSO1.lean.js} +1 -1
  95. package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.js → reference_layout.md.BWJ5NxSp.js} +1 -1
  96. package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.lean.js → reference_layout.md.BWJ5NxSp.lean.js} +1 -1
  97. package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.js → reference_space.md.DCsqfTWb.js} +1 -1
  98. package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.lean.js → reference_space.md.DCsqfTWb.lean.js} +1 -1
  99. package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.js → reference_spacing.md.BInFD8gd.js} +1 -1
  100. package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.lean.js → reference_spacing.md.BInFD8gd.lean.js} +1 -1
  101. package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.js → reference_visual.md.BRK7S9T1.js} +1 -1
  102. package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.lean.js → reference_visual.md.BRK7S9T1.lean.js} +1 -1
  103. package/docs/.vitepress/dist/assets/{style.BuMqNgkb.css → style.D82StYDI.css} +1 -1
  104. package/docs/.vitepress/dist/examples/cards.html +9 -9
  105. package/docs/.vitepress/dist/examples/forms.html +9 -9
  106. package/docs/.vitepress/dist/examples/hero.html +9 -9
  107. package/docs/.vitepress/dist/examples/index.html +9 -9
  108. package/docs/.vitepress/dist/examples/navigation.html +9 -9
  109. package/docs/.vitepress/dist/guide/cdn.html +10 -10
  110. package/docs/.vitepress/dist/guide/cli.html +9 -9
  111. package/docs/.vitepress/dist/guide/configuration.html +9 -9
  112. package/docs/.vitepress/dist/guide/dark-mode.html +93 -0
  113. package/docs/.vitepress/dist/guide/getting-started.html +9 -9
  114. package/docs/.vitepress/dist/guide/index.html +9 -9
  115. package/docs/.vitepress/dist/guide/natural-scale.html +9 -9
  116. package/docs/.vitepress/dist/guide/philosophy.html +9 -9
  117. package/docs/.vitepress/dist/guide/responsive.html +9 -9
  118. package/docs/.vitepress/dist/guide/states.html +10 -10
  119. package/docs/.vitepress/dist/guide/tri-attribute.html +9 -9
  120. package/docs/.vitepress/dist/hashmap.json +1 -1
  121. package/docs/.vitepress/dist/index.html +9 -9
  122. package/docs/.vitepress/dist/ms/examples/cards.html +108 -0
  123. package/docs/.vitepress/dist/ms/examples/forms.html +193 -0
  124. package/docs/.vitepress/dist/ms/examples/hero.html +142 -0
  125. package/docs/.vitepress/dist/ms/examples/index.html +76 -0
  126. package/docs/.vitepress/dist/ms/examples/navigation.html +130 -0
  127. package/docs/.vitepress/dist/ms/guide/cdn.html +54 -0
  128. package/docs/.vitepress/dist/ms/guide/cli.html +68 -0
  129. package/docs/.vitepress/dist/ms/guide/configuration.html +103 -0
  130. package/docs/.vitepress/dist/ms/guide/dark-mode.html +93 -0
  131. package/docs/.vitepress/dist/ms/guide/getting-started.html +71 -0
  132. package/docs/.vitepress/dist/ms/guide/index.html +27 -0
  133. package/docs/.vitepress/dist/ms/guide/natural-scale.html +46 -0
  134. package/docs/.vitepress/dist/ms/guide/philosophy.html +31 -0
  135. package/docs/.vitepress/dist/ms/guide/responsive.html +81 -0
  136. package/docs/.vitepress/dist/ms/guide/states.html +101 -0
  137. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +69 -0
  138. package/docs/.vitepress/dist/ms/index.html +31 -0
  139. package/docs/.vitepress/dist/ms/reference/breakpoints.html +72 -0
  140. package/docs/.vitepress/dist/ms/reference/colors.html +41 -0
  141. package/docs/.vitepress/dist/ms/reference/layout.html +37 -0
  142. package/docs/.vitepress/dist/ms/reference/space.html +48 -0
  143. package/docs/.vitepress/dist/ms/reference/spacing.html +56 -0
  144. package/docs/.vitepress/dist/ms/reference/visual.html +46 -0
  145. package/docs/.vitepress/dist/reference/breakpoints.html +9 -9
  146. package/docs/.vitepress/dist/reference/colors.html +9 -9
  147. package/docs/.vitepress/dist/reference/layout.html +9 -9
  148. package/docs/.vitepress/dist/reference/space.html +9 -9
  149. package/docs/.vitepress/dist/reference/spacing.html +9 -9
  150. package/docs/.vitepress/dist/reference/visual.html +9 -9
  151. package/docs/guide/dark-mode.md +152 -0
  152. package/docs/ms/examples/cards.md +116 -0
  153. package/docs/ms/examples/forms.md +207 -0
  154. package/docs/ms/examples/hero.md +150 -0
  155. package/docs/ms/examples/index.md +87 -0
  156. package/docs/ms/examples/navigation.md +144 -0
  157. package/docs/ms/guide/cdn.md +110 -0
  158. package/docs/ms/guide/cli.md +174 -0
  159. package/docs/ms/guide/configuration.md +152 -0
  160. package/docs/ms/guide/dark-mode.md +152 -0
  161. package/docs/ms/guide/getting-started.md +130 -0
  162. package/docs/ms/guide/index.md +64 -0
  163. package/docs/ms/guide/natural-scale.md +123 -0
  164. package/docs/ms/guide/philosophy.md +103 -0
  165. package/docs/ms/guide/responsive.md +129 -0
  166. package/docs/ms/guide/states.md +162 -0
  167. package/docs/ms/guide/tri-attribute.md +187 -0
  168. package/docs/ms/index.md +64 -0
  169. package/docs/ms/reference/breakpoints.md +131 -0
  170. package/docs/ms/reference/colors.md +126 -0
  171. package/docs/ms/reference/layout.md +115 -0
  172. package/docs/ms/reference/space.md +121 -0
  173. package/docs/ms/reference/spacing.md +74 -0
  174. package/docs/ms/reference/visual.md +160 -0
  175. package/package.json +1 -1
  176. package/src/cdn/jit.js +38 -8
  177. package/src/compiler/generators/css.js +57 -5
  178. package/src/compiler/tokenizer.js +1 -1
  179. package/src/config/defaults.js +6 -0
  180. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js +0 -9719
  181. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js.map +0 -7
  182. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1333
  183. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
  184. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1665
  185. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
  186. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -1813
  187. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
  188. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.BTWwOmXN.js +0 -1
  189. package/docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.B-RMQ_ux.js +0 -9
  190. package/docs/.vitepress/dist/assets/chunks/framework.qISVh_QZ.js +0 -19
  191. package/docs/.vitepress/dist/assets/chunks/theme.B37_rtT6.js +0 -2
package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js ADDED
@@ -0,0 +1,22 @@
1
+ import{_ as s,c as i,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Skala Semula Jadi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/natural-scale.md","filePath":"ms/guide/natural-scale.md"}'),l={name:"ms/guide/natural-scale.md"};function e(h,a,k,p,d,r){return t(),i("div",null,[...a[0]||(a[0]=[n(`<h1 id="skala-semula-jadi" tabindex="-1">Skala Semula Jadi <a class="header-anchor" href="#skala-semula-jadi" aria-label="Permalink to &quot;Skala Semula Jadi&quot;">​</a></h1><p>SenangStart menggunakan adjektif semula jadi yang dipetakan kepada objek fizikal yang boleh anda visualisasikan.</p><h2 id="falsafahnya" tabindex="-1">Falsafahnya <a class="header-anchor" href="#falsafahnya" aria-label="Permalink to &quot;Falsafahnya&quot;">​</a></h2><p>Daripada nombor arbitrari, fikirkan <strong>objek fizikal</strong>:</p><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Saiz</th><th>Model Mental</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td><td>Tiada ruang</td></tr><tr><td><code>tiny</code></td><td>4px</td><td>🪨 <strong>Batu</strong> — Sempadan, offset kecil</td></tr><tr><td><code>small</code></td><td>8px</td><td>📦 <strong>Kotak mancis</strong> — Kumpulkan item berkaitan</td></tr><tr><td><code>medium</code></td><td>16px</td><td>📱 <strong>Telefon pintar</strong> — Lalai standard</td></tr><tr><td><code>big</code></td><td>32px</td><td>💻 <strong>Komputer riba</strong> — Pisahkan seksyen</td></tr><tr><td><code>giant</code></td><td>64px</td><td>🚪 <strong>Pintu</strong> — Bahagian layout</td></tr><tr><td><code>vast</code></td><td>128px</td><td>🏠 <strong>Rumah</strong> — Seksyen hero</td></tr></tbody></table><h2 id="menggunakan-skala" tabindex="-1">Menggunakan Skala <a class="header-anchor" href="#menggunakan-skala" aria-label="Permalink to &quot;Menggunakan Skala&quot;">​</a></h2><h3 id="bila-guna-setiap-saiz" tabindex="-1">Bila guna setiap saiz <a class="header-anchor" href="#bila-guna-setiap-saiz" aria-label="Permalink to &quot;Bila guna setiap saiz&quot;">​</a></h3><p><strong><code>tiny</code> (4px)</strong> — Untuk butiran halus</p><ul><li>Jarak ikon dalam butang</li><li>Lebar sempadan</li><li>Offset visual kecil</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:small p-y:tiny&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt; Butang</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong><code>small</code> (8px)</strong> — Untuk mengumpulkan item berkaitan</p><ul><li>Jarak antara label dan input</li><li>Jarak antara avatar dan nama</li><li>Item senarai yang ketat</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
4
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Emel&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;email&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong><code>medium</code> (16px)</strong> — Lalai standard</p><ul><li>Padding kad</li><li>Margin medan borang</li><li>Jarak komponen standard</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan kad standard</span></span>
8
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong><code>big</code> (32px)</strong> — Untuk memisahkan seksyen berbeza</p><ul><li>Antara header dan kandungan</li><li>Antara kumpulan borang</li><li>Antara blok UI utama</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk Halaman&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kandungan dipisahkan dari header&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong><code>giant</code> (64px)</strong> — Untuk bahagian layout</p><ul><li>Antara seksyen halaman</li><li>Pemisahan struktur utama</li><li>Padding navigasi desktop</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-y:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Seksyen halaman utama</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong><code>vast</code> (128px)</strong> — Untuk seksyen hero dan jarak besar</p><ul><li>Padding seksyen hero</li><li>Jarak hiasan besar</li><li>Seksyen full-bleed</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:vast&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Selamat Datang ke Aplikasi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="pemetaan-bahasa-semula-jadi" tabindex="-1">Pemetaan Bahasa Semula Jadi <a class="header-anchor" href="#pemetaan-bahasa-semula-jadi" aria-label="Permalink to &quot;Pemetaan Bahasa Semula Jadi&quot;">​</a></h2><p>Bila bercakap tentang pelarasan jarak, guna bahasa semula jadi:</p><table tabindex="0"><thead><tr><th>Anda cakap...</th><th>Tindakan</th></tr></thead><tbody><tr><td>&quot;ketatkan&quot;</td><td>Kurangkan jarak (medium → small → tiny)</td></tr><tr><td>&quot;padat&quot;</td><td>Guna small atau tiny</td></tr><tr><td>&quot;bagi ruang&quot;</td><td>Besarkan jarak (medium → big → giant)</td></tr><tr><td>&quot;bernafas&quot;</td><td>Besarkan jarak</td></tr><tr><td>&quot;luas&quot;</td><td>Guna big atau giant</td></tr><tr><td>&quot;sempit&quot;</td><td>Terlalu banyak tiny/small, besarkan skala</td></tr></tbody></table><h2 id="menyesuaikan-skala" tabindex="-1">Menyesuaikan Skala <a class="header-anchor" href="#menyesuaikan-skala" aria-label="Permalink to &quot;Menyesuaikan Skala&quot;">​</a></h2><p>Tindih ganti lalai dalam <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spacing: {</span></span>
16
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tiny&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tiny lebih ketat</span></span>
17
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah skala tersuai</span></span>
18
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;massive&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;512px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Lebih besar lagi!</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
20
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Guna skala tersuai anda:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Padding huge&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:massive&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Margin massive&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,33)])])}const o=s(l,[["render",e]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as s,c as i,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Skala Semula Jadi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/natural-scale.md","filePath":"ms/guide/natural-scale.md"}'),l={name:"ms/guide/natural-scale.md"};function e(h,a,k,p,d,r){return t(),i("div",null,[...a[0]||(a[0]=[n("",33)])])}const o=s(l,[["render",e]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js ADDED
@@ -0,0 +1,7 @@
1
+ import{_ as t,c as i,o as e,ae as n}from"./chunks/framework.I305HrzY.js";const u=JSON.parse('{"title":"Mengapa Bahasa Semula Jadi?","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/philosophy.md","filePath":"ms/guide/philosophy.md"}'),s={name:"ms/guide/philosophy.md"};function d(l,a,r,o,h,p){return e(),i("div",null,[...a[0]||(a[0]=[n(`<h1 id="mengapa-bahasa-semula-jadi" tabindex="-1">Mengapa Bahasa Semula Jadi? <a class="header-anchor" href="#mengapa-bahasa-semula-jadi" aria-label="Permalink to &quot;Mengapa Bahasa Semula Jadi?&quot;">​</a></h1><p>Falsafah di sebalik pendekatan adjektif semula jadi SenangStart.</p><h2 id="masalah-dengan-nombor" tabindex="-1">Masalah dengan Nombor <a class="header-anchor" href="#masalah-dengan-nombor" aria-label="Permalink to &quot;Masalah dengan Nombor&quot;">​</a></h2><p>Rangka kerja utiliti tradisional menggunakan skala nombor abstrak:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Apa maksud nombor-nombor ini? --&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-4 m-8 gap-2 text-xl&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Setiap pembangun bertanya:</p><ul><li>Adakah <code>p-4</code> lebih besar daripada <code>m-8</code>?</li><li>Apa beza antara <code>gap-2</code> dan <code>gap-4</code>?</li><li>Adakah <code>text-xl</code> lebih besar daripada <code>text-lg</code>?</li></ul><p><strong>Anda sentiasa merujuk dokumentasi.</strong> Beban mental melambatkan anda.</p><h2 id="penyelesaian-semula-jadi" tabindex="-1">Penyelesaian Semula Jadi <a class="header-anchor" href="#penyelesaian-semula-jadi" aria-label="Permalink to &quot;Penyelesaian Semula Jadi&quot;">​</a></h2><p>SenangStart menggunakan perkataan yang anda sudah faham:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Terus jelas --&gt;</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium m:big g:small&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Tiada rujukan diperlukan. Anda <em>tahu</em> bahawa:</p><ul><li><code>big</code> lebih besar daripada <code>medium</code></li><li><code>medium</code> lebih besar daripada <code>small</code></li><li><code>giant</code> lebih besar daripada <code>big</code></li></ul><h2 id="model-mental-fizikal" tabindex="-1">Model Mental Fizikal <a class="header-anchor" href="#model-mental-fizikal" aria-label="Permalink to &quot;Model Mental Fizikal&quot;">​</a></h2><p>Setiap skala dipetakan kepada objek fizikal yang boleh anda visualisasikan:</p><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Model Fizikal</th><th>Contoh Penggunaan</th></tr></thead><tbody><tr><td><code>tiny</code></td><td>🪨 Batu</td><td>Jarak ikon, sempadan</td></tr><tr><td><code>small</code></td><td>📦 Kotak mancis</td><td>Jarak medan borang</td></tr><tr><td><code>medium</code></td><td>📱 Telefon pintar</td><td>Padding standard</td></tr><tr><td><code>big</code></td><td>💻 Komputer riba</td><td>Jarak seksyen</td></tr><tr><td><code>giant</code></td><td>🚪 Pintu</td><td>Bahagian layout</td></tr><tr><td><code>vast</code></td><td>🏠 Rumah</td><td>Seksyen hero</td></tr></tbody></table><p>Bila anda fikir &quot;Saya perlukan jarak sebesar komputer riba&quot;, anda tulis <code>big</code>.</p><h2 id="komunikasi-mesra-ai" tabindex="-1">Komunikasi Mesra AI <a class="header-anchor" href="#komunikasi-mesra-ai" aria-label="Permalink to &quot;Komunikasi Mesra AI&quot;">​</a></h2><p>Bahasa semula jadi berfungsi lebih baik dengan pembantu AI:</p><h3 id="pendekatan-tradisional" tabindex="-1">Pendekatan Tradisional <a class="header-anchor" href="#pendekatan-tradisional" aria-label="Permalink to &quot;Pendekatan Tradisional&quot;">​</a></h3><blockquote><p>&quot;Besarkan padding&quot;<br> AI: &quot;Patut guna p-6, p-8, atau p-12?&quot;</p></blockquote><h3 id="pendekatan-senangstart" tabindex="-1">Pendekatan SenangStart <a class="header-anchor" href="#pendekatan-senangstart" aria-label="Permalink to &quot;Pendekatan SenangStart&quot;">​</a></h3><blockquote><p>&quot;Besarkan padding&quot;<br> AI: &quot;Tukar dari <code>medium</code> ke <code>big</code>&quot; ✓</p></blockquote><p>AI memahami <em>niat</em> di sebalik kata-kata anda.</p><h2 id="perbualan-semantik" tabindex="-1">Perbualan Semantik <a class="header-anchor" href="#perbualan-semantik" aria-label="Permalink to &quot;Perbualan Semantik&quot;">​</a></h2><p>Dengan SenangStart, anda boleh bercakap secara semula jadi:</p><table tabindex="0"><thead><tr><th>Anda Cakap</th><th>AI Faham</th></tr></thead><tbody><tr><td>&quot;ketatkan&quot;</td><td>Kurangkan jarak (medium → small → tiny)</td></tr><tr><td>&quot;bagi ruang bernafas&quot;</td><td>Besarkan jarak (medium → big → giant)</td></tr><tr><td>&quot;lebih padat&quot;</td><td>Guna jarak lebih kecil</td></tr><tr><td>&quot;rasa sempit&quot;</td><td>Besarkan jarak</td></tr><tr><td>&quot;terlalu banyak ruang kosong&quot;</td><td>Kurangkan jarak</td></tr></tbody></table><h2 id="pengasingan-tanggungjawab" tabindex="-1">Pengasingan Tanggungjawab <a class="header-anchor" href="#pengasingan-tanggungjawab" aria-label="Permalink to &quot;Pengasingan Tanggungjawab&quot;">​</a></h2><p>Tiga atribusi memastikan kod anda teratur:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
4
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;"> &lt;!--</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Struktur</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> --</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> space=&quot;p:medium g:small&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Saiz --&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> visual=&quot;bg:white rounded:big&quot; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Penampilan --&gt;</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Sesiapa yang baca kod ini terus tahu:</p><ul><li><strong>Apa fungsinya</strong> (flexbox, column, di tengah)</li><li><strong>Berapa besarnya</strong> (padding medium, gap small)</li><li><strong>Bagaimana rupanya</strong> (putih, bulat)</li></ul><h2 id="pemikiran-niat-nan-utama" tabindex="-1">Pemikiran Niat Nan Utama <a class="header-anchor" href="#pemikiran-niat-nan-utama" aria-label="Permalink to &quot;Pemikiran Niat Nan Utama&quot;">​</a></h2><p>Berhenti fikir dalam pixel. Mula terangkan niat.</p><table tabindex="0"><thead><tr><th>Daripada...</th><th>Fikir...</th></tr></thead><tbody><tr><td>&quot;Saya perlukan 16px padding&quot;</td><td>&quot;Saya perlukan medium padding&quot;</td></tr><tr><td>&quot;Tambah 8px gap&quot;</td><td>&quot;Tambah small gap&quot;</td></tr><tr><td>&quot;Buat 32px margin&quot;</td><td>&quot;Bagi big margin&quot;</td></tr></tbody></table><p><strong>Kod anda menjadi swadokumentasi.</strong></p>`,36)])])}const g=t(s,[["render",d]]);export{u as __pageData,g as default};
package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as t,c as i,o as e,ae as n}from"./chunks/framework.I305HrzY.js";const u=JSON.parse('{"title":"Mengapa Bahasa Semula Jadi?","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/philosophy.md","filePath":"ms/guide/philosophy.md"}'),s={name:"ms/guide/philosophy.md"};function d(l,a,r,o,h,p){return e(),i("div",null,[...a[0]||(a[0]=[n("",36)])])}const g=t(s,[["render",d]]);export{u as __pageData,g as default};
package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js ADDED
@@ -0,0 +1,57 @@
1
+ import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Reka Bentuk Responsif","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/responsive.md","filePath":"ms/guide/responsive.md"}'),h={name:"ms/guide/responsive.md"};function l(p,s,k,e,E,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="reka-bentuk-responsif" tabindex="-1">Reka Bentuk Responsif <a class="header-anchor" href="#reka-bentuk-responsif" aria-label="Permalink to &quot;Reka Bentuk Responsif&quot;">​</a></h1><p>SenangStart menggunakan prefiks responsif mobile-first.</p><h2 id="titik-henti" tabindex="-1">Titik Henti <a class="header-anchor" href="#titik-henti" aria-label="Permalink to &quot;Titik Henti&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefiks</th><th>Min-Width</th><th>Peranti</th></tr></thead><tbody><tr><td>(tiada)</td><td>0px</td><td>Mudah alih (lalai)</td></tr><tr><td><code>mob:</code></td><td>480px</td><td>Mudah alih besar</td></tr><tr><td><code>tab:</code></td><td>768px</td><td>Tablet</td></tr><tr><td><code>lap:</code></td><td>1024px</td><td>Komputer riba</td></tr><tr><td><code>desk:</code></td><td>1280px</td><td>Desktop</td></tr></tbody></table><h2 id="penggunaan" tabindex="-1">Penggunaan <a class="header-anchor" href="#penggunaan" aria-label="Permalink to &quot;Penggunaan&quot;">​</a></h2><p>Tambah prefiks breakpoint kepada mana-mana nilai space atau layout:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Small padding pada mudah alih --&gt;</span></span>
3
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Medium padding pada tablet+ --&gt;</span></span>
4
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Big padding pada laptop+ --&gt;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="corak-biasa" tabindex="-1">Corak Biasa <a class="header-anchor" href="#corak-biasa" aria-label="Permalink to &quot;Corak Biasa&quot;">​</a></h2><h3 id="padding-responsif" tabindex="-1">Padding Responsif <a class="header-anchor" href="#padding-responsif" aria-label="Permalink to &quot;Padding Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium tab:p:big desk:p:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan dengan padding progresif</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="layout-responsif" tabindex="-1">Layout Responsif <a class="header-anchor" href="#layout-responsif" aria-label="Permalink to &quot;Layout Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col tab:row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Bertindih pada mudah alih, horizontal pada tablet+ --&gt;</span></span>
9
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Item 1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Item 2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="grid-responsif" tabindex="-1">Grid Responsif <a class="header-anchor" href="#grid-responsif" aria-label="Permalink to &quot;Grid Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
12
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span></span>
13
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium&quot;</span></span>
14
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));&quot;</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kad 1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kad 2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
18
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kad 3&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="sembunyi-pada-mudah-alih" tabindex="-1">Sembunyi pada Mudah Alih <a class="header-anchor" href="#sembunyi-pada-mudah-alih" aria-label="Permalink to &quot;Sembunyi pada Mudah Alih&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
20
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Tersembunyi pada mudah alih, flex pada tablet+ --&gt;</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="navigasi-mudah-alih" tabindex="-1">Navigasi Mudah Alih <a class="header-anchor" href="#navigasi-mudah-alih" aria-label="Permalink to &quot;Navigasi Mudah Alih&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Butang menu mudah alih --&gt;</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block tab:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;☰ Menu&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
+ <span class="line"></span>
24
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Navigasi desktop --&gt;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Laman Utama&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tentang&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hubungi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="contoh-responsif-penuh" tabindex="-1">Contoh Responsif Penuh <a class="header-anchor" href="#contoh-responsif-penuh" aria-label="Permalink to &quot;Contoh Responsif Penuh&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
30
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col lap:row&quot;</span></span>
31
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium tab:p:big gap:medium tab:gap:big&quot;</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Sidebar --&gt;</span></span>
34
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">aside</span></span>
35
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] lap:w:[300px]&quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:light&quot;</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan sidebar</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">aside</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
41
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Kandungan utama --&gt;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] lap:w:[calc(100%-300px)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan utama</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="titik-henti-tersuai" tabindex="-1">Titik Henti Tersuai <a class="header-anchor" href="#titik-henti-tersuai" aria-label="Permalink to &quot;Titik Henti Tersuai&quot;">​</a></h2><p>Tindih ganti dalam <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
46
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
47
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
48
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
49
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
50
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
51
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
52
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah breakpoint tersuai</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
54
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
55
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Guna breakpoint tersuai anda:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big wide:p:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
56
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Padding extra besar pada skrin lebar</span></span>
57
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,25)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Reka Bentuk Responsif","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/responsive.md","filePath":"ms/guide/responsive.md"}'),h={name:"ms/guide/responsive.md"};function l(p,s,k,e,E,d){return n(),a("div",null,[...s[0]||(s[0]=[t("",25)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js ADDED
@@ -0,0 +1,77 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Hover & Keadaan","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/states.md","filePath":"ms/guide/states.md"}'),l={name:"ms/guide/states.md"};function h(e,s,p,k,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t(`<h1 id="hover-keadaan" tabindex="-1">Hover &amp; Keadaan <a class="header-anchor" href="#hover-keadaan" aria-label="Permalink to &quot;Hover &amp; Keadaan&quot;">​</a></h1><p>Tambah gaya interaktif dengan prefiks keadaan.</p><h2 id="prefiks-keadaan" tabindex="-1">Prefiks Keadaan <a class="header-anchor" href="#prefiks-keadaan" aria-label="Permalink to &quot;Prefiks Keadaan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefiks</th><th>Pencetus</th></tr></thead><tbody><tr><td><code>hover:</code></td><td>Tetikus atas elemen</td></tr><tr><td><code>focus:</code></td><td>Elemen mempunyai fokus</td></tr><tr><td><code>active:</code></td><td>Elemen sedang diklik</td></tr><tr><td><code>disabled:</code></td><td>Elemen adalah disabled</td></tr></tbody></table><h2 id="penggunaan-asas" tabindex="-1">Penggunaan Asas <a class="header-anchor" href="#penggunaan-asas" aria-label="Permalink to &quot;Penggunaan Asas&quot;">​</a></h2><h3 id="hover" tabindex="-1">Hover <a class="header-anchor" href="#hover" aria-label="Permalink to &quot;Hover&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary hover:bg:[#2563EB] text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hover saya</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
4
+ <span class="line"></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Pautan dengan warna hover</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="focus" tabindex="-1">Focus <a class="header-anchor" href="#focus" aria-label="Permalink to &quot;Focus&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
8
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:grey focus:border:primary&quot;</span></span>
9
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h3 id="active" tabindex="-1">Active <a class="header-anchor" href="#active" aria-label="Permalink to &quot;Active&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary active:bg:[#1D4ED8]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Klik saya</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;Disabled&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary disabled:bg:grey disabled:opacity:[0.5]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hantar</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="corak-biasa" tabindex="-1">Corak Biasa <a class="header-anchor" href="#corak-biasa" aria-label="Permalink to &quot;Corak Biasa&quot;">​</a></h2><h3 id="butang-dengan-keadaan" tabindex="-1">Butang dengan Keadaan <a class="header-anchor" href="#butang-dengan-keadaan" aria-label="Permalink to &quot;Butang dengan Keadaan&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
15
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span></span>
16
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
17
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary </span></span>
18
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white </span></span>
19
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
20
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:[#2563EB]</span></span>
21
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:bg:[#1D4ED8]</span></span>
22
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> disabled:bg:grey</span></span>
23
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> disabled:opacity:[0.5]</span></span>
24
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hantar</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="kad-dengan-kesan-hover" tabindex="-1">Kad dengan Kesan Hover <a class="header-anchor" href="#kad-dengan-kesan-hover" aria-label="Permalink to &quot;Kad dengan Kesan Hover&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
28
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
29
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span></span>
30
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
31
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:white </span></span>
32
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:big </span></span>
33
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> shadow:small</span></span>
34
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:shadow:big</span></span>
35
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk Kad&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kandungan kad yang terangkat apabila hover.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="navigasi-pautan" tabindex="-1">Navigasi Pautan <a class="header-anchor" href="#navigasi-pautan" aria-label="Permalink to &quot;Navigasi Pautan&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark hover:text:primary font:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Laman Utama&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tentang&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hubungi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="input-dengan-cincin-fokus" tabindex="-1">Input dengan Cincin Fokus <a class="header-anchor" href="#input-dengan-cincin-fokus" aria-label="Permalink to &quot;Input dengan Cincin Fokus&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span></span>
44
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span></span>
45
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small w:[100%]&quot;</span></span>
46
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
47
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border:grey </span></span>
48
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border-w:[1px]</span></span>
49
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:small</span></span>
50
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> focus:border:primary</span></span>
51
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
52
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Masukkan emel anda&quot;</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h3 id="butang-toggle" tabindex="-1">Butang Toggle <a class="header-anchor" href="#butang-toggle" aria-label="Permalink to &quot;Butang Toggle&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
54
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
55
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
56
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:light</span></span>
57
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:dark</span></span>
58
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
59
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:grey</span></span>
60
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:bg:dark</span></span>
61
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:text:white</span></span>
62
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
63
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
64
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle</span></span>
65
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="menggabungkan-dengan-responsif" tabindex="-1">Menggabungkan dengan Responsif <a class="header-anchor" href="#menggabungkan-dengan-responsif" aria-label="Permalink to &quot;Menggabungkan dengan Responsif&quot;">​</a></h2><p>Keadaan boleh digabungkan dengan prefiks responsif:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
66
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary</span></span>
67
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:[#2563EB]</span></span>
68
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tab:hover:shadow:big</span></span>
69
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
70
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Bayang hover hanya pada tablet+</span></span>
71
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="nota-kebolehcapaian" tabindex="-1">Nota Kebolehcapaian <a class="header-anchor" href="#nota-kebolehcapaian" aria-label="Permalink to &quot;Nota Kebolehcapaian&quot;">​</a></h2><p>Sentiasa pastikan kontras warna yang mencukupi untuk keadaan hover dan focus. Keadaan <code>:focus</code> terutamanya penting untuk navigasi papan kekunci.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
72
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary</span></span>
73
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white</span></span>
74
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> focus:shadow:[0_0_0_3px_rgba(59,130,246,0.5)]</span></span>
75
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
76
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cincin fokus yang boleh diakses</span></span>
77
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,30)])])}const o=a(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Hover & Keadaan","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/states.md","filePath":"ms/guide/states.md"}'),l={name:"ms/guide/states.md"};function h(e,s,p,k,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t("",30)])])}const o=a(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js ADDED
@@ -0,0 +1,45 @@
1
+ import{_ as i,c as a,o as t,ae as h}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Sintaksis Tri-Atribusi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/tri-attribute.md","filePath":"ms/guide/tri-attribute.md"}'),l={name:"ms/guide/tri-attribute.md"};function n(k,s,p,e,E,d){return t(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="sintaksis-tri-atribusi" tabindex="-1">Sintaksis Tri-Atribusi <a class="header-anchor" href="#sintaksis-tri-atribusi" aria-label="Permalink to &quot;Sintaksis Tri-Atribusi&quot;">​</a></h1><p>SenangStart mengasingkan aspek stail kepada tiga atribusi yang berbeza.</p><h2 id="gambaran-keseluruhan" tabindex="-1">Gambaran Keseluruhan <a class="header-anchor" href="#gambaran-keseluruhan" aria-label="Permalink to &quot;Gambaran Keseluruhan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Atribusi</th><th>Tujuan</th><th>Contoh</th></tr></thead><tbody><tr><td><code>layout</code></td><td>Struktur &amp; kedudukan</td><td><code>layout=&quot;flex col center&quot;</code></td></tr><tr><td><code>space</code></td><td>Saiz &amp; jarak</td><td><code>space=&quot;p:medium g:small&quot;</code></td></tr><tr><td><code>visual</code></td><td>Warna &amp; penampilan</td><td><code>visual=&quot;bg:white rounded:big&quot;</code></td></tr></tbody></table><h2 id="mengapa-tiga-atribusi" tabindex="-1">Mengapa Tiga Atribusi? <a class="header-anchor" href="#mengapa-tiga-atribusi" aria-label="Permalink to &quot;Mengapa Tiga Atribusi?&quot;">​</a></h2><h3 id="kelas-css-tradisional-adalah-huru-hara" tabindex="-1">Kelas CSS tradisional adalah huru-hara: <a class="header-anchor" href="#kelas-css-tradisional-adalah-huru-hara" aria-label="Permalink to &quot;Kelas CSS tradisional adalah huru-hara:&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex flex-col items-center p-4 gap-2 bg-white rounded-lg shadow-md&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Semua bercampur aduk. Mana layout? Mana spacing? Mana visual?</p><h3 id="senangstart-adalah-teratur" tabindex="-1">SenangStart adalah teratur: <a class="header-anchor" href="#senangstart-adalah-teratur" aria-label="Permalink to &quot;SenangStart adalah teratur:&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
2
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
3
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium g:small&quot;</span></span>
4
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium&quot;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Pengasingan jelas.</strong> Sesiapa yang baca kod ini terus tahu:</p><ul><li><strong>Struktur:</strong> Flexbox column, di tengah</li><li><strong>Saiz:</strong> Medium padding, small gap</li><li><strong>Penampilan:</strong> Putih, bulat, berlorek</li></ul><h2 id="atribusi-layout" tabindex="-1">Atribusi <code>layout</code> <a class="header-anchor" href="#atribusi-layout" aria-label="Permalink to &quot;Atribusi \`layout\`&quot;">​</a></h2><p>Mengawal <strong>bagaimana elemen diposisikan</strong> dan <strong>bagaimana ia mengalir</strong>.</p><h3 id="jenis-paparan" tabindex="-1">Jenis Paparan <a class="header-anchor" href="#jenis-paparan" aria-label="Permalink to &quot;Jenis Paparan&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Flexbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Grid&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen Block&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen Tersembunyi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="arah-flex" tabindex="-1">Arah Flex <a class="header-anchor" href="#arah-flex" aria-label="Permalink to &quot;Arah Flex&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal (lalai)&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Menegak&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row-reverse&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal terbalik&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col-reverse&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Menegak terbalik&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="penjajaran" tabindex="-1">Penjajaran <a class="header-anchor" href="#penjajaran" aria-label="Permalink to &quot;Penjajaran&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tengah kedua-dua paksi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Jarak antara item&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex start&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Jajar ke permulaan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex end&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Jajar ke hujung&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="kedudukan" tabindex="-1">Kedudukan <a class="header-anchor" href="#kedudukan" aria-label="Permalink to &quot;Kedudukan&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Navigasi Fixed&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sticky&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen Sticky&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute z:high&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Absolute positioned&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;relative&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Relative positioned&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="atribusi-space" tabindex="-1">Atribusi <code>space</code> <a class="header-anchor" href="#atribusi-space" aria-label="Permalink to &quot;Atribusi \`space\`&quot;">​</a></h2><p>Mengawal <strong>saiz dan jarak</strong> menggunakan skala semula jadi.</p><h3 id="sintaksis" tabindex="-1">Sintaksis <a class="header-anchor" href="#sintaksis" aria-label="Permalink to &quot;Sintaksis&quot;">​</a></h3><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[breakpoint]:[property]:[scale]</span></span></code></pre></div><h3 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
18
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal &amp; menegak&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-t:small p-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Atas &amp; bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="margin" tabindex="-1">Margin <a class="header-anchor" href="#margin" aria-label="Permalink to &quot;Margin&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
20
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bawah sahaja&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tengah secara horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="sela-flex-grid" tabindex="-1">Sela (Flex/Grid) <a class="header-anchor" href="#sela-flex-grid" aria-label="Permalink to &quot;Sela (Flex/Grid)&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Small gap&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Medium gap&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="saiz" tabindex="-1">Saiz <a class="header-anchor" href="#saiz" aria-label="Permalink to &quot;Saiz&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] h:[400px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Saiz eksplisit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;max-w:[1200px] min-h:[80vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kekangan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="nilai-arbitrari-escape-hatch" tabindex="-1">Nilai Arbitrari (Escape Hatch) <a class="header-anchor" href="#nilai-arbitrari-escape-hatch" aria-label="Permalink to &quot;Nilai Arbitrari (Escape Hatch)&quot;">​</a></h3><p>Guna kurungan untuk nilai spesifik:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[350px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Lebar 350px&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:[20px_40px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;20px atas/bawah, 40px kiri/kanan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-t:[5rem]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;5rem margin atas&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="atribusi-visual" tabindex="-1">Atribusi <code>visual</code> <a class="header-anchor" href="#atribusi-visual" aria-label="Permalink to &quot;Atribusi \`visual\`&quot;">​</a></h2><p>Mengawal <strong>warna, tekstur, dan penampilan</strong>.</p><h3 id="latar-belakang" tabindex="-1">Latar Belakang <a class="header-anchor" href="#latar-belakang" aria-label="Permalink to &quot;Latar Belakang&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Latar belakang putih&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Warna primary&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#FF5733]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hex tersuai&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="teks" tabindex="-1">Teks <a class="header-anchor" href="#teks" aria-label="Permalink to &quot;Teks&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks gelap&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kelabu, teks kecil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks tebal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="sempadan-bayang" tabindex="-1">Sempadan &amp; Bayang <a class="header-anchor" href="#sempadan-bayang" aria-label="Permalink to &quot;Sempadan &amp; Bayang&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rounded:medium shadow:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bulat dengan bayang&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
30
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:grey border-w:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sempadan kelabu&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="menggabungkan-sari-diri" tabindex="-1">Menggabungkan Sari Diri <a class="header-anchor" href="#menggabungkan-sari-diri" aria-label="Permalink to &quot;Menggabungkan Sari Diri&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kad dengan pelbagai visual properties</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="menggabungkan-ketiga-tiga" tabindex="-1">Menggabungkan Ketiga-tiga <a class="header-anchor" href="#menggabungkan-ketiga-tiga" aria-label="Permalink to &quot;Menggabungkan Ketiga-tiga&quot;">​</a></h2><p>Berikut contoh lengkap:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
33
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
34
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[320px] p:medium g:small&quot;</span></span>
35
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium&quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk Kad&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Penerangan kad di sini.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
40
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span></span>
41
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:medium&quot;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tindakan</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Membaca kod ini:</strong></p><ul><li>Kontena adalah flex column menegak, lebar 320px, dengan medium padding, small gap, latar belakang putih, sudut bulat big, dan bayang medium</li><li>Tajuk adalah bold, teks big, warna dark</li><li>Butang mempunyai big horizontal padding, small vertical padding, latar belakang primary, teks putih, sudut bulat medium</li></ul>`,52)])])}const o=i(l,[["render",n]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as t,ae as h}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Sintaksis Tri-Atribusi","description":"","frontmatter":{},"headers":[],"relativePath":"ms/guide/tri-attribute.md","filePath":"ms/guide/tri-attribute.md"}'),l={name:"ms/guide/tri-attribute.md"};function n(k,s,p,e,E,d){return t(),a("div",null,[...s[0]||(s[0]=[h("",52)])])}const o=i(l,[["render",n]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js ADDED
@@ -0,0 +1,7 @@
1
+ import{_ as i,c as t,o as s,ae as n}from"./chunks/framework.I305HrzY.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SenangStart CSS","text":"Enjin CSS Niat Nan Utama","tagline":"Cakap Manusia. Kompil ke Logik.","image":{"src":"https://senangstart.com/img/use_senangstart.svg","alt":"SenangStart CSS"},"actions":[{"theme":"brand","text":"Bermula","link":"/ms/guide/getting-started"},{"theme":"alt","text":"Lihat di GitHub","link":"https://github.com/bookklik-technologies/senangstart-css"}]},"features":[{"icon":"🧠","title":"Bahasa Semula Jadi","details":"Guna tiny, small, medium, big, giant, vast — perkataan yang anda sudah tahu. Tak perlu hafal px-4, px-8, px-16."},{"icon":"🎯","title":"Pengasingan Tanggungjawab","details":"layout untuk struktur, space untuk saiz, visual untuk penampilan. Bersih, semantik, mudah diselenggara."},{"icon":"🤖","title":"Mesra AI","details":"Menghasilkan fail konteks untuk LLM. Cakap \\"ketatkan\\" dan AI tahu untuk kurangkan jarak."},{"icon":"⚡","title":"Pilihan Tanpa Bina","details":"Guna CDN JIT runtime untuk stail serta-merta. Tiada langkah bina diperlukan untuk prototaip."},{"icon":"📱","title":"Responsif Secara Rekaan","details":"Titik Henti mobile-first dengan prefiks intuitif seperti mob:, tab:, lap:, desk:."},{"icon":"🎨","title":"Boleh Disesuaikan Sepenuhnya","details":"Tindih ganti mana-mana skala, tambah warna tersuai, lanjutkan tema untuk padankan jenama anda."}]},"headers":[],"relativePath":"ms/index.md","filePath":"ms/index.md"}'),e={name:"ms/index.md"};function l(p,a,k,h,r,d){return s(),t("div",null,[...a[0]||(a[0]=[n(`<h2 id="contoh-pantas" tabindex="-1">Contoh Pantas <a class="header-anchor" href="#contoh-pantas" aria-label="Permalink to &quot;Contoh Pantas&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
2
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
3
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big&quot;</span></span>
4
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:big&quot;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Ini mencipta flexbox column, di tengah, dengan padding big, latar belakang primary, teks putih, dan sudut bulat big. <strong>Tiada kelas CSS untuk dihafal.</strong></p>`,3)])])}const g=i(e,[["render",l]]);export{u as __pageData,g as default};