@bookklik/senangstart-css 0.2.3 → 0.2.5

package/docs/ms/reference/visual/filter-drop-shadow.md

@@ -33,9 +33,9 @@ visual="drop-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="drop-shadow:medium"</code> - Tambah bayang pada elemen</p>
 <div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">big</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:big">big</div>
 </div>
 </div>
 
@@ -44,9 +44,9 @@ visual="drop-shadow:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">big</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:big">big</div>
 </div>
 ```
 

package/docs/ms/reference/visual/filter-grayscale.md

@@ -31,8 +31,8 @@ visual="grayscale:[value]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="grayscale:full"</code> - Tukar ke skala kelabu</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: grayscale(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
 </div>
 </div>
 
@@ -42,8 +42,8 @@ visual="grayscale:[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: grayscale(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
 </div>
 ```
 

package/docs/ms/reference/visual/filter-hue-rotate.md

@@ -31,8 +31,8 @@ visual="hue-rotate:[degrees]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="hue-rotate:90"</code> - Putar rona warna</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">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(90deg);">90°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(180deg);">180°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180°</div>
 </div>
 </div>
 
@@ -42,8 +42,8 @@ visual="hue-rotate:[degrees]"
 ```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">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(90deg);">90°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(180deg);">180°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180°</div>
 </div>
 ```
 

package/docs/ms/reference/visual/filter-invert.md

@@ -31,7 +31,7 @@ visual="invert:[value]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="invert:full"</code> - Songsangkan warna 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: invert(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
 </div>
 </div>
 
@@ -41,7 +41,7 @@ visual="invert:[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: invert(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
 </div>
 ```
 

package/docs/ms/reference/visual/filter-saturate.md

@@ -32,9 +32,9 @@ visual="saturate:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="saturate:vivid"</code> - Laraskan ketepuan warna</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="filter: saturate(0);">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:none">none</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: saturate(2);">vivid</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:vivid">vivid</div>
 </div>
 </div>
 
@@ -43,9 +43,9 @@ visual="saturate:[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="filter: saturate(0);">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:none">none</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: saturate(2);">vivid</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:vivid">vivid</div>
 </div>
 ```
 

package/docs/ms/reference/visual/filter-sepia.md

@@ -31,8 +31,8 @@ visual="sepia:[value]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="sepia:full"</code> - Terapkan ton sepia vintaj</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: sepia(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
 </div>
 </div>
 
@@ -42,8 +42,8 @@ visual="sepia:[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: sepia(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
 </div>
 ```
 

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

@@ -29,7 +29,7 @@ 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">
+<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>
@@ -40,7 +40,7 @@ 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">
+<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>

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

@@ -0,0 +1,57 @@
+# Gradient From
+
+Tetapkan warna mula gradien
+
+## Sintaks
+```
+visual="from:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `primary` | `--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Mula dari utama |
+| `blue-500` | `--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)` | Mula dari biru |
+
+## Contoh
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Mula Gradien
+
+<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> - Tetapkan warna permulaan gradien</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>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: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>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

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

@@ -0,0 +1,57 @@
+# Gradient To
+
+Tetapkan warna akhir gradien
+
+## Sintaks
+```
+visual="to:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-to: var(--c-purple-500)` | Akhir di ungu |
+| `pink-500` | `--tw-gradient-to: var(--c-pink-500)` | Akhir di merah jambu |
+
+## Contoh
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Akhir Gradien
+
+<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> - Tetapkan warna pengakhiran gradien</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>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: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>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

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

@@ -0,0 +1,54 @@
+# Gradient Via
+
+Tetapkan warna tengah gradien
+
+## Sintaks
+```
+visual="via:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `purple-500` | `--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)` | Melalui ungu |
+
+## Contoh
+
+```html
+<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Pertengahan Gradien
+
+<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> - Tambah hentian warna tengah pada gradien</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>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: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>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="gradient:[custom-value]">Custom</div>
+```

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

@@ -32,7 +32,7 @@ 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> - Laraskan jarak antara aksara</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>
@@ -43,7 +43,7 @@ visual="tracking:[value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>

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

@@ -30,7 +30,7 @@ visual="line-clamp:[value]"
 
 <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:2"</code> - Hadkan teks kepada baris tertentu</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>
@@ -41,7 +41,7 @@ visual="line-clamp:[value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>

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

@@ -32,7 +32,7 @@ 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> - Kawal jarak menegak antara baris</p>
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>
@@ -43,7 +43,7 @@ visual="leading:[value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>

package/docs/ms/reference/visual/outline.md

@@ -22,7 +22,7 @@ visual="outline:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="outline:primary"</code> - Garis luar tidak mempengaruhi susun atur</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
 </div>
 </div>
 
@@ -31,7 +31,7 @@ visual="outline:[color]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
 </div>
 ```
 

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

@@ -0,0 +1,29 @@
+# Ring Color
+
+Tetapkan warna cincin
+
+## Sintaks
+```
+visual="ring-color:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `primary` | `--ring-color: var(--c-primary)` | Warna cincin utama |
+| `blue-500` | `--ring-color: var(--c-blue-500)` | Warna cincin biru |
+
+## Contoh
+
+```html
+<button visual="ring:small ring-color:primary">Colored ring</button>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

package/docs/ms/reference/visual/ring-offset.md

@@ -0,0 +1,30 @@
+# Ring Offset
+
+Tambah ruang antara cincin dan elemen
+
+## Sintaks
+```
+visual="ring-offset:[size]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `0` | `--ring-offset: 0px` | Tiada ruang |
+| `2` | `--ring-offset: 2px` | Ruang 2px |
+| `4` | `--ring-offset: 4px` | Ruang 4px |
+
+## Contoh
+
+```html
+<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

package/docs/ms/reference/visual/ring.md

@@ -0,0 +1,62 @@
+# Ring
+
+Tambah cincin fokus pada elemen menggunakan box-shadow
+
+## Sintaks
+```
+visual="ring:[size]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `box-shadow: 0 0 0 0 transparent` | Tiada cincin |
+| `thin` | `box-shadow: 0 0 0 1px var(--ring-color)` | Cincin nipis (1px) |
+| `regular` | `box-shadow: 0 0 0 2px var(--ring-color)` | Cincin biasa (2px) |
+| `small` | `box-shadow: 0 0 0 4px var(--ring-color)` | Cincin kecil (4px) |
+| `medium` | `box-shadow: 0 0 0 6px var(--ring-color)` | Cincin sederhana (6px) |
+| `big` | `box-shadow: 0 0 0 8px var(--ring-color)` | Cincin besar (8px) |
+
+## Contoh
+
+```html
+<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>
+<input visual="focus:ring:regular ring-color:blue-500">
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Cincin Fokus
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="focus-visible:ring:small"</code> - Cincin muncul pada fokus papan kekunci (cuba kekunci Tab)</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</div>
+```
+
+</details>
+
+</div>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="ring:[custom-value]">Custom</div>
+```

package/docs/ms/reference/visual/stroke-width.md

@@ -30,9 +30,9 @@ visual="stroke-w:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke-w:2"</code> - Kawal ketebalan gurisan SVG</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 </div>
 
@@ -41,9 +41,9 @@ visual="stroke-w:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 ```
 

package/docs/ms/reference/visual/stroke.md

@@ -29,8 +29,8 @@ visual="stroke:[color]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="stroke:primary"</code> - Guris elemen SVG dengan warna</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 </div>
 
@@ -39,8 +39,8 @@ visual="stroke:[color]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>
 ```
 

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

@@ -27,7 +27,7 @@ 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> - Inden baris pertama teks</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>
@@ -38,7 +38,7 @@ visual="indent:[value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>

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

@@ -29,7 +29,7 @@ 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> - Kendalikan teks yang melimpah</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>
@@ -39,7 +39,7 @@ visual="[overflow-value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<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>