@bookklik/senangstart-css 0.2.0 → 0.2.4

package/docs/reference/visual/font-weight.md

@@ -31,9 +31,9 @@ visual="font:[weight]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="font:bold"</code> - Control text thickness</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-weight: 400;">normal</span>
-  <span style="font-weight: 500;">medium</span>
-  <span style="font-weight: 700;">bold</span>
+  <span visual="font:normal">normal</span>
+  <span visual="font:medium">medium</span>
+  <span visual="font:bold">bold</span>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="font:[weight]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-weight: 400;">normal</span>
-  <span style="font-weight: 500;">medium</span>
-  <span style="font-weight: 700;">bold</span>
+  <span visual="font:normal">normal</span>
+  <span visual="font:medium">medium</span>
+  <span visual="font:bold">bold</span>
 </div>
 ```
 

package/docs/reference/visual/gradient-from.md

@@ -0,0 +1,57 @@
+# Gradient From
+
+Set gradient start color
+
+## Syntax
+```
+visual="from:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `primary` | `--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from primary |
+| `blue-500` | `--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Start from blue |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</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">
+
+### Gradient From
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="from:blue-500"</code> - Set the starting color of a gradient</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
+</div>
+</div>
+
+<details>
+<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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/gradient-to.md

@@ -0,0 +1,57 @@
+# Gradient To
+
+Set gradient end color
+
+## Syntax
+```
+visual="to:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-to: var(--c-purple-500)` | End at purple |
+| `pink-500` | `--tw-gradient-to: var(--c-pink-500)` | End at pink |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</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">
+
+### Gradient To
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="to:purple-500"</code> - Set the ending color of a gradient</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
+</div>
+</div>
+
+<details>
+<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:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/gradient-via.md

@@ -0,0 +1,54 @@
+# Gradient Via
+
+Set gradient middle color
+
+## Syntax
+```
+visual="via:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)` | Via purple |
+
+## Examples
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</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">
+
+### Gradient Via
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="via:purple-500"</code> - Add a middle color stop to gradients</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
+</div>
+</div>
+
+<details>
+<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:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

package/docs/reference/visual/hyphens.md

@@ -30,9 +30,9 @@ visual="hyphens:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="hyphens:auto"</code> - Control automatic hyphenation</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">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">manual</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:manual">manual</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:auto">auto</div>
 </div>
 </div>
 
@@ -41,9 +41,9 @@ visual="hyphens:[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">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">manual</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:manual">manual</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:auto">auto</div>
 </div>
 ```
 

package/docs/reference/visual/letter-spacing.md

@@ -32,10 +32,10 @@ visual="tracking:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="tracking:wide"</code> - Adjust spacing between characters</p>
-<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="letter-spacing: -0.05em;">tighter spacing</span>
-  <span style="letter-spacing: 0;">normal spacing</span>
-  <span style="letter-spacing: 0.1em;">widest spacing</span>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="tracking:tighter">tighter spacing</span>
+  <span visual="tracking:normal">normal spacing</span>
+  <span visual="tracking:widest">widest spacing</span>
 </div>
 </div>
 
@@ -43,10 +43,10 @@ visual="tracking:[value]"
 <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 style="letter-spacing: -0.05em;">tighter spacing</span>
-  <span style="letter-spacing: 0;">normal spacing</span>
-  <span style="letter-spacing: 0.1em;">widest spacing</span>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="tracking:tighter">tighter spacing</span>
+  <span visual="tracking:normal">normal spacing</span>
+  <span visual="tracking:widest">widest spacing</span>
 </div>
 ```
 

package/docs/reference/visual/line-clamp.md

@@ -29,11 +29,11 @@ visual="line-clamp:[value]"
 ### Line Clamp
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="line-clamp:3"</code> - Limit text to specific lines</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">1</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">2</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">3</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="line-clamp:2"</code> - Limit text to specific lines</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 line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>
 </div>
 </div>
 
@@ -41,10 +41,10 @@ visual="line-clamp:[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">1</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">2</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">3</div>
+<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 line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>
 </div>
 ```
 

package/docs/reference/visual/line-height.md

@@ -32,10 +32,10 @@ visual="leading:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="leading:relaxed"</code> - Control vertical spacing between lines</p>
-<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <p style="line-height: 1; margin: 0;">Tight leading<br>for headings</p>
-  <p style="line-height: 1.5; margin: 0;">Normal leading<br>for body text</p>
-  <p style="line-height: 2; margin: 0;">Loose leading<br>for readability</p>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
+  <p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
+  <p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
 </div>
 </div>
 
@@ -43,10 +43,10 @@ visual="leading:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <p style="line-height: 1; margin: 0;">Tight leading<br>for headings</p>
-  <p style="line-height: 1.5; margin: 0;">Normal leading<br>for body text</p>
-  <p style="line-height: 2; margin: 0;">Loose leading<br>for readability</p>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
+  <p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
+  <p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
 </div>
 ```
 

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

@@ -31,11 +31,11 @@ visual="list:[value]"
 ### List Style
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="list:none"</code> - Control list markers</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="list:disc"</code> - Control list markers</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">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">disc</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">decimal</div>
+  <ul space="p:small" visual="bg:primary text:white rounded:small list:none"><li>none</li><li>no bullets</li></ul>
+  <ul space="p:small" visual="bg:success text:white rounded:small list:disc"><li>disc</li><li>bullet</li></ul>
+  <ol space="p:small" visual="bg:warning text:black rounded:small list:decimal"><li>decimal</li><li>numbers</li></ol>
 </div>
 </div>
 
@@ -44,9 +44,9 @@ visual="list:[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">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">disc</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">decimal</div>
+  <ul space="p:small" visual="bg:primary text:white rounded:small list:none"><li>none</li><li>no bullets</li></ul>
+  <ul space="p:small" visual="bg:success text:white rounded:small list:disc"><li>disc</li><li>bullet</li></ul>
+  <ol space="p:small" visual="bg:warning text:black rounded:small list:decimal"><li>decimal</li><li>numbers</li></ol>
 </div>
 ```
 

package/docs/reference/visual/mask.md

@@ -30,7 +30,9 @@ visual="mask:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="mask:fade-y"</code> - Apply gradient mask to edges</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="bg:primary text:white rounded:small">mask:fade-y</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:none">none</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-y">fade-y</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-x">fade-x</div>
 </div>
 </div>
 
@@ -39,7 +41,9 @@ visual="mask:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="bg:primary text:white rounded:small">mask:fade-y</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:none">none</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-y">fade-y</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-x">fade-x</div>
 </div>
 ```
 

package/docs/reference/visual/opacity.md

@@ -32,10 +32,10 @@ visual="opacity:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="opacity:50"</code> - Control element transparency from invisible to fully visible</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="opacity: 0.25;">25%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.5;">50%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.75;">75%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 1;">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:25">25%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:50">50%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:100">100%</div>
 </div>
 </div>
 
@@ -44,10 +44,10 @@ visual="opacity:[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="opacity: 0.25;">25%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.5;">50%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 0.75;">75%</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="opacity: 1;">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:25">25%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:50">50%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:100">100%</div>
 </div>
 ```
 

package/docs/reference/visual/pointer-events.md

@@ -29,8 +29,8 @@ visual="pointer-events:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="pointer-events:none"</code> - Make elements click-through or interactive</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">auto (clickable)</div>
-  <div space="p:small" visual="bg:neutral-400 text:white rounded:small">none (click-through)</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small pointer-events:auto">auto (clickable)</div>
+  <div space="p:small" visual="bg:neutral-400 text:white rounded:small pointer-events:none">none (click-through)</div>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="pointer-events:[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">auto (clickable)</div>
-  <div space="p:small" visual="bg:neutral-400 text:white rounded:small">none (click-through)</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small pointer-events:auto">auto (clickable)</div>
+  <div space="p:small" visual="bg:neutral-400 text:white rounded:small pointer-events:none">none (click-through)</div>
 </div>
 ```
 

package/docs/reference/visual/state-prefixes.md

@@ -34,9 +34,10 @@ visual="hover:... focus:... active:..."
 ### State Prefixes
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="hover:bg:primary"</code> - Apply styles on hover, focus, etc.</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="hover:scale:110"</code> - Apply styles on hover, focus, etc.</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
+  <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
 </div>
 </div>
 
@@ -45,7 +46,8 @@ visual="hover:... focus:... active:..."
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
+  <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
 </div>
 ```
 

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

@@ -31,8 +31,9 @@ visual="[decoration-value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="underline"</code> - Add lines to text</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" style="text-decoration: underline;">underline</span>
-  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: line-through;">line-through</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
 </div>
 </div>
 
@@ -41,8 +42,9 @@ visual="[decoration-value]"
 
 ```html
 <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" style="text-decoration: underline;">underline</span>
-  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: line-through;">line-through</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
 </div>
 ```
 

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

@@ -27,8 +27,10 @@ visual="indent:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="indent:medium"</code> - Indent first line of text</p>
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <p visual="bg:primary text:white rounded:small" space="p:small" style="text-indent: 2rem;">Indented text example...</p>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
+  <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
+  <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
 </div>
 </div>
 
@@ -36,8 +38,10 @@ visual="indent:[value]"
 <summary>View Code</summary>
 
 ```html
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <p visual="bg:primary text:white rounded:small" space="p:small" style="text-indent: 2rem;">Indented text example...</p>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
+  <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
+  <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
 </div>
 ```
 

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

@@ -29,8 +29,9 @@ visual="[overflow-value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="truncate"</code> - Handle overflowing text</p>
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is truncated text...</div>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
+  <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
 </div>
 </div>
 
@@ -38,8 +39,9 @@ visual="[overflow-value]"
 <summary>View Code</summary>
 
 ```html
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is truncated text...</div>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
+  <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
 </div>
 ```
 

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

@@ -31,7 +31,10 @@ visual="text-shadow:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-shadow:medium"</code> - Add shadow to text</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="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">shadow</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
+  <div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
+  <div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
 </div>
 </div>
 
@@ -40,7 +43,10 @@ visual="text-shadow:[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="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">shadow</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
+  <div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
+  <div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
 </div>
 ```