@bookklik/senangstart-css 0.1.8 → 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 (341) 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 +2 -0
  5. package/docs/guide/responsive.md +25 -0
  6. package/docs/index.md +1 -1
  7. package/docs/ms/guide/responsive.md +25 -0
  8. package/docs/ms/index.md +1 -1
  9. package/docs/ms/reference/breakpoints.md +23 -0
  10. package/docs/ms/reference/layout/align-content.md +57 -4
  11. package/docs/ms/reference/layout/align-items.md +81 -4
  12. package/docs/ms/reference/layout/align-self.md +25 -4
  13. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  14. package/docs/ms/reference/layout/border-collapse.md +81 -4
  15. package/docs/ms/reference/layout/border-spacing.md +43 -8
  16. package/docs/ms/reference/layout/box-sizing.md +21 -4
  17. package/docs/ms/reference/layout/caption-side.md +69 -4
  18. package/docs/ms/reference/layout/columns.md +21 -4
  19. package/docs/ms/reference/layout/container.md +21 -4
  20. package/docs/ms/reference/layout/display.md +39 -7
  21. package/docs/ms/reference/layout/flex-basis.md +29 -8
  22. package/docs/ms/reference/layout/flex-direction.md +81 -4
  23. package/docs/ms/reference/layout/flex-items.md +51 -4
  24. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  25. package/docs/ms/reference/layout/flex.md +54 -7
  26. package/docs/ms/reference/layout/float-clear.md +23 -4
  27. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  28. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  29. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  30. package/docs/ms/reference/layout/grid-columns.md +61 -4
  31. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  32. package/docs/ms/reference/layout/grid-rows.md +31 -4
  33. package/docs/ms/reference/layout/inset.md +56 -7
  34. package/docs/ms/reference/layout/isolation.md +21 -4
  35. package/docs/ms/reference/layout/justify-content.md +81 -4
  36. package/docs/ms/reference/layout/justify-items.md +25 -4
  37. package/docs/ms/reference/layout/justify-self.md +25 -4
  38. package/docs/ms/reference/layout/object-fit.md +57 -4
  39. package/docs/ms/reference/layout/object-position.md +29 -8
  40. package/docs/ms/reference/layout/order.md +53 -4
  41. package/docs/ms/reference/layout/overflow.md +45 -4
  42. package/docs/ms/reference/layout/overscroll.md +21 -4
  43. package/docs/ms/reference/layout/place-content.md +23 -4
  44. package/docs/ms/reference/layout/place-items.md +25 -4
  45. package/docs/ms/reference/layout/place-self.md +25 -4
  46. package/docs/ms/reference/layout/position.md +47 -4
  47. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  48. package/docs/ms/reference/layout/table-layout.md +69 -4
  49. package/docs/ms/reference/layout/visibility.md +25 -4
  50. package/docs/ms/reference/layout/z-index.md +27 -4
  51. package/docs/ms/reference/space/gap.md +71 -7
  52. package/docs/ms/reference/space/height.md +61 -7
  53. package/docs/ms/reference/space/margin.md +61 -7
  54. package/docs/ms/reference/space/padding.md +65 -7
  55. package/docs/ms/reference/space/width.md +61 -7
  56. package/docs/ms/reference/visual/accent-color.md +29 -8
  57. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  58. package/docs/ms/reference/visual/animation-delay.md +25 -8
  59. package/docs/ms/reference/visual/animation-direction.md +25 -4
  60. package/docs/ms/reference/visual/animation-duration.md +27 -8
  61. package/docs/ms/reference/visual/animation-fill.md +25 -4
  62. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  63. package/docs/ms/reference/visual/animation-play.md +23 -4
  64. package/docs/ms/reference/visual/appearance.md +23 -4
  65. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  66. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  69. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  70. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  71. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  72. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  74. package/docs/ms/reference/visual/background-attachment.md +23 -4
  75. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  76. package/docs/ms/reference/visual/background-clip.md +21 -4
  77. package/docs/ms/reference/visual/background-color.md +33 -8
  78. package/docs/ms/reference/visual/background-image.md +27 -8
  79. package/docs/ms/reference/visual/background-origin.md +25 -4
  80. package/docs/ms/reference/visual/background-position.md +29 -8
  81. package/docs/ms/reference/visual/background-repeat.md +25 -4
  82. package/docs/ms/reference/visual/background-size.md +29 -8
  83. package/docs/ms/reference/visual/blend-modes.md +23 -4
  84. package/docs/ms/reference/visual/border-radius.md +36 -4
  85. package/docs/ms/reference/visual/border-style.md +25 -4
  86. package/docs/ms/reference/visual/border-width.md +29 -8
  87. package/docs/ms/reference/visual/border.md +56 -7
  88. package/docs/ms/reference/visual/box-shadow.md +34 -4
  89. package/docs/ms/reference/visual/caret-color.md +25 -8
  90. package/docs/ms/reference/visual/color-scheme.md +23 -4
  91. package/docs/ms/reference/visual/cursor.md +25 -4
  92. package/docs/ms/reference/visual/field-sizing.md +23 -4
  93. package/docs/ms/reference/visual/fill.md +29 -8
  94. package/docs/ms/reference/visual/filter-blur.md +29 -8
  95. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  96. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  97. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  98. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  99. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  100. package/docs/ms/reference/visual/filter-invert.md +27 -8
  101. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  102. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  103. package/docs/ms/reference/visual/font-family.md +25 -4
  104. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  105. package/docs/ms/reference/visual/font-style.md +23 -4
  106. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  107. package/docs/ms/reference/visual/font-weight.md +35 -4
  108. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  109. package/docs/ms/reference/visual/hyphens.md +25 -4
  110. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  111. package/docs/ms/reference/visual/line-clamp.md +29 -8
  112. package/docs/ms/reference/visual/line-height.md +29 -8
  113. package/docs/ms/reference/visual/list-style.md +25 -4
  114. package/docs/ms/reference/visual/mask.md +25 -8
  115. package/docs/ms/reference/visual/opacity.md +27 -4
  116. package/docs/ms/reference/visual/outline.md +25 -8
  117. package/docs/ms/reference/visual/pointer-events.md +23 -4
  118. package/docs/ms/reference/visual/resize.md +27 -4
  119. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  120. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  121. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  122. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  123. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  124. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  125. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  126. package/docs/ms/reference/visual/stroke-width.md +29 -8
  127. package/docs/ms/reference/visual/stroke.md +27 -8
  128. package/docs/ms/reference/visual/text-alignment.md +25 -4
  129. package/docs/ms/reference/visual/text-color.md +31 -8
  130. package/docs/ms/reference/visual/text-decoration.md +23 -4
  131. package/docs/ms/reference/visual/text-indent.md +25 -8
  132. package/docs/ms/reference/visual/text-overflow.md +21 -4
  133. package/docs/ms/reference/visual/text-shadow.md +25 -8
  134. package/docs/ms/reference/visual/text-size.md +41 -7
  135. package/docs/ms/reference/visual/text-transform.md +25 -4
  136. package/docs/ms/reference/visual/text-wrap.md +25 -4
  137. package/docs/ms/reference/visual/touch-action.md +25 -4
  138. package/docs/ms/reference/visual/transform-backface.md +23 -4
  139. package/docs/ms/reference/visual/transform-origin.md +27 -8
  140. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  141. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  142. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  143. package/docs/ms/reference/visual/transform-scale.md +29 -8
  144. package/docs/ms/reference/visual/transform-skew.md +29 -8
  145. package/docs/ms/reference/visual/transform-style.md +23 -4
  146. package/docs/ms/reference/visual/transform-translate.md +29 -8
  147. package/docs/ms/reference/visual/transition-delay.md +25 -8
  148. package/docs/ms/reference/visual/transition-duration.md +27 -8
  149. package/docs/ms/reference/visual/transition-property.md +21 -4
  150. package/docs/ms/reference/visual/transition-timing.md +29 -8
  151. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  152. package/docs/ms/reference/visual/user-select.md +23 -4
  153. package/docs/ms/reference/visual/vertical-align.md +25 -4
  154. package/docs/ms/reference/visual/whitespace.md +25 -4
  155. package/docs/ms/reference/visual/will-change.md +23 -4
  156. package/docs/ms/reference/visual/word-break.md +25 -4
  157. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  158. package/docs/reference/breakpoints.md +23 -0
  159. package/docs/reference/layout/align-content.md +57 -4
  160. package/docs/reference/layout/align-items.md +81 -4
  161. package/docs/reference/layout/align-self.md +25 -4
  162. package/docs/reference/layout/aspect-ratio.md +27 -8
  163. package/docs/reference/layout/border-collapse.md +81 -4
  164. package/docs/reference/layout/border-spacing.md +43 -8
  165. package/docs/reference/layout/box-sizing.md +21 -4
  166. package/docs/reference/layout/caption-side.md +69 -4
  167. package/docs/reference/layout/columns.md +21 -4
  168. package/docs/reference/layout/container.md +21 -4
  169. package/docs/reference/layout/display.md +39 -7
  170. package/docs/reference/layout/flex-basis.md +29 -8
  171. package/docs/reference/layout/flex-direction.md +81 -4
  172. package/docs/reference/layout/flex-items.md +51 -4
  173. package/docs/reference/layout/flex-wrap.md +55 -4
  174. package/docs/reference/layout/flex.md +54 -7
  175. package/docs/reference/layout/float-clear.md +23 -4
  176. package/docs/reference/layout/grid-auto-flow.md +57 -4
  177. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  178. package/docs/reference/layout/grid-column-span.md +59 -4
  179. package/docs/reference/layout/grid-columns.md +61 -4
  180. package/docs/reference/layout/grid-row-span.md +29 -4
  181. package/docs/reference/layout/grid-rows.md +31 -4
  182. package/docs/reference/layout/inset.md +56 -7
  183. package/docs/reference/layout/isolation.md +21 -4
  184. package/docs/reference/layout/justify-content.md +81 -4
  185. package/docs/reference/layout/justify-items.md +25 -4
  186. package/docs/reference/layout/justify-self.md +25 -4
  187. package/docs/reference/layout/object-fit.md +57 -4
  188. package/docs/reference/layout/object-position.md +29 -8
  189. package/docs/reference/layout/order.md +53 -4
  190. package/docs/reference/layout/overflow.md +45 -4
  191. package/docs/reference/layout/overscroll.md +21 -4
  192. package/docs/reference/layout/place-content.md +23 -4
  193. package/docs/reference/layout/place-items.md +25 -4
  194. package/docs/reference/layout/place-self.md +25 -4
  195. package/docs/reference/layout/position.md +47 -4
  196. package/docs/reference/layout/shorthand-alignment.md +47 -4
  197. package/docs/reference/layout/table-layout.md +69 -4
  198. package/docs/reference/layout/visibility.md +25 -4
  199. package/docs/reference/layout/z-index.md +27 -4
  200. package/docs/reference/space/gap.md +71 -7
  201. package/docs/reference/space/height.md +61 -7
  202. package/docs/reference/space/margin.md +61 -7
  203. package/docs/reference/space/padding.md +65 -7
  204. package/docs/reference/space/width.md +61 -7
  205. package/docs/reference/visual/accent-color.md +29 -8
  206. package/docs/reference/visual/animation-builtin.md +29 -8
  207. package/docs/reference/visual/animation-delay.md +25 -8
  208. package/docs/reference/visual/animation-direction.md +25 -4
  209. package/docs/reference/visual/animation-duration.md +27 -8
  210. package/docs/reference/visual/animation-fill.md +25 -4
  211. package/docs/reference/visual/animation-iteration.md +23 -4
  212. package/docs/reference/visual/animation-play.md +23 -4
  213. package/docs/reference/visual/appearance.md +23 -4
  214. package/docs/reference/visual/backdrop-blur.md +29 -8
  215. package/docs/reference/visual/backdrop-brightness.md +29 -8
  216. package/docs/reference/visual/backdrop-contrast.md +29 -8
  217. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  218. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  219. package/docs/reference/visual/backdrop-invert.md +27 -8
  220. package/docs/reference/visual/backdrop-opacity.md +29 -8
  221. package/docs/reference/visual/backdrop-saturate.md +29 -8
  222. package/docs/reference/visual/backdrop-sepia.md +27 -8
  223. package/docs/reference/visual/background-attachment.md +23 -4
  224. package/docs/reference/visual/background-blend-mode.md +25 -4
  225. package/docs/reference/visual/background-clip.md +21 -4
  226. package/docs/reference/visual/background-color.md +33 -8
  227. package/docs/reference/visual/background-image.md +27 -8
  228. package/docs/reference/visual/background-origin.md +25 -4
  229. package/docs/reference/visual/background-position.md +29 -8
  230. package/docs/reference/visual/background-repeat.md +25 -4
  231. package/docs/reference/visual/background-size.md +29 -8
  232. package/docs/reference/visual/blend-modes.md +23 -4
  233. package/docs/reference/visual/border-radius.md +36 -4
  234. package/docs/reference/visual/border-style.md +25 -4
  235. package/docs/reference/visual/border-width.md +29 -8
  236. package/docs/reference/visual/border.md +56 -7
  237. package/docs/reference/visual/box-shadow.md +34 -4
  238. package/docs/reference/visual/caret-color.md +25 -8
  239. package/docs/reference/visual/color-scheme.md +23 -4
  240. package/docs/reference/visual/cursor.md +25 -4
  241. package/docs/reference/visual/field-sizing.md +23 -4
  242. package/docs/reference/visual/fill.md +29 -8
  243. package/docs/reference/visual/filter-blur.md +29 -8
  244. package/docs/reference/visual/filter-brightness.md +29 -8
  245. package/docs/reference/visual/filter-contrast.md +29 -8
  246. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  247. package/docs/reference/visual/filter-grayscale.md +29 -8
  248. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  249. package/docs/reference/visual/filter-invert.md +27 -8
  250. package/docs/reference/visual/filter-saturate.md +29 -8
  251. package/docs/reference/visual/filter-sepia.md +29 -8
  252. package/docs/reference/visual/font-family.md +25 -4
  253. package/docs/reference/visual/font-smoothing.md +23 -4
  254. package/docs/reference/visual/font-style.md +23 -4
  255. package/docs/reference/visual/font-variant-numeric.md +23 -4
  256. package/docs/reference/visual/font-weight.md +35 -4
  257. package/docs/reference/visual/forced-color-adjust.md +23 -4
  258. package/docs/reference/visual/hyphens.md +25 -4
  259. package/docs/reference/visual/letter-spacing.md +29 -8
  260. package/docs/reference/visual/line-clamp.md +29 -8
  261. package/docs/reference/visual/line-height.md +29 -8
  262. package/docs/reference/visual/list-style.md +25 -4
  263. package/docs/reference/visual/mask.md +25 -8
  264. package/docs/reference/visual/opacity.md +27 -4
  265. package/docs/reference/visual/outline.md +25 -8
  266. package/docs/reference/visual/pointer-events.md +23 -4
  267. package/docs/reference/visual/resize.md +27 -4
  268. package/docs/reference/visual/scroll-behavior.md +23 -4
  269. package/docs/reference/visual/scroll-margin.md +25 -8
  270. package/docs/reference/visual/scroll-padding.md +25 -8
  271. package/docs/reference/visual/scroll-snap-align.md +25 -4
  272. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  273. package/docs/reference/visual/scroll-snap-type.md +25 -4
  274. package/docs/reference/visual/state-prefixes.md +21 -4
  275. package/docs/reference/visual/stroke-width.md +29 -8
  276. package/docs/reference/visual/stroke.md +27 -8
  277. package/docs/reference/visual/text-alignment.md +25 -4
  278. package/docs/reference/visual/text-color.md +31 -8
  279. package/docs/reference/visual/text-decoration.md +23 -4
  280. package/docs/reference/visual/text-indent.md +25 -8
  281. package/docs/reference/visual/text-overflow.md +21 -4
  282. package/docs/reference/visual/text-shadow.md +25 -8
  283. package/docs/reference/visual/text-size.md +41 -7
  284. package/docs/reference/visual/text-transform.md +25 -4
  285. package/docs/reference/visual/text-wrap.md +25 -4
  286. package/docs/reference/visual/touch-action.md +25 -4
  287. package/docs/reference/visual/transform-backface.md +23 -4
  288. package/docs/reference/visual/transform-origin.md +27 -8
  289. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  290. package/docs/reference/visual/transform-perspective.md +25 -8
  291. package/docs/reference/visual/transform-rotate.md +29 -8
  292. package/docs/reference/visual/transform-scale.md +29 -8
  293. package/docs/reference/visual/transform-skew.md +29 -8
  294. package/docs/reference/visual/transform-style.md +23 -4
  295. package/docs/reference/visual/transform-translate.md +29 -8
  296. package/docs/reference/visual/transition-delay.md +25 -8
  297. package/docs/reference/visual/transition-duration.md +27 -8
  298. package/docs/reference/visual/transition-property.md +21 -4
  299. package/docs/reference/visual/transition-timing.md +29 -8
  300. package/docs/reference/visual/typography-keywords.md +27 -4
  301. package/docs/reference/visual/user-select.md +23 -4
  302. package/docs/reference/visual/vertical-align.md +25 -4
  303. package/docs/reference/visual/whitespace.md +25 -4
  304. package/docs/reference/visual/will-change.md +23 -4
  305. package/docs/reference/visual/word-break.md +25 -4
  306. package/package.json +2 -1
  307. package/playground/jit-tw-mix-test.html +238 -0
  308. package/playground/tw-convertor.html +696 -0
  309. package/scripts/build-dist.js +34 -29
  310. package/scripts/bundle-jit.js +45 -0
  311. package/scripts/convert-tailwind.js +759 -0
  312. package/scripts/generate-docs.js +65 -16
  313. package/src/cdn/jit.js +313 -102
  314. package/src/cli/commands/build.js +14 -6
  315. package/src/cli/commands/dev.js +28 -10
  316. package/src/compiler/generators/css.js +187 -28
  317. package/src/compiler/parser.js +23 -10
  318. package/src/compiler/tokenizer.js +19 -137
  319. package/src/config/defaults.js +45 -18
  320. package/src/core/constants.js +427 -0
  321. package/src/core/tokenizer-core.js +233 -0
  322. package/src/definitions/layout-alignment.js +210 -0
  323. package/src/definitions/layout-flex.js +155 -0
  324. package/src/definitions/layout-grid.js +134 -0
  325. package/src/definitions/layout-positioning.js +64 -0
  326. package/src/definitions/layout-table.js +129 -0
  327. package/src/definitions/layout-utilities.js +164 -0
  328. package/src/definitions/space.js +172 -0
  329. package/src/definitions/visual-backgrounds.js +231 -0
  330. package/src/definitions/visual-borders.js +66 -0
  331. package/src/definitions/visual-filters.js +111 -0
  332. package/src/definitions/visual-interactivity.js +159 -0
  333. package/src/definitions/visual-svg.js +41 -0
  334. package/src/definitions/visual-transform3d.js +74 -0
  335. package/src/definitions/visual-transforms.js +69 -0
  336. package/src/definitions/visual-transitions.js +144 -0
  337. package/src/definitions/visual-typography.js +214 -0
  338. package/src/definitions/visual.js +306 -1
  339. package/tests/integration/compiler.test.js +63 -2
  340. package/tests/unit/convert-tailwind.test.js +324 -0
  341. package/tests/unit/security.test.js +206 -0
package/docs/ms/reference/space/height.md CHANGED
@@ -26,19 +26,73 @@ space="h:[value]"
26
26
  <div space="min-h:[400px]">Min height</div>
27
27
  ```
28
28
 
29
- ## Nilai Arbitrari
29
+ ## Pratonton
30
30
 
31
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
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
+ ### Kawal Tinggi
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>space="h:[100%]"</code> - Tetapkan tinggi tetap</p>
37
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
38
+ <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
39
+ <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
40
+ <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>Lihat Kod</summary>
32
46
 
33
47
  ```html
34
- <div space="height:[custom-value]">Custom</div>
48
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
49
+ <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
50
+ <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
51
+ <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
52
+ </div>
35
53
  ```
36
54
 
37
- ## Responsif
55
+ </details>
56
+
57
+ </div>
58
+
59
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
60
+
61
+ ### Tinggi Minimum
62
+
63
+ <div layout="flex col" space="g:medium">
64
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:[80px]"</code> - Tetapkan kekangan tinggi minimum</p>
65
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
66
+ <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
67
+ </div>
68
+ </div>
69
+
70
+ <details>
71
+ <summary>Lihat Kod</summary>
38
72
 
39
73
  ```html
40
- <!-- Contoh responsif -->
41
- <div space="mob:... tab:... lap:...">
42
- Kandungan responsif
74
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
75
+ <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
43
76
  </div>
44
77
  ```
78
+
79
+ </details>
80
+
81
+ </div>
82
+
83
+ ## Nilai Arbitrari
84
+
85
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
86
+
87
+ ```html
88
+ <div space="height:[custom-value]">Custom</div>
89
+ ```
90
+
91
+ ## Nota
92
+
93
+ > [!TIP]
94
+ > **Sokongan Skala Tailwind**
95
+ >
96
+ > Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `h:tw-64` (16rem), `min-h:tw-96` (24rem)
97
+ >
98
+ > [Rujukan](https://tailwindcss.com/docs/height)
package/docs/ms/reference/space/margin.md CHANGED
@@ -31,19 +31,73 @@ space="m:[value]" or space="m-{side}:[value]"
31
31
  <div space="m-t:big">Top margin</div>
32
32
  ```
33
33
 
34
- ## Nilai Arbitrari
34
+ ## Pratonton
35
35
 
36
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
36
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
37
+
38
+ ### Skala Margin
39
+
40
+ <div layout="flex col" space="g:medium">
41
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="m:medium"</code> - Saiz margin berbeza dari skala</p>
42
+ <div layout="flex col" space="g:tiny p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <div space="m:tiny" visual="bg:primary text:white rounded:small">m:tiny</div>
44
+ <div space="m:small" visual="bg:primary text:white rounded:small">m:small</div>
45
+ <div space="m:medium" visual="bg:primary text:white rounded:small">m:medium</div>
46
+ </div>
47
+ </div>
48
+
49
+ <details>
50
+ <summary>Lihat Kod</summary>
37
51
 
38
52
  ```html
39
- <div space="margin:[custom-value]">Custom</div>
53
+ <div layout="flex col" space="g:tiny p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
54
+ <div space="m:tiny" visual="bg:primary text:white rounded:small">m:tiny</div>
55
+ <div space="m:small" visual="bg:primary text:white rounded:small">m:small</div>
56
+ <div space="m:medium" visual="bg:primary text:white rounded:small">m:medium</div>
57
+ </div>
40
58
  ```
41
59
 
42
- ## Responsif
60
+ </details>
61
+
62
+ </div>
63
+
64
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
65
+
66
+ ### Tengah Automatik
67
+
68
+ <div layout="flex col" space="g:medium">
69
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="m-x:auto"</code> - Guna m-x:auto untuk tengahkan mendatar</p>
70
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
71
+ <div space="m-x:auto p:small" visual="bg:primary text:white rounded:small" style="width: fit-content;">m-x:auto</div>
72
+ </div>
73
+ </div>
74
+
75
+ <details>
76
+ <summary>Lihat Kod</summary>
43
77
 
44
78
  ```html
45
- <!-- Contoh responsif -->
46
- <div space="mob:... tab:... lap:...">
47
- Kandungan responsif
79
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
80
+ <div space="m-x:auto p:small" visual="bg:primary text:white rounded:small" style="width: fit-content;">m-x:auto</div>
48
81
  </div>
49
82
  ```
83
+
84
+ </details>
85
+
86
+ </div>
87
+
88
+ ## Nilai Arbitrari
89
+
90
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
91
+
92
+ ```html
93
+ <div space="margin:[custom-value]">Custom</div>
94
+ ```
95
+
96
+ ## Nota
97
+
98
+ > [!TIP]
99
+ > **Sokongan Skala Tailwind**
100
+ >
101
+ > Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `m:tw-4` (1rem), `m-t:tw-8` (2rem)
102
+ >
103
+ > [Rujukan](https://tailwindcss.com/docs/margin)
package/docs/ms/reference/space/padding.md CHANGED
@@ -31,19 +31,77 @@ space="p:[value]" or space="p-{side}:[value]"
31
31
  <div space="p:[20px]">Custom padding</div>
32
32
  ```
33
33
 
34
- ## Nilai Arbitrari
34
+ ## Pratonton
35
35
 
36
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
36
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
37
+
38
+ ### Skala Padding
39
+
40
+ <div layout="flex col" space="g:medium">
41
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="p:medium"</code> - Saiz padding berbeza dari skala</p>
42
+ <div layout="flex" space="g:small">
43
+ <div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
45
+ <div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
46
+ <div space="p:big" visual="bg:primary text:white rounded:small">big</div>
47
+ </div>
48
+ </div>
49
+
50
+ <details>
51
+ <summary>Lihat Kod</summary>
37
52
 
38
53
  ```html
39
- <div space="padding:[custom-value]">Custom</div>
54
+ <div layout="flex" space="g:small">
55
+ <div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
56
+ <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
57
+ <div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
58
+ <div space="p:big" visual="bg:primary text:white rounded:small">big</div>
59
+ </div>
40
60
  ```
41
61
 
42
- ## Responsif
62
+ </details>
63
+
64
+ </div>
65
+
66
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
67
+
68
+ ### Padding Arah
69
+
70
+ <div layout="flex col" space="g:medium">
71
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="p-x:big"</code> - Padamkan padding pada sisi tertentu</p>
72
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
73
+ <div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
74
+ <div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
75
+ </div>
76
+ </div>
77
+
78
+ <details>
79
+ <summary>Lihat Kod</summary>
43
80
 
44
81
  ```html
45
- <!-- Contoh responsif -->
46
- <div space="mob:... tab:... lap:...">
47
- Kandungan responsif
82
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
83
+ <div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
84
+ <div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
48
85
  </div>
49
86
  ```
87
+
88
+ </details>
89
+
90
+ </div>
91
+
92
+ ## Nilai Arbitrari
93
+
94
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
95
+
96
+ ```html
97
+ <div space="padding:[custom-value]">Custom</div>
98
+ ```
99
+
100
+ ## Nota
101
+
102
+ > [!TIP]
103
+ > **Sokongan Skala Tailwind**
104
+ >
105
+ > Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `p:tw-4` (1rem), `p:tw-8` (2rem)
106
+ >
107
+ > [Rujukan](https://tailwindcss.com/docs/padding)
package/docs/ms/reference/space/width.md CHANGED
@@ -27,19 +27,73 @@ space="w:[value]"
27
27
  <div space="min-w:[300px]">Min width</div>
28
28
  ```
29
29
 
30
- ## Nilai Arbitrari
30
+ ## Pratonton
31
31
 
32
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
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
+ ### Kawal Lebar
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>space="w:[100%]"</code> - Tetapkan lebar tetap atau peratusan</p>
38
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
40
+ <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
41
+ <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>Lihat Kod</summary>
33
47
 
34
48
  ```html
35
- <div space="width:[custom-value]">Custom</div>
49
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
51
+ <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
52
+ <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
53
+ </div>
36
54
  ```
37
55
 
38
- ## Responsif
56
+ </details>
57
+
58
+ </div>
59
+
60
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
61
+
62
+ ### Lebar Maksimum
63
+
64
+ <div layout="flex col" space="g:medium">
65
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="max-w:[200px]"</code> - Hadkan lebar maksimum</p>
66
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
67
+ <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
68
+ </div>
69
+ </div>
70
+
71
+ <details>
72
+ <summary>Lihat Kod</summary>
39
73
 
40
74
  ```html
41
- <!-- Contoh responsif -->
42
- <div space="mob:... tab:... lap:...">
43
- Kandungan responsif
75
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
76
+ <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
44
77
  </div>
45
78
  ```
79
+
80
+ </details>
81
+
82
+ </div>
83
+
84
+ ## Nilai Arbitrari
85
+
86
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
87
+
88
+ ```html
89
+ <div space="width:[custom-value]">Custom</div>
90
+ ```
91
+
92
+ ## Nota
93
+
94
+ > [!TIP]
95
+ > **Sokongan Skala Tailwind**
96
+ >
97
+ > Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `w:tw-64` (16rem), `max-w:tw-96` (24rem)
98
+ >
99
+ > [Rujukan](https://tailwindcss.com/docs/width)
package/docs/ms/reference/visual/accent-color.md CHANGED
@@ -13,19 +13,40 @@ visual="accent:[color]"
13
13
  <input type="checkbox" visual="accent:primary">
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
+ ### Warna Aksen
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="accent:primary"</code> - Gaya kawalan borang asli (kotak semak, radio, julat)</p>
24
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
25
+ <input type="checkbox" checked style="accent-color: #3b82f6; width: 20px; height: 20px;">
26
+ <input type="radio" checked style="accent-color: #10b981; width: 20px; height: 20px;">
27
+ <input type="range" style="accent-color: #8b5cf6; width: 100px;">
28
+ </div>
29
+ </div>
30
+
31
+ <details>
32
+ <summary>Lihat Kod</summary>
19
33
 
20
34
  ```html
21
- <div visual="accent:[custom-value]">Custom</div>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <input type="checkbox" checked style="accent-color: #3b82f6; width: 20px; height: 20px;">
37
+ <input type="radio" checked style="accent-color: #10b981; width: 20px; height: 20px;">
38
+ <input type="range" style="accent-color: #8b5cf6; width: 100px;">
39
+ </div>
22
40
  ```
23
41
 
24
- ## Responsif
42
+ </details>
25
43
 
26
- ```html
27
- <!-- Contoh responsif -->
28
- <div visual="mob:... tab:... lap:...">
29
- Kandungan responsif
30
44
  </div>
45
+
46
+ ## Nilai Arbitrari
47
+
48
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
49
+
50
+ ```html
51
+ <div visual="accent:[custom-value]">Custom</div>
31
52
  ```
package/docs/ms/reference/visual/animation-builtin.md CHANGED
@@ -23,19 +23,40 @@ visual="animate:[value]"
23
23
  <div visual="animate:spin">Loading...</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
+ ### Animasi Terbina Dalam
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="animate:spin"</code> - Animasi sedia guna</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">spin</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">pulse</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">bounce</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
29
43
 
30
44
  ```html
31
- <div visual="animation:[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">spin</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">pulse</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">bounce</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsif
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
54
  </div>
55
+
56
+ ## Nilai Arbitrari
57
+
58
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
59
+
60
+ ```html
61
+ <div visual="animation:[custom-value]">Custom</div>
41
62
  ```
package/docs/ms/reference/visual/animation-delay.md CHANGED
@@ -23,19 +23,36 @@ visual="animation-delay:[value]"
23
23
  <div visual="animate:bounce animation-delay:slow">Delayed bounce</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 Animasi
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="animation-delay:slow"</code> - Kelewatan sebelum animasi 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="animation:[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="animation:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/animation-direction.md CHANGED
@@ -22,11 +22,32 @@ visual="animation-direction:[value]"
22
22
  <div visual="animate:bounce animation-direction:alternate">Alternating</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
+ ### Arah Animasi
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="animation-direction:alternate"</code> - Kawal arah main balik</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">normal</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">reverse</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">alternate</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">normal</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">reverse</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">alternate</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual/animation-duration.md CHANGED
@@ -25,19 +25,38 @@ visual="animation-duration:[value]"
25
25
  <div visual="animate:spin animation-duration:slow">Slow spin</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 Animasi
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="animation-duration:slow"</code> - Kawal kelajuan animasi</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="animation:[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="animation:[custom-value]">Custom</div>
43
62
  ```
package/docs/ms/reference/visual/animation-fill.md CHANGED
@@ -22,11 +22,32 @@ visual="animation-fill:[value]"
22
22
  <div visual="animate:bounce animation-fill:forwards">Stays at end</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
+ ### Pengisian Animasi
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="animation-fill:forwards"</code> - Kawal keadaan sebelum/selepas animasi</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">forwards</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</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">none</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">forwards</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual/animation-iteration.md CHANGED
@@ -20,11 +20,30 @@ visual="animation-iteration:[value]"
20
20
  <div visual="animate:bounce animation-iteration:1">Bounce once</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
+ ### Ulangan Animasi
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="animation-iteration:1"</code> - Kawal bilangan gelung</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">1 (once)</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">infinite</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">1 (once)</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">infinite</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>