@bookklik/senangstart-css 0.1.8 → 0.2.0

package/src/definitions/layout-flex.js

@@ -79,6 +79,44 @@ export const flexDirection = {
   examples: [
     { code: '<div layout="flex row">Row direction</div>', description: 'Flex row' },
     { code: '<div layout="flex col">Column direction</div>', description: 'Flex column' }
+  ],
+  preview: [
+    {
+      title: 'Row Direction',
+      titleMs: 'Arah Baris',
+      description: 'Items arranged horizontally from left to right',
+      descriptionMs: 'Item disusun secara mendatar dari kiri ke kanan',
+      html: `<div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <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>
+</div>`,
+      highlightValue: 'row'
+    },
+    {
+      title: 'Column Direction',
+      titleMs: 'Arah Lajur',
+      description: 'Items stacked vertically from top to bottom',
+      descriptionMs: 'Item disusun secara menegak dari atas ke bawah',
+      html: `<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <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>
+</div>`,
+      highlightValue: 'col'
+    },
+    {
+      title: 'Row Reverse',
+      titleMs: 'Baris Terbalik',
+      description: 'Items arranged horizontally from right to left',
+      descriptionMs: 'Item disusun secara mendatar dari kanan ke kiri',
+      html: `<div layout="flex row-reverse" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <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>
+</div>`,
+      highlightValue: 'row-reverse'
+    }
   ]
 };
 
@@ -100,6 +138,33 @@ export const flexWrap = {
   ],
   examples: [
     { code: '<div layout="flex wrap">Wrapping flex</div>', description: 'Allow items to wrap' }
+  ],
+  preview: [
+    {
+      title: 'Wrap Enabled',
+      titleMs: 'Bungkus Diaktifkan',
+      description: 'Items wrap to next line when container is full',
+      descriptionMs: 'Item membungkus ke baris seterusnya apabila bekas penuh',
+      html: `<div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
+</div>`,
+      highlightValue: 'wrap'
+    },
+    {
+      title: 'No Wrap',
+      titleMs: 'Tiada Bungkusan',
+      description: 'Items stay on single line (may overflow)',
+      descriptionMs: 'Item kekal pada satu baris (mungkin melimpah)',
+      html: `<div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+</div>`,
+      highlightValue: 'nowrap'
+    }
   ]
 };
 
@@ -122,6 +187,31 @@ export const flexItems = {
   ],
   examples: [
     { code: '<div layout="grow">Growing item</div>', description: 'Allow item to grow' }
+  ],
+  preview: [
+    {
+      title: 'Flex Grow',
+      titleMs: 'Kembang Flex',
+      description: 'Middle item grows to fill available space',
+      descriptionMs: 'Item tengah berkembang untuk mengisi ruang kosong',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
+  <span layout="grow text:center" space="p:small" visual="bg:primary text:white rounded:small">Grows</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
+</div>`,
+      highlightValue: 'grow'
+    },
+    {
+      title: 'Flex Shrink',
+      titleMs: 'Kecil Flex',
+      description: 'Item shrinks when space is limited',
+      descriptionMs: 'Item mengecil apabila ruang terhad',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 250px;">
+  <span layout="shrink-0" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">No Shrink</span>
+  <span layout="shrink" space="p:small" visual="bg:primary text:white rounded:small">Can Shrink</span>
+</div>`,
+      highlightValue: 'shrink'
+    }
   ]
 };
 
@@ -146,6 +236,31 @@ export const flexShorthand = {
   ],
   examples: [
     { code: '<div layout="flex:1">Flexible item</div>', description: 'Flex grow and shrink' }
+  ],
+  preview: [
+    {
+      title: 'Flex 1',
+      titleMs: 'Flex 1',
+      description: 'Equal distribution of space among items',
+      descriptionMs: 'Pengagihan ruang yang sama antara item',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+</div>`,
+      highlightValue: 'flex:1'
+    },
+    {
+      title: 'Flex Auto vs None',
+      titleMs: 'Flex Auto vs Tiada',
+      description: 'Different flex behaviors compared',
+      descriptionMs: 'Perbandingan kelakuan flex berbeza',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
+  <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
+</div>`,
+      highlightValue: 'flex:auto'
+    }
   ]
 };
 
@@ -169,6 +284,20 @@ export const flexBasis = {
   ],
   examples: [
     { code: '<div layout="basis:[200px]">200px basis</div>', description: 'Fixed basis' }
+  ],
+  preview: [
+    {
+      title: 'Fixed Basis',
+      titleMs: 'Asas Tetap',
+      description: 'Items with different basis sizes',
+      descriptionMs: 'Item dengan saiz asas berbeza',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="basis:[100px] text:center" space="p:small" visual="bg:primary text:white rounded:small">100px</span>
+  <span layout="basis:[150px] text:center" space="p:small" visual="bg:primary text:white rounded:small">150px</span>
+  <span layout="basis:auto" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">auto</span>
+</div>`,
+      highlightValue: 'basis:[100px]'
+    }
   ]
 };
 
@@ -192,6 +321,32 @@ export const order = {
   ],
   examples: [
     { code: '<div layout="order:first">First item</div>', description: 'Move to first' }
+  ],
+  preview: [
+    {
+      title: 'Reorder Items',
+      titleMs: 'Susun Semula Item',
+      description: 'Change visual order of flex items',
+      descriptionMs: 'Ubah susunan visual item flex',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
+  <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
+  <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</span>
+</div>`,
+      highlightValue: 'order:1'
+    },
+    {
+      title: 'First and Last',
+      titleMs: 'Pertama dan Terakhir',
+      description: 'Move items to start or end',
+      descriptionMs: 'Pindahkan item ke permulaan atau hujung',
+      html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
+  <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
+</div>`,
+      highlightValue: 'order:first'
+    }
   ]
 };
 

package/src/definitions/layout-grid.js

@@ -23,6 +23,36 @@ export const gridColumns = {
   examples: [
     { code: '<div layout="grid grid-cols:3">3 columns</div>', description: 'Three column grid' },
     { code: '<div layout="grid grid-cols:12">12 columns</div>', description: 'Twelve column grid' }
+  ],
+  preview: [
+    {
+      title: '3 Column Grid',
+      titleMs: 'Grid 3 Lajur',
+      description: 'Equal width columns with grid-cols:3',
+      descriptionMs: 'Lajur lebar sama dengan grid-cols:3',
+      html: `<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,
+      highlightValue: 'grid-cols:3'
+    },
+    {
+      title: '4 Column Grid',
+      titleMs: 'Grid 4 Lajur',
+      description: 'Four equal columns layout',
+      descriptionMs: 'Susun atur empat lajur sama',
+      html: `<div layout="grid grid-cols:4" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,
+      highlightValue: 'grid-cols:4'
+    }
   ]
 };
 
@@ -45,6 +75,23 @@ export const gridRows = {
   ],
   examples: [
     { code: '<div layout="grid grid-rows:3">3 rows</div>', description: 'Three row grid' }
+  ],
+  preview: [
+    {
+      title: 'Grid Rows',
+      titleMs: 'Baris Grid',
+      description: 'Define explicit row tracks in a grid',
+      descriptionMs: 'Tentukan trek baris eksplisit dalam grid',
+      html: `<div layout="grid grid-rows:3 grid-cols:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,
+      highlightValue: 'grid-rows:3'
+    }
   ]
 };
 
@@ -67,6 +114,35 @@ export const gridColSpan = {
   examples: [
     { code: '<div layout="col-span:2">Spans 2 columns</div>', description: 'Span two columns' },
     { code: '<div layout="col-span:full">Full width</div>', description: 'Span all columns' }
+  ],
+  preview: [
+    {
+      title: 'Column Span',
+      titleMs: 'Rentang Lajur',
+      description: 'Item spanning multiple columns',
+      descriptionMs: 'Item merentangi berbilang lajur',
+      html: `<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="col-span:2 text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+</div>`,
+      highlightValue: 'col-span:2'
+    },
+    {
+      title: 'Full Width Span',
+      titleMs: 'Rentang Lebar Penuh',
+      description: 'Item spanning all columns',
+      descriptionMs: 'Item merentangi semua lajur',
+      html: `<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
+  <span layout="col-span:full text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:full</span>
+</div>`,
+      highlightValue: 'col-span:full'
+    }
   ]
 };
 
@@ -88,6 +164,22 @@ export const gridRowSpan = {
   ],
   examples: [
     { code: '<div layout="row-span:2">Spans 2 rows</div>', description: 'Span two rows' }
+  ],
+  preview: [
+    {
+      title: 'Row Span',
+      titleMs: 'Rentang Baris',
+      description: 'Item spanning multiple rows',
+      descriptionMs: 'Item merentangi berbilang baris',
+      html: `<div layout="grid grid-cols:3 grid-rows:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">4</span>
+</div>`,
+      highlightValue: 'row-span:2'
+    }
   ]
 };
 
@@ -111,6 +203,34 @@ export const gridAutoFlow = {
   ],
   examples: [
     { code: '<div layout="grid grid-flow:col">Column flow</div>', description: 'Column-based flow' }
+  ],
+  preview: [
+    {
+      title: 'Row Flow',
+      titleMs: 'Aliran Baris',
+      description: 'Items flow by row (default)',
+      descriptionMs: 'Item mengalir mengikut baris (lalai)',
+      html: `<div layout="grid grid-cols:3 grid-flow:row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,
+      highlightValue: 'grid-flow:row'
+    },
+    {
+      title: 'Column Flow',
+      titleMs: 'Aliran Lajur',
+      description: 'Items flow by column',
+      descriptionMs: 'Item mengalir mengikut lajur',
+      html: `<div layout="grid grid-rows:2 grid-flow:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,
+      highlightValue: 'grid-flow:col'
+    }
   ]
 };
 
@@ -134,6 +254,20 @@ export const gridAutoSizing = {
   ],
   examples: [
     { code: '<div layout="grid auto-cols:min">Auto min columns</div>', description: 'Min-content columns' }
+  ],
+  preview: [
+    {
+      title: 'Auto Columns',
+      titleMs: 'Lajur Automatik',
+      description: 'Automatically sized column tracks',
+      descriptionMs: 'Trek lajur bersaiz automatik',
+      html: `<div layout="grid grid-flow:col auto-cols:fr" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
+</div>`,
+      highlightValue: 'auto-cols:fr'
+    }
   ]
 };
 

package/src/definitions/layout-positioning.js

@@ -24,6 +24,29 @@ export const position = {
   examples: [
     { code: '<div layout="absolute">Absolute positioned</div>', description: 'Absolute position' },
     { code: '<div layout="fixed">Fixed to viewport</div>', description: 'Fixed position' }
+  ],
+  preview: [
+    {
+      title: 'Relative Position',
+      titleMs: 'Kedudukan Relatif',
+      description: 'Element positioned relative to normal flow',
+      descriptionMs: 'Elemen diletakkan relatif kepada aliran normal',
+      html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
+  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+</div>`,
+      highlightValue: 'relative'
+    },
+    {
+      title: 'Sticky Position',
+      titleMs: 'Kedudukan Melekit',
+      description: 'Element sticks when scrolling past it',
+      descriptionMs: 'Elemen melekat apabila skrol melepasi',
+      html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+</div>`,
+      highlightValue: 'sticky'
+    }
   ]
 };
 
@@ -52,6 +75,32 @@ export const inset = {
   examples: [
     { code: '<div layout="absolute inset:0">Full coverage</div>', description: 'Cover parent' },
     { code: '<div layout="absolute top:medium left:medium">Offset</div>', description: 'Offset positioning' }
+  ],
+  preview: [
+    {
+      title: 'Inset Zero',
+      titleMs: 'Inset Sifar',
+      description: 'Cover entire parent with inset:0',
+      descriptionMs: 'Tutup keseluruhan induk dengan inset:0',
+      html: `<div layout="relative" space="p:large" 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">Parent</span>
+  <span layout="absolute inset:0 flex center" visual="bg:primary/50 text:white rounded:medium">inset:0</span>
+</div>`,
+      highlightValue: 'inset:0'
+    },
+    {
+      title: 'Directional Insets',
+      titleMs: 'Inset Arah',
+      description: 'Position with top, right, bottom, left',
+      descriptionMs: 'Kedudukan dengan atas, kanan, bawah, kiri',
+      html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
+  <span layout="absolute top:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">TL</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">TR</span>
+  <span layout="absolute bottom:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">BL</span>
+  <span layout="absolute bottom:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">BR</span>
+</div>`,
+      highlightValue: 'top:0'
+    }
   ]
 };
 
@@ -76,6 +125,21 @@ export const zIndex = {
   ],
   examples: [
     { code: '<div layout="z:top">On top</div>', description: 'Highest z-index' }
+  ],
+  preview: [
+    {
+      title: 'Z-Index Layers',
+      titleMs: 'Lapisan Z-Index',
+      description: 'Control stacking order of positioned elements',
+      descriptionMs: 'Kawal susunan tindanan elemen yang diletakkan',
+      html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
+  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+</div>`,
+      highlightValue: 'z:high'
+    }
   ]
 };
 

package/src/definitions/layout-table.js

@@ -20,6 +20,46 @@ export const borderCollapse = {
   ],
   examples: [
     { code: '<table layout="border:collapse">Collapsed table</table>', description: 'Collapse table borders' }
+  ],
+  preview: [
+    {
+      title: 'Border Collapse',
+      titleMs: 'Runtuh Sempadan',
+      description: 'Table borders collapse into single lines',
+      descriptionMs: 'Sempadan jadual runtuh menjadi satu baris',
+      html: `<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>`,
+      highlightValue: 'border:collapse'
+    },
+    {
+      title: 'Border Separate',
+      titleMs: 'Asingkan Sempadan',
+      description: 'Table borders are separate (default)',
+      descriptionMs: 'Sempadan jadual diasingkan (lalai)',
+      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>`,
+      highlightValue: 'border:separate'
+    }
   ]
 };
 
@@ -44,6 +84,27 @@ export const borderSpacing = {
   ],
   examples: [
     { code: '<table layout="border-separate border-spacing:small">Spaced</table>', description: 'Spaced table borders' }
+  ],
+  preview: [
+    {
+      title: 'Border Spacing',
+      titleMs: 'Jarak Sempadan',
+      description: 'Space between table cell borders',
+      descriptionMs: 'Jarak antara sempadan sel jadual',
+      html: `<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>`,
+      highlightValue: 'border-spacing:small'
+    }
   ]
 };
 
@@ -64,6 +125,40 @@ export const tableLayout = {
   ],
   examples: [
     { code: '<table layout="table:fixed">Fixed width columns</table>', description: 'Fixed column widths' }
+  ],
+  preview: [
+    {
+      title: 'Fixed Table Layout',
+      titleMs: 'Susun Atur Jadual Tetap',
+      description: 'Columns have fixed equal widths',
+      descriptionMs: 'Lajur mempunyai lebar tetap sama',
+      html: `<table layout="table:fixed" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white">Fixed</td>
+      <td space="p:small" visual="bg:primary text:white">Column</td>
+      <td space="p:small" visual="bg:primary text:white">Widths</td>
+    </tr>
+  </tbody>
+</table>`,
+      highlightValue: 'table:fixed'
+    },
+    {
+      title: 'Auto Table Layout',
+      titleMs: 'Susun Atur Jadual Auto',
+      description: 'Columns adjust to content width',
+      descriptionMs: 'Lajur menyesuaikan dengan lebar kandungan',
+      html: `<table layout="table:auto" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white">Short</td>
+      <td space="p:small" visual="bg:primary text:white">Much Longer Content Here</td>
+      <td space="p:small" visual="bg:primary text:white">Med</td>
+    </tr>
+  </tbody>
+</table>`,
+      highlightValue: 'table:auto'
+    }
   ]
 };
 
@@ -84,6 +179,40 @@ export const captionSide = {
   ],
   examples: [
     { code: '<caption layout="caption:bottom">Bottom caption</caption>', description: 'Bottom caption' }
+  ],
+  preview: [
+    {
+      title: 'Caption Top',
+      titleMs: 'Kapsyen Atas',
+      description: 'Table caption at the top',
+      descriptionMs: 'Kapsyen jadual di atas',
+      html: `<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>`,
+      highlightValue: 'caption:top'
+    },
+    {
+      title: 'Caption Bottom',
+      titleMs: 'Kapsyen Bawah',
+      description: 'Table caption at the bottom',
+      descriptionMs: 'Kapsyen jadual di bawah',
+      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>`,
+      highlightValue: 'caption:bottom'
+    }
   ]
 };