@bookklik/senangstart-css 0.2.0 → 0.2.3

package/docs/index.md

@@ -37,6 +37,12 @@ features:
     details: Override any scale, add custom colors, extend the theme to match your brand.
 ---
 
+<style>
+  .image-container .VPImage {
+    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
+  }
+</style>
+
 ## Quick Example
 
 ```html

package/docs/ms/index.md

@@ -37,6 +37,12 @@ features:
     details: Tindih ganti mana-mana skala, tambah warna tersuai, lanjutkan tema untuk padankan jenama anda.
 ---
 
+<style>
+  .image-container .VPImage {
+    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
+  }
+</style>
+
 ## Contoh Pantas
 
 ```html

package/docs/ms/reference/visual/accent-color.md

@@ -22,9 +22,9 @@ visual="accent:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="accent:primary"</code> - Gaya kawalan borang asli (kotak semak, radio, julat)</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <input type="checkbox" checked style="accent-color: #3b82f6; width: 20px; height: 20px;">
-  <input type="radio" checked style="accent-color: #10b981; width: 20px; height: 20px;">
-  <input type="range" style="accent-color: #8b5cf6; width: 100px;">
+  <input type="checkbox" checked visual="accent:primary w:[20px] h:[20px]">
+  <input type="radio" checked visual="accent:success w:[20px] h:[20px]">
+  <input type="range" visual="accent:secondary w:[100px]">
 </div>
 </div>
 
@@ -33,9 +33,9 @@ visual="accent:[color]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <input type="checkbox" checked style="accent-color: #3b82f6; width: 20px; height: 20px;">
-  <input type="radio" checked style="accent-color: #10b981; width: 20px; height: 20px;">
-  <input type="range" style="accent-color: #8b5cf6; width: 100px;">
+  <input type="checkbox" checked visual="accent:primary w:[20px] h:[20px]">
+  <input type="radio" checked visual="accent:success w:[20px] h:[20px]">
+  <input type="range" visual="accent:secondary w:[100px]">
 </div>
 ```
 

package/docs/ms/reference/visual/animation-builtin.md

@@ -32,9 +32,9 @@ visual="animate:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animate:spin"</code> - Animasi sedia guna</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">spin</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">pulse</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">bounce</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin">spin</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
 </div>
 </div>
 
@@ -43,9 +43,9 @@ visual="animate:[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">spin</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">pulse</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">bounce</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin">spin</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
 </div>
 ```
 

package/docs/ms/reference/visual/animation-delay.md

@@ -32,7 +32,8 @@ visual="animation-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="animation-delay:slow"</code> - Kelewatan sebelum animasi bermula</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>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:instant">instant</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:slow">slow</div>
 </div>
 </div>
 
@@ -41,7 +42,8 @@ visual="animation-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>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:instant">instant</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:slow">slow</div>
 </div>
 ```
 

package/docs/ms/reference/visual/animation-direction.md

@@ -31,9 +31,9 @@ visual="animation-direction:[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-direction:alternate"</code> - Kawal arah main balik</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">reverse</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">alternate</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:normal">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:reverse">reverse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:alternate">alternate</div>
 </div>
 </div>
 
@@ -42,9 +42,9 @@ visual="animation-direction:[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">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">reverse</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">alternate</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:normal">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:reverse">reverse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:alternate">alternate</div>
 </div>
 ```
 

package/docs/ms/reference/visual/animation-duration.md

@@ -34,8 +34,8 @@ visual="animation-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="animation-duration:slow"</code> - Kawal kelajuan animasi</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>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:fast">fast</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:slow">slow</div>
 </div>
 </div>
 
@@ -44,8 +44,8 @@ visual="animation-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>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:fast">fast</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:slow">slow</div>
 </div>
 ```
 

package/docs/ms/reference/visual/animation-fill.md

@@ -29,11 +29,23 @@ visual="animation-fill:[value]"
 ### Pengisian Animasi
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-fill:forwards"</code> - Kawal keadaan sebelum/selepas animasi</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">forwards</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-fill:forwards"</code> - Kawal keadaan sebelum/selepas animasi. "forwards" kekalkan keadaan akhir, "none" kembali kepada asal.</p>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
+  <div layout="flex" space="g:medium">
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">none (returns)</span>
+      <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">⬆</div>
+    </div>
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
+      <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">⬆</div>
+    </div>
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">both</span>
+      <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">⬆</div>
+    </div>
+  </div>
 </div>
 </div>
 
@@ -41,10 +53,22 @@ visual="animation-fill:[value]"
 <summary>Lihat Kod</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">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">forwards</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
+  <div layout="flex" space="g:medium">
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">none (returns)</span>
+      <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">⬆</div>
+    </div>
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
+      <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">⬆</div>
+    </div>
+    <div layout="flex:col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">both</span>
+      <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">⬆</div>
+    </div>
+  </div>
 </div>
 ```
 

package/docs/ms/reference/visual/animation-iteration.md

@@ -27,10 +27,10 @@ visual="animation-iteration:[value]"
 ### Ulangan Animasi
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-iteration:1"</code> - Kawal bilangan gelung</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-iteration:infinite"</code> - Kawal bilangan gelung</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 (once)</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">infinite</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1">once</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:infinite">infinite</div>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="animation-iteration:[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">1 (once)</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">infinite</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1">once</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:infinite">infinite</div>
 </div>
 ```
 

package/docs/ms/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> - Jeda atau sambung animasi</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/ms/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> - Buang gaya pelayar asli dari elemen borang</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/ms/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> - Campurkan elemen dengan kandungan di belakangnya</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>Lihat Kod</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/ms/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> - Bulatkan sudut elemen dari halus hingga berbentuk pil</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/ms/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> - Tambah ketinggian dengan bayang dari halus hingga dramatik</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/ms/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> - Gaya kursor teks dalam medan input</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/ms/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> - Tukar kursor tetikus semasa 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/ms/reference/visual/filter-blur.md

@@ -32,11 +32,11 @@ visual="blur:[value]"
 ### Kabur
 
 <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> - Terapkan penapis kabur gaussian pada elemen</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="blur:small"</code> - Terapkan penapis kabur gaussian pada elemen</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/ms/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> - Pilih antara sans, serif, atau 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>Lihat Kod</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/ms/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> - Kawal persembahan teks</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/ms/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> - Teks italic atau normal</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/ms/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> - Kawal paparan nombor</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/ms/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> - Kawal ketebalan teks</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>
 ```