@bookklik/senangstart-css 0.1.7 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2269 -1955
  3. package/dist/senangstart-css.min.js +141 -1479
  4. package/docs/.vitepress/config.js +5 -3
  5. package/docs/.vitepress/theme/custom.css +0 -1
  6. package/docs/guide/responsive.md +25 -0
  7. package/docs/index.md +9 -21
  8. package/docs/ms/guide/responsive.md +25 -0
  9. package/docs/ms/index.md +9 -21
  10. package/docs/ms/reference/breakpoints.md +23 -0
  11. package/docs/ms/reference/layout/align-content.md +57 -4
  12. package/docs/ms/reference/layout/align-items.md +81 -4
  13. package/docs/ms/reference/layout/align-self.md +25 -4
  14. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  15. package/docs/ms/reference/layout/border-collapse.md +81 -4
  16. package/docs/ms/reference/layout/border-spacing.md +43 -8
  17. package/docs/ms/reference/layout/box-sizing.md +21 -4
  18. package/docs/ms/reference/layout/caption-side.md +69 -4
  19. package/docs/ms/reference/layout/columns.md +21 -4
  20. package/docs/ms/reference/layout/container.md +21 -4
  21. package/docs/ms/reference/layout/display.md +39 -7
  22. package/docs/ms/reference/layout/flex-basis.md +29 -8
  23. package/docs/ms/reference/layout/flex-direction.md +81 -4
  24. package/docs/ms/reference/layout/flex-items.md +51 -4
  25. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  26. package/docs/ms/reference/layout/flex.md +54 -7
  27. package/docs/ms/reference/layout/float-clear.md +23 -4
  28. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  29. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  30. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  31. package/docs/ms/reference/layout/grid-columns.md +61 -4
  32. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  33. package/docs/ms/reference/layout/grid-rows.md +31 -4
  34. package/docs/ms/reference/layout/inset.md +56 -7
  35. package/docs/ms/reference/layout/isolation.md +21 -4
  36. package/docs/ms/reference/layout/justify-content.md +81 -4
  37. package/docs/ms/reference/layout/justify-items.md +25 -4
  38. package/docs/ms/reference/layout/justify-self.md +25 -4
  39. package/docs/ms/reference/layout/object-fit.md +57 -4
  40. package/docs/ms/reference/layout/object-position.md +29 -8
  41. package/docs/ms/reference/layout/order.md +53 -4
  42. package/docs/ms/reference/layout/overflow.md +45 -4
  43. package/docs/ms/reference/layout/overscroll.md +21 -4
  44. package/docs/ms/reference/layout/place-content.md +23 -4
  45. package/docs/ms/reference/layout/place-items.md +25 -4
  46. package/docs/ms/reference/layout/place-self.md +25 -4
  47. package/docs/ms/reference/layout/position.md +47 -4
  48. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  49. package/docs/ms/reference/layout/table-layout.md +69 -4
  50. package/docs/ms/reference/layout/visibility.md +25 -4
  51. package/docs/ms/reference/layout/z-index.md +27 -4
  52. package/docs/ms/reference/space/gap.md +71 -7
  53. package/docs/ms/reference/space/height.md +61 -7
  54. package/docs/ms/reference/space/margin.md +61 -7
  55. package/docs/ms/reference/space/padding.md +65 -7
  56. package/docs/ms/reference/space/width.md +61 -7
  57. package/docs/ms/reference/visual/accent-color.md +29 -8
  58. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  59. package/docs/ms/reference/visual/animation-delay.md +25 -8
  60. package/docs/ms/reference/visual/animation-direction.md +25 -4
  61. package/docs/ms/reference/visual/animation-duration.md +27 -8
  62. package/docs/ms/reference/visual/animation-fill.md +25 -4
  63. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  64. package/docs/ms/reference/visual/animation-play.md +23 -4
  65. package/docs/ms/reference/visual/appearance.md +23 -4
  66. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  69. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  70. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  71. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  72. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  74. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  75. package/docs/ms/reference/visual/background-attachment.md +23 -4
  76. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  77. package/docs/ms/reference/visual/background-clip.md +21 -4
  78. package/docs/ms/reference/visual/background-color.md +33 -8
  79. package/docs/ms/reference/visual/background-image.md +27 -8
  80. package/docs/ms/reference/visual/background-origin.md +25 -4
  81. package/docs/ms/reference/visual/background-position.md +29 -8
  82. package/docs/ms/reference/visual/background-repeat.md +25 -4
  83. package/docs/ms/reference/visual/background-size.md +29 -8
  84. package/docs/ms/reference/visual/blend-modes.md +23 -4
  85. package/docs/ms/reference/visual/border-radius.md +36 -4
  86. package/docs/ms/reference/visual/border-style.md +25 -4
  87. package/docs/ms/reference/visual/border-width.md +29 -8
  88. package/docs/ms/reference/visual/border.md +56 -7
  89. package/docs/ms/reference/visual/box-shadow.md +34 -4
  90. package/docs/ms/reference/visual/caret-color.md +25 -8
  91. package/docs/ms/reference/visual/color-scheme.md +23 -4
  92. package/docs/ms/reference/visual/cursor.md +25 -4
  93. package/docs/ms/reference/visual/field-sizing.md +23 -4
  94. package/docs/ms/reference/visual/fill.md +29 -8
  95. package/docs/ms/reference/visual/filter-blur.md +29 -8
  96. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  97. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  98. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  99. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  100. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  101. package/docs/ms/reference/visual/filter-invert.md +27 -8
  102. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  103. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  104. package/docs/ms/reference/visual/font-family.md +25 -4
  105. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  106. package/docs/ms/reference/visual/font-style.md +23 -4
  107. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  108. package/docs/ms/reference/visual/font-weight.md +35 -4
  109. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  110. package/docs/ms/reference/visual/hyphens.md +25 -4
  111. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  112. package/docs/ms/reference/visual/line-clamp.md +29 -8
  113. package/docs/ms/reference/visual/line-height.md +29 -8
  114. package/docs/ms/reference/visual/list-style.md +25 -4
  115. package/docs/ms/reference/visual/mask.md +25 -8
  116. package/docs/ms/reference/visual/opacity.md +27 -4
  117. package/docs/ms/reference/visual/outline.md +25 -8
  118. package/docs/ms/reference/visual/pointer-events.md +23 -4
  119. package/docs/ms/reference/visual/resize.md +27 -4
  120. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  121. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  122. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  123. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  124. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  125. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  126. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  127. package/docs/ms/reference/visual/stroke-width.md +29 -8
  128. package/docs/ms/reference/visual/stroke.md +27 -8
  129. package/docs/ms/reference/visual/text-alignment.md +25 -4
  130. package/docs/ms/reference/visual/text-color.md +31 -8
  131. package/docs/ms/reference/visual/text-decoration.md +23 -4
  132. package/docs/ms/reference/visual/text-indent.md +25 -8
  133. package/docs/ms/reference/visual/text-overflow.md +21 -4
  134. package/docs/ms/reference/visual/text-shadow.md +25 -8
  135. package/docs/ms/reference/visual/text-size.md +41 -7
  136. package/docs/ms/reference/visual/text-transform.md +25 -4
  137. package/docs/ms/reference/visual/text-wrap.md +25 -4
  138. package/docs/ms/reference/visual/touch-action.md +25 -4
  139. package/docs/ms/reference/visual/transform-backface.md +23 -4
  140. package/docs/ms/reference/visual/transform-origin.md +27 -8
  141. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  142. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  143. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  144. package/docs/ms/reference/visual/transform-scale.md +29 -8
  145. package/docs/ms/reference/visual/transform-skew.md +29 -8
  146. package/docs/ms/reference/visual/transform-style.md +23 -4
  147. package/docs/ms/reference/visual/transform-translate.md +29 -8
  148. package/docs/ms/reference/visual/transition-delay.md +25 -8
  149. package/docs/ms/reference/visual/transition-duration.md +27 -8
  150. package/docs/ms/reference/visual/transition-property.md +21 -4
  151. package/docs/ms/reference/visual/transition-timing.md +29 -8
  152. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  153. package/docs/ms/reference/visual/user-select.md +23 -4
  154. package/docs/ms/reference/visual/vertical-align.md +25 -4
  155. package/docs/ms/reference/visual/whitespace.md +25 -4
  156. package/docs/ms/reference/visual/will-change.md +23 -4
  157. package/docs/ms/reference/visual/word-break.md +25 -4
  158. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  159. package/docs/reference/breakpoints.md +23 -0
  160. package/docs/reference/layout/align-content.md +57 -4
  161. package/docs/reference/layout/align-items.md +81 -4
  162. package/docs/reference/layout/align-self.md +25 -4
  163. package/docs/reference/layout/aspect-ratio.md +27 -8
  164. package/docs/reference/layout/border-collapse.md +81 -4
  165. package/docs/reference/layout/border-spacing.md +43 -8
  166. package/docs/reference/layout/box-sizing.md +21 -4
  167. package/docs/reference/layout/caption-side.md +69 -4
  168. package/docs/reference/layout/columns.md +21 -4
  169. package/docs/reference/layout/container.md +21 -4
  170. package/docs/reference/layout/display.md +39 -7
  171. package/docs/reference/layout/flex-basis.md +29 -8
  172. package/docs/reference/layout/flex-direction.md +81 -4
  173. package/docs/reference/layout/flex-items.md +51 -4
  174. package/docs/reference/layout/flex-wrap.md +55 -4
  175. package/docs/reference/layout/flex.md +54 -7
  176. package/docs/reference/layout/float-clear.md +23 -4
  177. package/docs/reference/layout/grid-auto-flow.md +57 -4
  178. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  179. package/docs/reference/layout/grid-column-span.md +59 -4
  180. package/docs/reference/layout/grid-columns.md +61 -4
  181. package/docs/reference/layout/grid-row-span.md +29 -4
  182. package/docs/reference/layout/grid-rows.md +31 -4
  183. package/docs/reference/layout/inset.md +56 -7
  184. package/docs/reference/layout/isolation.md +21 -4
  185. package/docs/reference/layout/justify-content.md +81 -4
  186. package/docs/reference/layout/justify-items.md +25 -4
  187. package/docs/reference/layout/justify-self.md +25 -4
  188. package/docs/reference/layout/object-fit.md +57 -4
  189. package/docs/reference/layout/object-position.md +29 -8
  190. package/docs/reference/layout/order.md +53 -4
  191. package/docs/reference/layout/overflow.md +45 -4
  192. package/docs/reference/layout/overscroll.md +21 -4
  193. package/docs/reference/layout/place-content.md +23 -4
  194. package/docs/reference/layout/place-items.md +25 -4
  195. package/docs/reference/layout/place-self.md +25 -4
  196. package/docs/reference/layout/position.md +47 -4
  197. package/docs/reference/layout/shorthand-alignment.md +47 -4
  198. package/docs/reference/layout/table-layout.md +69 -4
  199. package/docs/reference/layout/visibility.md +25 -4
  200. package/docs/reference/layout/z-index.md +27 -4
  201. package/docs/reference/space/gap.md +71 -7
  202. package/docs/reference/space/height.md +61 -7
  203. package/docs/reference/space/margin.md +61 -7
  204. package/docs/reference/space/padding.md +65 -7
  205. package/docs/reference/space/width.md +61 -7
  206. package/docs/reference/visual/accent-color.md +29 -8
  207. package/docs/reference/visual/animation-builtin.md +29 -8
  208. package/docs/reference/visual/animation-delay.md +25 -8
  209. package/docs/reference/visual/animation-direction.md +25 -4
  210. package/docs/reference/visual/animation-duration.md +27 -8
  211. package/docs/reference/visual/animation-fill.md +25 -4
  212. package/docs/reference/visual/animation-iteration.md +23 -4
  213. package/docs/reference/visual/animation-play.md +23 -4
  214. package/docs/reference/visual/appearance.md +23 -4
  215. package/docs/reference/visual/backdrop-blur.md +29 -8
  216. package/docs/reference/visual/backdrop-brightness.md +29 -8
  217. package/docs/reference/visual/backdrop-contrast.md +29 -8
  218. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  219. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  220. package/docs/reference/visual/backdrop-invert.md +27 -8
  221. package/docs/reference/visual/backdrop-opacity.md +29 -8
  222. package/docs/reference/visual/backdrop-saturate.md +29 -8
  223. package/docs/reference/visual/backdrop-sepia.md +27 -8
  224. package/docs/reference/visual/background-attachment.md +23 -4
  225. package/docs/reference/visual/background-blend-mode.md +25 -4
  226. package/docs/reference/visual/background-clip.md +21 -4
  227. package/docs/reference/visual/background-color.md +33 -8
  228. package/docs/reference/visual/background-image.md +27 -8
  229. package/docs/reference/visual/background-origin.md +25 -4
  230. package/docs/reference/visual/background-position.md +29 -8
  231. package/docs/reference/visual/background-repeat.md +25 -4
  232. package/docs/reference/visual/background-size.md +29 -8
  233. package/docs/reference/visual/blend-modes.md +23 -4
  234. package/docs/reference/visual/border-radius.md +36 -4
  235. package/docs/reference/visual/border-style.md +25 -4
  236. package/docs/reference/visual/border-width.md +29 -8
  237. package/docs/reference/visual/border.md +56 -7
  238. package/docs/reference/visual/box-shadow.md +34 -4
  239. package/docs/reference/visual/caret-color.md +25 -8
  240. package/docs/reference/visual/color-scheme.md +23 -4
  241. package/docs/reference/visual/cursor.md +25 -4
  242. package/docs/reference/visual/field-sizing.md +23 -4
  243. package/docs/reference/visual/fill.md +29 -8
  244. package/docs/reference/visual/filter-blur.md +29 -8
  245. package/docs/reference/visual/filter-brightness.md +29 -8
  246. package/docs/reference/visual/filter-contrast.md +29 -8
  247. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  248. package/docs/reference/visual/filter-grayscale.md +29 -8
  249. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  250. package/docs/reference/visual/filter-invert.md +27 -8
  251. package/docs/reference/visual/filter-saturate.md +29 -8
  252. package/docs/reference/visual/filter-sepia.md +29 -8
  253. package/docs/reference/visual/font-family.md +25 -4
  254. package/docs/reference/visual/font-smoothing.md +23 -4
  255. package/docs/reference/visual/font-style.md +23 -4
  256. package/docs/reference/visual/font-variant-numeric.md +23 -4
  257. package/docs/reference/visual/font-weight.md +35 -4
  258. package/docs/reference/visual/forced-color-adjust.md +23 -4
  259. package/docs/reference/visual/hyphens.md +25 -4
  260. package/docs/reference/visual/letter-spacing.md +29 -8
  261. package/docs/reference/visual/line-clamp.md +29 -8
  262. package/docs/reference/visual/line-height.md +29 -8
  263. package/docs/reference/visual/list-style.md +25 -4
  264. package/docs/reference/visual/mask.md +25 -8
  265. package/docs/reference/visual/opacity.md +27 -4
  266. package/docs/reference/visual/outline.md +25 -8
  267. package/docs/reference/visual/pointer-events.md +23 -4
  268. package/docs/reference/visual/resize.md +27 -4
  269. package/docs/reference/visual/scroll-behavior.md +23 -4
  270. package/docs/reference/visual/scroll-margin.md +25 -8
  271. package/docs/reference/visual/scroll-padding.md +25 -8
  272. package/docs/reference/visual/scroll-snap-align.md +25 -4
  273. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  274. package/docs/reference/visual/scroll-snap-type.md +25 -4
  275. package/docs/reference/visual/state-prefixes.md +21 -4
  276. package/docs/reference/visual/stroke-width.md +29 -8
  277. package/docs/reference/visual/stroke.md +27 -8
  278. package/docs/reference/visual/text-alignment.md +25 -4
  279. package/docs/reference/visual/text-color.md +31 -8
  280. package/docs/reference/visual/text-decoration.md +23 -4
  281. package/docs/reference/visual/text-indent.md +25 -8
  282. package/docs/reference/visual/text-overflow.md +21 -4
  283. package/docs/reference/visual/text-shadow.md +25 -8
  284. package/docs/reference/visual/text-size.md +41 -7
  285. package/docs/reference/visual/text-transform.md +25 -4
  286. package/docs/reference/visual/text-wrap.md +25 -4
  287. package/docs/reference/visual/touch-action.md +25 -4
  288. package/docs/reference/visual/transform-backface.md +23 -4
  289. package/docs/reference/visual/transform-origin.md +27 -8
  290. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  291. package/docs/reference/visual/transform-perspective.md +25 -8
  292. package/docs/reference/visual/transform-rotate.md +29 -8
  293. package/docs/reference/visual/transform-scale.md +29 -8
  294. package/docs/reference/visual/transform-skew.md +29 -8
  295. package/docs/reference/visual/transform-style.md +23 -4
  296. package/docs/reference/visual/transform-translate.md +29 -8
  297. package/docs/reference/visual/transition-delay.md +25 -8
  298. package/docs/reference/visual/transition-duration.md +27 -8
  299. package/docs/reference/visual/transition-property.md +21 -4
  300. package/docs/reference/visual/transition-timing.md +29 -8
  301. package/docs/reference/visual/typography-keywords.md +27 -4
  302. package/docs/reference/visual/user-select.md +23 -4
  303. package/docs/reference/visual/vertical-align.md +25 -4
  304. package/docs/reference/visual/whitespace.md +25 -4
  305. package/docs/reference/visual/will-change.md +23 -4
  306. package/docs/reference/visual/word-break.md +25 -4
  307. package/package.json +4 -3
  308. package/playground/jit-tw-mix-test.html +238 -0
  309. package/playground/tw-convertor.html +696 -0
  310. package/scripts/build-dist.js +34 -29
  311. package/scripts/bundle-jit.js +45 -0
  312. package/scripts/convert-tailwind.js +759 -0
  313. package/scripts/generate-docs.js +65 -16
  314. package/src/cdn/jit.js +313 -102
  315. package/src/cli/commands/build.js +14 -6
  316. package/src/cli/commands/dev.js +28 -10
  317. package/src/compiler/generators/css.js +187 -28
  318. package/src/compiler/parser.js +23 -10
  319. package/src/compiler/tokenizer.js +19 -137
  320. package/src/config/defaults.js +45 -18
  321. package/src/core/constants.js +427 -0
  322. package/src/core/tokenizer-core.js +233 -0
  323. package/src/definitions/layout-alignment.js +210 -0
  324. package/src/definitions/layout-flex.js +155 -0
  325. package/src/definitions/layout-grid.js +134 -0
  326. package/src/definitions/layout-positioning.js +64 -0
  327. package/src/definitions/layout-table.js +129 -0
  328. package/src/definitions/layout-utilities.js +164 -0
  329. package/src/definitions/space.js +172 -0
  330. package/src/definitions/visual-backgrounds.js +231 -0
  331. package/src/definitions/visual-borders.js +66 -0
  332. package/src/definitions/visual-filters.js +111 -0
  333. package/src/definitions/visual-interactivity.js +159 -0
  334. package/src/definitions/visual-svg.js +41 -0
  335. package/src/definitions/visual-transform3d.js +74 -0
  336. package/src/definitions/visual-transforms.js +69 -0
  337. package/src/definitions/visual-transitions.js +144 -0
  338. package/src/definitions/visual-typography.js +214 -0
  339. package/src/definitions/visual.js +306 -1
  340. package/tests/integration/compiler.test.js +63 -2
  341. package/tests/unit/convert-tailwind.test.js +324 -0
  342. package/tests/unit/security.test.js +206 -0
package/docs/ms/reference/visual/line-clamp.md CHANGED
@@ -22,19 +22,40 @@ visual="line-clamp:[value]"
22
22
  <p visual="line-clamp:3">Text limited to 3 lines...</p>
23
23
  ```
24
24
 
25
- ## Nilai Arbitrari
25
+ ## Pratonton
26
26
 
27
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Had Baris
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="line-clamp:3"</code> - Hadkan teks kepada baris tertentu</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">1</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">2</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">3</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <div visual="line:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">1</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">2</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">3</div>
48
+ </div>
31
49
  ```
32
50
 
33
- ## Responsif
51
+ </details>
34
52
 
35
- ```html
36
- <!-- Contoh responsif -->
37
- <div visual="mob:... tab:... lap:...">
38
- Kandungan responsif
39
53
  </div>
54
+
55
+ ## Nilai Arbitrari
56
+
57
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
58
+
59
+ ```html
60
+ <div visual="line:[custom-value]">Custom</div>
40
61
  ```
package/docs/ms/reference/visual/line-height.md CHANGED
@@ -24,19 +24,40 @@ visual="leading:[value]"
24
24
  <div visual="leading:relaxed">Relaxed line height</div>
25
25
  ```
26
26
 
27
- ## Nilai Arbitrari
27
+ ## Pratonton
28
28
 
29
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Ketinggian Baris
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="leading:relaxed"</code> - Kawal jarak menegak antara baris</p>
35
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <p style="line-height: 1; margin: 0;">Tight leading<br>for headings</p>
37
+ <p style="line-height: 1.5; margin: 0;">Normal leading<br>for body text</p>
38
+ <p style="line-height: 2; margin: 0;">Loose leading<br>for readability</p>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
30
44
 
31
45
  ```html
32
- <div visual="line:[custom-value]">Custom</div>
46
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <p style="line-height: 1; margin: 0;">Tight leading<br>for headings</p>
48
+ <p style="line-height: 1.5; margin: 0;">Normal leading<br>for body text</p>
49
+ <p style="line-height: 2; margin: 0;">Loose leading<br>for readability</p>
50
+ </div>
33
51
  ```
34
52
 
35
- ## Responsif
53
+ </details>
36
54
 
37
- ```html
38
- <!-- Contoh responsif -->
39
- <div visual="mob:... tab:... lap:...">
40
- Kandungan responsif
41
55
  </div>
56
+
57
+ ## Nilai Arbitrari
58
+
59
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
60
+
61
+ ```html
62
+ <div visual="line:[custom-value]">Custom</div>
42
63
  ```
package/docs/ms/reference/visual/list-style.md CHANGED
@@ -24,11 +24,32 @@ visual="list:[value]"
24
24
  <ul visual="list:none">No bullets</ul>
25
25
  ```
26
26
 
27
- ## Responsif
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Gaya Senarai
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="list:none"</code> - Kawal penanda senarai</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">disc</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">decimal</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
28
44
 
29
45
  ```html
30
- <!-- Contoh responsif -->
31
- <div visual="mob:... tab:... lap:...">
32
- Kandungan responsif
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">disc</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">decimal</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/mask.md CHANGED
@@ -21,19 +21,36 @@ visual="mask:[value]"
21
21
  <div visual="mask:fade-y">Faded edges</div>
22
22
  ```
23
23
 
24
- ## Nilai Arbitrari
24
+ ## Pratonton
25
25
 
26
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Topeng
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="mask:fade-y"</code> - Terapkan topeng kecerunan pada tepi</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:medium" visual="bg:primary text:white rounded:small">mask:fade-y</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
27
39
 
28
40
  ```html
29
- <div visual="mask:[custom-value]">Custom</div>
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:medium" visual="bg:primary text:white rounded:small">mask:fade-y</div>
43
+ </div>
30
44
  ```
31
45
 
32
- ## Responsif
46
+ </details>
33
47
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
48
  </div>
49
+
50
+ ## Nilai Arbitrari
51
+
52
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
53
+
54
+ ```html
55
+ <div visual="mask:[custom-value]">Custom</div>
39
56
  ```
package/docs/ms/reference/visual/opacity.md CHANGED
@@ -23,11 +23,34 @@ visual="opacity:[value]"
23
23
  <div visual="opacity:50">Half visible</div>
24
24
  ```
25
25
 
26
- ## Responsif
26
+ ## Pratonton
27
+
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Kelegapan
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="opacity:50"</code> - Kawal ketelusan elemen dari tidak kelihatan hingga sepenuhnya kelihatan</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.25;">25%</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.5;">50%</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.75;">75%</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 1;">100%</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
27
44
 
28
45
  ```html
29
- <!-- Contoh responsif -->
30
- <div visual="mob:... tab:... lap:...">
31
- Kandungan responsif
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.25;">25%</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.5;">50%</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.75;">75%</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 1;">100%</div>
32
51
  </div>
33
52
  ```
53
+
54
+ </details>
55
+
56
+ </div>
package/docs/ms/reference/visual/outline.md CHANGED
@@ -13,19 +13,36 @@ visual="outline:[color]"
13
13
  <button visual="focus:outline:primary">Focus outline</button>
14
14
  ```
15
15
 
16
- ## Nilai Arbitrari
16
+ ## Pratonton
17
17
 
18
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
18
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
19
+
20
+ ### Garis Luar
21
+
22
+ <div layout="flex col" space="g:medium">
23
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="outline:primary"</code> - Garis luar tidak mempengaruhi susun atur</p>
24
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
25
+ <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
26
+ </div>
27
+ </div>
28
+
29
+ <details>
30
+ <summary>Lihat Kod</summary>
19
31
 
20
32
  ```html
21
- <div visual="outline:[custom-value]">Custom</div>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
35
+ </div>
22
36
  ```
23
37
 
24
- ## Responsif
38
+ </details>
25
39
 
26
- ```html
27
- <!-- Contoh responsif -->
28
- <div visual="mob:... tab:... lap:...">
29
- Kandungan responsif
30
40
  </div>
41
+
42
+ ## Nilai Arbitrari
43
+
44
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
45
+
46
+ ```html
47
+ <div visual="outline:[custom-value]">Custom</div>
31
48
  ```
package/docs/ms/reference/visual/pointer-events.md CHANGED
@@ -20,11 +20,30 @@ visual="pointer-events:[value]"
20
20
  <div visual="pointer-events:none">Click through</div>
21
21
  ```
22
22
 
23
- ## Responsif
23
+ ## Pratonton
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Peristiwa Penunjuk
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="pointer-events:none"</code> - Jadikan elemen boleh klik tembus atau interaktif</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto (clickable)</div>
33
+ <div space="p:small" visual="bg:neutral-400 text:white rounded:small">none (click-through)</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
24
39
 
25
40
  ```html
26
- <!-- Contoh responsif -->
27
- <div visual="mob:... tab:... lap:...">
28
- Kandungan responsif
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto (clickable)</div>
43
+ <div space="p:small" visual="bg:neutral-400 text:white rounded:small">none (click-through)</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/resize.md CHANGED
@@ -22,11 +22,34 @@ visual="resize:[value]"
22
22
  <textarea visual="resize:y">Vertical resize only</textarea>
23
23
  ```
24
24
 
25
- ## Responsif
25
+ ## Pratonton
26
+
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Saiz Semula
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="resize:y"</code> - Benarkan saiz semula elemen</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
26
43
 
27
44
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
31
50
  </div>
32
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/scroll-behavior.md CHANGED
@@ -20,11 +20,30 @@ visual="scroll-behavior:[value]"
20
20
  <html visual="scroll-behavior:smooth">Smooth scrolling</html>
21
21
  ```
22
22
 
23
- ## Responsif
23
+ ## Pratonton
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Kelakuan Skrol
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scroll-behavior:smooth"</code> - Skrol lancar atau serta-merta</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
24
39
 
25
40
  ```html
26
- <!-- Contoh responsif -->
27
- <div visual="mob:... tab:... lap:...">
28
- Kandungan responsif
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/scroll-margin.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-m:[value]"
23
23
  <div visual="scroll-m:medium">Scroll margin</div>
24
24
  ```
25
25
 
26
- ## Nilai Arbitrari
26
+ ## Pratonton
27
27
 
28
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Margin Skrol
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scroll-m:medium"</code> - Offset untuk snap skrol</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsif
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/scroll-padding.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-p:[value]"
23
23
  <div visual="scroll-p:big">Scroll padding</div>
24
24
  ```
25
25
 
26
- ## Nilai Arbitrari
26
+ ## Pratonton
27
27
 
28
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Padding Skrol
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scroll-p:big"</code> - Padding untuk bekas snap skrol</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsif
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/scroll-snap-align.md CHANGED
@@ -22,11 +22,32 @@ visual="snap-align:[value]"
22
22
  <div visual="snap-align:start">Snap to start</div>
23
23
  ```
24
24
 
25
- ## Responsif
25
+ ## Pratonton
26
+
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Penjajaran Snap
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="snap-align:start"</code> - Tempat untuk snap dalam bekas</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
26
42
 
27
43
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual/scroll-snap-stop.md CHANGED
@@ -20,11 +20,30 @@ visual="snap-stop:[value]"
20
20
  <div visual="snap-stop:always">Always stop here</div>
21
21
  ```
22
22
 
23
- ## Responsif
23
+ ## Pratonton
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Hentian Snap
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="snap-stop:always"</code> - Kawal sama ada berhenti di titik snap</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
24
39
 
25
40
  ```html
26
- <!-- Contoh responsif -->
27
- <div visual="mob:... tab:... lap:...">
28
- Kandungan responsif
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/scroll-snap-type.md CHANGED
@@ -24,11 +24,32 @@ visual="snap-type:[value]"
24
24
  <div visual="snap-type:x">Horizontal snap container</div>
25
25
  ```
26
26
 
27
- ## Responsif
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Jenis Snap
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="snap-type:x"</code> - Dayakan snapping skrol</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
28
44
 
29
45
  ```html
30
- <!-- Contoh responsif -->
31
- <div visual="mob:... tab:... lap:...">
32
- Kandungan responsif
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/state-prefixes.md CHANGED
@@ -27,11 +27,28 @@ visual="hover:... focus:... active:..."
27
27
  <button visual="hover:bg:primary focus:outline:primary">Interactive button</button>
28
28
  ```
29
29
 
30
- ## Responsif
30
+ ## Pratonton
31
+
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Awalan Keadaan
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="hover:bg:primary"</code> - Terapkan gaya pada hover, fokus, dll.</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>Lihat Kod</summary>
31
45
 
32
46
  ```html
33
- <!-- Contoh responsif -->
34
- <div visual="mob:... tab:... lap:...">
35
- Kandungan responsif
47
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
36
49
  </div>
37
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>