@bookklik/senangstart-css 0.2.0 → 0.2.4

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 (149) hide show
  1. package/dist/senangstart-css.js +102 -7
  2. package/dist/senangstart-css.min.js +26 -24
  3. package/dist/senangstart-tw.js +389 -0
  4. package/dist/senangstart-tw.min.js +2 -0
  5. package/docs/.vitepress/config.js +13 -4
  6. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  7. package/docs/index.md +6 -0
  8. package/docs/ms/index.md +6 -0
  9. package/docs/ms/reference/visual/accent-color.md +6 -6
  10. package/docs/ms/reference/visual/animation-builtin.md +6 -6
  11. package/docs/ms/reference/visual/animation-delay.md +4 -2
  12. package/docs/ms/reference/visual/animation-direction.md +6 -6
  13. package/docs/ms/reference/visual/animation-duration.md +4 -4
  14. package/docs/ms/reference/visual/animation-fill.md +33 -9
  15. package/docs/ms/reference/visual/animation-iteration.md +5 -5
  16. package/docs/ms/reference/visual/animation-play.md +4 -4
  17. package/docs/ms/reference/visual/appearance.md +4 -4
  18. package/docs/ms/reference/visual/blend-modes.md +6 -6
  19. package/docs/ms/reference/visual/border-radius.md +8 -8
  20. package/docs/ms/reference/visual/box-shadow.md +6 -6
  21. package/docs/ms/reference/visual/caret-color.md +2 -2
  22. package/docs/ms/reference/visual/cursor.md +6 -6
  23. package/docs/ms/reference/visual/filter-blur.md +7 -7
  24. package/docs/ms/reference/visual/font-family.md +8 -8
  25. package/docs/ms/reference/visual/font-smoothing.md +4 -4
  26. package/docs/ms/reference/visual/font-style.md +4 -4
  27. package/docs/ms/reference/visual/font-variant-numeric.md +6 -4
  28. package/docs/ms/reference/visual/font-weight.md +6 -6
  29. package/docs/ms/reference/visual/gradient-from.md +57 -0
  30. package/docs/ms/reference/visual/gradient-to.md +57 -0
  31. package/docs/ms/reference/visual/gradient-via.md +54 -0
  32. package/docs/ms/reference/visual/hyphens.md +6 -6
  33. package/docs/ms/reference/visual/letter-spacing.md +8 -8
  34. package/docs/ms/reference/visual/line-clamp.md +9 -9
  35. package/docs/ms/reference/visual/line-height.md +8 -8
  36. package/docs/ms/reference/visual/list-style.md +7 -7
  37. package/docs/ms/reference/visual/mask.md +6 -2
  38. package/docs/ms/reference/visual/opacity.md +8 -8
  39. package/docs/ms/reference/visual/pointer-events.md +4 -4
  40. package/docs/ms/reference/visual/state-prefixes.md +5 -3
  41. package/docs/ms/reference/visual/text-decoration.md +6 -4
  42. package/docs/ms/reference/visual/text-indent.md +8 -4
  43. package/docs/ms/reference/visual/text-overflow.md +6 -4
  44. package/docs/ms/reference/visual/text-shadow.md +8 -2
  45. package/docs/ms/reference/visual/text-size.md +31 -13
  46. package/docs/ms/reference/visual/text-transform.md +6 -6
  47. package/docs/ms/reference/visual/text-wrap.md +8 -8
  48. package/docs/ms/reference/visual/transform-backface.md +29 -9
  49. package/docs/ms/reference/visual/transform-origin.md +4 -4
  50. package/docs/ms/reference/visual/transform-perspective-origin.md +41 -7
  51. package/docs/ms/reference/visual/transform-perspective.md +41 -7
  52. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  53. package/docs/ms/reference/visual/transform-rotate.md +6 -6
  54. package/docs/ms/reference/visual/transform-scale.md +7 -7
  55. package/docs/ms/reference/visual/transform-skew.md +6 -6
  56. package/docs/ms/reference/visual/transform-style.md +31 -11
  57. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  58. package/docs/ms/reference/visual/transform-translate.md +40 -14
  59. package/docs/ms/reference/visual/transition-delay.md +4 -2
  60. package/docs/ms/reference/visual/transition-duration.md +4 -4
  61. package/docs/ms/reference/visual/transition-timing.md +6 -6
  62. package/docs/ms/reference/visual/typography-keywords.md +8 -8
  63. package/docs/ms/reference/visual/user-select.md +4 -4
  64. package/docs/ms/reference/visual/vertical-align.md +10 -8
  65. package/docs/ms/reference/visual/whitespace.md +8 -8
  66. package/docs/ms/reference/visual/word-break.md +8 -8
  67. package/docs/public/assets/senangstart-css.min.js +209 -1545
  68. package/docs/public/assets/ss-logo.svg +83 -0
  69. package/docs/reference/visual/accent-color.md +6 -6
  70. package/docs/reference/visual/animation-builtin.md +6 -6
  71. package/docs/reference/visual/animation-delay.md +4 -2
  72. package/docs/reference/visual/animation-direction.md +6 -6
  73. package/docs/reference/visual/animation-duration.md +4 -4
  74. package/docs/reference/visual/animation-fill.md +33 -9
  75. package/docs/reference/visual/animation-iteration.md +5 -5
  76. package/docs/reference/visual/animation-play.md +4 -4
  77. package/docs/reference/visual/appearance.md +4 -4
  78. package/docs/reference/visual/blend-modes.md +6 -6
  79. package/docs/reference/visual/border-radius.md +8 -8
  80. package/docs/reference/visual/box-shadow.md +6 -6
  81. package/docs/reference/visual/caret-color.md +2 -2
  82. package/docs/reference/visual/cursor.md +6 -6
  83. package/docs/reference/visual/filter-blur.md +7 -7
  84. package/docs/reference/visual/font-family.md +8 -8
  85. package/docs/reference/visual/font-smoothing.md +4 -4
  86. package/docs/reference/visual/font-style.md +4 -4
  87. package/docs/reference/visual/font-variant-numeric.md +6 -4
  88. package/docs/reference/visual/font-weight.md +6 -6
  89. package/docs/reference/visual/gradient-from.md +57 -0
  90. package/docs/reference/visual/gradient-to.md +57 -0
  91. package/docs/reference/visual/gradient-via.md +54 -0
  92. package/docs/reference/visual/hyphens.md +6 -6
  93. package/docs/reference/visual/letter-spacing.md +8 -8
  94. package/docs/reference/visual/line-clamp.md +9 -9
  95. package/docs/reference/visual/line-height.md +8 -8
  96. package/docs/reference/visual/list-style.md +7 -7
  97. package/docs/reference/visual/mask.md +6 -2
  98. package/docs/reference/visual/opacity.md +8 -8
  99. package/docs/reference/visual/pointer-events.md +4 -4
  100. package/docs/reference/visual/state-prefixes.md +5 -3
  101. package/docs/reference/visual/text-decoration.md +6 -4
  102. package/docs/reference/visual/text-indent.md +8 -4
  103. package/docs/reference/visual/text-overflow.md +6 -4
  104. package/docs/reference/visual/text-shadow.md +8 -2
  105. package/docs/reference/visual/text-size.md +31 -13
  106. package/docs/reference/visual/text-transform.md +6 -6
  107. package/docs/reference/visual/text-wrap.md +8 -8
  108. package/docs/reference/visual/transform-backface.md +29 -9
  109. package/docs/reference/visual/transform-origin.md +4 -4
  110. package/docs/reference/visual/transform-perspective-origin.md +41 -7
  111. package/docs/reference/visual/transform-perspective.md +41 -7
  112. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  113. package/docs/reference/visual/transform-rotate.md +6 -6
  114. package/docs/reference/visual/transform-scale.md +7 -7
  115. package/docs/reference/visual/transform-skew.md +6 -6
  116. package/docs/reference/visual/transform-style.md +31 -11
  117. package/docs/reference/visual/transform-translate-z.md +90 -0
  118. package/docs/reference/visual/transform-translate.md +40 -14
  119. package/docs/reference/visual/transition-delay.md +4 -2
  120. package/docs/reference/visual/transition-duration.md +4 -4
  121. package/docs/reference/visual/transition-timing.md +6 -6
  122. package/docs/reference/visual/typography-keywords.md +8 -8
  123. package/docs/reference/visual/user-select.md +4 -4
  124. package/docs/reference/visual/vertical-align.md +10 -8
  125. package/docs/reference/visual/whitespace.md +8 -8
  126. package/docs/reference/visual/word-break.md +8 -8
  127. package/docs/syntax-reference.json +2009 -1972
  128. package/package.json +2 -2
  129. package/playground/index.html +37 -38
  130. package/playground/sample_code.txt +23 -0
  131. package/playground/tw-convertor.html +103 -589
  132. package/scripts/build-dist.js +43 -1
  133. package/scripts/convert-tailwind.js +24 -0
  134. package/scripts/generate-docs.js +9 -7
  135. package/src/cdn/jit.js +70 -7
  136. package/src/cdn/tw-conversion-engine.js +497 -0
  137. package/src/compiler/generators/css.js +24 -2
  138. package/src/config/defaults.js +31 -7
  139. package/src/definitions/layout-positioning.js +6 -6
  140. package/src/definitions/visual-backgrounds.js +113 -15
  141. package/src/definitions/visual-borders.js +1 -1
  142. package/src/definitions/visual-filters.js +16 -16
  143. package/src/definitions/visual-svg.js +5 -5
  144. package/src/definitions/visual-transform3d.js +202 -36
  145. package/src/definitions/visual-transforms.js +42 -25
  146. package/src/definitions/visual-transitions.js +40 -26
  147. package/src/definitions/visual-typography.js +53 -44
  148. package/src/definitions/visual.js +73 -58
  149. package/tests/unit/convert-tailwind.test.js +8 -0
package/docs/reference/visual/transform-translate-z.md ADDED
@@ -0,0 +1,90 @@
1
+ # Transform Translate Z
2
+
3
+ Translate element along Z axis (depth) in 3D space
4
+
5
+ ## Syntax
6
+ ```
7
+ visual="translate-z:[value]"
8
+ ```
9
+
10
+ ## Values
11
+
12
+ | Value | CSS Output | Description |
13
+ |-------|------------|-------------|
14
+ | `0` | `transform: translateZ(0)` | No Z translation |
15
+ | `near` | `transform: translateZ(50px)` | Move near (forward) |
16
+ | `far` | `transform: translateZ(-50px)` | Move far (backward) |
17
+
18
+ ## Examples
19
+
20
+ ```html
21
+ <div visual="perspective:normal"><div visual="translate-z:near">Closer</div></div>
22
+ ```
23
+
24
+ ## Preview
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
+ ### Translate Z (3D Depth)
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="translate-z:near"</code> - Move elements forward or backward in 3D space</p>
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">
34
+ <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
35
+ <div space="p:medium" visual="perspective:near">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
37
+ </div>
38
+ </div>
39
+ <div layout="flex:col" space="g:tiny">
40
+ <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
41
+ <div space="p:medium" visual="perspective:near">
42
+ <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
43
+ </div>
44
+ </div>
45
+ <div layout="flex:col" space="g:tiny">
46
+ <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
47
+ <div space="p:medium" visual="perspective:near">
48
+ <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <details>
55
+ <summary>View Code</summary>
56
+
57
+ ```html
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">
60
+ <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
61
+ <div space="p:medium" visual="perspective:near">
62
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
63
+ </div>
64
+ </div>
65
+ <div layout="flex:col" space="g:tiny">
66
+ <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
67
+ <div space="p:medium" visual="perspective:near">
68
+ <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
69
+ </div>
70
+ </div>
71
+ <div layout="flex:col" space="g:tiny">
72
+ <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
73
+ <div space="p:medium" visual="perspective:near">
74
+ <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ ```
79
+
80
+ </details>
81
+
82
+ </div>
83
+
84
+ ## Arbitrary Values
85
+
86
+ Supports custom values using bracket syntax:
87
+
88
+ ```html
89
+ <div visual="transform:[custom-value]">Custom</div>
90
+ ```
package/docs/reference/visual/transform-translate.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Transform Translate
2
2
 
3
- Translate element position
3
+ Translate element position along X, Y, or Z axis
4
4
 
5
5
  ## Syntax
6
6
  ```
7
- visual="translate-x:[value]" or visual="translate-y:[value]"
7
+ visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translate-z:[value]"
8
8
  ```
9
9
 
10
10
  ## Values
@@ -12,13 +12,21 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
12
12
  | Value | CSS Output | Description |
13
13
  |-------|------------|-------------|
14
14
  | `0` | `transform: translateX(0)` | No translation |
15
- | `full` | `transform: translateX(100%)` | Full width |
16
- | `1/2` | `transform: translateX(50%)` | Half width |
15
+ | `tiny` | `transform: translateX(var(--sp-tiny))` | Tiny offset |
16
+ | `small` | `transform: translateX(var(--sp-small))` | Small offset |
17
+ | `medium` | `transform: translateX(var(--sp-medium))` | Medium offset |
18
+ | `big` | `transform: translateX(var(--sp-big))` | Big offset |
19
+ | `full` | `transform: translateX(100%)` | Full width/height |
20
+ | `1/2` | `transform: translateX(50%)` | Half width/height |
21
+ | `-full` | `transform: translateX(-100%)` | Negative full |
22
+ | `-1/2` | `transform: translateX(-50%)` | Negative half |
17
23
 
18
24
  ## Examples
19
25
 
20
26
  ```html
21
- <div visual="translate-x:full">Moved right</div>
27
+ <div visual="translate-x:medium">Moved right</div>
28
+ <div visual="translate-y:small">Moved down</div>
29
+ <div visual="translate-z:[50px]">Moved forward in 3D</div>
22
30
  ```
23
31
 
24
32
  ## Preview
@@ -28,11 +36,20 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
28
36
  ### Translate Transform
29
37
 
30
38
  <div layout="flex col" space="g:medium">
31
- <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:full"</code> - Move elements position</p>
32
- <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
33
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
34
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
35
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
39
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:medium"</code> - Move elements along X, Y, or Z axis</p>
40
+ <div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
41
+ <div layout="flex" space="g:small">
42
+ <span visual="text:neutral-500 text-size:small">X axis:</span>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:small">small</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:medium">medium</div>
46
+ </div>
47
+ <div layout="flex" space="g:small">
48
+ <span visual="text:neutral-500 text-size:small">Y axis:</span>
49
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:0">0</div>
50
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
51
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
52
+ </div>
36
53
  </div>
37
54
  </div>
38
55
 
@@ -40,10 +57,19 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
40
57
  <summary>View Code</summary>
41
58
 
42
59
  ```html
43
- <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
44
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
45
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
46
- <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
60
+ <div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
61
+ <div layout="flex" space="g:small">
62
+ <span visual="text:neutral-500 text-size:small">X axis:</span>
63
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
64
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:small">small</div>
65
+ <div space="p:small" visual="bg:primary text:white rounded:small translate-x:medium">medium</div>
66
+ </div>
67
+ <div layout="flex" space="g:small">
68
+ <span visual="text:neutral-500 text-size:small">Y axis:</span>
69
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:0">0</div>
70
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
71
+ <div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
72
+ </div>
47
73
  </div>
48
74
  ```
49
75
 
package/docs/reference/visual/transition-delay.md CHANGED
@@ -32,7 +32,8 @@ visual="delay:[value]"
32
32
  <div layout="flex col" space="g:medium">
33
33
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="delay:slow"</code> - Delay before transition starts</p>
34
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">delay:slow (300ms)</div>
35
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
36
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
36
37
  </div>
37
38
  </div>
38
39
 
@@ -41,7 +42,8 @@ visual="delay:[value]"
41
42
 
42
43
  ```html
43
44
  <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">delay:slow (300ms)</div>
45
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
46
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
45
47
  </div>
46
48
  ```
47
49
 
package/docs/reference/visual/transition-duration.md CHANGED
@@ -34,8 +34,8 @@ visual="duration:[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="duration:slow"</code> - Control transition speed</p>
36
36
  <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
- <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
38
- <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
37
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
38
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
39
39
  </div>
40
40
  </div>
41
41
 
@@ -44,8 +44,8 @@ visual="duration:[value]"
44
44
 
45
45
  ```html
46
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">fast: 150ms</div>
48
- <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
47
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
48
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
49
49
  </div>
50
50
  ```
51
51
 
package/docs/reference/visual/transition-timing.md CHANGED
@@ -31,9 +31,9 @@ visual="ease:[value]"
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="ease:out"</code> - Control acceleration curve</p>
33
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">ease:in</div>
35
- <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
36
- <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
34
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
35
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
36
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
37
37
  </div>
38
38
  </div>
39
39
 
@@ -42,9 +42,9 @@ visual="ease:[value]"
42
42
 
43
43
  ```html
44
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">ease:in</div>
46
- <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
47
- <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
45
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
46
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
47
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
48
48
  </div>
49
49
  ```
50
50
 
package/docs/reference/visual/typography-keywords.md CHANGED
@@ -80,10 +80,10 @@ visual="[keyword]"
80
80
  <div layout="flex col" space="g:medium">
81
81
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="italic"</code> - Quick typography utilities without value syntax</p>
82
82
  <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
83
- <span style="font-style: italic;">italic</span>
84
- <span style="text-transform: uppercase;">upper</span>
85
- <span style="text-decoration: underline;">underline</span>
86
- <span style="text-decoration: line-through;">strike</span>
83
+ <span visual="italic">italic</span>
84
+ <span visual="uppercase">upper</span>
85
+ <span visual="underline">underline</span>
86
+ <span visual="line-through">strike</span>
87
87
  </div>
88
88
  </div>
89
89
 
@@ -92,10 +92,10 @@ visual="[keyword]"
92
92
 
93
93
  ```html
94
94
  <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
95
- <span style="font-style: italic;">italic</span>
96
- <span style="text-transform: uppercase;">upper</span>
97
- <span style="text-decoration: underline;">underline</span>
98
- <span style="text-decoration: line-through;">strike</span>
95
+ <span visual="italic">italic</span>
96
+ <span visual="uppercase">upper</span>
97
+ <span visual="underline">underline</span>
98
+ <span visual="line-through">strike</span>
99
99
  </div>
100
100
  ```
101
101
 
package/docs/reference/visual/user-select.md CHANGED
@@ -31,8 +31,8 @@ visual="select:[value]"
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="select:none"</code> - Control whether text can be selected</p>
33
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="user-select: none;">none (try select)</div>
35
- <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
35
+ <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
36
36
  </div>
37
37
  </div>
38
38
 
@@ -41,8 +41,8 @@ visual="select:[value]"
41
41
 
42
42
  ```html
43
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" style="user-select: none;">none (try select)</div>
45
- <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
45
+ <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
46
46
  </div>
47
47
  ```
48
48
 
package/docs/reference/visual/vertical-align.md CHANGED
@@ -34,10 +34,11 @@ visual="align:[value]"
34
34
 
35
35
  <div layout="flex col" space="g:medium">
36
36
  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="align:middle"</code> - Align inline elements</p>
37
- <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
- <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
39
- <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
40
- <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
37
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
39
+ <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
40
+ <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
41
+ <span visual="text-size:huge text:neutral-500">Big</span>
41
42
  </div>
42
43
  </div>
43
44
 
@@ -45,10 +46,11 @@ visual="align:[value]"
45
46
  <summary>View Code</summary>
46
47
 
47
48
  ```html
48
- <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
- <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
50
- <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
51
- <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
49
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
51
+ <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
52
+ <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
53
+ <span visual="text-size:huge text:neutral-500">Big</span>
52
54
  </div>
53
55
  ```
54
56
 
package/docs/reference/visual/whitespace.md CHANGED
@@ -32,10 +32,10 @@ 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> - Control whitespace handling</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">normal</div>
37
- <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
38
- <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
35
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
37
+ <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
38
+ <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
39
39
  </div>
40
40
  </div>
41
41
 
@@ -43,10 +43,10 @@ visual="whitespace:[value]"
43
43
  <summary>View Code</summary>
44
44
 
45
45
  ```html
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">normal</div>
48
- <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
49
- <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
46
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
48
+ <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
49
+ <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
50
50
  </div>
51
51
  ```
52
52
 
package/docs/reference/visual/word-break.md CHANGED
@@ -30,10 +30,10 @@ 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> - Control word breaking</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">normal</div>
35
- <div space="p:small" visual="bg:primary text:white rounded:small">break-words</div>
36
- <div space="p:small" visual="bg:primary text:white rounded:small">break-all</div>
33
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
35
+ <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
36
+ <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
37
37
  </div>
38
38
  </div>
39
39
 
@@ -41,10 +41,10 @@ visual="[break-value]"
41
41
  <summary>View Code</summary>
42
42
 
43
43
  ```html
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">normal</div>
46
- <div space="p:small" visual="bg:primary text:white rounded:small">break-words</div>
47
- <div space="p:small" visual="bg:primary text:white rounded:small">break-all</div>
44
+ <div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
46
+ <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
47
+ <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
48
48
  </div>
49
49
  ```
50
50