@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/transform-perspective.md CHANGED
@@ -25,19 +25,36 @@ visual="perspective:[value]"
25
25
  <div visual="perspective:normal">3D container</div>
26
26
  ```
27
27
 
28
- ## Nilai Arbitrari
28
+ ## Pratonton
29
29
 
30
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Perspektif 3D
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective:normal"</code> - Kawal persepsi kedalaman 3D</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">perspective</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
31
43
 
32
44
  ```html
33
- <div visual="transform:[custom-value]">Custom</div>
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">perspective</div>
47
+ </div>
34
48
  ```
35
49
 
36
- ## Responsif
50
+ </details>
37
51
 
38
- ```html
39
- <!-- Contoh responsif -->
40
- <div visual="mob:... tab:... lap:...">
41
- Kandungan responsif
42
52
  </div>
53
+
54
+ ## Nilai Arbitrari
55
+
56
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
57
+
58
+ ```html
59
+ <div visual="transform:[custom-value]">Custom</div>
43
60
  ```
package/docs/ms/reference/visual/transform-rotate.md CHANGED
@@ -22,19 +22,40 @@ visual="rotate:[degrees]"
22
22
  <div visual="rotate:45">Rotated 45 degrees</div>
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
+ ### Transformasi Putaran
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="rotate:45"</code> - Putar elemen mengikut darjah</p>
33
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <div visual="transform:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</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="transform:[custom-value]">Custom</div>
40
61
  ```
package/docs/ms/reference/visual/transform-scale.md CHANGED
@@ -25,19 +25,40 @@ visual="scale:[value]"
25
25
  <div visual="transition:transform hover:scale:110">Hover to grow</div>
26
26
  ```
27
27
 
28
- ## Nilai Arbitrari
28
+ ## Pratonton
29
29
 
30
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Transformasi Skala
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scale:110"</code> - Skala elemen ke atas atau ke bawah</p>
36
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
39
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>Lihat Kod</summary>
31
45
 
32
46
  ```html
33
- <div visual="transform:[custom-value]">Custom</div>
47
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
51
+ </div>
34
52
  ```
35
53
 
36
- ## Responsif
54
+ </details>
37
55
 
38
- ```html
39
- <!-- Contoh responsif -->
40
- <div visual="mob:... tab:... lap:...">
41
- Kandungan responsif
42
56
  </div>
57
+
58
+ ## Nilai Arbitrari
59
+
60
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
61
+
62
+ ```html
63
+ <div visual="transform:[custom-value]">Custom</div>
43
64
  ```
package/docs/ms/reference/visual/transform-skew.md CHANGED
@@ -22,19 +22,40 @@ visual="skew-x:[degrees]" or visual="skew-y:[degrees]"
22
22
  <div visual="skew-x:6">Skewed element</div>
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
+ ### Transformasi Condong
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="skew-x:6"</code> - Condongkan elemen sepanjang paksi</p>
33
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <div visual="transform:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</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="transform:[custom-value]">Custom</div>
40
61
  ```
package/docs/ms/reference/visual/transform-style.md CHANGED
@@ -20,11 +20,30 @@ visual="transform-style:[value]"
20
20
  <div visual="transform-style:preserve-3d">3D space</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
+ ### Gaya Transformasi
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="transform-style:preserve-3d"</code> - Persembahan rata atau kekalkan 3D</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">flat</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</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">flat</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/transform-translate.md CHANGED
@@ -21,19 +21,40 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
21
21
  <div visual="translate-x:full">Moved right</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
+ ### Transformasi Alih
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="translate-x:full"</code> - Alihkan kedudukan elemen</p>
32
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
33
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
34
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
35
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
27
41
 
28
42
  ```html
29
- <div visual="transform:[custom-value]">Custom</div>
43
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
44
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
45
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
46
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
47
+ </div>
30
48
  ```
31
49
 
32
- ## Responsif
50
+ </details>
33
51
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
52
  </div>
53
+
54
+ ## Nilai Arbitrari
55
+
56
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
57
+
58
+ ```html
59
+ <div visual="transform:[custom-value]">Custom</div>
39
60
  ```
package/docs/ms/reference/visual/transition-delay.md CHANGED
@@ -23,19 +23,36 @@ visual="delay:[value]"
23
23
  <div visual="transition:all delay:slow">Delayed transition</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
+ ### Kelewatan Peralihan
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="delay:slow"</code> - Kelewatan sebelum peralihan bermula</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">delay:slow (300ms)</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
29
41
 
30
42
  ```html
31
- <div visual="transition:[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">delay:slow (300ms)</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="transition:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/transition-duration.md CHANGED
@@ -25,19 +25,38 @@ visual="duration:[value]"
25
25
  <div visual="transition:all duration:slow">Slow transition</div>
26
26
  ```
27
27
 
28
- ## Nilai Arbitrari
28
+ ## Pratonton
29
29
 
30
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Tempoh
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="duration:slow"</code> - Kawal kelajuan peralihan</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
31
44
 
32
45
  ```html
33
- <div visual="transition:[custom-value]">Custom</div>
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">fast: 150ms</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
49
+ </div>
34
50
  ```
35
51
 
36
- ## Responsif
52
+ </details>
37
53
 
38
- ```html
39
- <!-- Contoh responsif -->
40
- <div visual="mob:... tab:... lap:...">
41
- Kandungan responsif
42
54
  </div>
55
+
56
+ ## Nilai Arbitrari
57
+
58
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
59
+
60
+ ```html
61
+ <div visual="transition:[custom-value]">Custom</div>
43
62
  ```
package/docs/ms/reference/visual/transition-property.md CHANGED
@@ -24,11 +24,28 @@ visual="transition:[value]"
24
24
  <button visual="transition:all hover:bg:primary">Smooth hover</button>
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
+ ### Peralihan
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="transition:all"</code> - Perubahan properti yang lancar</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <!-- Contoh responsif -->
31
- <div visual="mob:... tab:... lap:...">
32
- Kandungan responsif
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
33
46
  </div>
34
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/ms/reference/visual/transition-timing.md CHANGED
@@ -22,19 +22,40 @@ visual="ease:[value]"
22
22
  <div visual="transition:all ease:out">Ease out effect</div>
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
+ ### Fungsi Masa
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="ease:out"</code> - Kawal lengkung pecutan</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">ease:in</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <div visual="transition:[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">ease:in</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</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="transition:[custom-value]">Custom</div>
40
61
  ```
package/docs/ms/reference/visual/typography-keywords.md CHANGED
@@ -71,11 +71,34 @@ visual="[keyword]"
71
71
  <span visual="truncate">Truncated text...</span>
72
72
  ```
73
73
 
74
- ## Responsif
74
+ ## Pratonton
75
+
76
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
77
+
78
+ ### Kata Kunci Tipografi
79
+
80
+ <div layout="flex col" space="g:medium">
81
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="italic"</code> - Utiliti tipografi pantas tanpa sintaks nilai</p>
82
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
83
+ <span style="font-style: italic;">italic</span>
84
+ <span style="text-transform: uppercase;">upper</span>
85
+ <span style="text-decoration: underline;">underline</span>
86
+ <span style="text-decoration: line-through;">strike</span>
87
+ </div>
88
+ </div>
89
+
90
+ <details>
91
+ <summary>Lihat Kod</summary>
75
92
 
76
93
  ```html
77
- <!-- Contoh responsif -->
78
- <div visual="mob:... tab:... lap:...">
79
- Kandungan responsif
94
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
95
+ <span style="font-style: italic;">italic</span>
96
+ <span style="text-transform: uppercase;">upper</span>
97
+ <span style="text-decoration: underline;">underline</span>
98
+ <span style="text-decoration: line-through;">strike</span>
80
99
  </div>
81
100
  ```
101
+
102
+ </details>
103
+
104
+ </div>
package/docs/ms/reference/visual/user-select.md CHANGED
@@ -22,11 +22,30 @@ visual="select:[value]"
22
22
  <div visual="select:none">Cannot select this text</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
+ ### Pemilihan Pengguna
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="select:none"</code> - Kawal sama ada teks boleh dipilih</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" style="user-select: none;">none (try select)</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
26
41
 
27
42
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
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" style="user-select: none;">none (try select)</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
31
46
  </div>
32
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/ms/reference/visual/vertical-align.md CHANGED
@@ -26,11 +26,32 @@ visual="align:[value]"
26
26
  <img visual="align:middle">Vertically centered</img>
27
27
  ```
28
28
 
29
- ## Responsif
29
+ ## Pratonton
30
+
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Penjajaran Menegak
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="align:middle"</code> - Jajarkan elemen sebaris</p>
37
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
39
+ <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
40
+ <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>Lihat Kod</summary>
30
46
 
31
47
  ```html
32
- <!-- Contoh responsif -->
33
- <div visual="mob:... tab:... lap:...">
34
- Kandungan responsif
48
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
51
+ <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
35
52
  </div>
36
53
  ```
54
+
55
+ </details>
56
+
57
+ </div>
package/docs/ms/reference/visual/whitespace.md CHANGED
@@ -24,11 +24,32 @@ visual="whitespace:[value]"
24
24
  <pre visual="whitespace:pre">Preserved whitespace</pre>
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
+ ### Ruang Putih
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="whitespace:pre"</code> - Kawal pengendalian ruang putih</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">normal</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">pre</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">normal</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/will-change.md CHANGED
@@ -23,11 +23,30 @@ visual="will-change:[value]"
23
23
  <div visual="will-change:transform">Optimized for animation</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
+ ### Akan Berubah
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="will-change:transform"</code> - Optimumkan untuk perubahan akan datang</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">transform</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
27
42
 
28
43
  ```html
29
- <!-- Contoh responsif -->
30
- <div visual="mob:... tab:... lap:...">
31
- 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">transform</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
32
47
  </div>
33
48
  ```
49
+
50
+ </details>
51
+
52
+ </div>