@bookklik/senangstart-css 0.2.0 → 0.2.3

package/docs/reference/visual/transform-rotate-3d.md

@@ -0,0 +1,93 @@
+# Transform Rotate 3d
+
+Rotate element in 3D space along X, Y, or Z axis
+
+## Syntax
+```
+visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[degrees]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `0` | `transform: rotateX(0deg)` | No rotation |
+| `45` | `transform: rotateX(45deg)` | 45° rotation |
+| `90` | `transform: rotateX(90deg)` | 90° rotation |
+| `180` | `transform: rotateX(180deg)` | 180° rotation |
+
+## Examples
+
+```html
+<div visual="perspective:normal"><div visual="rotate-x:45">Tilted forward</div></div>
+<div visual="perspective:normal"><div visual="rotate-y:45">Turned sideways</div></div>
+<div visual="rotate-z:45">Spun flat</div>
+```
+
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### 3D Rotation
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rotate-y:45"</code> - Rotate elements along X, Y, or Z axis in 3D space</p>
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
+    </div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="transform:[custom-value]">Custom</div>
+```

package/docs/reference/visual/transform-rotate.md

@@ -31,9 +31,9 @@ visual="rotate:[degrees]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rotate:45"</code> - Rotate elements by degrees</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:0">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90°</div>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="rotate:[degrees]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:0">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90°</div>
 </div>
 ```
 

package/docs/reference/visual/transform-scale.md

@@ -32,11 +32,11 @@ visual="scale:[value]"
 ### Scale Transform
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scale:110"</code> - Scale elements up or down</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scale:75"</code> - Scale elements up or down</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:100">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:125">125%</div>
 </div>
 </div>
 
@@ -45,9 +45,9 @@ visual="scale:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:100">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:125">125%</div>
 </div>
 ```
 

package/docs/reference/visual/transform-skew.md

@@ -31,9 +31,9 @@ visual="skew-x:[degrees]" or visual="skew-y:[degrees]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="skew-x:6"</code> - Skew elements along axes</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:0">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12°</div>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="skew-x:[degrees]" or visual="skew-y:[degrees]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:0">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12°</div>
 </div>
 ```
 

package/docs/reference/visual/transform-style.md

@@ -1,6 +1,6 @@
 # Transform Style
 
-Set 3D transform style
+Preserve 3D space for nested transformed elements
 
 ## Syntax
 ```
@@ -11,13 +11,13 @@ visual="transform-style:[value]"
 
 | Value | CSS Output | Description |
 |-------|------------|-------------|
-| `flat` | `transform-style: flat` | Flat rendering |
-| `preserve-3d` | `transform-style: preserve-3d` | Preserve 3D |
+| `flat` | `transform-style: flat` | Flatten 3D children |
+| `preserve-3d` | `transform-style: preserve-3d` | Preserve 3D depth |
 
 ## Examples
 
 ```html
-<div visual="transform-style:preserve-3d">3D space</div>
+<div visual="transform-style:preserve-3d">Nested 3D transforms preserved</div>
 ```
 
 ## Preview
@@ -27,10 +27,20 @@ visual="transform-style:[value]"
 ### Transform Style
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transform-style:preserve-3d"</code> - Flat or preserve 3D rendering</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">flat</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transform-style:preserve-3d"</code> - Flat or preserve 3D for nested transforms</p>
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">flat</span>
+    <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
+    <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
 </div>
 </div>
 
@@ -38,9 +48,19 @@ visual="transform-style:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">flat</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">flat</span>
+    <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
+    <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
 </div>
 ```
 

package/docs/reference/visual/transform-translate-z.md

@@ -0,0 +1,90 @@
+# Transform Translate Z
+
+Translate element along Z axis (depth) in 3D space
+
+## Syntax
+```
+visual="translate-z:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `0` | `transform: translateZ(0)` | No Z translation |
+| `near` | `transform: translateZ(50px)` | Move near (forward) |
+| `far` | `transform: translateZ(-50px)` | Move far (backward) |
+
+## Examples
+
+```html
+<div visual="perspective:normal"><div visual="translate-z:near">Closer</div></div>
+```
+
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Translate Z (3D Depth)
+
+<div layout="flex col" space="g:medium">
+  <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>
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
+    </div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="transform:[custom-value]">Custom</div>
+```

package/docs/reference/visual/transform-translate.md

@@ -1,10 +1,10 @@
 # Transform Translate
 
-Translate element position
+Translate element position along X, Y, or Z axis
 
 ## Syntax
 ```
-visual="translate-x:[value]" or visual="translate-y:[value]"
+visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translate-z:[value]"
 ```
 
 ## Values
@@ -12,13 +12,21 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
 | Value | CSS Output | Description |
 |-------|------------|-------------|
 | `0` | `transform: translateX(0)` | No translation |
-| `full` | `transform: translateX(100%)` | Full width |
-| `1/2` | `transform: translateX(50%)` | Half width |
+| `tiny` | `transform: translateX(var(--sp-tiny))` | Tiny offset |
+| `small` | `transform: translateX(var(--sp-small))` | Small offset |
+| `medium` | `transform: translateX(var(--sp-medium))` | Medium offset |
+| `big` | `transform: translateX(var(--sp-big))` | Big offset |
+| `full` | `transform: translateX(100%)` | Full width/height |
+| `1/2` | `transform: translateX(50%)` | Half width/height |
+| `-full` | `transform: translateX(-100%)` | Negative full |
+| `-1/2` | `transform: translateX(-50%)` | Negative half |
 
 ## Examples
 
 ```html
-<div visual="translate-x:full">Moved right</div>
+<div visual="translate-x:medium">Moved right</div>
+<div visual="translate-y:small">Moved down</div>
+<div visual="translate-z:[50px]">Moved forward in 3D</div>
 ```
 
 ## Preview
@@ -28,11 +36,20 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
 ### Translate Transform
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:full"</code> - Move elements position</p>
-<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
+  <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>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">X axis:</span>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:small">small</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:medium">medium</div>
+  </div>
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">Y axis:</span>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:0">0</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
+  </div>
 </div>
 </div>
 
@@ -40,10 +57,19 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
-  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">X axis:</span>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:small">small</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:medium">medium</div>
+  </div>
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">Y axis:</span>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:0">0</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
+  </div>
 </div>
 ```
 

package/docs/reference/visual/transition-delay.md

@@ -32,7 +32,8 @@ visual="delay:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="delay:slow"</code> - Delay before transition starts</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
 </div>
 </div>
 
@@ -41,7 +42,8 @@ visual="delay:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
 </div>
 ```
 

package/docs/reference/visual/transition-duration.md

@@ -34,8 +34,8 @@ visual="duration:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="duration:slow"</code> - Control transition speed</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
 </div>
 </div>
 
@@ -44,8 +44,8 @@ visual="duration:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
 </div>
 ```
 

package/docs/reference/visual/transition-timing.md

@@ -31,9 +31,9 @@ visual="ease:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="ease:out"</code> - Control acceleration curve</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="ease:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
 </div>
 ```
 

package/docs/reference/visual/typography-keywords.md

@@ -80,10 +80,10 @@ visual="[keyword]"
 <div layout="flex col" space="g:medium">
   <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>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-style: italic;">italic</span>
-  <span style="text-transform: uppercase;">upper</span>
-  <span style="text-decoration: underline;">underline</span>
-  <span style="text-decoration: line-through;">strike</span>
+  <span visual="italic">italic</span>
+  <span visual="uppercase">upper</span>
+  <span visual="underline">underline</span>
+  <span visual="line-through">strike</span>
 </div>
 </div>
 
@@ -92,10 +92,10 @@ visual="[keyword]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-style: italic;">italic</span>
-  <span style="text-transform: uppercase;">upper</span>
-  <span style="text-decoration: underline;">underline</span>
-  <span style="text-decoration: line-through;">strike</span>
+  <span visual="italic">italic</span>
+  <span visual="uppercase">upper</span>
+  <span visual="underline">underline</span>
+  <span visual="line-through">strike</span>
 </div>
 ```
 

package/docs/reference/visual/user-select.md

@@ -31,8 +31,8 @@ visual="select:[value]"
 <div layout="flex col" space="g:medium">
   <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>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: none;">none (try select)</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
+  <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
 </div>
 </div>
 
@@ -41,8 +41,8 @@ visual="select:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: none;">none (try select)</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="user-select: all;">all (click to select)</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
+  <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
 </div>
 ```
 

package/docs/reference/visual/vertical-align.md

@@ -34,10 +34,11 @@ visual="align:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="align:middle"</code> - Align inline elements</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
+  <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
+  <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
+  <span visual="text-size:huge text:neutral-500">Big</span>
 </div>
 </div>
 
@@ -45,10 +46,11 @@ visual="align:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
+  <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
+  <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
+  <span visual="text-size:huge text:neutral-500">Big</span>
 </div>
 ```
 

package/docs/reference/visual/whitespace.md

@@ -32,10 +32,10 @@ visual="whitespace:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="whitespace:pre"</code> - Control whitespace handling</p>
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
+  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>
 </div>
 </div>
 
@@ -43,10 +43,10 @@ visual="whitespace:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
+  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>
 </div>
 ```