@bookklik/senangstart-css 0.1.7 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2269 -1955
  3. package/dist/senangstart-css.min.js +141 -1479
  4. package/docs/.vitepress/config.js +5 -3
  5. package/docs/.vitepress/theme/custom.css +0 -1
  6. package/docs/guide/responsive.md +25 -0
  7. package/docs/index.md +9 -21
  8. package/docs/ms/guide/responsive.md +25 -0
  9. package/docs/ms/index.md +9 -21
  10. package/docs/ms/reference/breakpoints.md +23 -0
  11. package/docs/ms/reference/layout/align-content.md +57 -4
  12. package/docs/ms/reference/layout/align-items.md +81 -4
  13. package/docs/ms/reference/layout/align-self.md +25 -4
  14. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  15. package/docs/ms/reference/layout/border-collapse.md +81 -4
  16. package/docs/ms/reference/layout/border-spacing.md +43 -8
  17. package/docs/ms/reference/layout/box-sizing.md +21 -4
  18. package/docs/ms/reference/layout/caption-side.md +69 -4
  19. package/docs/ms/reference/layout/columns.md +21 -4
  20. package/docs/ms/reference/layout/container.md +21 -4
  21. package/docs/ms/reference/layout/display.md +39 -7
  22. package/docs/ms/reference/layout/flex-basis.md +29 -8
  23. package/docs/ms/reference/layout/flex-direction.md +81 -4
  24. package/docs/ms/reference/layout/flex-items.md +51 -4
  25. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  26. package/docs/ms/reference/layout/flex.md +54 -7
  27. package/docs/ms/reference/layout/float-clear.md +23 -4
  28. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  29. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  30. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  31. package/docs/ms/reference/layout/grid-columns.md +61 -4
  32. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  33. package/docs/ms/reference/layout/grid-rows.md +31 -4
  34. package/docs/ms/reference/layout/inset.md +56 -7
  35. package/docs/ms/reference/layout/isolation.md +21 -4
  36. package/docs/ms/reference/layout/justify-content.md +81 -4
  37. package/docs/ms/reference/layout/justify-items.md +25 -4
  38. package/docs/ms/reference/layout/justify-self.md +25 -4
  39. package/docs/ms/reference/layout/object-fit.md +57 -4
  40. package/docs/ms/reference/layout/object-position.md +29 -8
  41. package/docs/ms/reference/layout/order.md +53 -4
  42. package/docs/ms/reference/layout/overflow.md +45 -4
  43. package/docs/ms/reference/layout/overscroll.md +21 -4
  44. package/docs/ms/reference/layout/place-content.md +23 -4
  45. package/docs/ms/reference/layout/place-items.md +25 -4
  46. package/docs/ms/reference/layout/place-self.md +25 -4
  47. package/docs/ms/reference/layout/position.md +47 -4
  48. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  49. package/docs/ms/reference/layout/table-layout.md +69 -4
  50. package/docs/ms/reference/layout/visibility.md +25 -4
  51. package/docs/ms/reference/layout/z-index.md +27 -4
  52. package/docs/ms/reference/space/gap.md +71 -7
  53. package/docs/ms/reference/space/height.md +61 -7
  54. package/docs/ms/reference/space/margin.md +61 -7
  55. package/docs/ms/reference/space/padding.md +65 -7
  56. package/docs/ms/reference/space/width.md +61 -7
  57. package/docs/ms/reference/visual/accent-color.md +29 -8
  58. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  59. package/docs/ms/reference/visual/animation-delay.md +25 -8
  60. package/docs/ms/reference/visual/animation-direction.md +25 -4
  61. package/docs/ms/reference/visual/animation-duration.md +27 -8
  62. package/docs/ms/reference/visual/animation-fill.md +25 -4
  63. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  64. package/docs/ms/reference/visual/animation-play.md +23 -4
  65. package/docs/ms/reference/visual/appearance.md +23 -4
  66. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  69. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  70. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  71. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  72. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  74. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  75. package/docs/ms/reference/visual/background-attachment.md +23 -4
  76. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  77. package/docs/ms/reference/visual/background-clip.md +21 -4
  78. package/docs/ms/reference/visual/background-color.md +33 -8
  79. package/docs/ms/reference/visual/background-image.md +27 -8
  80. package/docs/ms/reference/visual/background-origin.md +25 -4
  81. package/docs/ms/reference/visual/background-position.md +29 -8
  82. package/docs/ms/reference/visual/background-repeat.md +25 -4
  83. package/docs/ms/reference/visual/background-size.md +29 -8
  84. package/docs/ms/reference/visual/blend-modes.md +23 -4
  85. package/docs/ms/reference/visual/border-radius.md +36 -4
  86. package/docs/ms/reference/visual/border-style.md +25 -4
  87. package/docs/ms/reference/visual/border-width.md +29 -8
  88. package/docs/ms/reference/visual/border.md +56 -7
  89. package/docs/ms/reference/visual/box-shadow.md +34 -4
  90. package/docs/ms/reference/visual/caret-color.md +25 -8
  91. package/docs/ms/reference/visual/color-scheme.md +23 -4
  92. package/docs/ms/reference/visual/cursor.md +25 -4
  93. package/docs/ms/reference/visual/field-sizing.md +23 -4
  94. package/docs/ms/reference/visual/fill.md +29 -8
  95. package/docs/ms/reference/visual/filter-blur.md +29 -8
  96. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  97. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  98. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  99. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  100. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  101. package/docs/ms/reference/visual/filter-invert.md +27 -8
  102. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  103. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  104. package/docs/ms/reference/visual/font-family.md +25 -4
  105. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  106. package/docs/ms/reference/visual/font-style.md +23 -4
  107. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  108. package/docs/ms/reference/visual/font-weight.md +35 -4
  109. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  110. package/docs/ms/reference/visual/hyphens.md +25 -4
  111. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  112. package/docs/ms/reference/visual/line-clamp.md +29 -8
  113. package/docs/ms/reference/visual/line-height.md +29 -8
  114. package/docs/ms/reference/visual/list-style.md +25 -4
  115. package/docs/ms/reference/visual/mask.md +25 -8
  116. package/docs/ms/reference/visual/opacity.md +27 -4
  117. package/docs/ms/reference/visual/outline.md +25 -8
  118. package/docs/ms/reference/visual/pointer-events.md +23 -4
  119. package/docs/ms/reference/visual/resize.md +27 -4
  120. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  121. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  122. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  123. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  124. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  125. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  126. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  127. package/docs/ms/reference/visual/stroke-width.md +29 -8
  128. package/docs/ms/reference/visual/stroke.md +27 -8
  129. package/docs/ms/reference/visual/text-alignment.md +25 -4
  130. package/docs/ms/reference/visual/text-color.md +31 -8
  131. package/docs/ms/reference/visual/text-decoration.md +23 -4
  132. package/docs/ms/reference/visual/text-indent.md +25 -8
  133. package/docs/ms/reference/visual/text-overflow.md +21 -4
  134. package/docs/ms/reference/visual/text-shadow.md +25 -8
  135. package/docs/ms/reference/visual/text-size.md +41 -7
  136. package/docs/ms/reference/visual/text-transform.md +25 -4
  137. package/docs/ms/reference/visual/text-wrap.md +25 -4
  138. package/docs/ms/reference/visual/touch-action.md +25 -4
  139. package/docs/ms/reference/visual/transform-backface.md +23 -4
  140. package/docs/ms/reference/visual/transform-origin.md +27 -8
  141. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  142. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  143. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  144. package/docs/ms/reference/visual/transform-scale.md +29 -8
  145. package/docs/ms/reference/visual/transform-skew.md +29 -8
  146. package/docs/ms/reference/visual/transform-style.md +23 -4
  147. package/docs/ms/reference/visual/transform-translate.md +29 -8
  148. package/docs/ms/reference/visual/transition-delay.md +25 -8
  149. package/docs/ms/reference/visual/transition-duration.md +27 -8
  150. package/docs/ms/reference/visual/transition-property.md +21 -4
  151. package/docs/ms/reference/visual/transition-timing.md +29 -8
  152. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  153. package/docs/ms/reference/visual/user-select.md +23 -4
  154. package/docs/ms/reference/visual/vertical-align.md +25 -4
  155. package/docs/ms/reference/visual/whitespace.md +25 -4
  156. package/docs/ms/reference/visual/will-change.md +23 -4
  157. package/docs/ms/reference/visual/word-break.md +25 -4
  158. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  159. package/docs/reference/breakpoints.md +23 -0
  160. package/docs/reference/layout/align-content.md +57 -4
  161. package/docs/reference/layout/align-items.md +81 -4
  162. package/docs/reference/layout/align-self.md +25 -4
  163. package/docs/reference/layout/aspect-ratio.md +27 -8
  164. package/docs/reference/layout/border-collapse.md +81 -4
  165. package/docs/reference/layout/border-spacing.md +43 -8
  166. package/docs/reference/layout/box-sizing.md +21 -4
  167. package/docs/reference/layout/caption-side.md +69 -4
  168. package/docs/reference/layout/columns.md +21 -4
  169. package/docs/reference/layout/container.md +21 -4
  170. package/docs/reference/layout/display.md +39 -7
  171. package/docs/reference/layout/flex-basis.md +29 -8
  172. package/docs/reference/layout/flex-direction.md +81 -4
  173. package/docs/reference/layout/flex-items.md +51 -4
  174. package/docs/reference/layout/flex-wrap.md +55 -4
  175. package/docs/reference/layout/flex.md +54 -7
  176. package/docs/reference/layout/float-clear.md +23 -4
  177. package/docs/reference/layout/grid-auto-flow.md +57 -4
  178. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  179. package/docs/reference/layout/grid-column-span.md +59 -4
  180. package/docs/reference/layout/grid-columns.md +61 -4
  181. package/docs/reference/layout/grid-row-span.md +29 -4
  182. package/docs/reference/layout/grid-rows.md +31 -4
  183. package/docs/reference/layout/inset.md +56 -7
  184. package/docs/reference/layout/isolation.md +21 -4
  185. package/docs/reference/layout/justify-content.md +81 -4
  186. package/docs/reference/layout/justify-items.md +25 -4
  187. package/docs/reference/layout/justify-self.md +25 -4
  188. package/docs/reference/layout/object-fit.md +57 -4
  189. package/docs/reference/layout/object-position.md +29 -8
  190. package/docs/reference/layout/order.md +53 -4
  191. package/docs/reference/layout/overflow.md +45 -4
  192. package/docs/reference/layout/overscroll.md +21 -4
  193. package/docs/reference/layout/place-content.md +23 -4
  194. package/docs/reference/layout/place-items.md +25 -4
  195. package/docs/reference/layout/place-self.md +25 -4
  196. package/docs/reference/layout/position.md +47 -4
  197. package/docs/reference/layout/shorthand-alignment.md +47 -4
  198. package/docs/reference/layout/table-layout.md +69 -4
  199. package/docs/reference/layout/visibility.md +25 -4
  200. package/docs/reference/layout/z-index.md +27 -4
  201. package/docs/reference/space/gap.md +71 -7
  202. package/docs/reference/space/height.md +61 -7
  203. package/docs/reference/space/margin.md +61 -7
  204. package/docs/reference/space/padding.md +65 -7
  205. package/docs/reference/space/width.md +61 -7
  206. package/docs/reference/visual/accent-color.md +29 -8
  207. package/docs/reference/visual/animation-builtin.md +29 -8
  208. package/docs/reference/visual/animation-delay.md +25 -8
  209. package/docs/reference/visual/animation-direction.md +25 -4
  210. package/docs/reference/visual/animation-duration.md +27 -8
  211. package/docs/reference/visual/animation-fill.md +25 -4
  212. package/docs/reference/visual/animation-iteration.md +23 -4
  213. package/docs/reference/visual/animation-play.md +23 -4
  214. package/docs/reference/visual/appearance.md +23 -4
  215. package/docs/reference/visual/backdrop-blur.md +29 -8
  216. package/docs/reference/visual/backdrop-brightness.md +29 -8
  217. package/docs/reference/visual/backdrop-contrast.md +29 -8
  218. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  219. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  220. package/docs/reference/visual/backdrop-invert.md +27 -8
  221. package/docs/reference/visual/backdrop-opacity.md +29 -8
  222. package/docs/reference/visual/backdrop-saturate.md +29 -8
  223. package/docs/reference/visual/backdrop-sepia.md +27 -8
  224. package/docs/reference/visual/background-attachment.md +23 -4
  225. package/docs/reference/visual/background-blend-mode.md +25 -4
  226. package/docs/reference/visual/background-clip.md +21 -4
  227. package/docs/reference/visual/background-color.md +33 -8
  228. package/docs/reference/visual/background-image.md +27 -8
  229. package/docs/reference/visual/background-origin.md +25 -4
  230. package/docs/reference/visual/background-position.md +29 -8
  231. package/docs/reference/visual/background-repeat.md +25 -4
  232. package/docs/reference/visual/background-size.md +29 -8
  233. package/docs/reference/visual/blend-modes.md +23 -4
  234. package/docs/reference/visual/border-radius.md +36 -4
  235. package/docs/reference/visual/border-style.md +25 -4
  236. package/docs/reference/visual/border-width.md +29 -8
  237. package/docs/reference/visual/border.md +56 -7
  238. package/docs/reference/visual/box-shadow.md +34 -4
  239. package/docs/reference/visual/caret-color.md +25 -8
  240. package/docs/reference/visual/color-scheme.md +23 -4
  241. package/docs/reference/visual/cursor.md +25 -4
  242. package/docs/reference/visual/field-sizing.md +23 -4
  243. package/docs/reference/visual/fill.md +29 -8
  244. package/docs/reference/visual/filter-blur.md +29 -8
  245. package/docs/reference/visual/filter-brightness.md +29 -8
  246. package/docs/reference/visual/filter-contrast.md +29 -8
  247. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  248. package/docs/reference/visual/filter-grayscale.md +29 -8
  249. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  250. package/docs/reference/visual/filter-invert.md +27 -8
  251. package/docs/reference/visual/filter-saturate.md +29 -8
  252. package/docs/reference/visual/filter-sepia.md +29 -8
  253. package/docs/reference/visual/font-family.md +25 -4
  254. package/docs/reference/visual/font-smoothing.md +23 -4
  255. package/docs/reference/visual/font-style.md +23 -4
  256. package/docs/reference/visual/font-variant-numeric.md +23 -4
  257. package/docs/reference/visual/font-weight.md +35 -4
  258. package/docs/reference/visual/forced-color-adjust.md +23 -4
  259. package/docs/reference/visual/hyphens.md +25 -4
  260. package/docs/reference/visual/letter-spacing.md +29 -8
  261. package/docs/reference/visual/line-clamp.md +29 -8
  262. package/docs/reference/visual/line-height.md +29 -8
  263. package/docs/reference/visual/list-style.md +25 -4
  264. package/docs/reference/visual/mask.md +25 -8
  265. package/docs/reference/visual/opacity.md +27 -4
  266. package/docs/reference/visual/outline.md +25 -8
  267. package/docs/reference/visual/pointer-events.md +23 -4
  268. package/docs/reference/visual/resize.md +27 -4
  269. package/docs/reference/visual/scroll-behavior.md +23 -4
  270. package/docs/reference/visual/scroll-margin.md +25 -8
  271. package/docs/reference/visual/scroll-padding.md +25 -8
  272. package/docs/reference/visual/scroll-snap-align.md +25 -4
  273. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  274. package/docs/reference/visual/scroll-snap-type.md +25 -4
  275. package/docs/reference/visual/state-prefixes.md +21 -4
  276. package/docs/reference/visual/stroke-width.md +29 -8
  277. package/docs/reference/visual/stroke.md +27 -8
  278. package/docs/reference/visual/text-alignment.md +25 -4
  279. package/docs/reference/visual/text-color.md +31 -8
  280. package/docs/reference/visual/text-decoration.md +23 -4
  281. package/docs/reference/visual/text-indent.md +25 -8
  282. package/docs/reference/visual/text-overflow.md +21 -4
  283. package/docs/reference/visual/text-shadow.md +25 -8
  284. package/docs/reference/visual/text-size.md +41 -7
  285. package/docs/reference/visual/text-transform.md +25 -4
  286. package/docs/reference/visual/text-wrap.md +25 -4
  287. package/docs/reference/visual/touch-action.md +25 -4
  288. package/docs/reference/visual/transform-backface.md +23 -4
  289. package/docs/reference/visual/transform-origin.md +27 -8
  290. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  291. package/docs/reference/visual/transform-perspective.md +25 -8
  292. package/docs/reference/visual/transform-rotate.md +29 -8
  293. package/docs/reference/visual/transform-scale.md +29 -8
  294. package/docs/reference/visual/transform-skew.md +29 -8
  295. package/docs/reference/visual/transform-style.md +23 -4
  296. package/docs/reference/visual/transform-translate.md +29 -8
  297. package/docs/reference/visual/transition-delay.md +25 -8
  298. package/docs/reference/visual/transition-duration.md +27 -8
  299. package/docs/reference/visual/transition-property.md +21 -4
  300. package/docs/reference/visual/transition-timing.md +29 -8
  301. package/docs/reference/visual/typography-keywords.md +27 -4
  302. package/docs/reference/visual/user-select.md +23 -4
  303. package/docs/reference/visual/vertical-align.md +25 -4
  304. package/docs/reference/visual/whitespace.md +25 -4
  305. package/docs/reference/visual/will-change.md +23 -4
  306. package/docs/reference/visual/word-break.md +25 -4
  307. package/package.json +4 -3
  308. package/playground/jit-tw-mix-test.html +238 -0
  309. package/playground/tw-convertor.html +696 -0
  310. package/scripts/build-dist.js +34 -29
  311. package/scripts/bundle-jit.js +45 -0
  312. package/scripts/convert-tailwind.js +759 -0
  313. package/scripts/generate-docs.js +65 -16
  314. package/src/cdn/jit.js +313 -102
  315. package/src/cli/commands/build.js +14 -6
  316. package/src/cli/commands/dev.js +28 -10
  317. package/src/compiler/generators/css.js +187 -28
  318. package/src/compiler/parser.js +23 -10
  319. package/src/compiler/tokenizer.js +19 -137
  320. package/src/config/defaults.js +45 -18
  321. package/src/core/constants.js +427 -0
  322. package/src/core/tokenizer-core.js +233 -0
  323. package/src/definitions/layout-alignment.js +210 -0
  324. package/src/definitions/layout-flex.js +155 -0
  325. package/src/definitions/layout-grid.js +134 -0
  326. package/src/definitions/layout-positioning.js +64 -0
  327. package/src/definitions/layout-table.js +129 -0
  328. package/src/definitions/layout-utilities.js +164 -0
  329. package/src/definitions/space.js +172 -0
  330. package/src/definitions/visual-backgrounds.js +231 -0
  331. package/src/definitions/visual-borders.js +66 -0
  332. package/src/definitions/visual-filters.js +111 -0
  333. package/src/definitions/visual-interactivity.js +159 -0
  334. package/src/definitions/visual-svg.js +41 -0
  335. package/src/definitions/visual-transform3d.js +74 -0
  336. package/src/definitions/visual-transforms.js +69 -0
  337. package/src/definitions/visual-transitions.js +144 -0
  338. package/src/definitions/visual-typography.js +214 -0
  339. package/src/definitions/visual.js +306 -1
  340. package/tests/integration/compiler.test.js +63 -2
  341. package/tests/unit/convert-tailwind.test.js +324 -0
  342. package/tests/unit/security.test.js +206 -0
package/docs/ms/reference/layout/justify-content.md CHANGED
@@ -26,11 +26,88 @@ layout="justify:[value]"
26
26
  <div layout="flex justify:between">Spaced</div>
27
27
  ```
28
28
 
29
- ## Responsif
29
+ ## Pratonton
30
+
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Jajar Permulaan
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>layout="justify:start"</code> - Item dijajarkan ke permulaan bekas</p>
37
+ <div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
39
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
40
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>Lihat Kod</summary>
30
46
 
31
47
  ```html
32
- <!-- Contoh responsif -->
33
- <div layout="mob:... tab:... lap:...">
34
- Kandungan responsif
48
+ <div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
50
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
51
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
35
52
  </div>
36
53
  ```
54
+
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
+ ### Jajar Tengah
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>layout="justify:center"</code> - Item berpusat sepanjang paksi utama</p>
65
+ <div layout="flex justify:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
66
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
67
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
68
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
69
+ </div>
70
+ </div>
71
+
72
+ <details>
73
+ <summary>Lihat Kod</summary>
74
+
75
+ ```html
76
+ <div layout="flex justify:center" 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">1</span>
78
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
79
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
80
+ </div>
81
+ ```
82
+
83
+ </details>
84
+
85
+ </div>
86
+
87
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
88
+
89
+ ### Jajar Antara
90
+
91
+ <div layout="flex col" space="g:medium">
92
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="justify:between"</code> - Item dengan ruang sama antara mereka</p>
93
+ <div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
94
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
95
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
96
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
97
+ </div>
98
+ </div>
99
+
100
+ <details>
101
+ <summary>Lihat Kod</summary>
102
+
103
+ ```html
104
+ <div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
105
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
106
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
107
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
108
+ </div>
109
+ ```
110
+
111
+ </details>
112
+
113
+ </div>
package/docs/ms/reference/layout/justify-items.md CHANGED
@@ -22,11 +22,32 @@ layout="justify-items:[value]"
22
22
  <div layout="grid justify-items:center">Centered items</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
+ ### Jajar Item Tengah
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="justify-items:center"</code> - Tengahkan semua item grid secara mendatar dalam sel mereka</p>
33
+ <div layout="grid grid-cols:3 justify-items:center" 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">1</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">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-cols:3 justify-items:center" 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">1</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/layout/justify-self.md CHANGED
@@ -23,11 +23,32 @@ layout="justify-self:[value]"
23
23
  <div layout="justify-self:end">End aligned</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
+ ### Jajar Kendiri
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="justify-self:center"</code> - Ganti penjajaran mendatar untuk satu item grid</p>
34
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
36
+ <span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
37
+ <span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</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="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
47
+ <span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
48
+ <span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</span>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/ms/reference/layout/object-fit.md CHANGED
@@ -23,11 +23,64 @@ layout="object:[value]"
23
23
  <img layout="object:cover">Cover image</img>
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
+ ### Objek Muat Tutup
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="object:cover"</code> - Imej menutup bekas, mungkin dipotong</p>
34
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
36
+ <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
37
+ </div>
38
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
44
+
45
+ ```html
46
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
48
+ <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
49
+ </div>
50
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</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
+ ### Objek Muat Kandung
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="object:contain"</code> - Imej muat di dalam, kekalkan nisbah</p>
64
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
65
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
66
+ <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
67
+ </div>
68
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</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="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
77
+ <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
78
+ <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
79
+ </div>
80
+ <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
32
81
  </div>
33
82
  ```
83
+
84
+ </details>
85
+
86
+ </div>
package/docs/ms/reference/layout/object-position.md CHANGED
@@ -27,19 +27,40 @@ layout="object-pos:[value]"
27
27
  <img layout="object:cover object-pos:top">Top positioned</img>
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
+ ### Kedudukan Objek
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>layout="object-pos:center"</code> - Kawal di mana media diletakkan dalam bekas</p>
38
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
40
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
41
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>Lihat Kod</summary>
33
47
 
34
48
  ```html
35
- <div layout="object:[custom-value]">Custom</div>
49
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
51
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
52
+ <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
53
+ </div>
36
54
  ```
37
55
 
38
- ## Responsif
56
+ </details>
39
57
 
40
- ```html
41
- <!-- Contoh responsif -->
42
- <div layout="mob:... tab:... lap:...">
43
- Kandungan responsif
44
58
  </div>
59
+
60
+ ## Nilai Arbitrari
61
+
62
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
63
+
64
+ ```html
65
+ <div layout="object:[custom-value]">Custom</div>
45
66
  ```
package/docs/ms/reference/layout/order.md CHANGED
@@ -22,11 +22,60 @@ layout="order:[value]"
22
22
  <div layout="order:first">First 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
+ ### Susun Semula Item
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="order:1"</code> - Ubah susunan visual item flex</p>
33
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
35
+ <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
36
+ <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</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 layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
46
+ <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
47
+ <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</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
+ ### Pertama dan Terakhir
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="order:first"</code> - Pindahkan item ke permulaan atau hujung</p>
61
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
62
+ <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
63
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
64
+ <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
65
+ </div>
66
+ </div>
67
+
68
+ <details>
69
+ <summary>Lihat Kod</summary>
26
70
 
27
71
  ```html
28
- <!-- Contoh responsif -->
29
- <div layout="mob:... tab:... lap:...">
30
- Kandungan responsif
72
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
73
+ <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
74
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
75
+ <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
31
76
  </div>
32
77
  ```
78
+
79
+ </details>
80
+
81
+ </div>
package/docs/ms/reference/layout/overflow.md CHANGED
@@ -24,11 +24,52 @@ layout="overflow:[value]"
24
24
  <div layout="overflow:auto">Scrollable</div>
25
25
  ```
26
26
 
27
- ## Responsif
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Limpahan Tersembunyi
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="overflow:hidden"</code> - Kandungan dipotong di tepi bekas</p>
35
+ <div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
36
+ <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
42
+
43
+ ```html
44
+ <div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
45
+ <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
46
+ </div>
47
+ ```
48
+
49
+ </details>
50
+
51
+ </div>
52
+
53
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
54
+
55
+ ### Limpahan Auto
56
+
57
+ <div layout="flex col" space="g:medium">
58
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="overflow:auto"</code> - Bar skrol muncul apabila kandungan melimpah</p>
59
+ <div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
60
+ <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
61
+ </div>
62
+ </div>
63
+
64
+ <details>
65
+ <summary>Lihat Kod</summary>
28
66
 
29
67
  ```html
30
- <!-- Contoh responsif -->
31
- <div layout="mob:... tab:... lap:...">
32
- Kandungan responsif
68
+ <div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
69
+ <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
33
70
  </div>
34
71
  ```
72
+
73
+ </details>
74
+
75
+ </div>
package/docs/ms/reference/layout/overscroll.md CHANGED
@@ -21,11 +21,28 @@ layout="overscroll:[value]"
21
21
  <div layout="overscroll:contain">Contained scroll</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
+ ### Kandungan Overscroll
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="overscroll:contain"</code> - Halang skrol daripada mempengaruhi induk</p>
32
+ <div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
33
+ <p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
25
39
 
26
40
  ```html
27
- <!-- Contoh responsif -->
28
- <div layout="mob:... tab:... lap:...">
29
- Kandungan responsif
41
+ <div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
42
+ <p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
30
43
  </div>
31
44
  ```
45
+
46
+ </details>
47
+
48
+ </div>
package/docs/ms/reference/layout/place-content.md CHANGED
@@ -25,11 +25,30 @@ layout="place-content:[value]"
25
25
  <div layout="grid place-content:center">Centered content</div>
26
26
  ```
27
27
 
28
- ## Responsif
28
+ ## Pratonton
29
+
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
+ ### Letakkan Kandungan Tengah
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>layout="place-content:center"</code> - Tengahkan keseluruhan kandungan grid dalam kedua-dua arah</p>
36
+ <div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
37
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
38
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
29
44
 
30
45
  ```html
31
- <!-- Contoh responsif -->
32
- <div layout="mob:... tab:... lap:...">
33
- Kandungan responsif
46
+ <div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
48
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
34
49
  </div>
35
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/ms/reference/layout/place-items.md CHANGED
@@ -22,11 +22,32 @@ layout="place-items:[value]"
22
22
  <div layout="grid place-items:center">Centered items</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
+ ### Letakkan Item Tengah
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="place-items:center"</code> - Tengahkan semua item dalam sel grid mereka</p>
33
+ <div layout="grid grid-cols:3 place-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">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-cols:3 place-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
45
+ <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
47
+ <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/layout/place-self.md CHANGED
@@ -23,11 +23,32 @@ layout="place-self:[value]"
23
23
  <div layout="place-self:center">Centered item</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
+ ### Letakkan Kendiri Tengah
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="place-self:center"</code> - Tengahkan satu item dalam kedua-dua arah dalam selnya</p>
34
+ <div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
35
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
36
+ <span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
37
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</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="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
46
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
47
+ <span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
48
+ <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/ms/reference/layout/position.md CHANGED
@@ -24,11 +24,54 @@ layout="[position-value]"
24
24
  <div layout="fixed">Fixed to viewport</div>
25
25
  ```
26
26
 
27
- ## Responsif
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Kedudukan Relatif
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="relative"</code> - Elemen diletakkan relatif kepada aliran normal</p>
35
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
37
+ <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
43
+
44
+ ```html
45
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
47
+ <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</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
+ ### Kedudukan Melekit
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="sticky"</code> - Elemen melekat apabila skrol melepasi</p>
61
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
62
+ <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
63
+ </div>
64
+ </div>
65
+
66
+ <details>
67
+ <summary>Lihat Kod</summary>
28
68
 
29
69
  ```html
30
- <!-- Contoh responsif -->
31
- <div layout="mob:... tab:... lap:...">
32
- Kandungan responsif
70
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
71
+ <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
33
72
  </div>
34
73
  ```
74
+
75
+ </details>
76
+
77
+ </div>