@bookklik/senangstart-css 0.2.9 → 0.2.12

package/src/compiler/generators/preflight.js

@@ -71,10 +71,13 @@ hr {
 }
 
 /*
- * Add the correct text decoration in Chrome, Edge, and Safari
+ * Set default placeholder color to a semi-transparent gray
+ * Uses theme variable for customization with fallback
  */
-abbr:where([title]) {
-  text-decoration: underline dotted;
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: var(--placeholder-color, #9ca3af); /* 2 */
 }
 
 /*
@@ -217,10 +220,17 @@ input:where([type='submit']) {
 }
 
 /*
- * Add the correct vertical alignment in Chrome and Firefox
+ * Add the correct text decoration in Chrome, Edge, and Safari
  */
-progress {
-  vertical-align: baseline;
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Make sure links don't get underlined in headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  text-decoration: none;
 }
 
 /*
@@ -292,14 +302,17 @@ legend {
 }
 
 /*
- * Remove default list styles
+ * 1. Use a more sensible default box-sizing strategy
  */
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* Support safe-area-inset for modern devices with notches */
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
 }
 
 /*

package/src/compiler/generators/typescript.js

@@ -19,7 +19,9 @@ export function generateTypeScript(config) {
   
   // Generate radius unions
   const radiusKeys = Object.keys(theme.radius);
-  const roundedUnions = radiusKeys.map(k => `'rounded:${k}'`).join(' | ');
+  const directions = ['t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br'];
+  const roundedUnions = radiusKeys.map(k => `'rounded:${k}'`).join(' | ') +
+    ' | ' + directions.flatMap(d => radiusKeys.map(k => `'rounded-${d}:${k}'`)).join(' | ');
   
   // Generate shadow unions
   const shadowKeys = Object.keys(theme.shadow);

package/src/compiler/index.js

@@ -18,11 +18,24 @@ import { generateTypeScript } from './generators/typescript.js';
 export function compileSource(content, config) {
   const parsed = parseSource(content);
   const tokens = tokenizeAll(parsed);
+  
+  // Check for invalid tokens and log warnings
+  const invalidTokens = tokens.filter(token => token.error);
+  if (invalidTokens.length > 0) {
+    if (typeof console !== 'undefined') {
+      console.warn(`\n${invalidTokens.length} error(s) found in source:`);
+      for (const token of invalidTokens) {
+        console.warn(`  • ${token.raw} (${token.attrType}): ${token.error}`);
+      }
+    }
+  }
+  
   const css = generateCSS(tokens, config);
   
   return {
     tokens,
     css,
+    errors: invalidTokens.length > 0 ? invalidTokens : null,
     minifiedCSS: config.output?.minify ? minifyCSS(css) : null
   };
 }
@@ -36,14 +49,25 @@ export function compileSource(content, config) {
 export function compileMultiple(files, config) {
   const parsed = parseMultipleSources(files);
   const tokens = tokenizeAll(parsed);
+  
+  // Check for invalid tokens and log warnings
+  const invalidTokens = tokens.filter(token => token.error);
+  if (invalidTokens.length > 0) {
+    if (typeof console !== 'undefined') {
+      console.warn(`\n${invalidTokens.length} error(s) found in source:`);
+      for (const token of invalidTokens) {
+        console.warn(`  • ${token.raw} (${token.attrType}): ${token.error}`);
+      }
+    }
+  }
+  
   const css = generateCSS(tokens, config);
   
   return {
     tokens,
     css,
-    minifiedCSS: config.output?.minify ? minifyCSS(css) : null,
-    aiContext: generateAIContext(config),
-    typescript: generateTypeScript(config)
+    errors: invalidTokens.length > 0 ? invalidTokens : null,
+    minifiedCSS: config.output?.minify ? minifyCSS(css) : null
   };
 }
 

package/src/compiler/parser.js

@@ -18,11 +18,11 @@ const ATTRIBUTE_PATTERNS = {
  */
 function createAttributePatterns() {
   return {
-    layout: /layout\s*=\s*["']([^"']*)["']/g,
-    space:  /space\s*=\s*["']([^"']*)["']/g,
-    visual: /visual\s*=\s*["']([^"']*)["']/g,
-    interact: /interact\s*=\s*["']([^"']*)["']/g,
-    listens: /listens\s*=\s*["']([^"']*)["']/g
+    layout: /layout\s*=\s*("[^"]*"|'[^']*')/g,
+    space:  /space\s*=\s*("[^"]*"|'[^']*')/g,
+    visual: /visual\s*=\s*("[^"]*"|'[^']*')/g,
+    interact: /interact\s*=\s*("[^"]*"|'[^']*')/g,
+    listens: /listens\s*=\s*("[^"]*"|'[^']*')/g
   };
 }
 
@@ -45,7 +45,14 @@ export function parseSource(content) {
   for (const [attr, pattern] of Object.entries(patterns)) {
     let match;
     while ((match = pattern.exec(content)) !== null) {
-      const value = match[1].trim();
+      let value = match[1].trim();
+      if (value.length >= 2) {
+        const firstChar = value[0];
+        const lastChar = value[value.length - 1];
+        if ((firstChar === '"' && lastChar === '"') || (firstChar === "'" && lastChar === "'")) {
+          value = value.slice(1, -1);
+        }
+      }
       if (value.length > 10000) {
         continue;
       }

package/src/compiler/tokenizer.js

@@ -1,23 +1,25 @@
-/**
- * SenangStart CSS - Tokenizer
- * Re-exports core tokenizer functions with backward compatibility
- */
-
-// Re-export everything from core tokenizer
-export { 
-  tokenize, 
-  tokenizeAll, 
-  sanitizeValue, 
-  isValidToken 
-} from '../core/tokenizer-core.js';
-
-// Re-export constants for backward compatibility
-export { 
-  BREAKPOINTS, 
-  STATES, 
-  LAYOUT_KEYWORDS 
-} from '../core/constants.js';
-
-// Default export for backward compatibility
-import { tokenize, tokenizeAll } from '../core/tokenizer-core.js';
-export default { tokenize, tokenizeAll };
+/**
+ * SenangStart CSS - Tokenizer
+ * Re-exports core tokenizer functions with backward compatibility
+ */
+
+// Re-export everything from core tokenizer
+export {
+  tokenize,
+  tokenizeAll,
+  tokenizeAllWithBatching,
+  sanitizeValue,
+  isValidToken
+} from '../core/tokenizer-core.js';
+
+// Re-export constants for backward compatibility
+export {
+  BREAKPOINTS,
+  STATES,
+  LAYOUT_KEYWORDS
+} from '../core/constants.js';
+
+// Default export for backward compatibility
+import { tokenize, tokenizeAll, tokenizeAllWithBatching } from '../core/tokenizer-core.js';
+export default { tokenize, tokenizeAll, tokenizeAllWithBatching };
+

package/src/config/defaults.js

@@ -138,6 +138,7 @@ export const defaultConfig = {
       'tab':  '768px',      // Tablet
       'lap':  '1024px',     // Laptop
       'desk': '1280px',     // Desktop
+      'print': 'print',       // Print media query
       
       // Tailwind Compatibility
       'tw-sm': '640px',
@@ -148,6 +149,8 @@ export const defaultConfig = {
     },
 
     // 7. COLORS: Palette Scales
+    // Placeholder color for form inputs
+    placeholder: '#9ca3af',
     colors: {
       // Base colors
       'white':     '#FFFFFF',

package/src/core/tokenizer-core.js

@@ -1,10 +1,10 @@
-/**
- * SenangStart CSS - Core Tokenizer
- * Pure tokenizer functions shared by JIT runtime and build-time compiler
- */
-
-import { BREAKPOINTS, STATES, LAYOUT_KEYWORDS } from './constants.js';
-import { sanitizeValue } from '../utils/common.js';
+/**
+ * SenangStart CSS - Core Tokenizer
+ * Pure tokenizer functions shared by JIT runtime and build-time compiler
+ */
+
+import { BREAKPOINTS, STATES, LAYOUT_KEYWORDS } from './constants.js';
+import { sanitizeValue, batchProcessTokens } from '../utils/common.js';
 
 /**
  * Sanitize token value to prevent CSS injection
@@ -164,15 +164,42 @@ export function tokenize(raw, attrType) {
  * @returns {Array} - Array of token objects
  */
 export function tokenizeAll(parsed) {
-  const tokens = [];
-  
-  for (const [attrType, values] of Object.entries(parsed)) {
-    for (const raw of values) {
-      tokens.push(tokenize(raw, attrType));
-    }
-  }
-  
-  return tokens;
-}
-
-export default { tokenize, tokenizeAll, sanitizeValue, isValidToken };
+  const tokens = [];
+
+  for (const [attrType, values] of Object.entries(parsed)) {
+    for (const raw of values) {
+      tokens.push(tokenize(raw, attrType));
+    }
+  }
+
+  return tokens;
+}
+
+/**
+ * Tokenize all values with memory-protected batch processing
+ * @param {Object} parsed - Parsed tokens from parser { layout: Set, space: Set, visual: Set }
+ * @param {number} batchSize - Number of tokens per batch (default: 1000)
+ * @returns {Promise<Array>} - Array of token objects
+ */
+export async function tokenizeAllWithBatching(parsed, batchSize = 1000) {
+  const rawTokens = [];
+
+  // Collect all raw tokens first
+  for (const [attrType, values] of Object.entries(parsed)) {
+    for (const raw of values) {
+      rawTokens.push({ raw, attrType });
+    }
+  }
+
+  // Process tokens in batches with memory protection
+  const tokens = await batchProcessTokens(
+    rawTokens,
+    ({ raw, attrType }) => tokenize(raw, attrType),
+    batchSize
+  );
+
+  return tokens;
+}
+
+export default { tokenize, tokenizeAll, tokenizeAllWithBatching, sanitizeValue, isValidToken };
+

package/src/definitions/index.js

@@ -16,6 +16,7 @@ import transformDefinitions from './visual-transforms.js';
 import borderDefinitions from './visual-borders.js';
 import divideDefinitions from './visual-divide.js';
 import svgDefinitions from './visual-svg.js';
+import performanceDefinitions from './visual-performance.js';
 
 // Import split layout definitions
 import flexDefinitions from './layout-flex.js';
@@ -37,7 +38,8 @@ const allVisualDefinitions = {
   ...transformDefinitions,
   ...borderDefinitions,
   ...divideDefinitions,
-  ...svgDefinitions
+  ...svgDefinitions,
+  ...performanceDefinitions
 };
 
 // Re-export all definitions
@@ -54,6 +56,7 @@ export { transformDefinitions } from './visual-transforms.js';
 export { borderDefinitions } from './visual-borders.js';
 export { divideDefinitions } from './visual-divide.js';
 export { svgDefinitions } from './visual-svg.js';
+export { performanceDefinitions } from './visual-performance.js';
 
 // Re-export split layout definitions
 export { flexDefinitions } from './layout-flex.js';

package/src/definitions/visual-borders.js

@@ -181,11 +181,11 @@ export const ring = {
   supportsArbitrary: true,
   values: [
     { value: 'none', css: 'box-shadow: 0 0 0 0 transparent;', description: 'No ring', descriptionMs: 'Tiada cincin' },
-    { value: 'thin', css: 'box-shadow: 0 0 0 1px var(--ring-color);', description: 'Thin ring (1px)', descriptionMs: 'Cincin nipis (1px)' },
-    { value: 'regular', css: 'box-shadow: 0 0 0 2px var(--ring-color);', description: 'Regular ring (2px)', descriptionMs: 'Cincin biasa (2px)' },
-    { value: 'small', css: 'box-shadow: 0 0 0 4px var(--ring-color);', description: 'Small ring (4px)', descriptionMs: 'Cincin kecil (4px)' },
-    { value: 'medium', css: 'box-shadow: 0 0 0 6px var(--ring-color);', description: 'Medium ring (6px)', descriptionMs: 'Cincin sederhana (6px)' },
-    { value: 'big', css: 'box-shadow: 0 0 0 8px var(--ring-color);', description: 'Big ring (8px)', descriptionMs: 'Cincin besar (8px)' }
+    { value: 'thin', css: 'box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color);', description: 'Thin ring (1px)', descriptionMs: 'Cincin nipis (1px)' },
+    { value: 'regular', css: 'box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color);', description: 'Regular ring (2px)', descriptionMs: 'Cincin biasa (2px)' },
+    { value: 'small', css: 'box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color);', description: 'Small ring (4px)', descriptionMs: 'Cincin kecil (4px)' },
+    { value: 'medium', css: 'box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color);', description: 'Medium ring (6px)', descriptionMs: 'Cincin sederhana (6px)' },
+    { value: 'big', css: 'box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color);', description: 'Big ring (8px)', descriptionMs: 'Cincin besar (8px)' }
   ],
   examples: [
     { code: '<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>', description: 'Focus ring on keyboard focus' },
@@ -216,8 +216,8 @@ export const ringColor = {
   usesScale: 'colors',
   supportsArbitrary: true,
   values: [
-    { value: 'primary', css: '--ring-color: var(--c-primary);', description: 'Primary ring color', descriptionMs: 'Warna cincin utama' },
-    { value: 'blue-500', css: '--ring-color: var(--c-blue-500);', description: 'Blue ring color', descriptionMs: 'Warna cincin biru' }
+    { value: 'primary', css: '--ss-ring-color: var(--c-primary);', description: 'Primary ring color', descriptionMs: 'Warna cincin utama' },
+    { value: 'blue-500', css: '--ss-ring-color: var(--c-blue-500);', description: 'Blue ring color', descriptionMs: 'Warna cincin biru' }
   ],
   examples: [
     { code: '<button visual="ring:small ring-color:primary">Colored ring</button>', description: 'Ring with custom color' }
@@ -233,9 +233,9 @@ export const ringOffset = {
   category: 'visual',
   supportsArbitrary: true,
   values: [
-    { value: '0', css: '--ring-offset: 0px;', description: 'No offset', descriptionMs: 'Tiada ruang' },
-    { value: '2', css: '--ring-offset: 2px;', description: '2px offset', descriptionMs: 'Ruang 2px' },
-    { value: '4', css: '--ring-offset: 4px;', description: '4px offset', descriptionMs: 'Ruang 4px' }
+    { value: '0', css: '--ss-ring-offset-width: 0px;', description: 'No offset', descriptionMs: 'Tiada ruang' },
+    { value: '2', css: '--ss-ring-offset-width: 2px;', description: '2px offset', descriptionMs: 'Ruang 2px' },
+    { value: '4', css: '--ss-ring-offset-width: 4px;', description: '4px offset', descriptionMs: 'Ruang 4px' }
   ],
   examples: [
     { code: '<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>', description: 'Ring with offset' }

package/src/definitions/visual-performance.js

@@ -0,0 +1,126 @@
+/**
+ * SenangStart CSS - Performance Utility Definitions
+ * Content visibility, contain, and other performance optimizations
+ */
+
+// ======================
+// CONTENT VISIBILITY
+// ======================
+
+export const contentVisibility = {
+  name: 'content-visibility',
+  property: 'visual',
+  syntax: 'visual="content-visibility:[value]"',
+  description: 'Optimize rendering by skipping off-screen content',
+  descriptionMs: 'Optimumkan rendering dengan melangkau kandungan luar skrin',
+  category: 'visual',
+  values: [
+    { value: 'visible', css: 'content-visibility: visible;', description: 'Render all content', descriptionMs: 'Render semua kandungan' },
+    { value: 'auto', css: 'content-visibility: auto;', description: 'Skip when off-screen', descriptionMs: 'Langkau bila luar skrin' },
+    { value: 'hidden', css: 'content-visibility: hidden;', description: 'Never render off-screen', descriptionMs: 'Jangan render luar skrin' }
+  ],
+  examples: [
+    { code: '<section visual="content-visibility:auto">Large list</section>', description: 'Auto-optimize large content' },
+    { code: '<div visual="content-visibility:hidden">Hidden until needed</div>', description: 'Hide until revealed' }
+  ],
+  preview: [
+    {
+      title: 'Content Visibility',
+      titleMs: 'Ketampakan Kandungan',
+      description: 'Performance optimization for off-screen content',
+      descriptionMs: 'Pengoptimuman prestasi untuk kandungan luar skrin',
+      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">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>`,
+      highlightValue: 'content-visibility:auto'
+    }
+  ]
+};
+
+// ======================
+// CONTAIN
+// ======================
+
+export const contain = {
+  name: 'contain',
+  property: 'visual',
+  syntax: 'visual="contain:[value]"',
+  description: 'Isolate element rendering for performance',
+  descriptionMs: 'Pencil rendering elemen untuk prestasi',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'contain: none;', description: 'No containment', descriptionMs: 'Tiada pengandungan' },
+    { value: 'strict', css: 'contain: strict;', description: 'Full containment', descriptionMs: 'Pengandungan penuh' },
+    { value: 'content', css: 'contain: content;', description: 'Content containment', descriptionMs: 'Pengandungan kandungan' },
+    { value: 'size', css: 'contain: size;', description: 'Size containment', descriptionMs: 'Pengandungan saiz' },
+    { value: 'layout', css: 'contain: layout;', description: 'Layout containment', descriptionMs: 'Pengandungan susun atur' },
+    { value: 'style', css: 'contain: style;', description: 'Style containment', descriptionMs: 'Pengandungan gaya' },
+    { value: 'paint', css: 'contain: paint;', description: 'Paint containment', descriptionMs: 'Pengandungan lukis' }
+  ],
+  examples: [
+    { code: '<div visual="contain:strict">Isolated rendering</div>', description: 'Full containment' },
+    { code: '<div visual="contain:content">Content isolation</div>', description: 'Content only' }
+  ],
+  preview: [
+    {
+      title: 'Contain',
+      titleMs: 'Mengandung',
+      description: 'Isolate element from rest of page for performance',
+      descriptionMs: 'Pencil elemen dari halaman lain untuk prestasi',
+      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">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>`,
+      highlightValue: 'contain:strict'
+    }
+  ]
+};
+
+// ======================
+// WRITING MODE
+// ======================
+
+export const writingMode = {
+  name: 'writing-mode',
+  property: 'visual',
+  syntax: 'visual="writing-mode:[value]"',
+  description: 'Set writing direction for RTL/vertical text',
+  descriptionMs: 'Tetapkan arah penulisan untuk teks RTL/menegak',
+  category: 'visual',
+  values: [
+    { value: 'horizontal-tb', css: 'writing-mode: horizontal-tb;', description: 'Left to right', descriptionMs: 'Kiri ke kanan' },
+    { value: 'vertical-rl', css: 'writing-mode: vertical-rl;', description: 'Top to bottom RTL', descriptionMs: 'Atas ke bawah RTL' },
+    { value: 'vertical-lr', css: 'writing-mode: vertical-lr;', description: 'Top to bottom LTR', descriptionMs: 'Atas ke bawah LTR' },
+    { value: 'sideways-rl', css: 'writing-mode: sideways-rl;', description: 'Sideways RTL', descriptionMs: 'Menyerong RTL' },
+    { value: 'sideways-lr', css: 'writing-mode: sideways-lr;', description: 'Sideways LTR', descriptionMs: 'Menyerong LTR' }
+  ],
+  examples: [
+    { code: '<div visual="writing-mode:vertical-rl">Vertical text</div>', description: 'Vertical text RTL' },
+    { code: '<div visual="writing-mode:horizontal-tb">Horizontal text</div>', description: 'Horizontal text LTR' }
+  ],
+  preview: [
+    {
+      title: 'Writing Mode',
+      titleMs: 'Mod Penulisan',
+      description: 'Control text direction and orientation',
+      descriptionMs: 'Kawal arah dan orientasi teks',
+      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">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>`,
+      highlightValue: 'writing-mode:vertical-rl'
+    }
+  ]
+};
+
+// Export all performance definitions
+export const performanceDefinitions = {
+  contentVisibility,
+  contain,
+  writingMode
+};
+
+export default performanceDefinitions;

package/src/definitions/visual.js

@@ -414,11 +414,12 @@ export const lineHeight = {
 export const borderRadius = {
   name: 'border-radius',
   property: 'visual',
-  syntax: 'visual="rounded:[value]"',
-  description: 'Set border radius',
-  descriptionMs: 'Tetapkan jejari sempadan',
+  syntax: 'visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"',
+  description: 'Set border radius for all corners or specific corners',
+  descriptionMs: 'Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu',
   category: 'visual',
   usesScale: 'radius',
+  supportsArbitrary: true,
   values: [
     { value: 'none', css: 'border-radius: var(--r-none);', description: 'No rounding', descriptionMs: 'Tiada pembulatan' },
     { value: 'small', css: 'border-radius: var(--r-small);', description: 'Small radius', descriptionMs: 'Jejari kecil' },
@@ -427,8 +428,10 @@ export const borderRadius = {
     { value: 'round', css: 'border-radius: var(--r-round);', description: 'Fully round', descriptionMs: 'Sepenuhnya bulat' }
   ],
   examples: [
-    { code: '<div visual="rounded:medium">Rounded corners</div>', description: 'Medium radius' },
-    { code: '<div visual="rounded:round">Pill shape</div>', description: 'Pill' }
+    { code: '<div visual="rounded:medium">Rounded corners</div>', description: 'All corners rounded' },
+    { code: '<div visual="rounded:round">Pill shape</div>', description: 'Fully round' },
+    { code: '<div visual="rounded-t:medium">Top rounded</div>', description: 'Top corners only' },
+    { code: '<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>', description: 'Specific corners' }
   ],
   footnotes: [
     {
@@ -446,12 +449,25 @@ export const borderRadius = {
       description: 'Round element corners from subtle to pill-shaped',
       descriptionMs: 'Bulatkan sudut elemen dari halus hingga berbentuk pil',
       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:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>`,
       highlightValue: 'rounded:medium'
+    },
+    {
+      title: 'Directional Border Radius',
+      titleMs: 'Jejari Sempadan Arah',
+      description: 'Round specific corners for unique shapes',
+      descriptionMs: 'Bulatkan bucu tertentu untuk bentuk unik',
+      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-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>`,
+      highlightValue: 'rounded-t:medium'
     }
   ]
 };