@bookklik/senangstart-css 0.2.0 → 0.2.3

package/docs/reference/visual/animation-play.md

@@ -29,8 +29,8 @@ visual="animation-play:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-play:paused"</code> - Pause or resume animations</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">running</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">paused</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:running">running</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:paused">paused</div>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="animation-play:[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">running</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">paused</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:running">running</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:paused">paused</div>
 </div>
 ```
 

package/docs/reference/visual/appearance.md

@@ -29,8 +29,8 @@ visual="appearance:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="appearance:none"</code> - Remove native browser styling from form elements</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <select style="appearance: auto; padding: 0.25rem;"><option>Native</option></select>
-  <select style="appearance: none; padding: 0.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.25rem;"><option>Custom</option></select>
+  <select space="p:tiny" visual="appearance:auto"><option>Native</option></select>
+  <select space="p:tiny" visual="appearance:none bg:white border:neutral-300 rounded:small"><option>Custom</option></select>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="appearance:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <select style="appearance: auto; padding: 0.25rem;"><option>Native</option></select>
-  <select style="appearance: none; padding: 0.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.25rem;"><option>Custom</option></select>
+  <select space="p:tiny" visual="appearance:auto"><option>Native</option></select>
+  <select space="p:tiny" visual="appearance:none bg:white border:neutral-300 rounded:small"><option>Custom</option></select>
 </div>
 ```
 

package/docs/reference/visual/blend-modes.md

@@ -32,9 +32,9 @@ visual="mix-blend:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="mix-blend:multiply"</code> - Blend element with content behind it</p>
-<div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #ef4444, #f97316);">
-  <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: multiply; background: #3b82f6;">multiply</div>
-  <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: screen; background: #3b82f6;">screen</div>
+<div layout="flex" space="g:medium p:medium" visual="rounded:medium bg:gradient-red-orange">
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:multiply">multiply</div>
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:screen">screen</div>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="mix-blend:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #ef4444, #f97316);">
-  <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: multiply; background: #3b82f6;">multiply</div>
-  <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: screen; background: #3b82f6;">screen</div>
+<div layout="flex" space="g:medium p:medium" visual="rounded:medium bg:gradient-red-orange">
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:multiply">multiply</div>
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:screen">screen</div>
 </div>
 ```
 

package/docs/reference/visual/border-radius.md

@@ -33,10 +33,10 @@ visual="rounded:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded:medium"</code> - Round element corners from subtle to pill-shaped</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" style="border-radius: 0;">none</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.25rem;">small</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.5rem;">medium</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 9999px;">round</div>
+  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>
 </div>
 
@@ -45,10 +45,10 @@ visual="rounded:[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" style="border-radius: 0;">none</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.25rem;">small</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.5rem;">medium</div>
-  <div space="p:small" visual="bg:primary text:white" style="border-radius: 9999px;">round</div>
+  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>
 ```
 

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

@@ -32,9 +32,9 @@ visual="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="shadow:medium"</code> - Add elevation with shadows from subtle to dramatic</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:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 1px 2px rgba(0,0,0,0.1);">small</div>
-  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">medium</div>
-  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 10px 15px rgba(0,0,0,0.15);">big</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
 </div>
 </div>
 
@@ -43,9 +43,9 @@ visual="shadow:[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:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 1px 2px rgba(0,0,0,0.1);">small</div>
-  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">medium</div>
-  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 10px 15px rgba(0,0,0,0.15);">big</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
 </div>
 ```
 

package/docs/reference/visual/caret-color.md

@@ -22,7 +22,7 @@ visual="caret:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="caret:primary"</code> - Style the text cursor in input fields</p>
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <input type="text" placeholder="Type here..." style="caret-color: #3b82f6; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.25rem;">
+  <input type="text" placeholder="Type here..." space="p:small" visual="caret:primary border:neutral-300 rounded:small">
 </div>
 </div>
 
@@ -31,7 +31,7 @@ visual="caret:[color]"
 
 ```html
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <input type="text" placeholder="Type here..." style="caret-color: #3b82f6; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.25rem;">
+  <input type="text" placeholder="Type here..." space="p:small" visual="caret:primary border:neutral-300 rounded:small">
 </div>
 ```
 

package/docs/reference/visual/cursor.md

@@ -36,9 +36,9 @@ visual="cursor:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="cursor:pointer"</code> - Change mouse cursor on hover</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="cursor: pointer;">pointer</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: wait;">wait</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: not-allowed;">not-allowed</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:pointer">pointer</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:wait">wait</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:not-allowed">not-allowed</div>
 </div>
 </div>
 
@@ -47,9 +47,9 @@ visual="cursor:[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="cursor: pointer;">pointer</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: wait;">wait</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: not-allowed;">not-allowed</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:pointer">pointer</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:wait">wait</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:not-allowed">not-allowed</div>
 </div>
 ```
 

package/docs/reference/visual/filter-blur.md

@@ -32,11 +32,11 @@ visual="blur:[value]"
 ### Blur
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="blur:medium"</code> - Apply gaussian blur filter to an element</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="blur:small"</code> - Apply gaussian blur filter to an element</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" style="filter: blur(2px);">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(4px);">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:tiny">tiny</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:small">small</div>
 </div>
 </div>
 
@@ -45,9 +45,9 @@ visual="blur:[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" style="filter: blur(2px);">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(4px);">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:tiny">tiny</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:small">small</div>
 </div>
 ```
 

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

@@ -29,10 +29,10 @@ visual="font:[family]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="font:sans"</code> - Choose between sans, serif, or mono</p>
-<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-family: ui-sans-serif, system-ui, sans-serif;">Sans-serif font</span>
-  <span style="font-family: ui-serif, Georgia, serif;">Serif font</span>
-  <span style="font-family: ui-monospace, monospace;">Monospace font</span>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="font:sans">Sans-serif font</span>
+  <span visual="font:serif">Serif font</span>
+  <span visual="font:mono">Monospace font</span>
 </div>
 </div>
 
@@ -40,10 +40,10 @@ visual="font:[family]"
 <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="font-family: ui-sans-serif, system-ui, sans-serif;">Sans-serif font</span>
-  <span style="font-family: ui-serif, Georgia, serif;">Serif font</span>
-  <span style="font-family: ui-monospace, monospace;">Monospace font</span>
+<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="font:sans">Sans-serif font</span>
+  <span visual="font:serif">Serif font</span>
+  <span visual="font:mono">Monospace font</span>
 </div>
 ```
 

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

@@ -29,8 +29,8 @@ visual="[smoothing-value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="antialiased"</code> - Control text 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">antialiased</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">subpixel</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small antialiased">antialiased</div>
+  <div space="p:small" visual="bg:success text:white rounded:small subpixel-antialiased">subpixel</div>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="[smoothing-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">antialiased</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">subpixel</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small antialiased">antialiased</div>
+  <div space="p:small" visual="bg:success text:white rounded:small subpixel-antialiased">subpixel</div>
 </div>
 ```
 

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

@@ -29,8 +29,8 @@ visual="[style-value]"
 <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> - Italic or normal 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="font-style: italic;">italic</span>
-  <span space="p:small" visual="bg:primary text:white rounded:small">normal</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small italic">italic</span>
+  <span space="p:small" visual="bg:success text:white rounded:small not-italic">not-italic</span>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="[style-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="font-style: italic;">italic</span>
-  <span space="p:small" visual="bg:primary text:white rounded:small">normal</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small italic">italic</span>
+  <span space="p:small" visual="bg:success text:white rounded:small not-italic">not-italic</span>
 </div>
 ```
 

package/docs/reference/visual/font-variant-numeric.md

@@ -34,8 +34,9 @@ visual="[variant-value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="tabular-nums"</code> - Control number display</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">tabular-nums</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ordinal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small tabular-nums text-size:big">123,456.00</div>
+  <div space="p:small" visual="bg:success text:white rounded:small slashed-zero text-size:big">0123</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small ordinal text-size:big">1st 2nd 3rd</div>
 </div>
 </div>
 
@@ -44,8 +45,9 @@ visual="[variant-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">tabular-nums</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">ordinal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small tabular-nums text-size:big">123,456.00</div>
+  <div space="p:small" visual="bg:success text:white rounded:small slashed-zero text-size:big">0123</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small ordinal text-size:big">1st 2nd 3rd</div>
 </div>
 ```
 

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