@bookklik/senangstart-css 0.2.4 → 0.2.6

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

@@ -27,7 +27,7 @@ visual="indent:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="indent:medium"</code> - Indent first line of text</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
   <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
   <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
@@ -38,7 +38,7 @@ visual="indent:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
   <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
   <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>

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

@@ -29,7 +29,7 @@ visual="[overflow-value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="truncate"</code> - Handle overflowing text</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
   <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
 </div>
@@ -39,7 +39,7 @@ visual="[overflow-value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
   <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
 </div>

package/docs/reference/visual/text-size.md

@@ -40,7 +40,7 @@ visual="text-size:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-size:big"</code> - Scale text size with paired line-height</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
   <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
   <span visual="text-size:base">base (1rem / 1.5rem)</span>
@@ -53,7 +53,7 @@ visual="text-size:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
   <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
   <span visual="text-size:base">base (1rem / 1.5rem)</span>

package/docs/reference/visual/text-wrap.md

@@ -30,7 +30,7 @@ visual="[wrap-value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="text-balance"</code> - Control line wrapping</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
   <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
   <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
@@ -41,7 +41,7 @@ visual="[wrap-value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
   <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
   <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>

package/docs/reference/visual/transform-backface.md

@@ -29,13 +29,13 @@ visual="backface:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backface:hidden"</code> - Show or hide backside when rotated 180°</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
@@ -49,13 +49,13 @@ visual="backface:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>

package/docs/reference/visual/transform-perspective-origin.md

@@ -36,19 +36,19 @@ visual="perspective-origin:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective-origin:center"</code> - Set vanishing point location for 3D transforms</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">left</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:left">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">center</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:center">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">right</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:right">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
@@ -62,19 +62,19 @@ visual="perspective-origin:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">left</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:left">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">center</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:center">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">right</span>
     <div space="p:medium" visual="perspective:normal perspective-origin:right">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>

package/docs/reference/visual/transform-perspective.md

@@ -34,19 +34,19 @@ visual="perspective:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective:normal"</code> - Control 3D depth perception - apply to parent, transform children</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">dramatic</span>
     <div space="p:medium" visual="perspective:dramatic">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">normal</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">far</span>
     <div space="p:medium" visual="perspective:far">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
@@ -60,19 +60,19 @@ visual="perspective:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">dramatic</span>
     <div space="p:medium" visual="perspective:dramatic">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">normal</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">far</span>
     <div space="p:medium" visual="perspective:far">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>

package/docs/reference/visual/transform-rotate-3d.md

@@ -33,19 +33,19 @@ visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rotate-y:45"</code> - Rotate elements along X, Y, or Z axis in 3D space</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
@@ -59,19 +59,19 @@ visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
     <div space="p:medium" visual="perspective:normal">
       <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>

package/docs/reference/visual/transform-style.md

@@ -29,13 +29,13 @@ visual="transform-style:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transform-style:preserve-3d"</code> - Flat or preserve 3D for nested transforms</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">flat</span>
     <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
     <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
@@ -49,13 +49,13 @@ visual="transform-style:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">flat</span>
     <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
       <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
     <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
       <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>

package/docs/reference/visual/transform-translate-z.md

@@ -30,19 +30,19 @@ visual="translate-z:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-z:near"</code> - Move elements forward or backward in 3D space</p>
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
@@ -56,19 +56,19 @@ visual="translate-z:[value]"
 
 ```html
 <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
     </div>
   </div>
-  <div layout="flex:col" space="g:tiny">
+  <div layout="flex col" space="g:tiny">
     <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
     <div space="p:medium" visual="perspective:near">
       <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>

package/docs/reference/visual/transform-translate.md

@@ -37,7 +37,7 @@ visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translat
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:medium"</code> - Move elements along X, Y, or Z axis</p>
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div layout="flex" space="g:small">
     <span visual="text:neutral-500 text-size:small">X axis:</span>
     <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
@@ -57,7 +57,7 @@ visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translat
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div layout="flex" space="g:small">
     <span visual="text:neutral-500 text-size:small">X axis:</span>
     <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>

package/docs/reference/visual/whitespace.md

@@ -32,7 +32,7 @@ visual="whitespace:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="whitespace:pre"</code> - Control whitespace handling</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
   <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
   <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>
@@ -43,7 +43,7 @@ visual="whitespace:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
   <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
   <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>

package/docs/reference/visual/word-break.md

@@ -30,7 +30,7 @@ visual="[break-value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="break-words"</code> - Control word breaking</p>
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
   <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
   <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
@@ -41,7 +41,7 @@ visual="[break-value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
   <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
   <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>

package/docs/reference/visual.md

@@ -46,12 +46,18 @@ The `visual` attribute controls colors, textures, typography, and appearance.
 - [Font Variant Numeric](./visual/font-variant-numeric) - `tabular-nums`, `ordinal`
 
 ## Borders
-
+ 
 - [Border Color](./visual/border) - `border:grey`, `border:primary`
 - [Border Width](./visual/border-width) - `border-w:thin`, `border-w:thick`
 - [Border Radius](./visual/border-radius) - `rounded:small`, `rounded:big`, `rounded:round`
 - [Border Style](./visual/border-style) - `border-solid`, `border-dashed`, `border-dotted`
-
+ 
+## Divide
+ 
+- [Divide Color](./visual/divide) - `divide:primary`, `divide:gray-300`
+- [Divide Width](./visual/divide-width) - `divide-w:thin`, `divide-w:regular`, `divide-w:thick`
+- [Divide Style](./visual/divide-style) - `divide-style:solid`, `divide-style:dashed`, `divide-style:dotted`
+ 
 ## Effects
 
 - [Box Shadow](./visual/box-shadow) - `shadow:small`, `shadow:medium`, `shadow:big`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bookklik/senangstart-css",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Fluent Style Utilities for Humans and AI",
   "type": "module",
   "main": "src/index.js",
@@ -10,13 +10,14 @@
   },
   "scripts": {
     "dev": "node src/cli/index.js dev",
-    "build": "npm run build:dist && vitepress build docs",
+    "build": "npm run build:dist && npm run docs:generate && vitepress build docs && npm run docs:llms",
     "build:dist": "node scripts/build-dist.js",
     "prepublishOnly": "npm run build:dist",
     "docs:dev": "vitepress dev docs",
     "docs:generate": "node scripts/generate-docs.js",
     "docs:sync-check": "node scripts/generate-docs.js --compare",
     "docs:syntax": "node scripts/extract-syntax.js",
+    "docs:llms": "node scripts/generate-llms-txt.js",
     "test": "node --test tests/",
     "test:unit": "node --test tests/unit/",
     "test:integration": "node --test tests/integration/",
@@ -31,6 +32,7 @@
     "natural-language",
     "intent-first"
   ],
+  "homepage": "https://bookklik-technologies.github.io/senangstart-css",
   "author": "a-hakim",
   "license": "MIT",
   "dependencies": {

package/scripts/build-dist.js

@@ -21,7 +21,7 @@ console.log('📦 Building SenangStart CSS...\n');
 
 // Build unminified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(distDir, 'senangstart-css.js'),
@@ -36,7 +36,7 @@ console.log(`✓ Created senangstart-css.js (${(unminSize / 1024).toFixed(1)} KB
 
 // Build minified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(distDir, 'senangstart-css.min.js'),

package/scripts/bundle-jit.js

@@ -2,7 +2,7 @@
 
 /**
  * Bundle JIT Runtime with esbuild
- * Bundles src/cdn/jit.js into a self-contained IIFE for browser use
+ * Bundles src/cdn/senangstart-engine.js into a self-contained IIFE for browser use
  */
 
 import * as esbuild from 'esbuild';
@@ -16,7 +16,7 @@ console.log('📦 Bundling JIT runtime...');
 
 // Build unminified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(root, 'dist', 'senangstart-css.js'),
@@ -30,7 +30,7 @@ console.log('✓ Created dist/senangstart-css.js');
 
 // Build minified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(root, 'dist', 'senangstart-css.min.js'),