@bookklik/senangstart-css 0.1.7 → 0.2.0

package/docs/reference/layout/overflow.md

@@ -24,11 +24,52 @@ layout="overflow:[value]"
 <div layout="overflow:auto">Scrollable</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Overflow Hidden
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="overflow:hidden"</code> - Content clipped at container edge</p>
+<div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
+</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">
+
+### Overflow Auto
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="overflow:auto"</code> - Scrollbar appears when content overflows</p>
+<div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/overscroll.md

@@ -21,11 +21,28 @@ layout="overscroll:[value]"
 <div layout="overscroll:contain">Contained scroll</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Overscroll Contain
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="overscroll:contain"</code> - Prevent scroll from affecting parent</p>
+<div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/place-content.md

@@ -25,11 +25,30 @@ layout="place-content:[value]"
 <div layout="grid place-content:center">Centered content</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Place Content Center
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="place-content:center"</code> - Center entire grid content in both directions</p>
+<div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <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>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <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>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/place-items.md

@@ -22,11 +22,32 @@ layout="place-items:[value]"
 <div layout="grid place-items:center">Centered items</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Place Items Center
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="place-items:center"</code> - Center all items within their grid cells</p>
+<div layout="grid grid-cols:3 place-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">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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="grid grid-cols:3 place-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">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>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/place-self.md

@@ -23,11 +23,32 @@ layout="place-self:[value]"
 <div layout="place-self:center">Centered item</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Place Self Center
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="place-self:center"</code> - Center one item in both directions within its cell</p>
+<div layout="grid grid-cols:3" 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">Default</span>
+  <span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="grid grid-cols:3" 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">Default</span>
+  <span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/position.md

@@ -24,11 +24,54 @@ layout="[position-value]"
 <div layout="fixed">Fixed to viewport</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Relative Position
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="relative"</code> - Element positioned relative to normal flow</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
+```
+
+</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">
+
+### Sticky Position
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="sticky"</code> - Element sticks when scrolling past it</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<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>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/shorthand-alignment.md

@@ -24,11 +24,54 @@ layout="[alignment]"
 <div layout="flex center">Centered content</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Center Shorthand
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="center"</code> - Center items on both axes at once</p>
+<div layout="flex center" space="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">Centered</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex center" space="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">Centered</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">
+
+### Between Shorthand
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="between"</code> - Quick space-between layout</p>
+<div layout="flex between" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Left</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Right</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="flex between" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Left</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Right</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/table-layout.md

@@ -20,11 +20,76 @@ layout="table:[value]"
 <table layout="table:fixed">Fixed width columns</table>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Fixed Table Layout
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="table:fixed"</code> - Columns have fixed equal widths</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<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>
+```
+
+</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">
+
+### Auto Table Layout
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="table:auto"</code> - Columns adjust to content width</p>
+<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>
 </div>
+
+<details>
+<summary>View Code</summary>
+
+```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>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/visibility.md

@@ -20,11 +20,32 @@ layout="[visibility-value]"
 <div layout="invisible">Invisible but present</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Visible vs Invisible
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="invisible"</code> - Invisible elements still take up space</p>
+<div layout="flex" 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">Visible</span>
+  <span layout="invisible" space="p:small" visual="bg:neutral-300 rounded:small">Invisible</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<div layout="flex" 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">Visible</span>
+  <span layout="invisible" space="p:small" visual="bg:neutral-300 rounded:small">Invisible</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
 </div>
 ```
+
+</details>
+
+</div>

package/docs/reference/layout/z-index.md

@@ -23,11 +23,34 @@ layout="z:[value]"
 <div layout="z:top">On top</div>
 ```
 
-## Responsive
+## Preview
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Z-Index Layers
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="z:high"</code> - Control stacking order of positioned elements</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div layout="mob:... tab:... lap:...">
-  Responsive content
+<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>
 ```
+
+</details>
+
+</div>

package/docs/reference/space/gap.md

@@ -26,19 +26,83 @@ space="g:[value]" or space="g-{axis}:[value]"
 <div layout="grid" space="g-x:big g-y:small">Grid gaps</div>
 ```
 
-## Arbitrary Values
+## Preview
 
-Supports custom values using bracket syntax:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Flex Gap
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="g:medium"</code> - Space between flex items</p>
+<div layout="flex" space="g:medium 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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<div space="gap:[custom-value]">Custom</div>
+<div layout="flex" space="g:medium 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>
 ```
 
-## Responsive
+</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">
+
+### Grid Gap
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="g:small"</code> - Space between grid items</p>
+<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>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div space="mob:... tab:... lap:...">
-  Responsive content
+<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>
 ```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="gap:[custom-value]">Custom</div>
+```
+
+## Notes
+
+> [!TIP]
+> **Tailwind Scale Support**
+> 
+> Use `tw-` prefix to access Tailwind numeric scale: `g:tw-4` (1rem), `g:tw-8` (2rem)
+> 
+> [Reference](https://tailwindcss.com/docs/gap)

package/docs/reference/space/height.md

@@ -26,19 +26,73 @@ space="h:[value]"
 <div space="min-h:[400px]">Min height</div>
 ```
 
-## Arbitrary Values
+## Preview
 
-Supports custom values using bracket syntax:
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Height Control
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:[100%]"</code> - Set fixed heights</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
+  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
+  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<div space="height:[custom-value]">Custom</div>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
+  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
+  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
+</div>
 ```
 
-## Responsive
+</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">
+
+### Min Height
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:[80px]"</code> - Set minimum height constraint</p>
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
 
 ```html
-<!-- Responsive example -->
-<div space="mob:... tab:... lap:...">
-  Responsive content
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
 </div>
 ```
+
+</details>
+
+</div>
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="height:[custom-value]">Custom</div>
+```
+
+## Notes
+
+> [!TIP]
+> **Tailwind Scale Support**
+> 
+> Use `tw-` prefix to access Tailwind numeric scale: `h:tw-64` (16rem), `min-h:tw-96` (24rem)
+> 
+> [Reference](https://tailwindcss.com/docs/height)