@bookklik/senangstart-css 0.1.8 → 0.2.3

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 (350) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2346 -1955
  3. package/dist/senangstart-css.min.js +143 -1479
  4. package/docs/.vitepress/config.js +9 -4
  5. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  6. package/docs/guide/responsive.md +25 -0
  7. package/docs/index.md +7 -1
  8. package/docs/ms/guide/responsive.md +25 -0
  9. package/docs/ms/index.md +7 -1
  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 +27 -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 +49 -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 +25 -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 +29 -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 +23 -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 +25 -4
  132. package/docs/ms/reference/visual/text-indent.md +29 -8
  133. package/docs/ms/reference/visual/text-overflow.md +23 -4
  134. package/docs/ms/reference/visual/text-shadow.md +31 -8
  135. package/docs/ms/reference/visual/text-size.md +84 -32
  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 +45 -6
  140. package/docs/ms/reference/visual/transform-origin.md +27 -8
  141. package/docs/ms/reference/visual/transform-perspective-origin.md +61 -10
  142. package/docs/ms/reference/visual/transform-perspective.md +61 -10
  143. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  144. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  145. package/docs/ms/reference/visual/transform-scale.md +29 -8
  146. package/docs/ms/reference/visual/transform-skew.md +29 -8
  147. package/docs/ms/reference/visual/transform-style.md +47 -8
  148. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  149. package/docs/ms/reference/visual/transform-translate.md +60 -13
  150. package/docs/ms/reference/visual/transition-delay.md +27 -8
  151. package/docs/ms/reference/visual/transition-duration.md +27 -8
  152. package/docs/ms/reference/visual/transition-property.md +21 -4
  153. package/docs/ms/reference/visual/transition-timing.md +29 -8
  154. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  155. package/docs/ms/reference/visual/user-select.md +23 -4
  156. package/docs/ms/reference/visual/vertical-align.md +27 -4
  157. package/docs/ms/reference/visual/whitespace.md +25 -4
  158. package/docs/ms/reference/visual/will-change.md +23 -4
  159. package/docs/ms/reference/visual/word-break.md +25 -4
  160. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  161. package/docs/public/assets/ss-logo.svg +83 -0
  162. package/docs/reference/breakpoints.md +23 -0
  163. package/docs/reference/layout/align-content.md +57 -4
  164. package/docs/reference/layout/align-items.md +81 -4
  165. package/docs/reference/layout/align-self.md +25 -4
  166. package/docs/reference/layout/aspect-ratio.md +27 -8
  167. package/docs/reference/layout/border-collapse.md +81 -4
  168. package/docs/reference/layout/border-spacing.md +43 -8
  169. package/docs/reference/layout/box-sizing.md +21 -4
  170. package/docs/reference/layout/caption-side.md +69 -4
  171. package/docs/reference/layout/columns.md +21 -4
  172. package/docs/reference/layout/container.md +21 -4
  173. package/docs/reference/layout/display.md +39 -7
  174. package/docs/reference/layout/flex-basis.md +29 -8
  175. package/docs/reference/layout/flex-direction.md +81 -4
  176. package/docs/reference/layout/flex-items.md +51 -4
  177. package/docs/reference/layout/flex-wrap.md +55 -4
  178. package/docs/reference/layout/flex.md +54 -7
  179. package/docs/reference/layout/float-clear.md +23 -4
  180. package/docs/reference/layout/grid-auto-flow.md +57 -4
  181. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  182. package/docs/reference/layout/grid-column-span.md +59 -4
  183. package/docs/reference/layout/grid-columns.md +61 -4
  184. package/docs/reference/layout/grid-row-span.md +29 -4
  185. package/docs/reference/layout/grid-rows.md +31 -4
  186. package/docs/reference/layout/inset.md +56 -7
  187. package/docs/reference/layout/isolation.md +21 -4
  188. package/docs/reference/layout/justify-content.md +81 -4
  189. package/docs/reference/layout/justify-items.md +25 -4
  190. package/docs/reference/layout/justify-self.md +25 -4
  191. package/docs/reference/layout/object-fit.md +57 -4
  192. package/docs/reference/layout/object-position.md +29 -8
  193. package/docs/reference/layout/order.md +53 -4
  194. package/docs/reference/layout/overflow.md +45 -4
  195. package/docs/reference/layout/overscroll.md +21 -4
  196. package/docs/reference/layout/place-content.md +23 -4
  197. package/docs/reference/layout/place-items.md +25 -4
  198. package/docs/reference/layout/place-self.md +25 -4
  199. package/docs/reference/layout/position.md +47 -4
  200. package/docs/reference/layout/shorthand-alignment.md +47 -4
  201. package/docs/reference/layout/table-layout.md +69 -4
  202. package/docs/reference/layout/visibility.md +25 -4
  203. package/docs/reference/layout/z-index.md +27 -4
  204. package/docs/reference/space/gap.md +71 -7
  205. package/docs/reference/space/height.md +61 -7
  206. package/docs/reference/space/margin.md +61 -7
  207. package/docs/reference/space/padding.md +65 -7
  208. package/docs/reference/space/width.md +61 -7
  209. package/docs/reference/visual/accent-color.md +29 -8
  210. package/docs/reference/visual/animation-builtin.md +29 -8
  211. package/docs/reference/visual/animation-delay.md +27 -8
  212. package/docs/reference/visual/animation-direction.md +25 -4
  213. package/docs/reference/visual/animation-duration.md +27 -8
  214. package/docs/reference/visual/animation-fill.md +49 -4
  215. package/docs/reference/visual/animation-iteration.md +23 -4
  216. package/docs/reference/visual/animation-play.md +23 -4
  217. package/docs/reference/visual/appearance.md +23 -4
  218. package/docs/reference/visual/backdrop-blur.md +29 -8
  219. package/docs/reference/visual/backdrop-brightness.md +29 -8
  220. package/docs/reference/visual/backdrop-contrast.md +29 -8
  221. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  222. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  223. package/docs/reference/visual/backdrop-invert.md +27 -8
  224. package/docs/reference/visual/backdrop-opacity.md +29 -8
  225. package/docs/reference/visual/backdrop-saturate.md +29 -8
  226. package/docs/reference/visual/backdrop-sepia.md +27 -8
  227. package/docs/reference/visual/background-attachment.md +23 -4
  228. package/docs/reference/visual/background-blend-mode.md +25 -4
  229. package/docs/reference/visual/background-clip.md +21 -4
  230. package/docs/reference/visual/background-color.md +33 -8
  231. package/docs/reference/visual/background-image.md +27 -8
  232. package/docs/reference/visual/background-origin.md +25 -4
  233. package/docs/reference/visual/background-position.md +29 -8
  234. package/docs/reference/visual/background-repeat.md +25 -4
  235. package/docs/reference/visual/background-size.md +29 -8
  236. package/docs/reference/visual/blend-modes.md +23 -4
  237. package/docs/reference/visual/border-radius.md +36 -4
  238. package/docs/reference/visual/border-style.md +25 -4
  239. package/docs/reference/visual/border-width.md +29 -8
  240. package/docs/reference/visual/border.md +56 -7
  241. package/docs/reference/visual/box-shadow.md +34 -4
  242. package/docs/reference/visual/caret-color.md +25 -8
  243. package/docs/reference/visual/color-scheme.md +23 -4
  244. package/docs/reference/visual/cursor.md +25 -4
  245. package/docs/reference/visual/field-sizing.md +23 -4
  246. package/docs/reference/visual/fill.md +29 -8
  247. package/docs/reference/visual/filter-blur.md +29 -8
  248. package/docs/reference/visual/filter-brightness.md +29 -8
  249. package/docs/reference/visual/filter-contrast.md +29 -8
  250. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  251. package/docs/reference/visual/filter-grayscale.md +29 -8
  252. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  253. package/docs/reference/visual/filter-invert.md +27 -8
  254. package/docs/reference/visual/filter-saturate.md +29 -8
  255. package/docs/reference/visual/filter-sepia.md +29 -8
  256. package/docs/reference/visual/font-family.md +25 -4
  257. package/docs/reference/visual/font-smoothing.md +23 -4
  258. package/docs/reference/visual/font-style.md +23 -4
  259. package/docs/reference/visual/font-variant-numeric.md +25 -4
  260. package/docs/reference/visual/font-weight.md +35 -4
  261. package/docs/reference/visual/forced-color-adjust.md +23 -4
  262. package/docs/reference/visual/hyphens.md +25 -4
  263. package/docs/reference/visual/letter-spacing.md +29 -8
  264. package/docs/reference/visual/line-clamp.md +29 -8
  265. package/docs/reference/visual/line-height.md +29 -8
  266. package/docs/reference/visual/list-style.md +25 -4
  267. package/docs/reference/visual/mask.md +29 -8
  268. package/docs/reference/visual/opacity.md +27 -4
  269. package/docs/reference/visual/outline.md +25 -8
  270. package/docs/reference/visual/pointer-events.md +23 -4
  271. package/docs/reference/visual/resize.md +27 -4
  272. package/docs/reference/visual/scroll-behavior.md +23 -4
  273. package/docs/reference/visual/scroll-margin.md +25 -8
  274. package/docs/reference/visual/scroll-padding.md +25 -8
  275. package/docs/reference/visual/scroll-snap-align.md +25 -4
  276. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  277. package/docs/reference/visual/scroll-snap-type.md +25 -4
  278. package/docs/reference/visual/state-prefixes.md +23 -4
  279. package/docs/reference/visual/stroke-width.md +29 -8
  280. package/docs/reference/visual/stroke.md +27 -8
  281. package/docs/reference/visual/text-alignment.md +25 -4
  282. package/docs/reference/visual/text-color.md +31 -8
  283. package/docs/reference/visual/text-decoration.md +25 -4
  284. package/docs/reference/visual/text-indent.md +29 -8
  285. package/docs/reference/visual/text-overflow.md +23 -4
  286. package/docs/reference/visual/text-shadow.md +31 -8
  287. package/docs/reference/visual/text-size.md +84 -32
  288. package/docs/reference/visual/text-transform.md +25 -4
  289. package/docs/reference/visual/text-wrap.md +25 -4
  290. package/docs/reference/visual/touch-action.md +25 -4
  291. package/docs/reference/visual/transform-backface.md +45 -6
  292. package/docs/reference/visual/transform-origin.md +27 -8
  293. package/docs/reference/visual/transform-perspective-origin.md +61 -10
  294. package/docs/reference/visual/transform-perspective.md +61 -10
  295. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  296. package/docs/reference/visual/transform-rotate.md +29 -8
  297. package/docs/reference/visual/transform-scale.md +29 -8
  298. package/docs/reference/visual/transform-skew.md +29 -8
  299. package/docs/reference/visual/transform-style.md +47 -8
  300. package/docs/reference/visual/transform-translate-z.md +90 -0
  301. package/docs/reference/visual/transform-translate.md +60 -13
  302. package/docs/reference/visual/transition-delay.md +27 -8
  303. package/docs/reference/visual/transition-duration.md +27 -8
  304. package/docs/reference/visual/transition-property.md +21 -4
  305. package/docs/reference/visual/transition-timing.md +29 -8
  306. package/docs/reference/visual/typography-keywords.md +27 -4
  307. package/docs/reference/visual/user-select.md +23 -4
  308. package/docs/reference/visual/vertical-align.md +27 -4
  309. package/docs/reference/visual/whitespace.md +25 -4
  310. package/docs/reference/visual/will-change.md +23 -4
  311. package/docs/reference/visual/word-break.md +25 -4
  312. package/docs/syntax-reference.json +2009 -1972
  313. package/package.json +3 -2
  314. package/playground/index.html +37 -38
  315. package/playground/jit-tw-mix-test.html +238 -0
  316. package/playground/sample_code.txt +23 -0
  317. package/playground/tw-convertor.html +696 -0
  318. package/scripts/build-dist.js +34 -29
  319. package/scripts/bundle-jit.js +45 -0
  320. package/scripts/convert-tailwind.js +759 -0
  321. package/scripts/generate-docs.js +74 -23
  322. package/src/cdn/jit.js +364 -109
  323. package/src/cli/commands/build.js +14 -6
  324. package/src/cli/commands/dev.js +28 -10
  325. package/src/compiler/generators/css.js +211 -30
  326. package/src/compiler/parser.js +23 -10
  327. package/src/compiler/tokenizer.js +19 -137
  328. package/src/config/defaults.js +76 -25
  329. package/src/core/constants.js +427 -0
  330. package/src/core/tokenizer-core.js +233 -0
  331. package/src/definitions/layout-alignment.js +210 -0
  332. package/src/definitions/layout-flex.js +155 -0
  333. package/src/definitions/layout-grid.js +134 -0
  334. package/src/definitions/layout-positioning.js +64 -0
  335. package/src/definitions/layout-table.js +129 -0
  336. package/src/definitions/layout-utilities.js +164 -0
  337. package/src/definitions/space.js +172 -0
  338. package/src/definitions/visual-backgrounds.js +231 -0
  339. package/src/definitions/visual-borders.js +66 -0
  340. package/src/definitions/visual-filters.js +111 -0
  341. package/src/definitions/visual-interactivity.js +159 -0
  342. package/src/definitions/visual-svg.js +41 -0
  343. package/src/definitions/visual-transform3d.js +255 -15
  344. package/src/definitions/visual-transforms.js +92 -6
  345. package/src/definitions/visual-transitions.js +158 -0
  346. package/src/definitions/visual-typography.js +223 -0
  347. package/src/definitions/visual.js +321 -1
  348. package/tests/integration/compiler.test.js +63 -2
  349. package/tests/unit/convert-tailwind.test.js +324 -0
  350. package/tests/unit/security.test.js +206 -0
package/docs/ms/reference/visual/user-select.md CHANGED
@@ -22,11 +22,30 @@ visual="select:[value]"
22
22
  <div visual="select:none">Cannot select this text</div>
23
23
  ```
24
24
 
25
- ## Responsif
25
+ ## Pratonton
26
+
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Pemilihan Pengguna
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="select:none"</code> - Kawal sama ada teks boleh dipilih</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
35
+ <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
26
41
 
27
42
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
45
+ <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
31
46
  </div>
32
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/ms/reference/visual/vertical-align.md CHANGED
@@ -26,11 +26,34 @@ visual="align:[value]"
26
26
  <img visual="align:middle">Vertically centered</img>
27
27
  ```
28
28
 
29
- ## Responsif
29
+ ## Pratonton
30
+
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Penjajaran Menegak
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="align:middle"</code> - Jajarkan elemen sebaris</p>
37
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
39
+ <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
40
+ <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
41
+ <span visual="text-size:huge text:neutral-500">Big</span>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>Lihat Kod</summary>
30
47
 
31
48
  ```html
32
- <!-- Contoh responsif -->
33
- <div visual="mob:... tab:... lap:...">
34
- Kandungan responsif
49
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
51
+ <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
52
+ <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
53
+ <span visual="text-size:huge text:neutral-500">Big</span>
35
54
  </div>
36
55
  ```
56
+
57
+ </details>
58
+
59
+ </div>
package/docs/ms/reference/visual/whitespace.md CHANGED
@@ -24,11 +24,32 @@ visual="whitespace:[value]"
24
24
  <pre visual="whitespace:pre">Preserved whitespace</pre>
25
25
  ```
26
26
 
27
- ## Responsif
27
+ ## Pratonton
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Ruang Putih
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="whitespace:pre"</code> - Kawal pengendalian ruang putih</p>
35
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
37
+ <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
38
+ <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
28
44
 
29
45
  ```html
30
- <!-- Contoh responsif -->
31
- <div visual="mob:... tab:... lap:...">
32
- Kandungan responsif
46
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
48
+ <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
49
+ <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/will-change.md CHANGED
@@ -23,11 +23,30 @@ visual="will-change:[value]"
23
23
  <div visual="will-change:transform">Optimized for animation</div>
24
24
  ```
25
25
 
26
- ## Responsif
26
+ ## Pratonton
27
+
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Akan Berubah
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="will-change:transform"</code> - Optimumkan untuk perubahan akan datang</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">transform</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
27
42
 
28
43
  ```html
29
- <!-- Contoh responsif -->
30
- <div visual="mob:... tab:... lap:...">
31
- Kandungan responsif
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">transform</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
32
47
  </div>
33
48
  ```
49
+
50
+ </details>
51
+
52
+ </div>
package/docs/ms/reference/visual/word-break.md CHANGED
@@ -22,11 +22,32 @@ visual="[break-value]"
22
22
  <div visual="break-words">Long words break properly</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
+ ### Pemecahan Perkataan
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="break-words"</code> - Kawal pemecahan perkataan</p>
33
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
35
+ <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
36
+ <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
26
42
 
27
43
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
44
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
46
+ <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
47
+ <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>