@bookklik/senangstart-css 0.2.4 → 0.2.6

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 (154) hide show
  1. package/.agent/skills/add-utility/scripts/scaffold-utility.js +209 -0
  2. package/.agent/skills/compiler-development/SKILL.md +272 -0
  3. package/.agent/skills/jit-engine/SKILL.md +241 -0
  4. package/.agent/skills/jit-engine/examples/add-visual-utility.js +117 -0
  5. package/.agent/skills/jit-engine/examples/scale-based-utilities.js +130 -0
  6. package/.agent/skills/jit-engine/examples/state-responsive-handling.js +177 -0
  7. package/.agent/skills/senangstart-architecture/SKILL.md +163 -0
  8. package/.agent/skills/tailwind-conversion/SKILL.md +264 -0
  9. package/.agent/workflows/add-utility.md +155 -0
  10. package/.agent/workflows/build.md +97 -0
  11. package/.agent/workflows/dev.md +58 -0
  12. package/.agent/workflows/docs.md +113 -0
  13. package/.agent/workflows/test.md +103 -0
  14. package/dist/senangstart-css.js +165 -20
  15. package/dist/senangstart-css.min.js +39 -26
  16. package/dist/senangstart-tw.js +262 -52
  17. package/dist/senangstart-tw.min.js +1 -1
  18. package/docs/.vitepress/config.js +10 -2
  19. package/docs/guide/cdn.md +1 -1
  20. package/docs/ms/guide/cdn.md +1 -1
  21. package/docs/ms/reference/layout/position.md +4 -4
  22. package/docs/ms/reference/layout/z-index.md +8 -8
  23. package/docs/ms/reference/space/gap.md +1 -1
  24. package/docs/ms/reference/space/height.md +42 -7
  25. package/docs/ms/reference/space/margin.md +1 -1
  26. package/docs/ms/reference/space/padding.md +1 -1
  27. package/docs/ms/reference/space/scale-reference.md +46 -17
  28. package/docs/ms/reference/space/width.md +40 -5
  29. package/docs/ms/reference/space.md +1 -1
  30. package/docs/ms/reference/spacing.md +103 -21
  31. package/docs/ms/reference/visual/animation-fill.md +8 -8
  32. package/docs/ms/reference/visual/backdrop-blur.md +4 -4
  33. package/docs/ms/reference/visual/backdrop-brightness.md +8 -8
  34. package/docs/ms/reference/visual/backdrop-grayscale.md +6 -6
  35. package/docs/ms/reference/visual/backdrop-sepia.md +6 -6
  36. package/docs/ms/reference/visual/background-clip.md +2 -2
  37. package/docs/ms/reference/visual/background-image.md +4 -4
  38. package/docs/ms/reference/visual/divide-reverse.md +66 -0
  39. package/docs/ms/reference/visual/divide-style.md +80 -0
  40. package/docs/ms/reference/visual/divide-width.md +89 -0
  41. package/docs/ms/reference/visual/divide.md +115 -0
  42. package/docs/ms/reference/visual/filter-brightness.md +4 -4
  43. package/docs/ms/reference/visual/filter-contrast.md +4 -4
  44. package/docs/ms/reference/visual/filter-drop-shadow.md +6 -6
  45. package/docs/ms/reference/visual/filter-grayscale.md +4 -4
  46. package/docs/ms/reference/visual/filter-hue-rotate.md +4 -4
  47. package/docs/ms/reference/visual/filter-invert.md +2 -2
  48. package/docs/ms/reference/visual/filter-saturate.md +4 -4
  49. package/docs/ms/reference/visual/filter-sepia.md +4 -4
  50. package/docs/ms/reference/visual/font-family.md +2 -2
  51. package/docs/ms/reference/visual/gradient-from.md +57 -57
  52. package/docs/ms/reference/visual/gradient-to.md +57 -57
  53. package/docs/ms/reference/visual/gradient-via.md +54 -54
  54. package/docs/ms/reference/visual/letter-spacing.md +2 -2
  55. package/docs/ms/reference/visual/line-clamp.md +2 -2
  56. package/docs/ms/reference/visual/line-height.md +2 -2
  57. package/docs/ms/reference/visual/outline.md +2 -2
  58. package/docs/ms/reference/visual/ring-color.md +29 -0
  59. package/docs/ms/reference/visual/ring-offset.md +30 -0
  60. package/docs/ms/reference/visual/ring.md +62 -0
  61. package/docs/ms/reference/visual/stroke-width.md +6 -6
  62. package/docs/ms/reference/visual/stroke.md +4 -4
  63. package/docs/ms/reference/visual/text-indent.md +2 -2
  64. package/docs/ms/reference/visual/text-overflow.md +2 -2
  65. package/docs/ms/reference/visual/text-size.md +2 -2
  66. package/docs/ms/reference/visual/text-wrap.md +2 -2
  67. package/docs/ms/reference/visual/transform-backface.md +4 -4
  68. package/docs/ms/reference/visual/transform-perspective-origin.md +6 -6
  69. package/docs/ms/reference/visual/transform-perspective.md +6 -6
  70. package/docs/ms/reference/visual/transform-rotate-3d.md +6 -6
  71. package/docs/ms/reference/visual/transform-style.md +4 -4
  72. package/docs/ms/reference/visual/transform-translate-z.md +6 -6
  73. package/docs/ms/reference/visual/transform-translate.md +2 -2
  74. package/docs/ms/reference/visual/whitespace.md +2 -2
  75. package/docs/ms/reference/visual/word-break.md +2 -2
  76. package/docs/public/assets/senangstart-css.min.js +39 -26
  77. package/docs/public/llms.txt +1756 -0
  78. package/docs/reference/layout/position.md +4 -4
  79. package/docs/reference/layout/z-index.md +8 -8
  80. package/docs/reference/space/gap.md +1 -1
  81. package/docs/reference/space/height.md +42 -7
  82. package/docs/reference/space/margin.md +1 -1
  83. package/docs/reference/space/padding.md +1 -1
  84. package/docs/reference/space/scale-reference.md +46 -17
  85. package/docs/reference/space/width.md +40 -5
  86. package/docs/reference/space.md +1 -1
  87. package/docs/reference/spacing.md +103 -21
  88. package/docs/reference/visual/animation-fill.md +8 -8
  89. package/docs/reference/visual/backdrop-blur.md +4 -4
  90. package/docs/reference/visual/backdrop-brightness.md +8 -8
  91. package/docs/reference/visual/backdrop-grayscale.md +6 -6
  92. package/docs/reference/visual/backdrop-sepia.md +6 -6
  93. package/docs/reference/visual/background-clip.md +2 -2
  94. package/docs/reference/visual/background-image.md +4 -4
  95. package/docs/reference/visual/divide-reverse.md +66 -0
  96. package/docs/reference/visual/divide-style.md +80 -0
  97. package/docs/reference/visual/divide-width.md +89 -0
  98. package/docs/reference/visual/divide.md +115 -0
  99. package/docs/reference/visual/filter-brightness.md +4 -4
  100. package/docs/reference/visual/filter-contrast.md +4 -4
  101. package/docs/reference/visual/filter-drop-shadow.md +6 -6
  102. package/docs/reference/visual/filter-grayscale.md +4 -4
  103. package/docs/reference/visual/filter-hue-rotate.md +4 -4
  104. package/docs/reference/visual/filter-invert.md +2 -2
  105. package/docs/reference/visual/filter-saturate.md +4 -4
  106. package/docs/reference/visual/filter-sepia.md +4 -4
  107. package/docs/reference/visual/font-family.md +2 -2
  108. package/docs/reference/visual/gradient-from.md +57 -57
  109. package/docs/reference/visual/gradient-to.md +57 -57
  110. package/docs/reference/visual/gradient-via.md +54 -54
  111. package/docs/reference/visual/letter-spacing.md +2 -2
  112. package/docs/reference/visual/line-clamp.md +2 -2
  113. package/docs/reference/visual/line-height.md +2 -2
  114. package/docs/reference/visual/outline.md +2 -2
  115. package/docs/reference/visual/ring-color.md +29 -0
  116. package/docs/reference/visual/ring-offset.md +30 -0
  117. package/docs/reference/visual/ring.md +62 -0
  118. package/docs/reference/visual/stroke-width.md +6 -6
  119. package/docs/reference/visual/stroke.md +4 -4
  120. package/docs/reference/visual/text-indent.md +2 -2
  121. package/docs/reference/visual/text-overflow.md +2 -2
  122. package/docs/reference/visual/text-size.md +2 -2
  123. package/docs/reference/visual/text-wrap.md +2 -2
  124. package/docs/reference/visual/transform-backface.md +4 -4
  125. package/docs/reference/visual/transform-perspective-origin.md +6 -6
  126. package/docs/reference/visual/transform-perspective.md +6 -6
  127. package/docs/reference/visual/transform-rotate-3d.md +6 -6
  128. package/docs/reference/visual/transform-style.md +4 -4
  129. package/docs/reference/visual/transform-translate-z.md +6 -6
  130. package/docs/reference/visual/transform-translate.md +2 -2
  131. package/docs/reference/visual/whitespace.md +2 -2
  132. package/docs/reference/visual/word-break.md +2 -2
  133. package/docs/reference/visual.md +8 -2
  134. package/package.json +4 -2
  135. package/scripts/build-dist.js +2 -2
  136. package/scripts/bundle-jit.js +3 -3
  137. package/scripts/convert-tailwind.js +250 -2
  138. package/scripts/generate-llms-txt.js +264 -0
  139. package/src/cdn/{jit.js → senangstart-engine.js} +184 -38
  140. package/src/cdn/tw-conversion-engine.js +282 -68
  141. package/src/compiler/generators/css.js +115 -2
  142. package/src/config/defaults.js +37 -11
  143. package/src/core/constants.js +37 -8
  144. package/src/definitions/index.js +3 -0
  145. package/src/definitions/space.js +97 -20
  146. package/src/definitions/visual-borders.js +80 -1
  147. package/src/definitions/visual-divide.js +225 -0
  148. package/src/definitions/visual-transform3d.js +16 -16
  149. package/src/definitions/visual-transforms.js +1 -1
  150. package/src/definitions/visual-transitions.js +4 -4
  151. package/src/definitions/visual-typography.js +6 -6
  152. package/src/definitions/visual.js +4 -4
  153. package/tests/unit/compiler/generators/css.test.js +267 -3
  154. package/tests/unit/convert-tailwind.test.js +59 -1
package/docs/ms/reference/visual/text-size.md CHANGED
@@ -40,7 +40,7 @@ visual="text-size:[value]"
40
40
 
41
41
  <div layout="flex col" space="g:medium">
42
42
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-size:big"</code> - Skala saiz teks dengan ketinggian baris berpasangan</p>
43
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
44
  <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
45
45
  <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
46
46
  <span visual="text-size:base">base (1rem / 1.5rem)</span>
@@ -53,7 +53,7 @@ visual="text-size:[value]"
53
53
  <summary>Lihat Kod</summary>
54
54
 
55
55
  ```html
56
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
56
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
57
57
  <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
58
58
  <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
59
59
  <span visual="text-size:base">base (1rem / 1.5rem)</span>
package/docs/ms/reference/visual/text-wrap.md CHANGED
@@ -30,7 +30,7 @@ visual="[wrap-value]"
30
30
 
31
31
  <div layout="flex col" space="g:medium">
32
32
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-balance"</code> - Kawal pembalutan baris</p>
33
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
34
  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
35
35
  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
36
36
  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
@@ -41,7 +41,7 @@ visual="[wrap-value]"
41
41
  <summary>Lihat Kod</summary>
42
42
 
43
43
  ```html
44
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
45
  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
46
46
  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
47
47
  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
package/docs/ms/reference/visual/transform-backface.md CHANGED
@@ -29,13 +29,13 @@ visual="backface:[value]"
29
29
  <div layout="flex col" space="g:medium">
30
30
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backface:hidden"</code> - Tunjukkan atau sembunyikan bahagian belakang apabila diputar 180°</p>
31
31
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
- <div layout="flex:col" space="g:tiny">
32
+ <div layout="flex col" space="g:tiny">
33
33
  <span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
34
34
  <div space="p:medium" visual="perspective:normal">
35
35
  <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
36
36
  </div>
37
37
  </div>
38
- <div layout="flex:col" space="g:tiny">
38
+ <div layout="flex col" space="g:tiny">
39
39
  <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
40
40
  <div space="p:medium" visual="perspective:normal">
41
41
  <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
@@ -49,13 +49,13 @@ visual="backface:[value]"
49
49
 
50
50
  ```html
51
51
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
52
- <div layout="flex:col" space="g:tiny">
52
+ <div layout="flex col" space="g:tiny">
53
53
  <span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
54
54
  <div space="p:medium" visual="perspective:normal">
55
55
  <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
56
56
  </div>
57
57
  </div>
58
- <div layout="flex:col" space="g:tiny">
58
+ <div layout="flex col" space="g:tiny">
59
59
  <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
60
60
  <div space="p:medium" visual="perspective:normal">
61
61
  <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
package/docs/ms/reference/visual/transform-perspective-origin.md CHANGED
@@ -36,19 +36,19 @@ visual="perspective-origin:[value]"
36
36
  <div layout="flex col" space="g:medium">
37
37
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective-origin:center"</code> - Tetapkan lokasi titik lenyap untuk transformasi 3D</p>
38
38
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
- <div layout="flex:col" space="g:tiny">
39
+ <div layout="flex col" space="g:tiny">
40
40
  <span visual="text:neutral-500 text-size:tiny">left</span>
41
41
  <div space="p:medium" visual="perspective:normal perspective-origin:left">
42
42
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
43
43
  </div>
44
44
  </div>
45
- <div layout="flex:col" space="g:tiny">
45
+ <div layout="flex col" space="g:tiny">
46
46
  <span visual="text:neutral-500 text-size:tiny">center</span>
47
47
  <div space="p:medium" visual="perspective:normal perspective-origin:center">
48
48
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
49
49
  </div>
50
50
  </div>
51
- <div layout="flex:col" space="g:tiny">
51
+ <div layout="flex col" space="g:tiny">
52
52
  <span visual="text:neutral-500 text-size:tiny">right</span>
53
53
  <div space="p:medium" visual="perspective:normal perspective-origin:right">
54
54
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
@@ -62,19 +62,19 @@ visual="perspective-origin:[value]"
62
62
 
63
63
  ```html
64
64
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
65
- <div layout="flex:col" space="g:tiny">
65
+ <div layout="flex col" space="g:tiny">
66
66
  <span visual="text:neutral-500 text-size:tiny">left</span>
67
67
  <div space="p:medium" visual="perspective:normal perspective-origin:left">
68
68
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
69
69
  </div>
70
70
  </div>
71
- <div layout="flex:col" space="g:tiny">
71
+ <div layout="flex col" space="g:tiny">
72
72
  <span visual="text:neutral-500 text-size:tiny">center</span>
73
73
  <div space="p:medium" visual="perspective:normal perspective-origin:center">
74
74
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
75
75
  </div>
76
76
  </div>
77
- <div layout="flex:col" space="g:tiny">
77
+ <div layout="flex col" space="g:tiny">
78
78
  <span visual="text:neutral-500 text-size:tiny">right</span>
79
79
  <div space="p:medium" visual="perspective:normal perspective-origin:right">
80
80
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
package/docs/ms/reference/visual/transform-perspective.md CHANGED
@@ -34,19 +34,19 @@ visual="perspective:[value]"
34
34
  <div layout="flex col" space="g:medium">
35
35
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective:normal"</code> - Kawal persepsi kedalaman 3D - terapkan pada induk, transformasi anak</p>
36
36
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
- <div layout="flex:col" space="g:tiny">
37
+ <div layout="flex col" space="g:tiny">
38
38
  <span visual="text:neutral-500 text-size:tiny">dramatic</span>
39
39
  <div space="p:medium" visual="perspective:dramatic">
40
40
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
41
41
  </div>
42
42
  </div>
43
- <div layout="flex:col" space="g:tiny">
43
+ <div layout="flex col" space="g:tiny">
44
44
  <span visual="text:neutral-500 text-size:tiny">normal</span>
45
45
  <div space="p:medium" visual="perspective:normal">
46
46
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
47
47
  </div>
48
48
  </div>
49
- <div layout="flex:col" space="g:tiny">
49
+ <div layout="flex col" space="g:tiny">
50
50
  <span visual="text:neutral-500 text-size:tiny">far</span>
51
51
  <div space="p:medium" visual="perspective:far">
52
52
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
@@ -60,19 +60,19 @@ visual="perspective:[value]"
60
60
 
61
61
  ```html
62
62
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
63
- <div layout="flex:col" space="g:tiny">
63
+ <div layout="flex col" space="g:tiny">
64
64
  <span visual="text:neutral-500 text-size:tiny">dramatic</span>
65
65
  <div space="p:medium" visual="perspective:dramatic">
66
66
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
67
67
  </div>
68
68
  </div>
69
- <div layout="flex:col" space="g:tiny">
69
+ <div layout="flex col" space="g:tiny">
70
70
  <span visual="text:neutral-500 text-size:tiny">normal</span>
71
71
  <div space="p:medium" visual="perspective:normal">
72
72
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
73
73
  </div>
74
74
  </div>
75
- <div layout="flex:col" space="g:tiny">
75
+ <div layout="flex col" space="g:tiny">
76
76
  <span visual="text:neutral-500 text-size:tiny">far</span>
77
77
  <div space="p:medium" visual="perspective:far">
78
78
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
package/docs/ms/reference/visual/transform-rotate-3d.md CHANGED
@@ -33,19 +33,19 @@ visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[
33
33
  <div layout="flex col" space="g:medium">
34
34
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rotate-y:45"</code> - Putar elemen sepanjang paksi X, Y, atau Z dalam ruang 3D</p>
35
35
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
- <div layout="flex:col" space="g:tiny">
36
+ <div layout="flex col" space="g:tiny">
37
37
  <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
38
38
  <div space="p:medium" visual="perspective:normal">
39
39
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
40
40
  </div>
41
41
  </div>
42
- <div layout="flex:col" space="g:tiny">
42
+ <div layout="flex col" space="g:tiny">
43
43
  <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
44
44
  <div space="p:medium" visual="perspective:normal">
45
45
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
46
46
  </div>
47
47
  </div>
48
- <div layout="flex:col" space="g:tiny">
48
+ <div layout="flex col" space="g:tiny">
49
49
  <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
50
50
  <div space="p:medium" visual="perspective:normal">
51
51
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
@@ -59,19 +59,19 @@ visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[
59
59
 
60
60
  ```html
61
61
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
62
- <div layout="flex:col" space="g:tiny">
62
+ <div layout="flex col" space="g:tiny">
63
63
  <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
64
64
  <div space="p:medium" visual="perspective:normal">
65
65
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
66
66
  </div>
67
67
  </div>
68
- <div layout="flex:col" space="g:tiny">
68
+ <div layout="flex col" space="g:tiny">
69
69
  <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
70
70
  <div space="p:medium" visual="perspective:normal">
71
71
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
72
72
  </div>
73
73
  </div>
74
- <div layout="flex:col" space="g:tiny">
74
+ <div layout="flex col" space="g:tiny">
75
75
  <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
76
76
  <div space="p:medium" visual="perspective:normal">
77
77
  <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
package/docs/ms/reference/visual/transform-style.md CHANGED
@@ -29,13 +29,13 @@ visual="transform-style:[value]"
29
29
  <div layout="flex col" space="g:medium">
30
30
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transform-style:preserve-3d"</code> - Rata atau kekalkan 3D untuk transformasi bersarang</p>
31
31
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
- <div layout="flex:col" space="g:tiny">
32
+ <div layout="flex col" space="g:tiny">
33
33
  <span visual="text:neutral-500 text-size:tiny">flat</span>
34
34
  <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
35
35
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
36
36
  </div>
37
37
  </div>
38
- <div layout="flex:col" space="g:tiny">
38
+ <div layout="flex col" space="g:tiny">
39
39
  <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
40
40
  <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
41
41
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
@@ -49,13 +49,13 @@ visual="transform-style:[value]"
49
49
 
50
50
  ```html
51
51
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
52
- <div layout="flex:col" space="g:tiny">
52
+ <div layout="flex col" space="g:tiny">
53
53
  <span visual="text:neutral-500 text-size:tiny">flat</span>
54
54
  <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
55
55
  <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
56
56
  </div>
57
57
  </div>
58
- <div layout="flex:col" space="g:tiny">
58
+ <div layout="flex col" space="g:tiny">
59
59
  <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
60
60
  <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
61
61
  <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
package/docs/ms/reference/visual/transform-translate-z.md CHANGED
@@ -30,19 +30,19 @@ visual="translate-z:[value]"
30
30
  <div layout="flex col" space="g:medium">
31
31
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-z:near"</code> - Alihkan elemen ke hadapan atau belakang dalam ruang 3D</p>
32
32
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
- <div layout="flex:col" space="g:tiny">
33
+ <div layout="flex col" space="g:tiny">
34
34
  <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
35
35
  <div space="p:medium" visual="perspective:near">
36
36
  <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
37
37
  </div>
38
38
  </div>
39
- <div layout="flex:col" space="g:tiny">
39
+ <div layout="flex col" space="g:tiny">
40
40
  <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
41
41
  <div space="p:medium" visual="perspective:near">
42
42
  <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
43
43
  </div>
44
44
  </div>
45
- <div layout="flex:col" space="g:tiny">
45
+ <div layout="flex col" space="g:tiny">
46
46
  <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
47
47
  <div space="p:medium" visual="perspective:near">
48
48
  <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
@@ -56,19 +56,19 @@ visual="translate-z:[value]"
56
56
 
57
57
  ```html
58
58
  <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
59
- <div layout="flex:col" space="g:tiny">
59
+ <div layout="flex col" space="g:tiny">
60
60
  <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
61
61
  <div space="p:medium" visual="perspective:near">
62
62
  <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
63
63
  </div>
64
64
  </div>
65
- <div layout="flex:col" space="g:tiny">
65
+ <div layout="flex col" space="g:tiny">
66
66
  <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
67
67
  <div space="p:medium" visual="perspective:near">
68
68
  <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
69
69
  </div>
70
70
  </div>
71
- <div layout="flex:col" space="g:tiny">
71
+ <div layout="flex col" space="g:tiny">
72
72
  <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
73
73
  <div space="p:medium" visual="perspective:near">
74
74
  <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
package/docs/ms/reference/visual/transform-translate.md CHANGED
@@ -37,7 +37,7 @@ visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translat
37
37
 
38
38
  <div layout="flex col" space="g:medium">
39
39
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:medium"</code> - Alihkan elemen sepanjang paksi X, Y, atau Z</p>
40
- <div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
40
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
41
  <div layout="flex" space="g:small">
42
42
  <span visual="text:neutral-500 text-size:small">X axis:</span>
43
43
  <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
@@ -57,7 +57,7 @@ visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translat
57
57
  <summary>Lihat Kod</summary>
58
58
 
59
59
  ```html
60
- <div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
60
+ <div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
61
61
  <div layout="flex" space="g:small">
62
62
  <span visual="text:neutral-500 text-size:small">X axis:</span>
63
63
  <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
package/docs/ms/reference/visual/whitespace.md CHANGED
@@ -32,7 +32,7 @@ visual="whitespace:[value]"
32
32
 
33
33
  <div layout="flex col" space="g:medium">
34
34
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="whitespace:pre"</code> - Kawal pengendalian ruang putih</p>
35
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
36
  <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
37
37
  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
38
38
  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
@@ -43,7 +43,7 @@ visual="whitespace:[value]"
43
43
  <summary>Lihat Kod</summary>
44
44
 
45
45
  ```html
46
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
47
  <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
48
48
  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
49
49
  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
package/docs/ms/reference/visual/word-break.md CHANGED
@@ -30,7 +30,7 @@ visual="[break-value]"
30
30
 
31
31
  <div layout="flex col" space="g:medium">
32
32
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="break-words"</code> - Kawal pemecahan perkataan</p>
33
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
34
  <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
35
35
  <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
36
36
  <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
@@ -41,7 +41,7 @@ visual="[break-value]"
41
41
  <summary>Lihat Kod</summary>
42
42
 
43
43
  ```html
44
- <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
45
  <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
46
46
  <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
47
47
  <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>