@bookklik/senangstart-css 0.1.8 → 0.2.0

package/docs/.vitepress/config.js

@@ -766,6 +766,7 @@ export default defineConfig({
       themeConfig: {
         ...sharedThemeConfig,
         nav: [
+          { text: 'Home', link: '/' },
           { text: 'Guide', link: '/guide/getting-started' },
           { text: 'Reference', link: '/reference/layout' },
           { text: 'Examples', link: '/examples/' },
@@ -788,6 +789,7 @@ export default defineConfig({
       themeConfig: {
         ...sharedThemeConfig,
         nav: [
+          { text: 'Utama', link: '/ms/' },
           { text: 'Panduan', link: '/ms/guide/getting-started' },
           { text: 'Rujukan', link: '/ms/reference/layout' },
           { text: 'Contoh', link: '/ms/examples/' },

package/docs/guide/responsive.md

@@ -127,3 +127,28 @@ Use your custom breakpoint:
   Extra large padding on wide screens
 </div>
 ```
+
+## Tailwind Compatibility
+
+SenangStart supports Tailwind CSS default breakpoints out-of-the-box using the `tw-` prefix. This is useful when migrating from Tailwind or when you prefer Tailwind's breakpoint scale.
+
+| Prefix | Min-Width | Tailwind Equiv. |
+|--------|-----------|-----------------|
+| `tw-sm:` | 640px | `sm:` |
+| `tw-md:` | 768px | `md:` |
+| `tw-lg:` | 1024px | `lg:` |
+| `tw-xl:` | 1280px | `xl:` |
+| `tw-2xl:` | 1536px | `2xl:` |
+
+### Usage with Tailwind Scale
+
+You can combine `tw-` prefixed breakpoints with Tailwind-style values (also prefixed with `tw-`):
+
+```html
+<div 
+  space="p:tw-4 tw-md:p:tw-8" 
+  visual="rounded:tw-lg tw-lg:shadow:tw-xl"
+>
+  Tailwind-compatible scaling
+</div>
+```

package/docs/index.md

@@ -6,7 +6,7 @@ hero:
   text: Natural Language Engine
   tagline: Fluent Style Utilities for Humans and AI
   image:
-    src: https://senangstart.com/img/use_senangstart.svg
+    src: /assets/senangstart-css-logo.svg
     alt: SenangStart CSS
   actions:
     - theme: brand

package/docs/ms/guide/responsive.md

@@ -127,3 +127,28 @@ Guna breakpoint tersuai anda:
   Padding extra besar pada skrin lebar
 </div>
 ```
+
+## Keserasian Tailwind
+
+SenangStart menyokong titik henti (breakpoint) lalai Tailwind CSS secara terus menggunakan prefiks `tw-`. Ini berguna apabila berpindah dari Tailwind atau jika anda lebih suka skala breakpoint Tailwind.
+
+| Prefiks | Min-Width | Persamaan Tailwind |
+|---------|-----------|--------------------|
+| `tw-sm:` | 640px | `sm:` |
+| `tw-md:` | 768px | `md:` |
+| `tw-lg:` | 1024px | `lg:` |
+| `tw-xl:` | 1280px | `xl:` |
+| `tw-2xl:` | 1536px | `2xl:` |
+
+### Penggunaan dengan Skala Tailwind
+
+Anda boleh menggabungkan prefiks breakpoint `tw-` dengan nilai gaya Tailwind (juga bermula dengan `tw-`):
+
+```html
+<div 
+  space="p:tw-4 tw-md:p:tw-8" 
+  visual="rounded:tw-lg tw-lg:shadow:tw-xl"
+>
+  Penskalaan serasi Tailwind
+</div>
+```

package/docs/ms/index.md

@@ -6,7 +6,7 @@ hero:
   text: Enjin Bahasa Natural
   tagline: Stail Utiliti yang Fasih untuk Manusia dan AI
   image:
-    src: https://senangstart.com/img/use_senangstart.svg
+    src: /assets/senangstart-css-logo.svg
     alt: SenangStart CSS
   actions:
     - theme: brand

package/docs/ms/reference/breakpoints.md

@@ -12,6 +12,29 @@ Rujukan lengkap untuk breakpoint responsif.
 | `lap:` | 1024px | Komputer riba |
 | `desk:` | 1280px | Desktop |
 
+## Keserasian Tailwind
+
+SenangStart menyokong titik henti (breakpoint) lalai Tailwind CSS menggunakan prefiks `tw-`.
+
+| Prefiks | Min-Width | Persamaan Tailwind |
+|---------|-----------|--------------------|
+| `tw-sm:` | 640px | `sm:` |
+| `tw-md:` | 768px | `md:` |
+| `tw-lg:` | 1024px | `lg:` |
+| `tw-xl:` | 1280px | `xl:` |
+| `tw-2xl:` | 1536px | `2xl:` |
+
+### Penggunaan dengan Skala Tailwind
+
+```html
+<div 
+  space="p:tw-4 tw-md:p:tw-8" 
+  visual="rounded:tw-lg tw-lg:shadow:tw-xl"
+>
+  Penskalaan serasi Tailwind
+</div>
+```
+
 ## Media Query CSS
 
 ```css

package/docs/ms/reference/layout/align-content.md

@@ -25,11 +25,64 @@ layout="content:[value]"
 <div layout="flex wrap content:center">Centered rows</div>
 ```
 
-## Responsif
+## 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">
+
+### Kandungan Tengah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="content:center"</code> - Tengahkan baris bungkus dalam bekas berbilang baris</p>
+<div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Kandungan Antara
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="content:between"</code> - Ruang antara baris bungkus</p>
+<div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/ms/reference/layout/align-items.md

@@ -23,11 +23,88 @@ layout="items:[value]"
 <div layout="flex items:center">Centered</div>
 ```
 
-## Responsif
+## 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">
+
+### Item Tengah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:center"</code> - Item berpusat sepanjang paksi silang</p>
+<div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
 </div>
 ```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Item Permulaan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:start"</code> - Item dijajarkan ke permulaan paksi silang</p>
+<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Item Regang
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="items:stretch"</code> - Item diregangkan untuk mengisi ketinggian bekas</p>
+<div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/layout/align-self.md

@@ -24,11 +24,32 @@ layout="self:[value]"
 <div layout="self:center">Centered item</div>
 ```
 
-## Responsif
+## 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">
+
+### Jajar Kendiri
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="self:center"</code> - Ganti penjajaran induk untuk satu item</p>
+<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
+  <span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
+  <span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/ms/reference/layout/aspect-ratio.md

@@ -22,19 +22,38 @@ layout="aspect:[value]"
 <div layout="aspect:[4/3]">4:3</div>
 ```
 
-## Nilai Arbitrari
+## Pratonton
 
-Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Nisbah Aspek Segi Empat
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="aspect:square"</code> - Nisbah aspek 1:1</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
+  <div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<div layout="aspect:[custom-value]">Custom</div>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
+  <div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
+</div>
 ```
 
-## Responsif
+</details>
 
-```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
 </div>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="aspect:[custom-value]">Custom</div>
 ```

package/docs/ms/reference/layout/border-collapse.md

@@ -20,11 +20,88 @@ layout="border:[value]"
 <table layout="border:collapse">Collapsed table</table>
 ```
 
-## Responsif
+## 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">
+
+### Runtuh Sempadan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border:collapse"</code> - Sempadan jadual runtuh menjadi satu baris</p>
+<table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Asingkan Sempadan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border:separate"</code> - Sempadan jadual diasingkan (lalai)</p>
+<table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>
 </div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>
 ```
+
+</details>
+
+</div>

package/docs/ms/reference/layout/border-spacing.md

@@ -21,19 +21,54 @@ layout="border-spacing:[value]"
 <table layout="border-separate border-spacing:small">Spaced</table>
 ```
 
-## Nilai Arbitrari
+## Pratonton
 
-Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Jarak Sempadan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="border-spacing:small"</code> - Jarak antara sempadan sel jadual</p>
+<table layout="border:separate" style="width: 100%; border-spacing: 8px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<div layout="border:[custom-value]">Custom</div>
+<table layout="border:separate" style="width: 100%; border-spacing: 8px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>
 ```
 
-## Responsif
+</details>
 
-```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
 </div>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="border:[custom-value]">Custom</div>
 ```

package/docs/ms/reference/layout/box-sizing.md

@@ -20,11 +20,28 @@ layout="box:[value]"
 <div layout="box:border">Border box</div>
 ```
 
-## Responsif
+## 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">
+
+### Kotak Sempadan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="box:border"</code> - Padding dan sempadan termasuk dalam lebar</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/ms/reference/layout/caption-side.md

@@ -20,11 +20,76 @@ layout="caption:[value]"
 <caption layout="caption:bottom">Bottom caption</caption>
 ```
 
-## Responsif
+## 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">
+
+### Kapsyen Atas
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="caption:top"</code> - Kapsyen jadual di atas</p>
+<table style="width: 100%;">
+  <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
 
 ```html
-<!-- Contoh responsif -->
-<div layout="mob:... tab:... lap:...">
-  Kandungan responsif
+<table style="width: 100%;">
+  <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Kapsyen Bawah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="caption:bottom"</code> - Kapsyen jadual di bawah</p>
+<table style="width: 100%;">
+  <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>
 </div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<table style="width: 100%;">
+  <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>
 ```
+
+</details>
+
+</div>