@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/visual/scroll-behavior.md CHANGED
@@ -20,11 +20,30 @@ visual="scroll-behavior:[value]"
20
20
  <html visual="scroll-behavior:smooth">Smooth scrolling</html>
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
+ ### Kelakuan Skrol
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scroll-behavior:smooth"</code> - Skrol lancar atau serta-merta</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
24
39
 
25
40
  ```html
26
- <!-- Contoh responsif -->
27
- <div visual="mob:... tab:... lap:...">
28
- Kandungan responsif
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/scroll-margin.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-m:[value]"
23
23
  <div visual="scroll-m:medium">Scroll margin</div>
24
24
  ```
25
25
 
26
- ## Nilai Arbitrari
26
+ ## Pratonton
27
27
 
28
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Margin Skrol
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="scroll-m:medium"</code> - Offset untuk snap skrol</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">scroll-m:medium</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsif
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/scroll-padding.md CHANGED
@@ -23,19 +23,36 @@ visual="scroll-p:[value]"
23
23
  <div visual="scroll-p:big">Scroll padding</div>
24
24
  ```
25
25
 
26
- ## Nilai Arbitrari
26
+ ## Pratonton
27
27
 
28
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Padding Skrol
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="scroll-p:big"</code> - Padding untuk bekas snap skrol</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">scroll-p:big</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
29
41
 
30
42
  ```html
31
- <div visual="scroll:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsif
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="scroll:[custom-value]">Custom</div>
41
58
  ```
package/docs/ms/reference/visual/scroll-snap-align.md CHANGED
@@ -22,11 +22,32 @@ visual="snap-align:[value]"
22
22
  <div visual="snap-align:start">Snap to start</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
+ ### Penjajaran Snap
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="snap-align:start"</code> - Tempat untuk snap dalam bekas</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">start</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>Lihat Kod</summary>
26
42
 
27
43
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual/scroll-snap-stop.md CHANGED
@@ -20,11 +20,30 @@ visual="snap-stop:[value]"
20
20
  <div visual="snap-stop:always">Always stop here</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
+ ### Hentian Snap
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="snap-stop:always"</code> - Kawal sama ada berhenti di titik snap</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
24
39
 
25
40
  ```html
26
- <!-- Contoh responsif -->
27
- <div visual="mob:... tab:... lap:...">
28
- Kandungan responsif
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/scroll-snap-type.md CHANGED
@@ -24,11 +24,32 @@ visual="snap-type:[value]"
24
24
  <div visual="snap-type:x">Horizontal snap container</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
+ ### Jenis Snap
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="snap-type:x"</code> - Dayakan snapping skrol</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
28
44
 
29
45
  ```html
30
- <!-- Contoh responsif -->
31
- <div visual="mob:... tab:... lap:...">
32
- Kandungan responsif
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/state-prefixes.md CHANGED
@@ -27,11 +27,28 @@ visual="hover:... focus:... active:..."
27
27
  <button visual="hover:bg:primary focus:outline:primary">Interactive button</button>
28
28
  ```
29
29
 
30
- ## Responsif
30
+ ## Pratonton
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
+ ### Awalan Keadaan
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>visual="hover:bg:primary"</code> - Terapkan gaya pada hover, fokus, dll.</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>Lihat Kod</summary>
31
45
 
32
46
  ```html
33
- <!-- Contoh responsif -->
34
- <div visual="mob:... tab:... lap:...">
35
- Kandungan responsif
47
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
36
49
  </div>
37
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/ms/reference/visual/stroke-width.md CHANGED
@@ -21,19 +21,40 @@ visual="stroke-w:[value]"
21
21
  <svg visual="stroke:black stroke-w:2">...</svg>
22
22
  ```
23
23
 
24
- ## Nilai Arbitrari
24
+ ## Pratonton
25
25
 
26
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Lebar Gurisan
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke-w:2"</code> - Kawal ketebalan gurisan SVG</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
34
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
35
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
27
41
 
28
42
  ```html
29
- <div visual="stroke:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
45
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
46
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
47
+ </div>
30
48
  ```
31
49
 
32
- ## Responsif
50
+ </details>
33
51
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
52
  </div>
53
+
54
+ ## Nilai Arbitrari
55
+
56
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
57
+
58
+ ```html
59
+ <div visual="stroke:[custom-value]">Custom</div>
39
60
  ```
package/docs/ms/reference/visual/stroke.md CHANGED
@@ -20,19 +20,38 @@ visual="stroke:[color]"
20
20
  <svg visual="stroke:primary stroke-w:2">...</svg>
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
+ ### Gurisan SVG
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke:primary"</code> - Guris elemen SVG dengan warna</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
33
+ <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
26
39
 
27
40
  ```html
28
- <div visual="stroke:[custom-value]">Custom</div>
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
43
+ <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
44
+ </div>
29
45
  ```
30
46
 
31
- ## Responsif
47
+ </details>
32
48
 
33
- ```html
34
- <!-- Contoh responsif -->
35
- <div visual="mob:... tab:... lap:...">
36
- Kandungan responsif
37
49
  </div>
50
+
51
+ ## Nilai Arbitrari
52
+
53
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
54
+
55
+ ```html
56
+ <div visual="stroke:[custom-value]">Custom</div>
38
57
  ```
package/docs/ms/reference/visual/text-alignment.md CHANGED
@@ -22,11 +22,32 @@ visual="text:[alignment]"
22
22
  <p visual="text:center">Centered text</p>
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
+ ### Penjajaran Teks
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="text:center"</code> - Jajarkan teks dalam bekas</p>
33
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
35
+ <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
36
+ <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</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 visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
46
+ <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
47
+ <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
31
48
  </div>
32
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/ms/reference/visual/text-color.md CHANGED
@@ -23,19 +23,42 @@ visual="text:[color]"
23
23
  <div visual="text:center">Centered text</div>
24
24
  ```
25
25
 
26
- ## Nilai Arbitrari
26
+ ## Pratonton
27
27
 
28
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Warna Teks
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="text:primary"</code> - Tetapkan warna teks dari tema atau palet</p>
34
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <span visual="text:primary">Primary</span>
36
+ <span visual="text:secondary">Secondary</span>
37
+ <span visual="text:success">Success</span>
38
+ <span visual="text:danger">Danger</span>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>Lihat Kod</summary>
29
44
 
30
45
  ```html
31
- <div visual="text:[custom-value]">Custom</div>
46
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <span visual="text:primary">Primary</span>
48
+ <span visual="text:secondary">Secondary</span>
49
+ <span visual="text:success">Success</span>
50
+ <span visual="text:danger">Danger</span>
51
+ </div>
32
52
  ```
33
53
 
34
- ## Responsif
54
+ </details>
35
55
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
56
  </div>
57
+
58
+ ## Nilai Arbitrari
59
+
60
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
61
+
62
+ ```html
63
+ <div visual="text:[custom-value]">Custom</div>
41
64
  ```
package/docs/ms/reference/visual/text-decoration.md CHANGED
@@ -22,11 +22,30 @@ visual="[decoration-value]"
22
22
  <a visual="no-underline">No underline link</a>
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
+ ### Hiasan Teks
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="underline"</code> - Tambah garis pada teks</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: underline;">underline</span>
35
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: line-through;">line-through</span>
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
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: underline;">underline</span>
45
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: line-through;">line-through</span>
31
46
  </div>
32
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/ms/reference/visual/text-indent.md CHANGED
@@ -19,19 +19,36 @@ visual="indent:[value]"
19
19
  <p visual="indent:medium">Indented paragraph</p>
20
20
  ```
21
21
 
22
- ## Nilai Arbitrari
22
+ ## Pratonton
23
23
 
24
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
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
+ ### Inden Teks
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>visual="indent:medium"</code> - Inden baris pertama teks</p>
30
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
31
+ <p visual="bg:primary text:white rounded:small" space="p:small" style="text-indent: 2rem;">Indented text example...</p>
32
+ </div>
33
+ </div>
34
+
35
+ <details>
36
+ <summary>Lihat Kod</summary>
25
37
 
26
38
  ```html
27
- <div visual="text:[custom-value]">Custom</div>
39
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
40
+ <p visual="bg:primary text:white rounded:small" space="p:small" style="text-indent: 2rem;">Indented text example...</p>
41
+ </div>
28
42
  ```
29
43
 
30
- ## Responsif
44
+ </details>
31
45
 
32
- ```html
33
- <!-- Contoh responsif -->
34
- <div visual="mob:... tab:... lap:...">
35
- Kandungan responsif
36
46
  </div>
47
+
48
+ ## Nilai Arbitrari
49
+
50
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
51
+
52
+ ```html
53
+ <div visual="text:[custom-value]">Custom</div>
37
54
  ```
package/docs/ms/reference/visual/text-overflow.md CHANGED
@@ -21,11 +21,28 @@ visual="[overflow-value]"
21
21
  <div visual="truncate">Very long text that gets truncated...</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
+ ### Limpahan Teks
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="truncate"</code> - Kendalikan teks yang melimpah</p>
32
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is truncated text...</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>Lihat Kod</summary>
25
39
 
26
40
  ```html
27
- <!-- Contoh responsif -->
28
- <div visual="mob:... tab:... lap:...">
29
- Kandungan responsif
41
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is truncated text...</div>
30
43
  </div>
31
44
  ```
45
+
46
+ </details>
47
+
48
+ </div>
package/docs/ms/reference/visual/text-shadow.md CHANGED
@@ -22,19 +22,36 @@ visual="text-shadow:[value]"
22
22
  <h1 visual="text-shadow:medium">Shadowed heading</h1>
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
+ ### Bayang Teks
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="text-shadow:medium"</code> - Tambah bayang pada teks</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">shadow</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
28
40
 
29
41
  ```html
30
- <div visual="text:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">shadow</div>
44
+ </div>
31
45
  ```
32
46
 
33
- ## Responsif
47
+ </details>
34
48
 
35
- ```html
36
- <!-- Contoh responsif -->
37
- <div visual="mob:... tab:... lap:...">
38
- Kandungan responsif
39
49
  </div>
50
+
51
+ ## Nilai Arbitrari
52
+
53
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
54
+
55
+ ```html
56
+ <div visual="text:[custom-value]">Custom</div>
40
57
  ```