@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/animation-play.md CHANGED
@@ -20,11 +20,30 @@ visual="animation-play:[value]"
20
20
  <div visual="animate:spin hover:animation-play:paused">Pause on hover</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
+ ### Keadaan Main Animasi
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-play:paused"</code> - Jeda atau sambung animasi</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">running</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">paused</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">running</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">paused</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/appearance.md CHANGED
@@ -20,11 +20,30 @@ visual="appearance:[value]"
20
20
  <select visual="appearance:none">Custom select</select>
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
+ ### Penampilan
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="appearance:none"</code> - Buang gaya pelayar asli dari elemen borang</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <select style="appearance: auto; padding: 0.25rem;"><option>Native</option></select>
33
+ <select style="appearance: none; padding: 0.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.25rem;"><option>Custom</option></select>
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
+ <select style="appearance: auto; padding: 0.25rem;"><option>Native</option></select>
43
+ <select style="appearance: none; padding: 0.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.25rem;"><option>Custom</option></select>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/ms/reference/visual/backdrop-blur.md CHANGED
@@ -25,19 +25,40 @@ visual="backdrop-blur:[value]"
25
25
  <div visual="backdrop-blur:medium bg:[rgba(255,255,255,0.5)]">Frosted glass</div>
26
26
  ```
27
27
 
28
- ## Nilai Arbitrari
28
+ ## Pratonton
29
29
 
30
- Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Kabur Latar Belakang
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backdrop-blur:medium"</code> - Mencipta kesan kaca beku pada kandungan di belakang elemen</p>
36
+ <div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
37
+ <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
38
+ <span visual="text:white">Frosted Glass</span>
39
+ </div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>Lihat Kod</summary>
31
45
 
32
46
  ```html
33
- <div visual="backdrop:[custom-value]">Custom</div>
47
+ <div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
48
+ <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
49
+ <span visual="text:white">Frosted Glass</span>
50
+ </div>
51
+ </div>
34
52
  ```
35
53
 
36
- ## Responsif
54
+ </details>
37
55
 
38
- ```html
39
- <!-- Contoh responsif -->
40
- <div visual="mob:... tab:... lap:...">
41
- Kandungan responsif
42
56
  </div>
57
+
58
+ ## Nilai Arbitrari
59
+
60
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
61
+
62
+ ```html
63
+ <div visual="backdrop:[custom-value]">Custom</div>
43
64
  ```
package/docs/ms/reference/visual/backdrop-brightness.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-brightness:[value]"
23
23
  <div visual="backdrop-brightness:dark">Darkened backdrop</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
+ ### Kecerahan Latar Belakang
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="backdrop-brightness:dark"</code> - Redupkan atau cerahkan latar belakang di sebalik tindanan</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
35
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
36
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
37
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
46
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
47
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
48
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsif
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
54
  </div>
55
+
56
+ ## Nilai Arbitrari
57
+
58
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/ms/reference/visual/backdrop-contrast.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-contrast:[value]"
23
23
  <div visual="backdrop-contrast:high">High contrast backdrop</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
+ ### Kontras Latar Belakang
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="backdrop-contrast:high"</code> - Laraskan kontras di belakang elemen</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">low</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">high</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">low</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">high</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsif
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
54
  </div>
55
+
56
+ ## Nilai Arbitrari
57
+
58
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/ms/reference/visual/backdrop-grayscale.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-grayscale:[value]"
21
21
  <div visual="backdrop-grayscale:full">Grayscale backdrop</div>
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
+ ### Skala Kelabu Latar Belakang
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="backdrop-grayscale:full"</code> - Alih keluar warna dari latar belakang, mencipta kesan tidak tepu</p>
32
+ <div layout="flex" space="g:medium" visual="rounded:medium">
33
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
34
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: grayscale(100%);">Grayscale</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium" visual="rounded:medium">
43
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
44
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: grayscale(100%);">Grayscale</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsif
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/ms/reference/visual/backdrop-hue-rotate.md CHANGED
@@ -21,19 +21,40 @@ visual="backdrop-hue-rotate:[degrees]"
21
21
  <div visual="backdrop-hue-rotate:90">Rotated hue backdrop</div>
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
+ ### Putaran Rona Latar Belakang
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="backdrop-hue-rotate:90"</code> - Putar warna di belakang elemen</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">0°</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">90°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">180°</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
27
41
 
28
42
  ```html
29
- <div visual="backdrop:[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">0°</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">90°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">180°</div>
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="backdrop:[custom-value]">Custom</div>
39
60
  ```
package/docs/ms/reference/visual/backdrop-invert.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-invert:[value]"
21
21
  <div visual="backdrop-invert:full">Inverted backdrop</div>
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
+ ### Songsang Latar Belakang
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="backdrop-invert:full"</code> - Songsangkan warna di belakang elemen</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">full</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[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">none</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">full</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsif
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/ms/reference/visual/backdrop-opacity.md CHANGED
@@ -21,19 +21,40 @@ visual="backdrop-opacity:[value]"
21
21
  <div visual="backdrop-opacity:50">Semi-transparent backdrop</div>
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
+ ### Kelegapan Latar Belakang
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="backdrop-opacity:50"</code> - Kawal ketelusan latar belakang</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">0</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">100</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>Lihat Kod</summary>
27
41
 
28
42
  ```html
29
- <div visual="backdrop:[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">0</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">100</div>
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="backdrop:[custom-value]">Custom</div>
39
60
  ```
package/docs/ms/reference/visual/backdrop-saturate.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-saturate:[value]"
23
23
  <div visual="backdrop-saturate:vivid">Vivid backdrop</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
+ ### Ketepuan Latar Belakang
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="backdrop-saturate:vivid"</code> - Laraskan ketepuan di belakang elemen</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">none</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>Lihat Kod</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsif
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Contoh responsif -->
38
- <div visual="mob:... tab:... lap:...">
39
- Kandungan responsif
40
54
  </div>
55
+
56
+ ## Nilai Arbitrari
57
+
58
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/ms/reference/visual/backdrop-sepia.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-sepia:[value]"
21
21
  <div visual="backdrop-sepia:full">Vintage backdrop</div>
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
+ ### Sepia Latar Belakang
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="backdrop-sepia:full"</code> - Terapkan ton sepia vintaj pada latar belakang</p>
32
+ <div layout="flex" space="g:medium" visual="rounded:medium">
33
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
34
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: sepia(100%);">Sepia</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium" visual="rounded:medium">
43
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
44
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: sepia(100%);">Sepia</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsif
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Contoh responsif -->
36
- <div visual="mob:... tab:... lap:...">
37
- Kandungan responsif
38
50
  </div>
51
+
52
+ ## Nilai Arbitrari
53
+
54
+ Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/ms/reference/visual/background-attachment.md CHANGED
@@ -21,11 +21,30 @@ visual="bg-attachment:[value]"
21
21
  <div visual="bg-attachment:fixed">Parallax effect</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
+ ### Lampiran Latar
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="bg-attachment:fixed"</code> - Kawal cara latar skrol</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
25
40
 
26
41
  ```html
27
- <!-- Contoh responsif -->
28
- <div visual="mob:... tab:... lap:...">
29
- Kandungan responsif
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">fixed</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll</div>
30
45
  </div>
31
46
  ```
47
+
48
+ </details>
49
+
50
+ </div>
package/docs/ms/reference/visual/background-blend-mode.md CHANGED
@@ -24,11 +24,32 @@ visual="bg-blend:[value]"
24
24
  <div visual="bg-blend:multiply">Multiplied background</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
+ ### Mod Campuran Latar
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="bg-blend:multiply"</code> - Campurkan latar bersama</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">multiply</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">overlay</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">multiply</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">overlay</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/ms/reference/visual/background-clip.md CHANGED
@@ -22,11 +22,28 @@ visual="bg-clip:[value]"
22
22
  <div visual="bg-clip:text text:transparent bg:gradient">Gradient 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
+ ### Keratan Latar
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="bg-clip:text"</code> - Keratan latar kepada teks untuk kesan teks gradien</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span style="font-size: 1.5rem; font-weight: bold; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;">Gradient Text</span>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>Lihat Kod</summary>
26
40
 
27
41
  ```html
28
- <!-- Contoh responsif -->
29
- <div visual="mob:... tab:... lap:...">
30
- Kandungan responsif
42
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <span style="font-size: 1.5rem; font-weight: bold; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;">Gradient Text</span>
31
44
  </div>
32
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>