@bookklik/senangstart-css 0.1.7 → 0.2.0

package/docs/.vitepress/config.js

@@ -13,7 +13,7 @@ const sharedThemeConfig = {
   ],
   footer: {
     message: 'Released under the MIT License.',
-    copyright: 'Copyright © 2026 SenangStart'
+    copyright: 'Copyright © 2026 Bookklik Technologies'
   }
 }
 
@@ -762,10 +762,11 @@ export default defineConfig({
       label: 'English',
       lang: 'en',
       title: 'SenangStart CSS',
-      description: 'The Intent-First CSS Engine - Speak Human, Compile to Logic',
+      description: 'Fluent Style Utilities for Humans and AI',
       themeConfig: {
         ...sharedThemeConfig,
         nav: [
+          { text: 'Home', link: '/' },
           { text: 'Guide', link: '/guide/getting-started' },
           { text: 'Reference', link: '/reference/layout' },
           { text: 'Examples', link: '/examples/' },
@@ -784,10 +785,11 @@ export default defineConfig({
       label: 'Bahasa Melayu',
       lang: 'ms',
       title: 'SenangStart CSS',
-      description: 'Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik',
+      description: 'Utiliti Gaya Fasih untuk Manusia dan AI',
       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/.vitepress/theme/custom.css

@@ -11,7 +11,6 @@
   --vp-c-brand-1: #2563EB;
   --vp-c-brand-2: #3B82F6;
   --vp-c-brand-3: #DBEAFE;
-  --vp-c-brand-soft: #DBEAFE;
   
   /* Override default colors */
   --vp-c-default-1: #3E4A5D;

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

@@ -3,10 +3,10 @@ layout: home
 
 hero:
   name: SenangStart CSS
-  text: The Intent-First CSS Engine
-  tagline: Speak Human. Compile to Logic.
+  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
@@ -17,38 +17,26 @@ hero:
       link: https://github.com/bookklik-technologies/senangstart-css
 
 features:
-  - icon: 🧠
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg>
     title: Natural Language
     details: Use tiny, small, medium, big, giant, vast — words you already know. No more memorizing px-4, px-8, px-16.
-  - icon: 🎯
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z M3 9h18 M12 9v12"></path></svg>
     title: Separation of Concerns
     details: layout for structure, space for sizing, visual for appearance. Clean, semantic, maintainable.
-  - icon: 🤖
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6h12a2.25 2.25 0 0 1 2.25 2.25v7.5A2.25 2.25 0 0 1 18 18H6a2.25 2.25 0 0 1-2.25-2.25v-7.5A2.25 2.25 0 0 1 6 6zM12 3v3M9 3h6M8.25 12a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM15.75 12a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM9 15h6M7.5 18v3M16.5 18v3"></path></svg>
     title: AI-Friendly
     details: Generates context files for LLMs. Say "tighten it up" and AI knows to scale down spacing.
-  - icon: ⚡
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h5L12 8 18 8 8.5 22l3.5-10h-6l2-9z"></path></svg>
     title: Zero Build Option
     details: Use the CDN JIT runtime for instant styling. No build step required for prototyping.
-  - icon: 📱
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"></path></svg>
     title: Responsive by Design
     details: Mobile-first breakpoints with intuitive prefixes like mob:, tab:, lap:, desk:.
-  - icon: 🎨
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 00-1.72 0L2.36 18.64a1.21 1.21 0 000 1.72l1.28 1.28a1.2 1.2 0 001.72 0L21.64 5.36a1.2 1.2 0 000-1.72M10.5 10.5l3 3M5 6v4M19 15v4M10 3v2M7 8H3M21 17h-4M11 4H9"></path></svg>
     title: Fully Customizable
     details: Override any scale, add custom colors, extend the theme to match your brand.
 ---
 
-<style>
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #2563EB 30%, #3B82F6);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #2563EB 50%, #3B82F6 50%);
-  --vp-home-hero-image-filter: blur(44px);
-  --vp-c-brand-1: #2563EB;
-  --vp-c-brand-2: #3B82F6;
-  --vp-c-brand-3: #DBEAFE;
-}
-</style>
-
 ## Quick Example
 
 ```html

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

@@ -3,10 +3,10 @@ layout: home
 
 hero:
   name: SenangStart CSS
-  text: Enjin CSS Niat Nan Utama
-  tagline: Cakap Manusia. Kompil ke Logik.
+  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
@@ -17,38 +17,26 @@ hero:
       link: https://github.com/bookklik-technologies/senangstart-css
 
 features:
-  - icon: 🧠
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg>
     title: Bahasa Semula Jadi
     details: Guna tiny, small, medium, big, giant, vast — perkataan yang anda sudah tahu. Tak perlu hafal px-4, px-8, px-16.
-  - icon: 🎯
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z M3 9h18 M12 9v12"></path></svg>
     title: Pengasingan Tanggungjawab
     details: layout untuk struktur, space untuk saiz, visual untuk penampilan. Bersih, semantik, mudah diselenggara.
-  - icon: 🤖
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6h12a2.25 2.25 0 0 1 2.25 2.25v7.5A2.25 2.25 0 0 1 18 18H6a2.25 2.25 0 0 1-2.25-2.25v-7.5A2.25 2.25 0 0 1 6 6zM12 3v3M9 3h6M8.25 12a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM15.75 12a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zM9 15h6M7.5 18v3M16.5 18v3"></path></svg>
     title: Mesra AI
     details: Menghasilkan fail konteks untuk LLM. Cakap "ketatkan" dan AI tahu untuk kurangkan jarak.
-  - icon: ⚡
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h5L12 8 18 8 8.5 22l3.5-10h-6l2-9z"></path></svg>
     title: Pilihan Tanpa Bina
     details: Guna CDN JIT runtime untuk stail serta-merta. Tiada langkah bina diperlukan untuk prototaip.
-  - icon: 📱
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"></path></svg>
     title: Responsif Secara Rekaan
     details: Titik Henti mobile-first dengan prefiks intuitif seperti mob:, tab:, lap:, desk:.
-  - icon: 🎨
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 00-1.72 0L2.36 18.64a1.21 1.21 0 000 1.72l1.28 1.28a1.2 1.2 0 001.72 0L21.64 5.36a1.2 1.2 0 000-1.72M10.5 10.5l3 3M5 6v4M19 15v4M10 3v2M7 8H3M21 17h-4M11 4H9"></path></svg>
     title: Boleh Disesuaikan Sepenuhnya
     details: Tindih ganti mana-mana skala, tambah warna tersuai, lanjutkan tema untuk padankan jenama anda.
 ---
 
-<style>
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #2563EB 30%, #3B82F6);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #2563EB 50%, #3B82F6 50%);
-  --vp-home-hero-image-filter: blur(44px);
-  --vp-c-brand-1: #2563EB;
-  --vp-c-brand-2: #3B82F6;
-  --vp-c-brand-3: #DBEAFE;
-}
-</style>
-
 ## Contoh Pantas
 
 ```html

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>