@bookklik/senangstart-css 0.1.8 → 0.2.3

package/docs/reference/visual/text-size.md

@@ -1,32 +1,84 @@
-# Text Size
-
-Set font size
-
-## Syntax
-```
-visual="text-size:[value]"
-```
-
-## Examples
-
-```html
-<div visual="text-size:big">Large text</div>
-<div visual="text-size:[24px]">24px text</div>
-```
-
-## Arbitrary Values
-
-Supports custom values using bracket syntax:
-
-```html
-<div visual="text:[custom-value]">Custom</div>
-```
-
-## Responsive
-
-```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
-</div>
-```
+# Text Size
+
+Set font size
+
+## Syntax
+```
+visual="text-size:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `mini` | `font-size: var(--font-mini); line-height: var(--font-lh-mini)` | Mini size (0.75rem / 1rem) |
+| `small` | `font-size: var(--font-small); line-height: var(--font-lh-small)` | Small size (0.875rem / 1.25rem) |
+| `base` | `font-size: var(--font-base); line-height: var(--font-lh-base)` | Base size (1rem / 1.5rem) |
+| `large` | `font-size: var(--font-large); line-height: var(--font-lh-large)` | Large size (1.125rem / 1.75rem) |
+| `big` | `font-size: var(--font-big); line-height: var(--font-lh-big)` | Big size (1.25rem / 1.75rem) |
+| `huge` | `font-size: var(--font-huge); line-height: var(--font-lh-huge)` | Huge size (1.5rem / 2rem) |
+| `grand` | `font-size: var(--font-grand); line-height: var(--font-lh-grand)` | Grand size (1.875rem / 2.25rem) |
+| `giant` | `font-size: var(--font-giant); line-height: var(--font-lh-giant)` | Giant size (2.25rem / 2.5rem) |
+| `mount` | `font-size: var(--font-mount); line-height: var(--font-lh-mount)` | Mount size (3rem / 1) |
+| `mega` | `font-size: var(--font-mega); line-height: var(--font-lh-mega)` | Mega size (3.75rem / 1) |
+| `giga` | `font-size: var(--font-giga); line-height: var(--font-lh-giga)` | Giga size (4.5rem / 1) |
+| `tera` | `font-size: var(--font-tera); line-height: var(--font-lh-tera)` | Tera size (6rem / 1) |
+| `hero` | `font-size: var(--font-hero); line-height: var(--font-lh-hero)` | Hero size (8rem / 1) |
+
+## Examples
+
+```html
+<div visual="text-size:big">Large text</div>
+<div visual="text-size:[24px]">24px text</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">
+
+### Font Size
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-size:big"</code> - Scale text size with paired line-height</p>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
+  <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
+  <span visual="text-size:base">base (1rem / 1.5rem)</span>
+  <span visual="text-size:big">big (1.25rem / 1.75rem)</span>
+  <span visual="text-size:giant">giant (2.25rem / 2.5rem)</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
+  <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
+  <span visual="text-size:base">base (1rem / 1.5rem)</span>
+  <span visual="text-size:big">big (1.25rem / 1.75rem)</span>
+  <span visual="text-size:giant">giant (2.25rem / 2.5rem)</span>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="text:[custom-value]">Custom</div>
+```
+
+## Notes
+
+> [!TIP]
+> **Tailwind Scale Support**
+> 
+> Use `tw-` prefix to access Tailwind font scale: `text-size:tw-xl` (1.25rem), `text-size:tw-2xl` (1.5rem)
+> 
+> [Reference](https://tailwindcss.com/docs/font-size)

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

@@ -22,11 +22,32 @@ visual="[transform-value]"
 <span visual="uppercase">Uppercase text</span>
 ```
 
-## Responsive
+## 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">
+
+### Text Transform
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="uppercase"</code> - Change text case</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small uppercase">upper</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small lowercase">LOWER</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small capitalize">capitalize me</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small uppercase">upper</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small lowercase">LOWER</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small capitalize">capitalize me</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/visual/text-wrap.md

@@ -22,11 +22,32 @@ visual="[wrap-value]"
 <h1 visual="text-balance">Balanced heading</h1>
 ```
 
-## Responsive
+## 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">
+
+### Text Wrap
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-balance"</code> - Control line wrapping</p>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/visual/touch-action.md

@@ -26,11 +26,32 @@ visual="touch:[value]"
 <div visual="touch:manipulation">Touch optimized</div>
 ```
 
-## Responsive
+## 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">
+
+### Touch Action
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="touch:manipulation"</code> - Control touch gestures</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">pan-x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
+<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">pan-x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
 </div>
 ```
+
+</details>
+
+</div>

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

@@ -1,6 +1,6 @@
 # Transform Backface
 
-Control backface visibility
+Control visibility of element back side when rotated in 3D
 
 ## Syntax
 ```
@@ -17,14 +17,53 @@ visual="backface:[value]"
 ## Examples
 
 ```html
-<div visual="backface:hidden">Hidden when rotated</div>
+<div visual="backface:hidden rotate-y:180">Hidden when flipped</div>
 ```
 
-## Responsive
+## 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">
+
+### Backface Visibility
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backface:hidden"</code> - Show or hide backside when rotated 180°</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">visible + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
+    </div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
+<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">visible + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
+    </div>
+  </div>
 </div>
 ```
+
+</details>
+
+</div>

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

@@ -27,19 +27,38 @@ visual="origin:[value]"
 <div visual="rotate:45 origin:top-left">Rotate from corner</div>
 ```
 
-## Arbitrary Values
+## Preview
 
-Supports custom values using bracket syntax:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Transform Origin
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="origin:center"</code> - Set the pivot point for transforms</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 rotate:45 origin:center">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:top-left">top-left</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<div visual="transform:[custom-value]">Custom</div>
+<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 rotate:45 origin:center">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:top-left">top-left</div>
+</div>
 ```
 
-## Responsive
+</details>
 
-```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
 </div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="transform:[custom-value]">Custom</div>
 ```

package/docs/reference/visual/transform-perspective-origin.md

@@ -1,6 +1,6 @@
 # Transform Perspective Origin
 
-Set perspective origin point
+Set perspective vanishing point location
 
 ## Syntax
 ```
@@ -24,22 +24,73 @@ visual="perspective-origin:[value]"
 ## Examples
 
 ```html
-<div visual="perspective-origin:top">Top origin</div>
+<div visual="perspective:normal perspective-origin:top">Top origin</div>
 ```
 
-## Arbitrary Values
+## Preview
 
-Supports custom values using bracket syntax:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Perspective Origin
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective-origin:center"</code> - Set vanishing point location for 3D 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">left</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:left">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">center</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:center">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">right</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:right">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<div visual="transform:[custom-value]">Custom</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">left</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:left">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">center</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:center">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">right</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:right">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+</div>
 ```
 
-## Responsive
+</details>
 
-```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
 </div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="transform:[custom-value]">Custom</div>
 ```

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

@@ -1,6 +1,6 @@
 # Transform Perspective
 
-Set 3D perspective
+Set 3D perspective on container (apply to parent of transformed elements)
 
 ## Syntax
 ```
@@ -22,22 +22,73 @@ visual="perspective:[value]"
 ## Examples
 
 ```html
-<div visual="perspective:normal">3D container</div>
+<div visual="perspective:normal"><div visual="rotate-y:45">3D rotated</div></div>
 ```
 
-## Arbitrary Values
+## Preview
 
-Supports custom values using bracket syntax:
+<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 Perspective
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective:normal"</code> - Control 3D depth perception - apply to parent, transform children</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">dramatic</span>
+    <div space="p:medium" visual="perspective:dramatic">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">normal</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">far</span>
+    <div space="p:medium" visual="perspective:far">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<div visual="transform:[custom-value]">Custom</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">dramatic</span>
+    <div space="p:medium" visual="perspective:dramatic">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">normal</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex:col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">far</span>
+    <div space="p:medium" visual="perspective:far">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+</div>
 ```
 
-## Responsive
+</details>
 
-```html
-<!-- Responsive example -->
-<div visual="mob:... tab:... lap:...">
-  Responsive content
 </div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="transform:[custom-value]">Custom</div>
 ```

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>
+```