@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/layout/columns.md CHANGED
@@ -20,11 +20,28 @@ layout="cols:[value]"
20
20
  <div layout="cols:3">Three columns</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
+ ### Susun Atur Berbilang Lajur
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>layout="cols:2"</code> - Teks mengalir ke berbilang lajur</p>
31
+ <div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
33
+ </div>
34
+ </div>
35
+
36
+ <details>
37
+ <summary>Lihat Kod</summary>
24
38
 
25
39
  ```html
26
- <!-- Contoh responsif -->
27
- <div layout="mob:... tab:... lap:...">
28
- Kandungan responsif
40
+ <div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
+ <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
29
42
  </div>
30
43
  ```
44
+
45
+ </details>
46
+
47
+ </div>
package/docs/ms/reference/layout/container.md CHANGED
@@ -19,11 +19,28 @@ layout="container"
19
19
  <div layout="container">Centered content</div>
20
20
  ```
21
21
 
22
- ## Responsif
22
+ ## Pratonton
23
+
24
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
25
+
26
+ ### Bekas
27
+
28
+ <div layout="flex col" space="g:medium">
29
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="container"</code> - Bekas berpusat dengan lebar maksimum</p>
30
+ <div visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" space="p:small">
31
+ <div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
32
+ </div>
33
+ </div>
34
+
35
+ <details>
36
+ <summary>Lihat Kod</summary>
23
37
 
24
38
  ```html
25
- <!-- Contoh responsif -->
26
- <div layout="mob:... tab:... lap:...">
27
- Kandungan responsif
39
+ <div visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" space="p:small">
40
+ <div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
28
41
  </div>
29
42
  ```
43
+
44
+ </details>
45
+
46
+ </div>
package/docs/ms/reference/layout/display.md CHANGED
@@ -29,16 +29,40 @@ layout="[display-value]"
29
29
 
30
30
  ## Pratonton
31
31
 
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Bekas Flexbox
35
+
32
36
  <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="flex"</code> - Item disusun secara mendatar</p>
33
38
  <div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
39
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
35
40
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
36
41
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
37
42
  </div>
38
- <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="flex"</code> - Item disusun secara mendatar</p>
39
43
  </div>
40
44
 
41
- <div layout="flex col" space="g:medium m-t:large">
45
+ <details>
46
+ <summary>Lihat Kod</summary>
47
+
48
+ ```html
49
+ <div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
51
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
52
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
53
+ </div>
54
+ ```
55
+
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
+ ### Bekas Grid
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>layout="grid"</code> - Item dalam susun atur grid</p>
42
66
  <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
67
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
44
68
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
@@ -47,14 +71,22 @@ layout="[display-value]"
47
71
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
48
72
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
49
73
  </div>
50
- <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="grid"</code> - Item dalam susun atur grid</p>
51
74
  </div>
52
75
 
53
- ## Responsif
76
+ <details>
77
+ <summary>Lihat Kod</summary>
54
78
 
55
79
  ```html
56
- <!-- Contoh responsif -->
57
- <div layout="mob:... tab:... lap:...">
58
- Kandungan responsif
80
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
81
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
82
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
83
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
84
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
85
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
86
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
59
87
  </div>
60
88
  ```
89
+
90
+ </details>
91
+
92
+ </div>
package/docs/ms/reference/layout/flex-basis.md CHANGED
@@ -20,19 +20,40 @@ layout="basis:[value]"
20
20
  <div layout="basis:[200px]">200px basis</div>
21
21
  ```
22
22
 
23
- ## Nilai Arbitrari
23
+ ## Pratonton
24
24
 
25
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
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
+ ### Asas Tetap
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>layout="basis:[100px]"</code> - Item dengan saiz asas berbeza</p>
31
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <span layout="basis:[100px] text:center" space="p:small" visual="bg:primary text:white rounded:small">100px</span>
33
+ <span layout="basis:[150px] text:center" space="p:small" visual="bg:primary text:white rounded:small">150px</span>
34
+ <span layout="basis:auto" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">auto</span>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
26
40
 
27
41
  ```html
28
- <div layout="flex:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <span layout="basis:[100px] text:center" space="p:small" visual="bg:primary text:white rounded:small">100px</span>
44
+ <span layout="basis:[150px] text:center" space="p:small" visual="bg:primary text:white rounded:small">150px</span>
45
+ <span layout="basis:auto" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">auto</span>
46
+ </div>
29
47
  ```
30
48
 
31
- ## Responsif
49
+ </details>
32
50
 
33
- ```html
34
- <!-- Contoh responsif -->
35
- <div layout="mob:... tab:... lap:...">
36
- Kandungan responsif
37
51
  </div>
52
+
53
+ ## Nilai Arbitrari
54
+
55
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
56
+
57
+ ```html
58
+ <div layout="flex:[custom-value]">Custom</div>
38
59
  ```
package/docs/ms/reference/layout/flex-direction.md CHANGED
@@ -23,11 +23,88 @@ layout="[direction]"
23
23
  <div layout="flex col">Column direction</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
+ ### Arah Baris
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>layout="row"</code> - Item disusun secara mendatar dari kiri ke kanan</p>
34
+ <div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
37
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
27
43
 
28
44
  ```html
29
- <!-- Contoh responsif -->
30
- <div layout="mob:... tab:... lap:...">
31
- Kandungan responsif
45
+ <div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
55
+
56
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
57
+
58
+ ### Arah Lajur
59
+
60
+ <div layout="flex col" space="g:medium">
61
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="col"</code> - Item disusun secara menegak dari atas ke bawah</p>
62
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
63
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
64
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
65
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
66
+ </div>
67
+ </div>
68
+
69
+ <details>
70
+ <summary>Lihat Kod</summary>
71
+
72
+ ```html
73
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
74
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
75
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
76
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
77
+ </div>
78
+ ```
79
+
80
+ </details>
81
+
82
+ </div>
83
+
84
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
85
+
86
+ ### Baris Terbalik
87
+
88
+ <div layout="flex col" space="g:medium">
89
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="row-reverse"</code> - Item disusun secara mendatar dari kanan ke kiri</p>
90
+ <div layout="flex row-reverse" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
91
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
92
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
93
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
94
+ </div>
95
+ </div>
96
+
97
+ <details>
98
+ <summary>Lihat Kod</summary>
99
+
100
+ ```html
101
+ <div layout="flex row-reverse" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
102
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
103
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
104
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
105
+ </div>
106
+ ```
107
+
108
+ </details>
109
+
110
+ </div>
package/docs/ms/reference/layout/flex-items.md CHANGED
@@ -22,11 +22,58 @@ layout="[flex-item-value]"
22
22
  <div layout="grow">Growing item</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
+ ### Kembang Flex
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>layout="grow"</code> - Item tengah berkembang untuk mengisi ruang kosong</p>
33
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
35
+ <span layout="grow text:center" space="p:small" visual="bg:primary text:white rounded:small">Grows</span>
36
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
42
+
43
+ ```html
44
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
46
+ <span layout="grow text:center" space="p:small" visual="bg:primary text:white rounded:small">Grows</span>
47
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
48
+ </div>
49
+ ```
50
+
51
+ </details>
52
+
53
+ </div>
54
+
55
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
56
+
57
+ ### Kecil Flex
58
+
59
+ <div layout="flex col" space="g:medium">
60
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="shrink"</code> - Item mengecil apabila ruang terhad</p>
61
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 250px;">
62
+ <span layout="shrink-0" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">No Shrink</span>
63
+ <span layout="shrink" space="p:small" visual="bg:primary text:white rounded:small">Can Shrink</span>
64
+ </div>
65
+ </div>
66
+
67
+ <details>
68
+ <summary>Lihat Kod</summary>
26
69
 
27
70
  ```html
28
- <!-- Contoh responsif -->
29
- <div layout="mob:... tab:... lap:...">
30
- Kandungan responsif
71
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 250px;">
72
+ <span layout="shrink-0" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">No Shrink</span>
73
+ <span layout="shrink" space="p:small" visual="bg:primary text:white rounded:small">Can Shrink</span>
31
74
  </div>
32
75
  ```
76
+
77
+ </details>
78
+
79
+ </div>
package/docs/ms/reference/layout/flex-wrap.md CHANGED
@@ -21,11 +21,62 @@ layout="[wrap-value]"
21
21
  <div layout="flex wrap">Wrapping flex</div>
22
22
  ```
23
23
 
24
- ## Responsif
24
+ ## Pratonton
25
+
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
+ ### Bungkus Diaktifkan
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>layout="wrap"</code> - Item membungkus ke baris seterusnya apabila bekas penuh</p>
32
+ <div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
33
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
34
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
42
+
43
+ ```html
44
+ <div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
45
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
49
+ </div>
50
+ ```
51
+
52
+ </details>
53
+
54
+ </div>
55
+
56
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
57
+
58
+ ### Tiada Bungkusan
59
+
60
+ <div layout="flex col" space="g:medium">
61
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="nowrap"</code> - Item kekal pada satu baris (mungkin melimpah)</p>
62
+ <div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
63
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
64
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
65
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
66
+ </div>
67
+ </div>
68
+
69
+ <details>
70
+ <summary>Lihat Kod</summary>
25
71
 
26
72
  ```html
27
- <!-- Contoh responsif -->
28
- <div layout="mob:... tab:... lap:...">
29
- Kandungan responsif
73
+ <div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
74
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
75
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
76
+ <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
30
77
  </div>
31
78
  ```
79
+
80
+ </details>
81
+
82
+ </div>
package/docs/ms/reference/layout/flex.md CHANGED
@@ -22,19 +22,66 @@ layout="flex:[value]"
22
22
  <div layout="flex:1">Flexible item</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
+ ### Flex 1
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>layout="flex:1"</code> - Pengagihan ruang yang sama antara item</p>
33
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
35
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
36
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
28
42
 
29
43
  ```html
30
- <div layout="flex:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
46
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
47
+ <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
48
+ </div>
31
49
  ```
32
50
 
33
- ## Responsif
51
+ </details>
52
+
53
+ </div>
54
+
55
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
56
+
57
+ ### Flex Auto vs Tiada
58
+
59
+ <div layout="flex col" space="g:medium">
60
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="flex:auto"</code> - Perbandingan kelakuan flex berbeza</p>
61
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
62
+ <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
63
+ <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
64
+ </div>
65
+ </div>
66
+
67
+ <details>
68
+ <summary>Lihat Kod</summary>
34
69
 
35
70
  ```html
36
- <!-- Contoh responsif -->
37
- <div layout="mob:... tab:... lap:...">
38
- Kandungan responsif
71
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
72
+ <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
73
+ <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
74
+ </div>
75
+ ```
76
+
77
+ </details>
78
+
39
79
  </div>
80
+
81
+ ## Nilai Arbitrari
82
+
83
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
84
+
85
+ ```html
86
+ <div layout="flex:[custom-value]">Custom</div>
40
87
  ```
package/docs/ms/reference/layout/float-clear.md CHANGED
@@ -22,11 +22,30 @@ layout="float:[value]" or layout="clear:[value]"
22
22
  <div layout="clear:both">Clear floats</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
+ ### Apung Kiri
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>layout="float:left"</code> - Elemen mengapung ke kiri kandungan</p>
33
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div layout="float:left" space="p:small m-r:small m-b:small" visual="bg:primary text:white rounded:small">Float</div>
35
+ <p visual="text:neutral-800 dark:text:neutral-200">Text wraps around the floated element naturally.</p>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
26
41
 
27
42
  ```html
28
- <!-- Contoh responsif -->
29
- <div layout="mob:... tab:... lap:...">
30
- Kandungan responsif
43
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div layout="float:left" space="p:small m-r:small m-b:small" visual="bg:primary text:white rounded:small">Float</div>
45
+ <p visual="text:neutral-800 dark:text:neutral-200">Text wraps around the floated element naturally.</p>
31
46
  </div>
32
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/ms/reference/layout/grid-auto-flow.md CHANGED
@@ -23,11 +23,64 @@ layout="grid-flow:[value]"
23
23
  <div layout="grid grid-flow:col">Column flow</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
+ ### Aliran Baris
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>layout="grid-flow:row"</code> - Item mengalir mengikut baris (lalai)</p>
34
+ <div layout="grid grid-cols:3 grid-flow:row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
37
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
38
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
44
+
45
+ ```html
46
+ <div layout="grid grid-cols:3 grid-flow:row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
49
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
50
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
51
+ </div>
52
+ ```
53
+
54
+ </details>
55
+
56
+ </div>
57
+
58
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
59
+
60
+ ### Aliran Lajur
61
+
62
+ <div layout="flex col" space="g:medium">
63
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="grid-flow:col"</code> - Item mengalir mengikut lajur</p>
64
+ <div layout="grid grid-rows:2 grid-flow:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
65
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
66
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
67
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
68
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
69
+ </div>
70
+ </div>
71
+
72
+ <details>
73
+ <summary>Lihat Kod</summary>
27
74
 
28
75
  ```html
29
- <!-- Contoh responsif -->
30
- <div layout="mob:... tab:... lap:...">
31
- Kandungan responsif
76
+ <div layout="grid grid-rows:2 grid-flow:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
77
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
78
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
79
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
80
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
32
81
  </div>
33
82
  ```
83
+
84
+ </details>
85
+
86
+ </div>
package/docs/ms/reference/layout/grid-auto-sizing.md CHANGED
@@ -22,11 +22,32 @@ layout="auto-cols:[value]" or layout="auto-rows:[value]"
22
22
  <div layout="grid auto-cols:min">Auto min columns</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
+ ### Lajur Automatik
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>layout="auto-cols:fr"</code> - Trek lajur bersaiz automatik</p>
33
+ <div layout="grid grid-flow:col auto-cols:fr" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 1</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
26
42
 
27
43
  ```html
28
- <!-- Contoh responsif -->
29
- <div layout="mob:... tab:... lap:...">
30
- Kandungan responsif
44
+ <div layout="grid grid-flow:col auto-cols:fr" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 1</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>